/* Fix Alignment - Đảm bảo tất cả sections align đúng */

/* Reset tất cả margin/padding không cần thiết */
.tool-content-section *,
.features-section *,
.guidelines-section * {
    box-sizing: border-box;
}

/* Đảm bảo tool-content-section align CHÍNH XÁC với hero-section */
@media (min-width: 769px) {
    /* Hero và Tool Content phải có CÙNG margin và padding */
    .hero-section,
    .tool-content-section {
        margin-left: 280px !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    
    /* Hero content và main-content-wrapper phải có CÙNG max-width và căn giữa */
    .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;
    }
    
    .tool-content-section .main-content-wrapper {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Đảm bảo tool-header và hero-content có cùng text alignment */
    .hero-content {
        text-align: center !important;
    }
    
    .tool-content-section .tool-header {
        text-align: center !important;
    }
    
    /* Đảm bảo brands-grid align giống tab-buttons */
    /* Tab-buttons dùng flex với justify-content: center */
    /* Để brand cards align chính xác, chúng ta cũng dùng 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-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Brand cards trong flex container - giống tab buttons */
    .tool-content-section .brand-card {
        flex: 0 1 auto !important;
        min-width: 250px !important;
        max-width: 300px !important;
        width: auto !important;
    }
    
    /* Loại bỏ TẤT CẢ margin/padding thừa bên trong main-content-wrapper */
    .tool-content-section .main-layout,
    .tool-content-section .brand-header,
    .tool-content-section .rom-section,
    .tool-content-section .rom-grid,
    .tool-content-section .guidelines-section,
    .tool-content-section .guidelines-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-section,
    .tool-content-section {
        margin-left: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}