/* ==========================================================================
   1. CSS VARIABLES (Biến màu sắc & Font dựa trên thiết kế)
   ========================================================================== */
:root {
    /* Phối màu: Xanh Navy (sự tin cậy) kết hợp Đỏ Logo (sự mạnh mẽ, hành động) */
    --color-primary: #123B8A; /* Xanh Navy - Dùng cho tiêu đề, chữ nổi bật */
    --color-secondary: #e01e26; /* Đỏ Logo - Dùng cho nút bấm CTA, điểm nhấn */
    --color-secondary-hover: #bc181f; /* Đỏ sậm - Dùng khi hover chuột vào nút */
    
    --color-text-main: #333333;
    --color-text-light: #666666;
    --color-bg-light: #F8F9FA;
    --color-white: #FFFFFF;
    --color-border: #E5E5E5;
    
    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Layout */
    --container-width: 1440px;
    --header-height: 80px;
    --transition-speed: 0.3s;
}

/* ==========================================================================
   2. RESET & BASE (Chuẩn hóa trình duyệt)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-main);
    background-color: var(--color-white);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--color-secondary);
}

ul {
    list-style: none;
}

/* Container giới hạn độ rộng nội dung */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 15px; /* Khoảng cách an toàn trên mobile */
    width: 100%;
}

/* ==========================================================================
   3. COMPONENTS (Các thành phần dùng chung)
   ========================================================================== */
/* Nút bấm (Button) */
.btn {
    display: inline-block;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    border: none;
}

.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-secondary-hover); /* Đổi sang đỏ sậm mượt mà */
    color: var(--color-white);
}

/* ==========================================================================
   4. HEADER STYLES (Dành cho file header.php)
   ========================================================================== */
.site-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 100;
}

/* Hiệu ứng Sticky Header (Dính trên cùng khi cuộn) */
.sticky-header {
    position: sticky;
    top: 0;
    /* backdrop-filter: blur(10px);  (Tùy chọn: Thêm hiệu ứng kính mờ nếu nền trong suốt) */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}

/* 4.1. Logo */
.site-branding .main-logo {
    display: block;
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

/* 4.2. Navigation Menu (Desktop) */
.main-navigation {
    display: flex;
    flex-grow: 1;
    justify-content: center; /* Căn giữa menu */
}

.nav-menu {
    display: flex;
    gap: 30px; /* Khoảng cách giữa các mục menu */
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    color: var(--color-text-main);
    font-weight: 500;
    font-size: 15px;
    padding: 10px 0;
    display: block;
    text-transform: uppercase;
}

/* Hiệu ứng Hover gạch chân dưới menu giống thiết kế */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary);
    transition: width var(--transition-speed) ease;
}

.nav-menu a:hover {
    color: var(--color-primary);
}

.nav-menu a:hover::after,
.nav-menu li.current-menu-item > a::after {
    width: 100%; /* Gạch chân full chiều rộng chữ khi active/hover */
}

.nav-menu li.current-menu-item > a {
    color: var(--color-primary);
    font-weight: 600;
}

/* 4.3. Header Actions */
.header-actions {
    display: flex;
    align-items: center;
}

.menu-toggle {
    display: none; /* Ẩn nút hamburger trên Desktop */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: 15px;
}

.hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-primary);
    margin: 5px 0;
    transition: 0.3s;
}

/* ==========================================================================
   5. RESPONSIVE (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 991px) {
    /* Ẩn Menu Desktop trên màn hình nhỏ */
    .main-navigation {
        display: none;
        /* Phần menu mobile (off-canvas) sẽ được viết JS và CSS chi tiết sau */
    }

    /* Hiển thị nút Hamburger */
    .menu-toggle {
        display: block;
    }

    /* Tùy chỉnh Nút CTA trên mobile cho gọn */
    .cta-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ==========================================================================
   6. HERO SECTION (Dạng Full Background)
   ========================================================================== */
.hero-section {
    position: relative;
    padding: 120px 0; /* Tăng padding để banner to và có chiều sâu hơn */
    min-height: 700px;
    background-size: cover;
    background-position: center right; /* Ưu tiên hiển thị góc phải của ảnh */
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* Lớp phủ mờ màu trắng gradient từ trái sang phải */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient: Phủ trắng 95% ở trái, nhạt dần về phải */
    background: linear-gradient(90deg, rgb(208 213 221 / 90%) 0%, rgb(12 35 78 / 18%) 100%);
    z-index: 1;
}

.relative-zindex {
    position: relative;
    z-index: 2; /* Đẩy nội dung đè lên trên lớp overlay */
}

.hero-inner {
    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 600px; /* Giới hạn độ rộng của chữ để không tràn sang phải */
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-primary); 
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-desc {
    font-size: 20px;
    color: var(--color-primary);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .hero-section {
        padding: 60px 0;
        background-position: center;
    }
    .hero-overlay {
        background: rgba(255, 255, 255, 0.85); /* Mobile thì phủ trắng đều mờ mờ cho dễ đọc */
    }
    .hero-content {
        text-align: center;
        max-width: 100%;
    }
    .hero-title {
        font-size: 32px;
    }
    .hero-buttons {
        justify-content: center;
    }
}

/* ==========================================================================
   7. COUNTER STATS SECTION
   ========================================================================== */
.counter-section {
    position: relative;
    padding: 40px 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.counter-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.counter-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

/* Biểu tượng (Icon) */
.counter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f0f4ff; /* Xanh nhạt */
}

.counter-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary); /* Đổi màu icon sang xanh đậm */
}

/* Số liệu & Chữ */
.counter-number-wrapper {
    display: flex;
    align-items: baseline;
}

.counter-number, .counter-plus {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.counter-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-light);
    margin: 0;
}
/* --- CHỐT HẠ LẦN CUỐI: TRỊ ĐÚNG CLASS CỦA KHỐI COUNTER MOBILE --- */
@media (max-width: 767px) {
    .counter-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important; 
    }
    
    .counter-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 15px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 8px !important; /* Xóa định dạng hình oval lỗi cũ nếu có */
    }

    .counter-icon {
        margin-bottom: 10px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .counter-icon img, 
    .counter-icon svg, 
    .counter-icon i {
        font-size: 35px !important; 
        width: 35px !important;
        max-width: 35px !important;
        height: auto !important;
    }

    .counter-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Đánh thẳng vào class chứa số liệu */
    .counter-number-wrapper,
    .counter-number-wrapper span,
    .counter-number-wrapper h1,
    .counter-number-wrapper h2,
    .counter-number-wrapper h3,
    .counter-number-wrapper h4 {
        font-size: 36px !important;
        font-weight: 900 !important;
        color: var(--color-primary) !important;
        line-height: 1.2 !important;
        margin: 0 0 5px 0 !important;
        display: block !important;
    }

    /* Đánh thẳng vào class chứa chữ */
    p.counter-label,
    .counter-label {
        font-size: 18px !important;
        line-height: 1.4 !important;
        white-space: normal !important; /* Mở khóa cho chữ rớt dòng */
        word-wrap: break-word !important;
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }
}
/* ==========================================================================
   8. FEATURES SECTION (Năng Lực Kim Phúc)
   ========================================================================== */
.features-section {
    padding: 80px 0;
    background-color: var(--color-bg-light); /* Mã #F8F9FA tạo sự tách biệt */
}

.features-inner {
    display: flex;
    gap: 60px;
    align-items: center;
}

/* Tinh chỉnh lại flex-box để ảnh cao bằng khối chữ, layout thoáng hơn */
.features-info {
    flex: 1;
    display: flex;
    gap: 30px; /* Giảm gap xuống một chút để nhường không gian cho chữ */
    align-items: stretch; /* (Quan trọng) Ép cột ảnh và cột chữ cao bằng nhau */
}

.features-image {
    flex: 0 0 40%; /* Giảm ảnh xuống 40% để chữ chiếm 60%, chữ sẽ không bị rớt dòng */
    min-height: 350px; /* Set độ cao tối thiểu để ảnh luôn đẹp */
}

.features-image img {
    width: 100%;
    height: 100%; /* (Quan trọng) Ép ảnh phủ kín chiều cao của cột */
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.features-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Đẩy cụm chữ ra giữa theo chiều dọc */
}

.section-title {
    font-size: 16px;
    color: var(--color-secondary); /* Đỏ logo */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 32px;
    color: var(--color-primary); /* Xanh Navy */
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
}

.section-desc {
    color: var(--color-text-light);
    margin-bottom: 30px;
}

/* --- Cột Phải: Grid 4 Thẻ --- */
.features-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tạo 2 cột đều nhau */
    gap: 24px; /* Khoảng cách giữa các box */
}

.feature-box {
    background-color: var(--color-white);
    padding: 20px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease;
    border: 2px solid transparent;
}

.feature-box:hover {
    transform: translateY(-8px);
    border-color: var(--color-secondary); /* Viền đỏ khi rê chuột */
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-color: #f0f4ff; /* Xanh nền nhạt */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary); /* Đổi màu icon thành xanh đậm */
}

.feature-icon svg {
    width: 32px;
    height: 32px;
}

.feature-box h4 {
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 12px;
    font-weight: 700;
}

.feature-box p {
    font-size: 14px;
    color: var(--color-text-light);
    margin: 0;
}

/* --- Responsive Layout --- */
@media (max-width: 1199px) {
    /* Chuyển thành 1 cột xếp dọc trên màn hình nhỏ hoặc máy tính bảng */
    .features-inner {
        flex-direction: column;
    }
    .features-info, .features-grid {
        width: 100%;
    }
}

@media (max-width: 767px) {
    /* Màn hình điện thoại nhỏ */
    .features-info {
        flex-direction: column;
        text-align: center;
    }
    .features-image {
        width: 100%;
    }
    .features-grid {
        grid-template-columns: 1fr; /* 4 box thành 1 cột dọc trên Mobile */
    }
}

/* ==========================================================================
   9. PARTNERS LOGO SECTION
   ========================================================================== */
.partners-section {
    padding: 40px 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.partner-swiper {
    padding: 10px 0;
    overflow: hidden; /* Cắt phần logo bị tràn ra ngoài khung */
}

.partner-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
    transition: opacity var(--transition-speed) ease;
}

.partner-swiper img {
    max-height: 45px; /* Giới hạn chiều cao để các logo đều nhau */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%); /* Làm đen trắng toàn bộ logo */
    transition: filter var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Hiệu ứng hiển thị màu gốc và to lên nhẹ khi hover */
.partner-swiper .swiper-slide:hover {
    opacity: 1;
}

.partner-swiper .swiper-slide:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ==========================================================================
   10. VEHICLE & CATEGORY FILTER SECTION (Khối Gộp)
   ========================================================================== */
.vehicle-category-section {
    padding: 60px 0;
    background-color: var(--color-white);
}

/* --- PHẦN 1: HEADER --- */
.vc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 15px;
}

.vc-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.vc-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.vc-tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 14px;
    transition: all var(--transition-speed) ease;
}

.vc-tab-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    transition: color var(--transition-speed) ease;
}

.vc-tab-item:hover, 
.vc-tab-item.active {
    background-color: var(--color-primary); /* Đổi màu xanh đậm */
    color: var(--color-white);
    border-color: var(--color-primary);
}

.vc-tab-item:hover svg, 
.vc-tab-item.active svg {
    color: var(--color-white);
}

.vc-view-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    white-space: nowrap;
}

.vc-view-all:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* --- PHẦN 2: LƯỚI 9 CỘT DANH MỤC --- */
.vc-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr); /* Ép hiển thị 9 cột bằng nhau */
    gap: 10px; /* Khoảng cách siêu nhỏ để nhét vừa 9 ô */
}

.vc-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 5px;
    background-color: var(--color-white);
    border: 1px solid #ebebeb;
    border-radius: 8px;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
}

.vc-cat-item:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

.vc-cat-img {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vc-cat-img img {
    max-width: 80%;
    height: auto;
    object-fit: contain;
}

.vc-cat-name {
    font-size: 12px; /* Chữ nhỏ lại để vừa 1 dòng */
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 3px 0;
    text-transform: uppercase;
}

.vc-cat-en {
    font-size: 11px;
    color: var(--color-text-light);
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1399px) {
    .vc-header { flex-wrap: wrap; }
    .vc-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 10px; }
}
@media (max-width: 1199px) {
    .vc-grid { grid-template-columns: repeat(5, 1fr); gap: 15px; } /* Màn nhỏ hơn chuyển xuống 5 cột */
}
@media (max-width: 767px) {
    .vc-grid { grid-template-columns: repeat(3, 1fr); } /* Mobile 3 cột */
}
/* ==========================================================================
   TỐI ƯU KHỐI TÌM THEO DÒNG XE & DANH MỤC (MOBILE)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* --- 1. XỬ LÝ KHỐI HEADER VÀ TABS VUỐT NGANG --- */
    .vc-header {
        flex-direction: column !important; /* Xếp dọc: Tiêu đề -> Tabs -> Nút "Xem tất cả" */
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .vc-tabs {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important; /* Bắt buộc nằm ngang, cấm rớt dòng */
        overflow-x: auto !important; /* KÍCH HOẠT VUỐT NGANG */
        -webkit-overflow-scrolling: touch !important; /* Vuốt siêu mượt trên iPhone/iOS */
        padding-bottom: 8px !important; /* Chừa chỗ cho thanh cuộn */
        gap: 10px !important;
    }

    /* Tùy chỉnh thanh cuộn ngang cho tinh tế */
    .vc-tabs::-webkit-scrollbar {
        height: 3px; /* Thanh cuộn mảnh, thanh lịch */
    }
    .vc-tabs::-webkit-scrollbar-thumb {
        background: var(--color-primary); 
        border-radius: 4px;
    }

    .vc-tab-item {
        flex-shrink: 0 !important; /* Cấm bóp méo nút khi thiếu chỗ */
        white-space: nowrap !important; /* Cấm chữ trong nút rớt dòng */
        padding: 8px 16px !important;
        font-size: 13px !important;
    }


    /* --- 2. XỬ LÝ LƯỚI DANH MỤC THÀNH 2 CỘT --- */
    .vc-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Ép cứng 2 cột */
        gap: 10px !important; /* Khoảng cách giữa các ô */
    }

    .vc-grid > div,
    .vc-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 15px 5px !important;
    }

    /* Thu nhỏ ảnh phụ tùng */
    .vc-grid img {
        max-width: 50px !important;
        height: auto !important;
        margin-bottom: 10px !important;
    }

    /* Chỉnh chữ tên danh mục */
    .vc-grid h3,
    .vc-card-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
    }

    /* Ẩn chữ "Phụ tùng" mờ mờ đi để thẻ không bị dài thòng lọng */
    .vc-grid p,
    .vc-card-desc {
        display: none !important;
    }
}

/* ==========================================================================
   12. FEATURED PRODUCTS SECTION
   ========================================================================== */
.featured-products-section {
    padding: 60px 0;
    background-color: var(--color-bg-light); /* Màu xám siêu nhạt cho nổi bật thẻ trắng */
}

/* Header dàn ngang */
.section-inline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.section-inline-header .section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
}

.view-all-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.view-all-link:hover {
    color: var(--color-secondary);
}

/* Lưới 4 sản phẩm */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Thẻ Sản Phẩm */
.product-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transform: translateY(-5px);
}

/* Khu vực ảnh */
.product-img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* Cắt ảnh vuông */
    overflow: hidden;
    background-color: #fff;
    padding: 20px;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Chứa trọn ảnh phụ tùng, không bị cắt xén */
    transition: transform 0.5s ease;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.08);
}

/* Thông tin sản phẩm */
.product-info {
    padding: 0 20px 25px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.product-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.product-title a:hover {
    color: var(--color-secondary);
}

/* Meta: Mã & Dòng xe */
.product-meta {
    margin-bottom: 20px;
    font-size: 13px;
    flex: 1; /* Đẩy nút bấm xuống dưới cùng */
}

.meta-row {
    margin-bottom: 5px;
}

.meta-label {
    color: var(--color-text-light);
}

.meta-value {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Nút Xem chi tiết */
.product-action {
    text-align: center;
}

.btn-detail {
    display: inline-block;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    background-color: transparent;
    border: 1px solid rgba(18, 59, 138, 0.3); /* Viền màu xanh logo mờ */
    border-radius: 4px;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
}

.btn-detail:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .product-grid { grid-template-columns: 1fr; }
    .section-inline-header { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ==========================================================================
   TỐI ƯU KHỐI SẢN PHẨM NỔI BẬT (DẠNG SLIDE VUỐT NGANG TRÊN MOBILE)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Ép Grid thành thanh cuộn ngang Flexbox */
    .product-grid {
        display: flex !important;
        flex-wrap: nowrap !important; /* Bắt buộc các thẻ nằm trên 1 hàng ngang */
        overflow-x: auto !important; /* KÍCH HOẠT VUỐT NGANG */
        -webkit-overflow-scrolling: touch !important; /* Lướt mượt trên iPhone */
        gap: 15px !important;
        padding-bottom: 20px !important; /* Chừa khoảng trống cho thanh cuộn */
        scroll-snap-type: x mandatory !important; /* Hiệu ứng hít nam châm khi vuốt */
    }

    /* Tinh chỉnh thanh cuộn cho thanh lịch */
    .product-grid::-webkit-scrollbar {
        height: 4px;
    }
    .product-grid::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }

    /* 2. Cố định kích thước thẻ sản phẩm để vuốt */
    .product-card {
        flex: 0 0 70% !important; /* Mỗi thẻ chiếm 70% màn hình, dư 30% để hiện thẻ kế tiếp */
        max-width: 260px !important;
        scroll-snap-align: start !important; /* Vuốt tới đâu hít mép thẻ tới đó */
        
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--color-border) !important;
    }

    /* 3. Canh chỉnh hình ảnh bên trong thẻ */
    .product-img-wrap,
    .product-card .img-wrap {
        height: 160px !important; /* Khung ảnh to và vuông vắn hơn */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
    }
    
    .product-card img {
        max-height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important; /* Không làm méo ảnh phụ tùng */
    }

    /* 4. Canh chỉnh Chữ và Nút bấm */
    .product-title,
    .product-card h3,
    .product-card h4 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        margin-bottom: 10px !important;
        
        /* Cắt chữ nếu dài quá 2 dòng */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-meta {
        margin-bottom: 15px !important;
        flex-grow: 1 !important; /* Đẩy cụm nút xuống sát đáy */
    }
    
    .product-meta .meta-row {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    .btn-detail {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 10px !important;
    }
}

/* ==========================================================================
   13. HOME BLOGS SECTION
   ========================================================================== */
.home-blogs-section {
    padding: 60px 0 80px 0; /* Padding dưới to hơn chút để tạo khoảng cách với Footer */
    background-color: var(--color-white);
}

/* Lưới 3 bài viết */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Thẻ Blog */
.blog-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    border-color: transparent;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/* Ảnh Blog */
.blog-img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2; /* Tỷ lệ vàng cho ảnh thumbnail blog */
    overflow: hidden;
}

.blog-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-wrap img {
    transform: scale(1.08);
}

/* Khu vực thông tin */
.blog-info {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Nhãn chuyên mục (Màu Cam/Đỏ) */
.blog-cat-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-secondary);
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

/* Tiêu đề bài viết */
.blog-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 20px 0;
    flex: 1; /* Đẩy phần footer ngày tháng xuống đáy */
}

.blog-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.blog-title a:hover {
    color: var(--color-secondary);
}

/* Footer thẻ: Ngày tháng & Mũi tên */
.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.blog-date {
    font-size: 13px;
    color: var(--color-text-light);
    font-weight: 500;
}

.blog-read-more {
    font-size: 18px;
    color: var(--color-primary);
    text-decoration: none;
    transition: transform var(--transition-speed) ease, color var(--transition-speed) ease;
}

.blog-card:hover .blog-read-more {
    color: var(--color-secondary);
    transform: translateX(5px); /* Mũi tên trượt nhẹ sang phải khi hover */
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   TỐI ƯU KHỐI BLOG (DẠNG SLIDE VUỐT NGANG TRÊN MOBILE)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Ép lưới thành thanh cuộn ngang */
    .blog-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Vuốt siêu mượt trên iPhone */
        gap: 15px !important;
        padding-bottom: 20px !important; /* Chừa chỗ cho thanh cuộn */
        scroll-snap-type: x mandatory !important; /* Hiệu ứng hít nam châm */
    }

    /* Tinh chỉnh thanh cuộn ngang */
    .blog-grid::-webkit-scrollbar { height: 4px; }
    .blog-grid::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }

    /* 2. Cố định kích thước thẻ bài viết */
    .blog-card {
        flex: 0 0 75% !important; /* Chiếm 75% chiều rộng, nhử thẻ kế tiếp */
        max-width: 280px !important;
        scroll-snap-align: start !important; /* Hít mép trái khi vuốt */
        
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; /* Tự động co giãn theo nội dung... */
    }

    /* 3. Tinh chỉnh ảnh Thumbnail */
    .blog-img-wrap {
        height: 180px !important; /* Cố định chiều cao ảnh */
        flex-shrink: 0 !important;
        display: block !important;
    }

    .blog-img-wrap img,
    .blog-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Ảnh phủ kín, không bị méo */
    }

    /* 4. Tinh chỉnh khu vực nội dung chữ */
    .blog-info {
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; /* Đẩy footer thẻ xuống đáy */
        border: 1px solid var(--color-border) !important;
        border-top: none !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Nhãn danh mục (VD: Tư vấn kỹ thuật) */
    .blog-cat-label {
        font-size: 11px !important;
        margin-bottom: 8px !important;
        display: inline-block !important;
    }

    /* Tiêu đề bài viết */
    .blog-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
        font-weight: 800 !important;
        margin-bottom: 15px !important;
        
        /* Cắt chữ nếu dài quá 2 dòng */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 5. Khu vực Ngày tháng & Mũi tên (Dưới cùng) */
    .blog-card-footer {
        margin-top: auto !important; /* Luôn ép dính xuống đáy thẻ */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .blog-date {
        font-size: 12px !important;
        color: var(--color-text-light) !important;
    }
    
    .blog-read-more {
        font-size: 18px !important; /* Cho cái mũi tên to ra chút dễ bấm */
        font-weight: bold !important;
    }
}

/* ==========================================================================
   14. SITE FOOTER
   ========================================================================== */
.site-footer {
    background-color: var(--color-primary); /* Nền xanh đậm */
    color: #ffffff;
    padding: 60px 0 40px;
    font-size: 13px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1.2fr; /* Chia tỷ lệ 4 cột giống bản mẫu */
    gap: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* Các thẻ Heading */
.footer-heading {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    letter-spacing: 0.5px;
}

/* Cột 1: Logo & Slogan */
.footer-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 15px;
}
.footer-logo-text {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 15px 0;
}
.footer-slogan {
    color: #b0c4de; /* Chữ xám nhạt */
    margin-bottom: 25px;
}
.footer-copyright {
    color: #8fa6c9;
    font-size: 12px;
    margin-top: auto; /* Đẩy xuống đáy */
    padding-top: 20px;
}

/* Mạng xã hội */
.footer-socials {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #ffffff;
    transition: all var(--transition-speed) ease;
}
.footer-socials a:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: translateY(-3px);
}

/* Cột 2: Danh sách liên hệ */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-list li {
    color: #b0c4de;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Cột 3 & 4: Menu Links */
.footer-menu, .policy-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li {
    margin-bottom: 12px;
}
.footer-menu a {
    color: #b0c4de;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-menu a:hover {
    color: #ffffff;
    padding-left: 5px;
}

/* Menu Chính sách nằm ngang và có dấu gạch đứng phân cách */
.footer-policy {
    margin-top: auto;
    padding-top: 20px;
}
.policy-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.policy-menu li {
    position: relative;
}
.policy-menu li:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -10px;
    color: #8fa6c9;
}
.policy-menu a {
    color: #8fa6c9;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s;
}
.policy-menu a:hover {
    color: #ffffff;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 30px; }
}
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-copyright, .footer-policy { margin-top: 10px; padding-top: 10px; }
}

/* ==========================================================================
   15. ARCHIVE PRODUCTS (Trang Danh Mục Sản Phẩm)
   ========================================================================== */

/* 15.1. Hero Banner */
.archive-hero {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background-color: var(--color-primary); /* Màu nền dự phòng nếu ảnh load chậm */
}

/* Đặt ảnh nền phủ kín tuyệt đối */
.archive-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.archive-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Phủ kín khung không bị méo ảnh */
    object-position: center;
}

/* Lớp phủ màu mờ (overlay) giúp chữ đọc rõ hơn trên nền ảnh sáng */
.archive-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(12, 35, 78, 0.9) 0%, rgba(12, 35, 78, 0.4) 100%);
    z-index: 2;
}

/* Nội dung chữ đè lên trên */
.archive-hero .container {
    position: relative;
    z-index: 3;
}

.archive-hero-content {
    max-width: 650px;
}

/* Đổi màu chữ breadcrumbs và tiêu đề sang trắng vì nền tối */
.archive-hero .breadcrumbs {
    color: rgba(255, 255, 255, 0.8);
}
.archive-hero .breadcrumbs a {
    color: #ffffff;
}
.archive-hero .breadcrumbs .current {
    color: rgba(255, 255, 255, 0.6);
}

.archive-title {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff !important;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.archive-desc {
    font-size: 16px;
    color: #e0e6ed !important;
    margin: 0;
}

/* 15.2. Thanh lọc dòng xe (Tái sử dụng CSS từ trang chủ, chỉnh lại chút spacing) */
.archive-filter {
    padding: 30px 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}

/* 15.3. Lưới Danh Mục (Card ngang) */
.archive-categories {
    padding: 60px 0;
    background-color: var(--color-bg-light);
}

.arc-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.arc-cat-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    transition: all var(--transition-speed) ease;
}

.arc-cat-card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

.arc-cat-img {
    flex: 0 0 120px; /* Cố định chiều rộng ảnh */
    margin-right: 20px;
}

.arc-cat-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.arc-cat-info {
    flex: 1;
}

.arc-cat-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.arc-cat-name a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
}
.arc-cat-name a:hover {
    color: var(--color-secondary);
}

.arc-cat-desc {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0 0 12px 0;
    /* Cắt chữ nếu dài quá 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arc-cat-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}
.arc-cat-link:hover {
    color: var(--color-secondary);
}

/* 15.4. Khối CTA (Hỗ trợ kỹ thuật) */
.archive-cta {
    padding: 0 0 60px 0;
    background-color: var(--color-bg-light);
}

.cta-wrapper {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.cta-image {
    width: 45%;
}
.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-content {
    width: 55%;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-content h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 15px 0;
}

.cta-content p {
    font-size: 15px;
    color: var(--color-text-main);
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.cta-buttons {
    display: flex;
    gap: 15px;
}

.cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-buttons .btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
.cta-buttons .btn-primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.cta-buttons .btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.cta-buttons .btn-outline:hover {
    background-color: #f0f4ff;
}

/* --- Responsive --- */
@media (max-width: 1199px) {
    .arc-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-content { padding: 40px; }
}
@media (max-width: 991px) {
    .archive-hero-image { display: none; /* Ẩn ảnh xe tải trên tablet/mobile cho gọn */ }
    .archive-hero-content { max-width: 100%; text-align: center; }
    .cta-wrapper { flex-direction: column; }
    .cta-image, .cta-content { width: 100%; }
    .cta-image { height: 250px; }
}
@media (max-width: 767px) {
    .arc-cat-grid { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; }
    .cta-buttons .btn { justify-content: center; }
}

/* ==========================================================================
   17. TAXONOMY PAGE (Trang lưới SP trong Danh mục)
   ========================================================================== */
.archive-product-page {
    background-color: var(--color-bg-light);
    min-height: 50vh; /* Đảm bảo footer không bị đẩy lên cao nếu ít SP */
}

.tax-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.tax-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.tax-desc {
    font-size: 15px;
    color: var(--color-text-main);
    margin: 0;
}

/* Style Phân trang (Pagination) */
.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.pagination-wrapper .page-numbers:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.pagination-wrapper .page-numbers.current {
    background: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}
/* ==========================================================================
   THANH TÌM KIẾM TRONG TRANG DANH MỤC SẢN PHẨM
   ========================================================================== */
/* ==========================================================================
   DÀN HÀNG NGANG TIÊU ĐỀ VÀ Ô TÌM KIẾM
   ========================================================================== */
.archive-header-row {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: space-between; /* Đẩy tiêu đề sang trái, search sang phải */
    margin-bottom: 30px; /* Khoảng cách với danh sách sản phẩm bên dưới */
    border-bottom: 1px solid var(--color-border); /* Thêm cái gạch ngang cho xịn xò giống viền bên dưới của bro */
    padding-bottom: 15px;
}

/* Ép margin tiêu đề bằng 0 để không bị lệch khung */
.archive-header-row h1,
.archive-header-row .archive-title {
    margin: 0 !important;
    font-size: 24px;
}

/* Thu gọn chiều ngang của ô search lại */
.archive-header-row .category-search-bar {
    margin: 0 !important;
    width: 380px; /* Độ rộng vừa phải cho ô search */
    max-width: 100%;
}

/* ==========================================================================
   TỐI ƯU HIỂN THỊ KHI XUỐNG MOBILE (MÀN HÌNH NHỎ)
   ========================================================================== */
@media (max-width: 767px) {
    .archive-header-row {
        flex-direction: column; /* Ép rớt xuống dòng lại trên điện thoại */
        align-items: flex-start;
        gap: 15px;
    }
    
    .archive-header-row .category-search-bar {
        width: 100%; /* Bung full 100% màn hình điện thoại */
    }
}
.cat-search-form {
    display: flex;
    position: relative;
    border: 2px solid var(--color-border); /* Dùng biến màu viền của bro */
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.cat-search-form:focus-within {
    border-color: var(--color-primary); /* Đổi màu viền khi click vào */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cat-search-form .search-field {
    flex-grow: 1;
    border: none;
    padding: 12px 15px 12px 20px;
    font-size: 15px;
    outline: none;
    background: transparent;
    color: var(--color-text-main);
}

.cat-search-form .search-field::placeholder {
    color: #999;
    font-style: italic;
}

.cat-search-form .search-submit {
    background-color: var(--color-primary); /* Nút bấm màu xanh thương hiệu */
    color: #ffffff;
    border: none;
    padding: 0 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.cat-search-form .search-submit:hover {
    background-color: #0a1b3d; /* Màu xanh đậm hơn khi di chuột */
}

/* Tinh chỉnh cho Mobile */
@media (max-width: 767px) {
    .category-search-bar {
        margin: 15px 0 25px 0;
    }
    .cat-search-form .search-field {
        font-size: 14px;
        padding: 10px 10px 10px 15px;
    }
    .cat-search-form .search-submit {
        padding: 0 15px;
    }
}

/* ==========================================================================
   ÉP LẠI LƯỚI 2 CỘT & PHÂN TRANG CHO TRANG DANH MỤC (ARCHIVE)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Tắt tính năng vuốt ngang, ép lại thành Grid 2 cột */
    .archive .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        overflow-x: visible !important; /* Tắt vuốt ngang */
        flex-wrap: wrap !important;
        padding-bottom: 0 !important;
    }

    /* 2. Gỡ bỏ kích thước 70% của trang chủ, ép thẻ lấp đầy ô grid */
    .archive .product-card {
        flex: unset !important;
        max-width: 100% !important;
        height: 100% !important; /* Ép thẻ cao bằng nhau tăm tắp */
        scroll-snap-align: unset !important;
    }

    /* 3. Tinh chỉnh khung Phân trang (Pagination) trên Mobile cho dễ bấm */
    .archive .pagination,
    .archive .nav-links {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 30px !important;
        width: 100% !important;
    }
    
    .archive .page-numbers {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 35px !important;
        height: 35px !important;
        padding: 5px !important;
        font-size: 14px !important;
        border-radius: 4px !important;
        background-color: #f5f5f5 !important;
        color: var(--color-text-main) !important;
        border: 1px solid var(--color-border) !important;
    }

    /* Nút trang hiện tại (Current Page) */
    .archive .page-numbers.current {
        background-color: var(--color-primary) !important;
        color: #ffffff !important;
        border-color: var(--color-primary) !important;
        font-weight: bold !important;
    }
}

/* ==========================================================================
   TRANG CHI TIẾT SẢN PHẨM (SINGLE PRODUCT) - TOP SECTION
   ========================================================================== */
.kp-breadcrumb {
    padding: 20px 0;
    font-size: 14px;
    color: #666;
}
.kp-breadcrumb a { color: #666; text-decoration: none; }
.kp-breadcrumb span { color: var(--color-text-main); font-weight: 500; }

.kp-single-top {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

/* --- CỘT TRÁI: GALLERY --- */
.kp-single-gallery {
    width: 45%;
}
.main-image {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.main-image img { max-width: 100%; height: auto; }

.thumbnail-list {
    display: flex;
    gap: 10px;
}
.thumb-item {
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    width: 25%; /* 4 ảnh chia đều */
}
.thumb-item.active, .thumb-item:hover {
    border-color: var(--color-primary);
}
.thumb-item img { max-width: 100%; height: auto; display: block; }

/* --- CỘT PHẢI: SUMMARY --- */
.kp-single-summary {
    width: 55%;
}
.product-category {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.product-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

/* Mã SP & Trạng thái */
.product-meta-top {
    display: flex;
    gap: 30px;
    font-size: 15px;
    margin-bottom: 25px;
}
.product-meta-top strong { color: var(--color-primary); }
.stock-status { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.stock-status.in-stock { color: #22c55e; /* Màu xanh lá */ }

/* Tương thích dòng xe */
.product-compatibility p { margin: 0 0 10px 0; font-weight: 600; font-size: 15px; }
.tags-list { display: flex; gap: 10px; margin-bottom: 25px; }
.tag-item {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

/* Bảng thông số */
.product-attr-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}
.product-attr-table td {
    padding: 12px 15px;
    border: 1px solid #eaeaea;
    font-size: 15px;
}
.product-attr-table td:first-child { width: 30%; color: #666; }
.product-attr-table td:last-child { width: 70%; color: #333; }

/* Khu vực CTA */
.product-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.product-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    flex: 1; /* Ép 2 nút dài bằng nhau */
    text-decoration: none;
    transition: all 0.3s;
}
.btn-quote {
    background-color: #f97316; /* Cam y hệt thiết kế */
    color: #fff;
    border: none;
}
.btn-quote:hover { background-color: #ea580c; }

.btn-zalo {
    background-color: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-zalo:hover { background-color: #f0f4f8; }

.product-hotline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 16px;
}
.product-hotline strong { font-size: 18px; }

/* ==========================================================================
   TỐI ƯU MOBILE: TRANG CHI TIẾT SẢN PHẨM (TOP SECTION)
   ========================================================================== */
@media (max-width: 767px) {
    /* Ép khung dọc thay vì nằm ngang */
    .kp-single-top {
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 30px !important;
    }

    /* 1. CỘT ẢNH: Bung full 100% chiều ngang */
    .kp-single-gallery {
        width: 100% !important;
    }
    
    .thumbnail-list {
        gap: 8px !important; /* Thu nhỏ khoảng cách các ảnh con */
    }
    
    .thumb-item {
        padding: 3px !important; /* Thu nhỏ viền ảnh con */
    }

    /* 2. CỘT THÔNG TIN: Bung full 100% */
    .kp-single-summary {
        width: 100% !important;
    }

    .product-title {
        font-size: 24px !important; /* Chữ nhỏ lại trên mobile */
        margin-bottom: 10px !important;
    }

    .product-meta-top {
        flex-direction: column !important; /* Rớt dòng Mã SP và Tình trạng */
        gap: 10px !important;
        margin-bottom: 20px !important;
        font-size: 14px !important;
    }

    /* Bảng thông số: Tinh chỉnh padding cho đỡ chật */
    .product-attr-table td {
        padding: 10px !important;
        font-size: 13px !important;
    }
    .product-attr-table td:first-child {
        width: 40% !important; /* Nới rộng cột tiêu đề một chút */
    }

    /* 3. KHU VỰC NÚT BẤM (CTA) */
    .product-actions {
        flex-direction: column !important; /* Nút xếp chồng lên nhau cho dễ bấm */
        gap: 10px !important;
    }
    
    .product-actions .btn {
        width: 100% !important; /* Nút bung full chiều ngang */
        padding: 14px 15px !important; /* Nút to ra để ngón tay dễ chạm */
    }

    .product-hotline {
        justify-content: center !important; /* Căn giữa hotline trên mobile */
        margin-top: 15px !important;
        font-size: 15px !important;
    }
}

/* ==========================================================================
   HIỆU ỨNG GALLERY ẢNH SẢN PHẨM (ZOOM & FADE)
   ========================================================================== */
/* Khung chứa ảnh chính */
.main-image {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 0; /* Bỏ padding để zoom không bị viền trắng */
    margin-bottom: 15px;
    text-align: center;
    overflow: hidden; /* Giấu phần ảnh bị phình ra khi zoom */
    position: relative;
    cursor: zoom-in; /* Đổi trỏ chuột thành hình kính lúp */
    background: #fff;
}

/* Ảnh chính */
#kp-main-product-img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out; /* Hiệu ứng mờ dần khi chuyển ảnh */
    transform-origin: center center; /* Điểm bắt đầu zoom */
    object-fit: contain;
}

/* Hiệu ứng viền chạy cho ảnh Thumbnail đang active */
.thumb-item {
    transition: all 0.3s ease;
    opacity: 0.6; /* Mặc định ảnh nhỏ hơi mờ */
}
.thumb-item:hover, 
.thumb-item.active {
    opacity: 1; /* Sáng bừng lên khi hover hoặc active */
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==========================================================================
   BANNER CAM KẾT (TRUST BADGES)
   ========================================================================== */
.kp-trust-badges {
    display: flex;
    justify-content: space-between;
    background: #f8fafc; /* Màu nền xám xanh nhạt */
    padding: 30px 40px;
    border-radius: 8px;
    margin-bottom: 50px;
    border: 1px solid #eaeaea;
}
.badge-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}
.badge-item:not(:last-child) {
    border-right: 1px solid #ddd;
    margin-right: 20px;
}
.badge-icon {
    background: #fff;
    padding: 12px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.badge-text h4 {
    margin: 0 0 5px 0;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
}
.badge-text p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}

/* ==========================================================================
   TABS NỘI DUNG SẢN PHẨM
   ========================================================================== */
.kp-product-tabs {
    background: #fff;
    margin-bottom: 50px;
}
.tab-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #eaeaea;
}
.tab-btn {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active {
    color: var(--color-primary);
}
/* Hiệu ứng gạch chân khi active */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
}
.tab-content-wrapper {
    padding: 30px 0;
}
.tab-pane {
    display: none; /* Ẩn hết các tab đi */
    animation: fadeIn 0.4s ease;
}
.tab-pane.active {
    display: block; /* Chỉ hiện tab đang active */
}
/* Style cho nội dung bài viết sinh ra từ Editor */
.entry-content p { margin-bottom: 15px; line-height: 1.6; }
.entry-content ul { padding-left: 20px; margin-bottom: 15px; }
.entry-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 15px 0; }

/* Mobile CSS */
@media (max-width: 767px) {
    .kp-trust-badges { flex-direction: column; gap: 20px; padding: 20px; }
    .badge-item:not(:last-child) { border-right: none; margin-right: 0; border-bottom: 1px solid #ddd; padding-bottom: 15px; }
    .tab-nav { flex-wrap: wrap; }
    .tab-btn { flex: 1; text-align: center; padding: 12px 10px; font-size: 14px; }
}

/* ==========================================================================
   LAYOUT TAB MÔ TẢ (CHIA 2 CỘT TEXT - ẢNH)
   ========================================================================== */
.kp-desc-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Căn đều lên mép trên */
}

/* Cột Text */
.kp-desc-text {
    flex: 1; /* Tự động co giãn chiếm phần không gian còn lại */
}
/* Tuỳ chỉnh lại dấu chấm đầu dòng (bullet) cho giống thiết kế */
.kp-desc-text ul {
    list-style-type: disc;
    padding-left: 20px;
    color: #555;
}
.kp-desc-text ul li {
    margin-bottom: 10px;
}

/* Cột Hình ảnh có viền */
.kp-desc-image {
    width: 60%; /* Chiếm 40% chiều ngang */
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background: #fff;
}
.kp-desc-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Tối ưu cho màn hình Mobile */
@media (max-width: 767px) {
    .kp-desc-layout {
        flex-direction: column; /* Rớt ảnh xuống dưới chữ */
        gap: 20px;
    }
    .kp-desc-image {
        width: 100%; /* Bung full màn hình */
    }
}

/* ==========================================================================
   SẢN PHẨM LIÊN QUAN CHUẨN
   ========================================================================== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.section-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0b3a82; /* Xanh đậm */
    text-transform: uppercase;
}
.view-all-link {
    font-size: 14px;
    font-weight: 600;
    color: #0b3a82;
    text-decoration: none;
}
.view-all-link:hover { text-decoration: underline; }

/* Lưới Sản phẩm */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
.product-card {
    border: 1px solid #eaeaea;
    border-radius: 4px;
    background: #fff;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Đẩy nút xuống dưới cùng */
    transition: all 0.3s ease;
}
.product-card:hover {
    border-color: #0b3a82;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.card-image {
    margin-bottom: 20px;
    text-align: center;
}
.card-image img {
    width: 100%;
    height: 160px;
    object-fit: contain;
}
.card-info { text-align: left; }
.card-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.card-title a { color: #0b3a82; text-decoration: none; }
.card-meta {
    font-size: 12px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}
.card-meta .meta-label { color: #888; display: inline-block; width: 60px; }
.card-action { text-align: center; margin-top: auto; }
.btn-xem-chi-tiet {
    display: inline-block;
    padding: 8px 25px;
    font-size: 13px;
    font-weight: 600;
    color: #0b3a82;
    border: 1px solid #0b3a82;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
}
.btn-xem-chi-tiet:hover {
    background: #0b3a82;
    color: #fff;
}

/* ==========================================================================
   BANNER HỖ TRỢ KỸ THUẬT (CTA)
   ========================================================================== */
.kp-support-cta-wrap {
    margin-bottom: 60px;
}
.kp-support-cta {
    background-color: #0b3a82; /* Nền xanh Kim Phúc */
    border-radius: 4px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cta-left {
    display: flex;
    align-items: center;
    gap: 25px;
}
.cta-icon {
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-text h3 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}
.cta-text p {
    margin: 0;
    font-size: 15px;
    color: rgba(255,255,255,0.8);
}
.cta-right { flex-shrink: 0; }
.btn-cta-white {
    display: inline-block;
    background: #fff;
    color: #0b3a82;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s;
}
.btn-cta-white:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .kp-support-cta { flex-direction: column; text-align: center; gap: 20px; padding: 25px 15px; }
    .cta-left { flex-direction: column; gap: 15px; }
}

/* ==========================================================================
   CSS CHO TRANG DANH SÁCH DÒNG XE (PAGE DÒNG XE)
   ========================================================================== */
.kp-vehicle-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Banner đầu trang */
.kp-breadcrumb-banner {
    background: #0b3a82;
    color: #fff;
    padding: 40px 0;
    text-align: center;
}
.kp-breadcrumb-banner .breadcrumb-text {
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.8;
}
.kp-breadcrumb-banner .page-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}
.kp-breadcrumb-banner .page-subtitle {
    font-size: 16px;
    margin: 0;
    opacity: 0.9;
}

/* Thanh lọc nhanh (Tabs) */
.vehicle-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
	padding-top: 40px;
}
.vehicle-filter-tabs .filter-btn {
    padding: 10px 25px;
    background: #fff;
    color: #333;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.vehicle-filter-tabs .filter-btn:hover {
    border-color: #0b3a82;
    color: #0b3a82;
}
.vehicle-filter-tabs .filter-btn.active {
    background: #0b3a82;
    color: #fff;
    border-color: #0b3a82;
}

/* Lưới hiển thị các dòng xe */
.vehicle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}
.vehicle-card-item {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}
.vehicle-card-item:hover {
    border-color: #0b3a82;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.vehicle-img {
    text-align: center;
    margin-bottom: 20px;
}
.vehicle-img img {
    max-width: 100%;
    height: 180px;
    object-fit: contain;
}
.vehicle-name {
    font-size: 20px;
    font-weight: 700;
    color: #0b3a82;
    margin: 0 0 8px 0;
}
.vehicle-name a {
    color: inherit;
    text-decoration: none;
}
.vehicle-desc {
    font-size: 14px;
    color: #555;
    margin: 0 0 15px 0;
    line-height: 1.5;
    min-height: 42px;
}
.vehicle-count {
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}
.vehicle-action {
    border-top: 1px solid #f1f1f1;
    padding-top: 15px;
}
.vehicle-action a {
    color: #0b3a82;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.no-vehicle-notice {
    text-align: center;
    padding: 30px;
}

/* Khung "Tìm theo cấu hình" */
.kp-config-filter {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.kp-config-filter h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: #0b3a82;
    text-transform: uppercase;
}
.kp-config-filter form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: center;
}
.filter-field select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    font-size: 14px;
}
.filter-submit button {
    width: 100%;
    padding: 12px 25px;
    background: #0b3a82;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
}
.filter-submit button:hover {
    background: #08285c;
}

/* Banner hỗ trợ kỹ thuật (CTA) */
.kp-support-cta {
    background-color: #0b3a82;
    border-radius: 8px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    margin-bottom: 50px;
}
.kp-support-cta .cta-left {
    display: flex;
    align-items: center;
    gap: 25px;
}
.kp-support-cta .cta-icon {
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kp-support-cta .cta-text h3 {
    margin: 0 0 5px 0;
    font-size: 22px;
}
.kp-support-cta .cta-text p {
    margin: 0;
    font-size: 15px;
    opacity: 0.9;
}
.kp-support-cta .cta-right a {
    display: inline-block;
    background: #fff;
    color: #0b3a82;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    white-space: nowrap;
    transition: transform 0.3s;
}
.kp-support-cta .cta-right a:hover {
    transform: translateY(-2px);
}

/* Responsive Mobile */
@media (max-width: 991px) {
    .vehicle-grid { grid-template-columns: repeat(2, 1fr); }
    .kp-config-filter form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .vehicle-grid { grid-template-columns: 1fr; }
    .kp-config-filter form { grid-template-columns: 1fr; }
    .kp-support-cta { flex-direction: column; text-align: center; gap: 20px; padding: 25px 15px; }
    .kp-support-cta .cta-left { flex-direction: column; gap: 15px; }
    .vehicle-filter-tabs { flex-wrap: wrap; }
}

/* ==========================================================================
   LAYOUT TRANG DANH SÁCH SẢN PHẨM (TAXONOMY) CHUẨN E-COMMERCE
   ========================================================================== */
/* 1. Hero Banner */
.tax-hero-section { background: #fff; border-bottom: 1px solid #eaeaea; padding: 40px 0; overflow: hidden; }
.tax-hero-inner { display: flex; align-items: center; justify-content: space-between; }
.tax-hero-content { flex: 1; max-width: 600px; padding-right: 30px; }
.kp-breadcrumbs { font-size: 13px; color: #777; margin-bottom: 15px; }
.kp-breadcrumbs a { color: #555; text-decoration: none; margin: 0 5px; }
.kp-breadcrumbs a:first-child { margin-left: 0; }
.tax-title { font-size: 36px; font-weight: 800; color: #0b3a82; margin: 0 0 15px 0; }
.tax-desc { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 25px; }
.tax-count-badge { display: inline-flex; align-items: center; gap: 10px; background: #f4f7fc; border: 1px solid #dce4f0; padding: 8px 20px; border-radius: 30px; color: #0b3a82; font-size: 14px; }
.tax-hero-image { flex: 1; text-align: right; }
.tax-hero-image img { max-width: 100%; height: auto; max-height: 300px; object-fit: contain; }

/* 2. Menu Icon & Dòng xe */
.tax-quick-nav { background: #fff; border-radius: 8px; padding: 25px 30px; margin: -20px 0 30px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.03); position: relative; z-index: 10; border: 1px solid #eaeaea; }
.nav-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 25px; }
.nav-header h3 { font-size: 16px; margin: 0; color: #333; }
.nav-header .view-all { font-size: 13px; color: #777; text-decoration: none; }
.category-icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; text-align: center; }
.cat-icon-item { text-decoration: none; color: #333; display: block; transition: transform 0.2s; }
.cat-icon-item:hover { transform: translateY(-3px); }
.cat-icon-item .icon-wrap { background: #f9f9f9; border-radius: 8px; padding: 15px; margin-bottom: 10px; border: 1px solid #f1f1f1; }
.cat-icon-item h4 { font-size: 12px; font-weight: 600; margin: 0; line-height: 1.3; }

/* 3. Main Layout (Sidebar + Content) */
.tax-layout-wrapper { display: flex; gap: 30px; margin-bottom: 50px; padding-top: 50px; }
.tax-sidebar { width: 250px; flex-shrink: 0; }
.tax-main-content { flex: 1; min-width: 0; }

/* Sidebar Widgets */
.filter-widget { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.filter-widget .widget-title { font-size: 14px; font-weight: 700; color: #0b3a82; margin: 0 0 15px 0; border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; text-transform: uppercase; }
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li { margin-bottom: 10px; }
.filter-list label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: #555; }
.filter-list input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.btn-reset-filter { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: #fff; border: 1px solid #0b3a82; color: #0b3a82; border-radius: 4px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.btn-reset-filter:hover { background: #0b3a82; color: #fff; }

/* Toolbar (Search & Sort) */
.tax-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 20px; }
.search-box { flex: 1; display: flex; align-items: center; border: 1px solid #eaeaea; background: #fff; border-radius: 4px; padding: 0 15px; height: 42px; }
.search-box input { border: none; outline: none; width: 100%; font-size: 14px; background: transparent; }
.search-box button { background: none; border: none; color: #777; cursor: pointer; padding: 0; display: flex; }
.sort-box { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #555; }
.sort-box select { padding: 8px 12px; border: 1px solid #eaeaea; border-radius: 4px; outline: none; }

/* Lưới Sản phẩm Card Pro */
.product-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.product-card-pro { background: #fff; border: 1px solid #eaeaea; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; transition: all 0.3s; }
.product-card-pro:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.06); border-color: #0b3a82; }
.product-card-pro .card-image { text-align: center; margin-bottom: 15px; }
.product-card-pro .card-image img { width: 100%; height: 180px; object-fit: contain; }
.product-card-pro .card-title { font-size: 16px; margin: 0 0 10px 0; line-height: 1.4; height: 44px; overflow: hidden; }
.product-card-pro .card-title a { color: #0b3a82; text-decoration: none; }
.product-card-pro .card-meta { font-size: 13px; color: #555; margin-bottom: 10px; }
.product-card-pro .meta-row { margin-bottom: 5px; display: flex; }
.product-card-pro .label { width: 65px; color: #888; }
.product-card-pro .card-status { font-size: 13px; color: #28a745; display: flex; align-items: center; gap: 6px; margin-bottom: 20px; font-weight: 600; }
.status-dot { width: 8px; height: 8px; background: #28a745; border-radius: 50%; display: inline-block; }
.product-card-pro .card-action { margin-top: auto; }
.product-card-pro .btn-xem-chi-tiet { display: block; text-align: center; padding: 10px; border: 1px solid #0b3a82; color: #0b3a82; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s; }
.product-card-pro .btn-xem-chi-tiet:hover { background: #0b3a82; color: #fff; }

/* Pagination */
.kp-pagination { display: flex; justify-content: center; margin-top: 30px; }
.kp-pagination .nav-links { display: flex; gap: 5px; }
.kp-pagination .page-numbers { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; border: 1px solid #eaeaea; border-radius: 4px; color: #555; text-decoration: none; font-size: 14px; background: #fff; transition: all 0.2s; }
.kp-pagination .page-numbers.current, .kp-pagination .page-numbers:hover { background: #0b3a82; color: #fff; border-color: #0b3a82; }

/* 4. Bottom CTA */
.tax-bottom-cta { background: #f4f7fc; border: 1px dashed #b9cbe6; border-radius: 8px; padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; }
.tax-bottom-cta .cta-left { display: flex; align-items: center; gap: 20px; }
.tax-bottom-cta .cta-text h3 { margin: 0 0 5px 0; font-size: 20px; color: #0b3a82; }
.tax-bottom-cta .cta-text p { margin: 0; color: #555; font-size: 14px; }
.btn-cta-blue { background: #0b3a82; color: #fff; padding: 12px 30px; border-radius: 4px; text-decoration: none; font-weight: 700; font-size: 15px; transition: transform 0.3s; }
.btn-cta-blue:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(11,58,130,0.2); }

/* Responsive */
@media (max-width: 991px) {
    .tax-layout-wrapper { flex-direction: column; }
    .tax-sidebar { width: 100%; }
    .product-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .category-icon-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
    .tax-hero-inner { flex-direction: column; text-align: center; gap: 20px; }
    .tax-hero-content { padding-right: 0; }
    .product-grid-3 { grid-template-columns: 1fr; }
    .tax-bottom-cta { flex-direction: column; text-align: center; gap: 20px; padding: 25px; }
    .tax-bottom-cta .cta-left { flex-direction: column; }
}

.accordion-widget .widget-title { cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin: 0 0 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.accordion-widget .toggle-icon::after { content: '\2304'; font-size: 18px; line-height: 1; transition: 0.3s; }
.accordion-widget.active .toggle-icon::after { content: '\2303'; }
.accordion-content { display: none; }
.accordion-widget.active .accordion-content { display: block; }
.kp-pagination ul { list-style: none; padding: 0; display: flex; gap: 8px; margin: 0; }
.kp-pagination ul li a, .kp-pagination ul li span { display: block; padding: 8px 14px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #333; text-decoration: none; transition: 0.2s; }
.kp-pagination ul li span.current { background: #0b3a82; color: #fff; border-color: #0b3a82; }
.kp-pagination ul li a:hover { background: #f0f4f8; }
.product-card-pro:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateY(-3px); }
.product-card-pro:hover .btn-xem-chi-tiet { background: #0b3a82; color: #fff; }

/* Responsive cho Grid Bài viết */
@media (max-width: 991px) {
    .featured-blogs-wrapper { grid-template-columns: 1fr; }
    .featured-card.large a { height: auto; aspect-ratio: 16/9; }
}

/* Hiệu ứng Hover cho Card */
.blog-card:hover, .featured-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.blog-card:hover img, .featured-card:hover img {
    transform: scale(1.05);
}

/* Style cho Tabs khi di chuột */
.blog-category-tabs::-webkit-scrollbar { height: 4px; }
.blog-category-tabs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.cat-tab:hover { background: #f0f4f8 !important; color: #0b3a82 !important; }

/* Style Phân trang (Pagination) mượn lại của trang trước */
.kp-pagination ul { list-style: none; padding: 0; display: flex; gap: 8px; margin: 0; }
.kp-pagination ul li a, .kp-pagination ul li span { display: block; padding: 8px 14px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #333; text-decoration: none; transition: 0.2s; }
.kp-pagination ul li span.current { background: #0b3a82; color: #fff; border-color: #0b3a82; }
.kp-pagination ul li a:hover { background: #f0f4f8; }
.btn-outline-blue:hover { background: #0b3a82 !important; color: #fff !important; }

/* CSS định dạng nội dung bài viết */
.entry-content h2 { color: #0b3a82; font-size: 24px; margin: 30px 0 15px; }
.entry-content h3 { color: #333; font-size: 20px; margin: 25px 0 15px; }
.entry-content p { margin-bottom: 15px; }
.entry-content ul, .entry-content ol { margin-bottom: 20px; padding-left: 20px; }
.entry-content li { margin-bottom: 8px; }
.entry-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }

/* CSS Hover */
.post-tags a:hover { border-color: #0b3a82; color: #0b3a82; }
.hover-blue:hover { color: #0b3a82 !important; }
.blog-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-3px); }
.blog-card:hover img { transform: scale(1.05); }

/* Custom CSS cho List TOC */
#kp-auto-toc li a { color: #555; text-decoration: none; transition: 0.2s; display: flex; align-items: baseline; gap: 8px; }
#kp-auto-toc li a::before { content: '•'; color: #0b3a82; font-weight: bold; }
#kp-auto-toc li a:hover { color: #0b3a82; padding-left: 5px; }

/* Responsive */
@media (max-width: 991px) {
    .single-layout-wrapper { grid-template-columns: 1fr !important; }
    .single-sidebar { position: static !important; }
}


/* CSS BỔ SUNG CHO TRANG DANH MỤC */
/* CSS Hover cho Grid bài viết */
.blog-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-3px); }
.blog-card:hover img { transform: scale(1.05); }

/* Style Phân trang (Pagination) mượn lại */
.kp-pagination ul { list-style: none; padding: 0; display: flex; gap: 8px; margin: 0; }
.kp-pagination ul li a, .kp-pagination ul li span { display: block; padding: 8px 14px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #333; text-decoration: none; transition: 0.2s; }
.kp-pagination ul li span.current { background: #0b3a82; color: #fff; border-color: #0b3a82; }
.kp-pagination ul li a:hover { background: #f0f4f8; }

/* Responsive */
@media (max-width: 991px) {
    .cat-featured-post { flex-direction: column; }
    .cat-featured-img { min-height: 250px; }
    .cat-featured-content { padding: 25px; }
    .newsletter-cta { flex-direction: column; align-items: flex-start; }
    .cta-right { max-width: 100%; width: 100%; }
}

.capabilities-section { grid-template-columns: 1fr !important; } .about-bottom-cta { flex-direction: column; } .about-bottom-cta .cta-image { min-height: 300px; }

/* ==========================================
   XỬ LÝ MENU MOBILE & DESKTOP (KIM PHÚC)
   ========================================== */

/* 1. MÀN HÌNH MÁY TÍNH (PC) */
@media (min-width: 992px) {
    /* Ẩn nút 3 gạch và khối menu dropdown của Mobile */
    .menu-toggle, #primary-menu { 
        display: none !important; 
    }
}

/* 2. MÀN HÌNH ĐIỆN THOẠI & IPAD (Dưới 991px) */
@media (max-width: 991px) {
    /* Ẩn thanh menu dài của Desktop */
    .desktop-menu-only { 
        display: none !important; 
    }

    /* NÚT BẤM (Đã bỏ flex) */
    .menu-toggle {
        display: inline-block !important; /* Dùng inline-block thay cho flex */
        width: 35px !important;
        background: transparent !important;
        border: none !important;
        padding: 5px 0 !important; /* Căn chỉnh lại khoảng cách trên dưới */
        margin-left: 15px !important;
        cursor: pointer;
    }

    /* 3 VẠCH NGANG */
    .hamburger-bar {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #0b3a82 !important; /* Màu xanh đậm */
        border-radius: 2px;
        margin-bottom: 6px !important; /* Tạo khoảng cách giữa các vạch */
    }

    /* Bỏ margin ở vạch cuối cùng để không bị dư khoảng trống dưới đáy */
    .hamburger-bar:last-child {
        margin-bottom: 0 !important;
    }

    /* Menu xổ xuống mặc định ẨN */
    #primary-menu {
        display: none !important; 
        position: absolute !important;
        top: 100% !important; 
        right: 0 !important;
        width: 250px !important; 
        background-color: #ffffff !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
        border-radius: 8px;
        margin-top: 15px;
    }

    /* Menu HIỆN khi có class is-active từ Javascript */
    #primary-menu.is-active {
        display: block !important;
    }

    /* Style cho các đường link trong Menu Mobile */
    #primary-menu ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #primary-menu li {
        border-bottom: 1px solid #f1f1f1 !important;
    }
    #primary-menu a {
        display: block !important;
        padding: 12px 20px !important;
        color: #0b3a82 !important;
        text-decoration: none !important;
        font-weight: 500;
        transition: 0.3s;
    }
    #primary-menu a:hover {
        background-color: #f8fafc !important;
        color: #f97316 !important; /* Màu cam hover */
    }
}

/* ==========================================
   CSS CHO CONTACT FORM 7 (KIM PHÚC)
   ========================================== */
.kp-contact-form .form-select,
.kp-contact-form .form-textarea,
.kp-contact-form input[type="text"],
.kp-contact-form input[type="email"],
.kp-contact-form input[type="tel"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    font-size: 15px;
    background: #fff;
    box-sizing: border-box; /* Đảm bảo padding không làm phình kích thước */
}

.kp-contact-form .form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Nút Submit phong cách Kim Phúc */
.kp-contact-form .btn-submit-hover {
    width: 100%;
    background: #f97316;
    color: #fff;
    border: none;
    padding: 15px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
    transition: 0.3s;
}

.kp-contact-form .btn-submit-hover:hover {
    background: #e0600a;
}