/* EXACT ALIGNMENT - Tính toán chính xác vị trí và kích thước */

/* 
 * TÍNH TOÁN:
 * 
 * Sidebar: width = 280px, position: fixed, left: 0
 * 
 * Hero Section:
 *   - margin-left: 280px (để tránh sidebar)
 *   - padding-left: 3rem (48px)
 *   - padding-right: 3rem (48px)
 *   - hero-content: max-width: 1200px, margin: 0 auto, padding: 0
 * 
 * Tool Content Section PHẢI GIỐNG HẾT:
 *   - margin-left: 280px
 *   - padding-left: 3rem
 *   - padding-right: 3rem
 *   - main-content-wrapper: max-width: 1200px, margin: 0 auto, padding: 0
 * 
 * Vị trí left edge của hero-content và main-content-wrapper:
 *   left_edge = 280px + 3rem + auto_margin
 *   auto_margin = (viewport_width - 280px - 6rem - 1200px) / 2
 * 
 * Để đảm bảo align chính xác, chúng ta cần:
 * 1. Cùng margin-left trên section
 * 2. Cùng padding-left/right trên section
 * 3. Cùng max-width trên content wrapper
 * 4. Cùng margin: 0 auto trên content wrapper
 * 5. LOẠI BỎ mọi padding/margin khác có thể gây lệch
 */

@media (min-width: 769px) {
    /* ============================================
       HERO SECTION - Reference point
       ============================================ */
    .hero-section {
        margin-left: 280px !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        padding-top: 6rem !important;
        padding-bottom: 5rem !important;
    }
    
    .hero-content {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* QUAN TRỌNG: Đảm bảo không có transform hay positioning nào */
        position: relative !important;
        transform: none !important;
    }
    
    /* ============================================
       TOOL CONTENT SECTION - PHẢI GIỐNG HẾT
       ============================================ */
    .tool-content-section {
        /* CÙNG margin-left và padding như hero-section */
        margin-left: 280px !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
        width: calc(100% - 280px) !important;
        box-sizing: border-box !important;
    }
    
    .tool-content-section .main-content-wrapper {
        /* CÙNG max-width và margin như hero-content */
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* QUAN TRỌNG: Đảm bảo không có transform hay positioning nào */
        position: relative !important;
        transform: none !important;
    }
    
    /* ============================================
       NỘI DUNG BÊN TRONG - LOẠI BỎ TẤT CẢ PADDING/MARGIN
       ============================================ */
    
    /* Loại bỏ mọi padding/margin từ main-layout VÀ main-content-wrapper */
    .tool-content-section .main-layout {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Đảm bảo main-content-wrapper không có margin/padding thừa */
    .tool-content-section .main-layout .main-content-wrapper {
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 1200px !important;
        box-sizing: border-box !important;
    }
    
    /* Tool header - căn giữa, không có padding */
    .tool-content-section .tool-header {
        margin: 0 auto 4rem auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Tool name và description - căn giữa giống hero-title */
    .tool-content-section .tool-name {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .tool-content-section .tool-description {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        max-width: 700px !important;
        padding: 0 !important;
    }
    
    /* Brands grid - flex với justify-content: center */
    .tool-content-section .brands-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 2rem !important;
        margin: 3rem auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Brand cards - cùng sizing như tab buttons */
    .tool-content-section .brand-card {
        flex: 0 1 auto !important;
        min-width: 250px !important;
        max-width: 300px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 2.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* QUAN TRỌNG: Đảm bảo tab-buttons và brands-grid có cùng left edge */
    /* Tính toán: cả hai đều nằm trong container có max-width: 1200px, margin: 0 auto */
    /* Tab buttons: justify-content: center trong flex container width: 100% */
    /* Brands grid: justify-content: center trong flex container width: 100% */
    /* => Left edge của items đầu tiên sẽ giống nhau nếu cả hai có cùng width và justify-content */
    
    /* Kiểm tra: tab-buttons có width: 100%, justify-content: center */
    /* Kiểm tra: brands-grid có width: 100%, justify-content: center */
    /* => Cả hai sẽ center trong cùng một container (1200px), nên sẽ align */
    
    /* NHƯNG: Nếu tab buttons có 3 items, brands-grid có 4 items, width khác nhau */
    /* => Cần đảm bảo cả hai đều center trong cùng container width */
    
    /* Giải pháp: Đảm bảo cả hai containers (hero-content và main-content-wrapper) */
    /* có CÙNG width và CÙNG left edge */
    
    /* Debug: Thêm border để kiểm tra alignment */
    /* Uncomment để debug:
    .hero-content {
        border-left: 2px solid red !important;
        border-right: 2px solid red !important;
    }
    .tool-content-section .main-content-wrapper {
        border-left: 2px solid blue !important;
        border-right: 2px solid blue !important;
    }
    */
    
    /* Brand header */
    .tool-content-section .brand-header {
        margin: 3rem auto 2rem auto !important;
        padding: 0 0 1.5rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* ROM section */
    .tool-content-section .rom-section {
        margin: 4rem auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ROM grid */
    .tool-content-section .rom-grid {
        margin: 2rem auto 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Guidelines section */
    .tool-content-section .guidelines-section {
        margin: 5rem auto !important;
        padding: 4rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .tool-content-section .guidelines-grid {
        margin: 2rem auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Mobile - Reset tất cả */
@media (max-width: 768px) {
    .hero-section,
    .tool-content-section {
        margin-left: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
    }
    
    .hero-content,
    .tool-content-section .main-content-wrapper {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}