/* ==========================================================================
   1. CẤU HÌNH CỐT LÕI (CORE & VARIABLES)
   * Đơn vị chuẩn: 1rem = 16px
   * Màu sắc: Chuẩn VinFast
   ========================================================================== */
:root {
    /* --- MÀU SẮC THƯƠNG HIỆU --- */
    --vin-red: #d82c2c;          /* Đỏ VinFast */
    --vin-red-dark: #a80000;     /* Đỏ đậm (Hover) */
    
    /* --- MÀU GIAO DIỆN CHÍNH HÃNG --- */
    --vin-gray-bg: #d9e1e2;      /* Nền tiêu đề bảng giá */
    --vin-gray-text: #3c3c3c;    /* Chữ tiêu đề bảng giá */
    --vin-black-text: #1A1A1A;   /* Số tiền */

    /* --- MÀU CHỦ ĐẠO WEB --- */
    --primary-color: var(--vin-red); 
    
    /* --- MÀU PHỤ TRỢ --- */
    --blue-zalo: #0068ff;        
    --text-color: #1A1A1A;
    --white-color: #fff;
    --color-grey: #f8f9fa;
    --color-light-grey: #d9e1e2;
    --icon-font: "Font Awesome 6 Free";
}
html{width:100%;overflow-x:hidden;scroll-behavior: smooth;}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-color);
    font-size: 1rem; /* Chuẩn 16px */
    line-height: 1.5;
    width: 100%;
    overflow-x: hidden;
}

a { color: var(--text-color); text-decoration: none; outline: 0; transition: all ease 0.4s; }
a:hover { color: var(--primary-color); }
img { max-width: 100%; height: auto; }
.text-center { text-align: center; }

/* Bootstrap Ratio Helpers */
.ratio { position: relative; width: 100%; overflow: hidden; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }

/* ==========================================================================
   2. HEADER & MENU
   ========================================================================== */
#header { border-bottom: 4px solid var(--primary-color); }
.logo-htv { background-image: url(/images/VinFast-logo.svg); display: inline-block; position: relative; overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: 100% auto; }
.navbar-nav { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; }

@media (min-width: 992px) {
    .site-logo { max-width: 18.75rem; /* 300px */ }
    .logo-htv { width: 17.5rem; height: 3.125rem; /* 280px x 50px */ }
    .header-info { min-width: 38.75rem; position: relative; z-index: 99999999; }
    .nav-trigger { display: none; }
    .navigation { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; position: relative; }
    .navigation ul a { display: block; position: relative; font-weight: 500; font-size: 1rem; color: var(--text-color) }
    .navigation > li > a { display: block; padding: 0.25rem 1rem; position: relative; font-weight: 500; font-size: 0.9rem; color: var(--text-color); text-transform: uppercase }
    .navigation > li:first-child > a { padding: 0.2rem 1rem }
    .navigation > li:first-child > a i { font-size: 1.2rem }
    .navigation > li > a:hover { color: var(--primary-color) }
    .navigation > li.sub-menu > a:after { content: "\2b"; display: inline-block; position: relative; font-family: var(--icon-font); margin-left: 0.25rem; font-weight: 600; top: 0; font-size: 0.9em; color: var(--white-color); transition: .3s ease-in-out }
    .navigation > li.sub-menu > a:hover:after { color: var(--primary-color); content: "\f068"; transform: rotate(180deg) }
    .navigation li { padding: 0.25rem 0 }
    .navigation li.sub-menu { position: relative }
    .navigation li.sub-menu > ul { padding-left: 0; margin-bottom: 0; list-style: none; position: absolute; text-align: left; left: 0; background-color: var(--white-color); min-width: 14.375rem; width: max-content; padding: 0.5rem 0.75rem; left: -1rem; border: 0; box-shadow: 0 4px 15px rgba(1, 15, 28, 0.06); border-bottom: 2px solid var(--primary-color); border-radius: 0; }
    .navigation li.sub-menu > ul { top: 50%; visibility: hidden; opacity: 0; z-index: -1; transform: scaleY(0); transform-origin: top; transition: all .5s; }
    .navigation li.sub-menu:hover > ul { top: 100%; visibility: visible; opacity: 1; transform: scaleY(1); z-index: 99999 }
    .navigation li.sub-menu li { position: relative }
    .navigation li.sub-menu li a:before { content: "\f30b"; position: absolute; top: 0.25rem; left: 0.5rem; font-family: "Font Awesome 6 Free"; width: 0.5rem; height: 0.5rem; text-align: center; border-radius: 50%; display: inline-block; font-size: 1em; line-height: 1; color: var(--primary-color); font-weight: 900; opacity: 0; visibility: visible; transition: .3s ease-in-out }
    .navigation li.sub-menu li a:hover { padding-left: 1.25rem; color: var(--primary-color); }
    .navigation li.sub-menu li a:hover:before { visibility: visible; opacity: 1; left: 0 }
    .navigation li:first-child span { display: none; }
    .list-car { display: none; position: absolute; padding: 1rem 0.5rem; left: 0; background: var(--white-color) }
    li:hover .list-car { display: block; z-index: 999; }
    .submenu-btn { display: none; }
}

@media (max-width: 991px) {
    .site-logo { max-width: 13.75rem; }
    .logo-htv { width: 12.5rem; height: 2.5rem; }
    .navigation { display: none; overflow: hidden; }
    .navigation > li:first-child > a i { font-size: 0.9rem; padding-right: 0.5rem; }
    .main-menu { margin-left: 3.125rem; width: calc(100% - 3.125rem); height: 2rem; color: var(--text-color); position: relative; }
    .nav-trigger { line-height: 2rem; text-align: right; }
    .nav-trigger span { display: inline-block; height: 2px; vertical-align: 0.3rem; margin-left: 0.5rem; width: 22px; position: relative; background-color: var(--primary-color); transition: background-color .2s }
    .nav-trigger span::after, .nav-trigger span::before { display: block; position: absolute; height: 2px; width: 22px; background-color: var(--primary-color); backface-visibility: hidden }
    .nav-trigger span::before, .nav-trigger span::after { position: absolute; content: ''; left: 0; transition: transform .2s }
    .nav-trigger span::before { transform: translateY(-6px) }
    .nav-trigger span::after { transform: translateY(6px) }
    .nav-open .nav-trigger span { background-color: rgba(255, 255, 255, 0) }
    .nav-open .nav-trigger span::before { transform: rotate(-45deg) }
    .nav-open .nav-trigger span::after { transform: rotate(45deg) }
    .navigation { position: absolute; top: 100%; right: -10px; width: 23.125rem; padding: 1.5rem 1rem 1.5rem 0.7rem; z-index: 99999999; border: 2px solid var(--primary-color); border-width: 2px 0 2px 0; background-color: var(--white-color); }
    .navigation li { border-bottom: 1px solid #fdedf1; }
    .navigation li:last-child { border-bottom: none; }
    .navigation li li:first-child { padding: 0.25rem 0; border-top: 1px solid #fdedf1; }
    .navigation li li:last-child { padding: 0.25rem 0; border-bottom: none; }
    .navigation li ul { padding-left: 1.2rem; }
    .navigation li a { padding: 0.5rem 0; color: var(--text-color); display: inline-block; }
    .navigation li a:hover { color: var(--primary-color); }
    .navigation li > a:before, .navigation li li > a:before { content: "\f054"; display: inline-block; padding-right: 0.5rem; position: relative; font-family: var(--icon-font); margin-left: 0.25rem; font-weight: 600; top: 0; font-size: 0.9em; color: var(--text-color); transition: .3s ease-in-out; }
    .navigation li.sub-menu, .navigation li.nav-car { position: relative; }
    .list-car { display: none }
    .list-car.open { display: block; position: relative; z-index: 999999999999; }
    .navigation li.sub-menu a, .nav-car a { width: calc(100% - 1.8rem); }
    .navigation li.sub-menu ul { display: none }
    .navigation li.sub-menu ul.open { display: block }
    .navigation .submenu-btn { height: 2rem; width: 2rem }
    .navigation .submenu-btn { display: inline-block; width: 1.5rem; height: 1.5rem; position: relative; }
    .navigation .submenu-btn:after { position: absolute; top: 0.95rem; right: 0.5rem; width: 1rem; height: 0.1rem; display: block; background: var(--primary-color); content: '' }
    .navigation .submenu-btn.open:after { top: 0.5rem; right: 0.95rem; border: 0; width: 0.1rem; height: 1rem; background: var(--primary-color); transform: rotate(45deg) }
    .navigation .submenu-btn:before { position: absolute; top: 0.5rem; right: 0.85rem; display: block; width: 0.2rem; height: 1rem; background: var(--primary-color); content: ''; }
    .navigation .submenu-btn.open:before { top: 0.95rem; right: 0.5rem; width: 1rem; height: 0.1rem; background: var(--primary-color); transform: rotate(45deg) }
}

/* ==========================================================================
   3. NỘI DUNG CHÍNH
   ========================================================================== */
.page-header { width: 100%; position: relative; padding: 2.5rem 0; background-size: cover; background-repeat: no-repeat; background-position: center center; color: var(--white-color); background-image: url('/Images/bg/bg-02.jpg'); }
.page-header > * { z-index: 2; position: relative; }
.page-header h1 { font-size: 2rem; }
.breadcrumb {
    margin: 0;
    font-size: 0.95rem; /* Kích thước chữ vừa phải */
}

.breadcrumb ol {
    display: flex; /* QUAN TRỌNG: Xếp hàng ngang */
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center; /* Căn giữa icon và chữ */
}

.breadcrumb a {
    color: var(--white-color); 
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: #ffc107; /* Link hover màu Vàng/Gold */
}

/* Trang hiện tại (Mục đang active) */
.breadcrumb li.active {
    color: var(--primary-color); /* Màu Đỏ VinFast */
    font-weight: 700;
}

/* Style cho Icon phân cách ( targets the <li> containing the <i> ) */
.breadcrumb ol li i {
    font-size: 0.8rem;
    margin:0 .5rem;
    color: rgba(255, 255, 255, 0.7); /* Màu trắng mờ */
    display: block; /* Đảm bảo icon nằm đúng vị trí */
}
/* ==========================================================================
   TÙY CHỈNH TIÊU ĐỀ H1 TRONG BANNER (.page-header h1)
   ========================================================================== */
.page-header h1 {
    font-size: 3rem; /* Rất to và rõ ràng */
    font-weight: 900; /* Cực kỳ đậm */
    text-align: center;
    text-transform: uppercase;
    color: var(--white-color); /* Màu trắng trên nền tối */
    margin-bottom: 30px; /* Tăng khoảng cách với Breadcrumb */
    line-height: 1.1;
    position: relative;
    padding-bottom: 15px; /* Để chừa chỗ cho gạch chân */
}

/* Thêm gạch chân đỏ tinh tế (Accent Line) */
.page-header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Bắt đầu từ 50% */
    transform: translateX(-50%); /* Dịch chuyển ngược lại 50% để căn giữa */
    width: 80px; /* Độ dài vừa phải */
    height: 4px;
    background: var(--primary-color); /* Màu Đỏ VinFast */
    border-radius: 2px;
}

/* Responsive cho H1 trên Mobile */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2rem; /* Giảm cỡ chữ trên điện thoại */
    }
    .page-header h1::after {
        width: 60px; /* Gạch chân cũng nhỏ lại */
    }
}

/* 1. HIỆU ỨNG CUỘN MƯỢT (SMOOTH SCROLL) */
html {
    scroll-behavior: smooth;
}

/* 2. CỐ ĐỊNH VÀ TRẠNG THÁI MẶC ĐỊNH */
#subnav-sticky {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 999;
    transition: all 0.3s ease;
    width: 100%;
    /* Giữ padding bên ngoài */
    padding: 0.5rem 0; 
}

/* ⚠️ CLASS CỐ ĐỊNH (THÊM BẰNG JS) */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* 3. KHÔI PHỤC CĂN CHỈNH NGANG BẰNG FLEXBOX */
#subnav-sticky .container-xl {
    /* Áp dụng Flexbox trực tiếp lên container để căn chỉnh các nav-item */
    display: flex;
    justify-content: center; /* Căn giữa các mục menu */
    padding: 0 15px; /* Đảm bảo padding ngang chuẩn Bootstrap */
}

/* 4. STYLE CHO TỪNG MỤC MENU */
/* Đảm bảo nav-item không có padding gây lỗi tính toán chiều cao */
.nav-item {
    /* Đảm bảo các mục không co lại trên desktop */
    flex-shrink: 0; 
    padding: 0; /* Loại bỏ padding ngoài nav-item */
}

.scroll-link {
    color: #555;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và chữ */
    padding: 8px 16px;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.scroll-link i {
    font-size: 1.1rem;
    color: #999;
    transition: color 0.3s;
}

/* 5. HIỆU ỨNG ACTIVE */
.scroll-link:hover,
.scroll-link.active {
    background-color: #ffe5e5;
    color: var(--primary-color); /* Chữ đỏ VinFast */
}

.scroll-link:hover i,
.scroll-link.active i {
    color: var(--primary-color); /* Icon chuyển đỏ */
}

/* 6. RESPONSIVE VÀ SCROLL NGANG CHO MOBILE */
@media (max-width: 768px) {
    /* ⚠️ BẮT BUỘC CHO CUỘN NGANG: Tăng chiều rộng để nội dung tràn ra ngoài */
    #subnav-sticky .container-xl {
        justify-content: flex-start; /* Bắt đầu từ mép trái */
        overflow-x: auto; /* Bật cuộn ngang */
        white-space: nowrap; /* Ngăn nội dung nhảy xuống dòng */
    }

    /* Ẩn thanh cuộn xấu xí */
    #subnav-sticky .container-xl::-webkit-scrollbar {
        display: none;
    }
    #subnav-sticky .container-xl {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .scroll-link span {
        font-size: 0.85rem;
    }
    .scroll-link {
        padding: 6px 12px;
    }
    .nav-item {
        display: inline-block; /* Bật hiển thị inline-block để cuộn ngang */
    }
}

.block-cars .field-specs { padding-top: 0.75rem; border-top: 1px solid #D9E1E2; }
/* ==========================================================================
   CSS NÚT BẤM (PHIÊN BẢN SẠCH - KHÔNG LỖI)
   ========================================================================== */
.field-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Style chung cho nút */
.btn-field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 12px 25px;
    
    /* Font chữ */
    font-size: 0.95rem !important; /* Khôi phục cỡ chữ chuẩn */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    
    /* Hình dáng */
    border-radius: 50px; /* Bo tròn đẹp */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Khoảng cách giữa Icon và Chữ */
.btn-field i {
    margin-right: 8px;
    font-size: 1.1em;
}

/* --- MÀU SẮC --- */

/* Nút Đỏ (Tư vấn) */
.btn--primary--blue {
    background: linear-gradient(135deg, var(--primary-color) 0%, #b01c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
}
.btn--primary--blue:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(216, 44, 44, 0.4);
}

/* Nút Trắng (Xem chi tiết) */
.btn--primary--white {
    background-color: #ffffff !important;
    color: #1464f4 !important; /* Chữ Xanh */
    border: 2px solid #1464f4 !important;
}
.btn--primary--white:hover {
    background-color: #1464f4 !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(20, 100, 244, 0.3);
}

/* Mobile */
@media (max-width: 576px) {
    .btn-field {
        width: 100%;
        margin-bottom: 10px;
    }
}
.field-spec-item--desc { font-size: 1.2rem; font-weight: 700; }

/* BẢNG GIÁ (Dùng biến màu chuẩn hãng) */
.price-row { display: flex; flex-wrap: wrap; gap: 1.875rem; justify-content: center; }
.price-row .price-panel { background-color: var(--white-color); display: flex; flex-direction: column; min-width: 21.25rem; max-width: 32.5rem; padding: 0; border: none; }
.price-row .price-panel .header { background-color: var(--vin-gray-bg); color: var(--vin-gray-text); font-size: 1.5rem; font-weight: 400; letter-spacing: normal; padding: 0.9375rem 0.625rem; text-align: center; margin-bottom: 1.56rem; }
.price-row .price-panel .price-body { display: flex; flex-direction: column; align-items: center; padding: 0 1rem; }
.price-row .price-panel .price { font-size: 3rem; font-weight: 900; letter-spacing: -1px; line-height: 1; text-align: center; color: var(--vin-black-text); font-family: "Segoe UI Light", "Helvetica Neue", sans-serif; }
.price-row .price-panel .price small { font-size: 1.2rem; color: #666; margin-left: 0.3rem; font-weight: normal; text-transform: uppercase; }
.price-block h2 { color: var(--vin-gray-text); font-size: 2rem; font-weight: 300; text-align: center; margin-top: 1rem; margin-bottom: 3rem; }

/* Gallery */
.gallery { padding: 0 0 1rem; }
.gallery::after { display: table; content: " "; clear: both }
.gallery .client-gallery { float: left; width: 25%; }
.gallery .client-gallery a { display: block; margin: 0.25rem; }
.gallery .client-gallery:first-child { width: 50%; }
.gallery .client-gallery + div + div + div + div + div { display: none; }
.gallery .client-gallery a span { display: block; position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.gallery .client-gallery a span img { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); }

.box-car { margin-bottom: 1rem; }
.box-car p { margin: 0; }
.box-car .box-car-img img { width: 100%; }
.box-car .box-car-text { background-color: #F5F5F5; }
.box-car .box-car-text > * { padding: 1rem; }
.read-more-btn { font-weight: 600; font-size: 0.8rem; color: #1A1A1A; padding: 0.5rem 1.5rem; border: 1px solid #535353; cursor: pointer; text-transform: uppercase }
.read-more-btn:hover { color: var(--primary-color) }

.color-item div { align-items: center; border: 3px solid transparent; border-radius: 50%; cursor: pointer; display: flex; height: 60px; justify-content: center; width: 60px; }
.color-item div img { width: 36px; height: 36px; }
.color-item span { display: none; }
.color-item.active span { display: block; }
.color-item.active div { border-color: var(--primary-color); }
.image-inner div { display: none; text-align: center; }
.image-inner .active { display: block; }

.box-item-sac { padding-bottom: 2rem; }
.box-item-sac > div:first-child { background-color: rgba(216, 44, 44, 0.05); padding: 2rem; }
.box-item-sac .sub-title { border-left: 4px solid var(--primary-color); padding-left: 1rem; }
@media (min-width: 992px) {
    .box-item-sac { flex-wrap: wrap; display: flex }
    .box-item-sac > div { flex: 1 0 50%; }
}

/* Responsive Helpers */
@media (min-width: 768px) {
    .box-car:first-child .box-car-img { min-width: 65%; }
    .box-car:first-child .box-car-text > * { padding: 1rem 1.5rem; }
}
@media (min-width: 576px) {
    .box-car { width: 50%; flex: 0 0 auto; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); }
    .box-car:first-child { width: 100%; display: flex; }
    .box-car:first-child .box-car-img { min-width: 50%; }
    .box-car:first-child .box-car-text { display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 575px) {
    .btn-field { min-width: 9rem; padding: 0.75rem; white-space: nowrap; }
    .field-spec-item { margin-bottom: 0.75rem; }
    .field-spec-item .field-spec-item--title { font-size: 0.875rem; }
    .field-spec-item .field-spec-item--desc { font-size: 1rem; }
    .field-image { width: 86%; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   4. FOOTER (NỀN ĐEN ĐẶC - KHÔNG ẢNH)
   ========================================================================== */
.footer-content {
    position: relative;
    z-index: 50;
    
    /* ĐÃ SỬA: Xóa ảnh nền, chỉ dùng màu đen */
    background-image: none;
    background-color: #111111; /* Màu đen tuyền sạch sẽ */
    
    padding: 4rem 0 2rem;
    color: var(--white-color);
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5); /* Bóng đổ ngăn cách với phần trên */
}

/* Xóa lớp phủ đen cũ đi vì nền đã đen sẵn rồi */
.footer-content::before {
    display: none; 
}

.footer-content .container-xl {
    position: relative;
    z-index: 2;
}

/* --- CÁC PHẦN TRANG TRÍ (GIỮ NGUYÊN) --- */
.footer-content a { color: var(--white-color); }
.footer-content h4 { font-size: 1rem; margin-bottom: 0.5rem; color: #888; } /* Màu chữ tiêu đề con nhạt hơn chút */

.footer-content .footer-info .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    height: 2.25rem;
    width: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--white-color);
}

.footer-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white-color);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: none;
    position: relative;
}

.footer-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}

.footer-content ul li { list-style:none;
    padding: 0.5rem 0; 
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Kẻ mờ màu trắng */
}
.footer-content ul li a:hover { 
    padding-left: 10px; 
    color: var(--primary-color); 
}
.footer-content ul li i{padding-right:1.5rem;}
/* ==========================================================================
   PHẦN 5: TOP 5 GIAO DỊCH (CẤU TRÚC DỌC CŨ - ĐÃ NÂNG CẤP)
   (Khớp với HTML hiện tại + Ảnh vuông 1:1 + Màu đỏ)
   ========================================================================== */
.sold-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    height: 100%; /* Đảm bảo các thẻ cao bằng nhau */
    display: flex;
    flex-direction: column;
}

.sold-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(216, 44, 44, 0.15) !important; /* Bóng đỏ nhạt */
    border-color: var(--primary-color); /* Viền chuyển đỏ */
}

/* --- XỬ LÝ ẢNH VUÔNG 1:1 --- */
.sold-card .card-img-top {
    width: 100%;
    aspect-ratio: 1 / 1;   /* ÉP ẢNH VUÔNG CHẰN CHẶN */
    object-fit: cover;     /* Cắt ảnh vừa khung, không méo */
    object-position: center top; /* Ưu tiên lấy phần trên (mặt người) */
    border-bottom: 1px solid #f0f0f0;
    background-color: #f5f5f5;
}

/* --- PHẦN NỘI DUNG --- */
.sold-card .card-body {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Đẩy ngày tháng xuống đáy */
}

/* Tên xe (Màu đỏ) */
.sold-card .card-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--primary-color); /* Dùng biến màu đỏ */
    text-transform: uppercase;
    line-height: 1.3;
}

/* Địa điểm (Màu đen đậm) */
.sold-card p {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.sold-card p i {
    color: var(--primary-color); /* Icon map màu đỏ */
    margin-right: 5px;
}

/* Nhãn thời gian (Nổi bật) */
.sold-card .text-time {
    display: inline-block;
    background-color: #ffe5e5;   /* Nền hồng nhạt */
    color: var(--primary-color); /* Chữ đỏ */
    font-weight: bold;
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 50px;
    margin-top: auto; /* Tự động đẩy xuống đáy thẻ */
    border: 1px solid #ffcccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.sold-card:hover .text-time {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    transition: all 0.3s ease;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 576px) {
    /* Trên điện thoại, ảnh chuyển sang tỉ lệ chữ nhật ngang cho đỡ tốn diện tích */
    .sold-card .card-img-top {
        aspect-ratio: 4 / 3; 
    }
}

/* ==========================================================================
   6. KHUYẾN MÃI (ĐÃ TỐI ƯU CÂN ĐỐI CHO ĐIỆN THOẠI)
   ========================================================================== */
.vinfast-promotion-section h2 { 
    color: var(--vin-red-dark) !important; 
    font-size: 2rem; 
    letter-spacing: 1px; 
    margin-bottom: 1rem;
    line-height: 1.3;
}

.vinfast-promotion-section p.fs-5 { 
    font-size: 1.1rem !important; 
    max-width: 800px;
    margin: 0 auto 3rem auto;
    padding: 0 15px; /* Thêm đệm để chữ không sát lề điện thoại */
}

/* THẺ KHUYẾN MÃI */
.promotion-card { 
    border: 1px solid #eee; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); 
    border-radius: 1rem; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: relative; 
    overflow: hidden; 
    padding: 2rem 1.5rem; 
    height: 100%; 
    text-align: center; 
    background: #fff;
}

/* Thanh màu trang trí */
.promotion-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; }
.primary-card::before { background-color: var(--primary-color); }
.secondary-card::before { background-color: #007bff; }
.tertiary-card::before { background-color: #ffc107; }

/* Hiệu ứng Hover */
.promotion-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }

/* Icon */
.promotion-card .icon { 
    font-size: 2.5rem; 
    color: #333; 
    margin-bottom: 1rem;
    display: inline-block;
}

/* Tiêu đề thẻ */
.promotion-card h3 { 
    color: var(--primary-color); 
    font-size: 1.25rem; 
    font-weight: 700; 
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    min-height: 3rem; /* Giữ chiều cao đều nhau kể cả khi tên dài */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Danh sách nội dung */
.promotion-card ul { text-align: left; padding-left: 0; list-style: none; margin-bottom: 0; }
.promotion-card ul li { padding: 0.8rem 0; border-bottom: 1px dashed #eee; color: #555; font-size: 0.95rem; font-weight: 500; }
.promotion-card ul li:last-child { border-bottom: none; }
.promotion-card ul li strong { color: var(--primary-color); font-weight: 700; }

/* ==========================================================================
   TỐI ƯU RIÊNG CHO KHỐI CTA BOX (HỘP ĐỎ KÊU GỌI HÀNH ĐỘNG)
   ========================================================================== */
.cta-box {
    background: linear-gradient(135deg, #d82c2c 0%, #a80000 100%); /* Gradient đỏ VinFast */
    border-radius: 1rem;
    border: 3px solid #ffc107; /* Viền vàng */
    box-shadow: 0 10px 30px rgba(168, 0, 0, 0.4);
    max-width: 980px;
    margin-top: 3rem;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Tiêu đề "ĐỪNG MUA XE..." */
.cta-box h4 {
    font-size: 1.8rem;
    line-height: 1.4;
    margin-bottom: 2rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
}

/* Container chứa các nút */
.cta-buttons-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
}

/* --- THIẾT KẾ NÚT BẤM (BUTTONS) --- */
.primary-call, .secondary-callback {
    padding: 1.2rem 2.5rem;
    font-size: 1.2rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 280px; /* Độ rộng tối thiểu để nút trông đầy đặn */
    text-align: center;
    line-height: 1.2;
}

/* Nút Gọi (Màu Vàng - Chữ Đỏ) */
.primary-call {
    background-color: #ffc107 !important;
    color: #a80000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: pulse-call 2s infinite; /* Hiệu ứng tỏa sóng */
    white-space: nowrap; /* Trên PC ép thẳng hàng cho đẹp */
}

/* Nút Báo Giá (Màu Trắng - Chữ Đỏ) */
.secondary-callback {
    background-color: white !important;
    color: #a80000 !important;
    border: 2px solid white !important;
    white-space: nowrap; /* Trên PC ép thẳng hàng */
}

/* Hiệu ứng khi di chuột */
.primary-call:hover, .secondary-callback:hover {
    transform: scale(1.05); /* Phóng to nhẹ */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* --- QUAN TRỌNG: TỐI ƯU HIỂN THỊ TRÊN ĐIỆN THOẠI (< 768px) --- */
@media (max-width: 768px) {
    .vinfast-promotion-section h2 { 
        font-size: 1.6rem !important; /* Cỡ chữ vừa vặn (khoảng 21px) */
        line-height: 1.8;             /* Khoảng cách dòng thoáng hơn */
        padding: 0 15px;              /* Cách lề 2 bên để không dính mép */
        margin-bottom: 15px;          /* Giảm khoảng cách dưới */
        word-wrap: break-word;        /* Ngắt dòng thông minh */
    }
    .cta-box {
        padding: 2rem 1rem !important; /* Giảm lề trong để có chỗ cho nút */
        margin-top: 2rem;
        border-width: 2px;
    }

    .cta-box h4 {
        font-size: 1.2rem; /* Giảm cỡ chữ tiêu đề */
        margin-bottom: 1.5rem;
    }

    /* Xếp dọc 2 nút bấm */
    .cta-buttons-group {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .cta-buttons-group span{white-space: nowrap !important;display:block;}
    .primary-call, .secondary-callback {
        width: 100%; /* Nút dãn full màn hình */
        margin: 0;
        padding: 0.75rem 0.5rem; /* Thu gọn padding */
        min-width: auto; /* Bỏ giới hạn min-width */
        white-space: normal; /* QUAN TRỌNG: Cho phép xuống dòng nếu số điện thoại dài quá */
    }
    .primary-call {font-size: 1.2rem !important;  display:block!important  }
    .secondary-callback {font-size: 1rem !important; }
    /* Chỉnh lại icon trong nút gọi cho cân đối */
    .primary-call i {
        margin-right: 8px;
    }
}
/* ==========================================================================
   FILE CSS CHUẨN - ĐÃ ĐỒNG NHẤT MÀU SẮC & BỐ CỤC
   ========================================================================== */

/* 1. CẤU HÌNH MÀU SẮC (VARIABLES) */
:root {
    /* MÀU THƯƠNG HIỆU VINFAST */
    --vin-red: #d82c2c;          /* Đỏ chủ đạo */
    --vin-red-dark: #a80000;     /* Đỏ đậm (hover) */
    
    /* MÀU GIAO DIỆN HÃNG (Dùng cho Bảng giá - Trung tính, sang trọng) */
    --vin-gray-bg: #d9e1e2;      /* Nền xám nhạt */
    --vin-gray-text: #3c3c3c;    /* Chữ xám đậm */
    --vin-black-text: #1A1A1A;   /* Chữ đen tuyền */

    /* QUY ĐỊNH MÀU CHÍNH CỦA WEB LÀ MÀU ĐỎ */
    --primary-color: var(--vin-red); 
    
    /* CÁC MÀU KHÁC */
    --blue-zalo: #0068ff;        /* Màu chuẩn Zalo */
    --text-color: #1A1A1A;
    --white-color: #fff;
    --color-grey: #f8f9fa;
    --icon-font: "Font Awesome 6 Free";
}

/* CSS CƠ BẢN */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text-color); }
a { color: var(--text-color); text-decoration: none; outline: 0; transition: all ease 0.4s; }
a:hover { color: var(--primary-color); } /* Link hover chuyển sang Đỏ */
img { max-width: 100%; }
.text-center { text-align: center; }

/* Bootstrap Ratio Helpers */
.ratio { position: relative; width: 100%; overflow: hidden; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }

/* ==========================================================================
   2. HEADER & MENU (ĐỒNG NHẤT MÀU ĐỎ)
   ========================================================================== */
#header { border-bottom: 4px solid var(--primary-color); } [cite: 35]
.logo-htv { background-image: url(/images/VinFast-logo.svg); display: inline-block; position: relative; overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: 100% auto; }
.navbar-nav { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; }

@media (min-width: 992px) {
    .site-logo { max-width: 300px; }
    .logo-htv { width: 280px; height: 50px; }
    .header-info { min-width: 620px; position: relative; z-index: 99999999; }
    .nav-trigger { display: none; }
    .navigation { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; position: relative; }
    .navigation ul a { display: block; position: relative; font-weight: 500; font-size: 1rem; color: var(--text-color) }
    .navigation > li > a { display: block; padding: .25rem 1rem; position: relative; font-weight: 500; font-size: .9rem; color: var(--text-color); text-transform: uppercase }
    .navigation > li:first-child > a { padding: .2rem 1rem }
    .navigation > li:first-child > a i { font-size: 1.2rem }
    .navigation > li > a:hover { color: var(--primary-color) }
    .navigation > li.sub-menu > a:after { content: "\2b"; display: inline-block; position: relative; font-family: var(--icon-font); margin-left: .25rem; font-weight: 600; top: 0; font-size: .9em; color: var(--white-color); transition: .3s ease-in-out }
    .navigation > li.sub-menu > a:hover:after { color: var(--primary-color); content: "\f068"; transform: rotate(180deg) }
    .navigation li { padding: .25rem 0 }
    .navigation li.sub-menu { position: relative }
    .navigation li.sub-menu > ul { padding-left: 0; margin-bottom: 0; list-style: none; position: absolute; text-align: left; left: 0; background-color: var(--white-color); min-width: 230px; width: max-content; padding: .5rem .75rem; left: -1rem; border: 0; box-shadow: 0 4px 15px rgba(1, 15, 28, 0.06); border-bottom: 2px solid var(--primary-color); border-radius: 0; }
    .navigation li.sub-menu > ul { top: 50%; visibility: hidden; opacity: 0; z-index: -1; transform: scaleY(0); transform-origin: top; transition: all .5s; }
    .navigation li.sub-menu:hover > ul { top: 100%; visibility: visible; opacity: 1; transform: scaleY(1); z-index: 99999 }
    .navigation li.sub-menu li { position: relative }
    .navigation li.sub-menu li a:before { content: "\f30b"; position: absolute; top: .25rem; left: .5rem; font-family: "Font Awesome 6 Free"; width: .5rem; height: .5rem; text-align: center; border-radius: 50%; display: inline-block; font-size: 1em; line-height: 1; color: var(--primary-color); font-weight: 900; opacity: 0; visibility: visible; transition: .3s ease-in-out }
    .navigation li.sub-menu li a:hover { padding-left: 1.25rem; color: var(--primary-color); }
    .navigation li.sub-menu li a:hover:before { visibility: visible; opacity: 1; left: 0 }
}

@media (max-width: 991px) {
    /* Mobile Menu styles - giữ nguyên cấu trúc, chỉ đổi màu */
    .site-logo { max-width: 220px; }
    .logo-htv { width: 200px; height: 40px; }
    .navigation { display: none; overflow: hidden; }
    .main-menu { margin-left: 50px; width: calc(100% - 50px); height: 2rem; color: var(--text-color); position: relative; }
    .nav-trigger span, .nav-trigger span::after, .nav-trigger span::before { background-color: var(--primary-color); }
    .navigation { position: absolute; top: 100%; right: -10px; width: 370px; padding: 1.5rem 1rem 1.5rem .7rem; z-index: 99999999; border: 2px solid var(--primary-color); border-width: 2px 0 2px 0; background-color: var(--white-color); }
    .navigation li a:hover { color: var(--primary-color); }
    .navigation .submenu-btn:after, .navigation .submenu-btn:before { background: var(--primary-color); }
}

/* ==========================================================================
   3. NỘI DUNG CHÍNH (BODY CONTENT)
   ========================================================================== */
.page-header { width: 100%; position: relative; padding: 2.5rem 0 2.5rem; background-size: cover; background-repeat: no-repeat; background-position: center center; color: var(--white-color); background-image: url('/Images/bg/footer-bg.jpg'); }
.page-header:after {background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;content: "";height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 0;}
.page-header h1 { font-size: 2rem; }
.breadcrumb a { color: var(--white-color); }

/* Sticky Subnav */
#subnav { position: -webkit-sticky; position: sticky; top: 0; z-index: 999; background-color: #fff; border-bottom: 1px solid rgba(60, 60, 60, .2); }
.nav-scrolling a:hover { color: var(--primary-color); }

/* Car Specs Fields */
.block-cars .field-specs { padding-top: 0.75rem; border-top: 1px solid #D9E1E2; } [cite: 69]
.field-buttons { display: flex; justify-content: center; gap: 1.875rem; margin-top: 1rem; }
.btn-field { position: relative; display: inline-block; min-width: 12.5rem; border-radius: 3px; padding: 1rem; overflow: hidden; z-index: 1; cursor: pointer; border: none; font-weight: 700; font-size: 0.75rem; line-height: 1rem; text-align: center; letter-spacing: 0.1rem; text-transform: uppercase; color: var(--white-color); }
.btn--primary--blue { color: var(--white-color); background: var(--primary-color); }
.btn--border--blue { border: 1px solid var(--primary-color); }

/* --- BẢNG GIÁ (PRICE PANEL) - CHUẨN HÃNG (XÁM/ĐEN) --- */
/* Sử dụng các biến màu xám/đen thay vì màu đỏ để tạo cảm giác chuyên nghiệp */
.price-row { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; } [cite: 79]
.price-panel { background-color: var(--white-color); display: flex; flex-direction: column; min-width: 340px; max-width: 520px; border: none; } [cite: 79]
.price-panel .header { background-color: var(--vin-gray-bg); color: var(--vin-gray-text); font-size: 1.5rem; font-weight: 400; padding: 15px 10px; text-align: center; margin-bottom: 25px; } [cite: 79]
.price-panel .price-body { display: flex; flex-direction: column; align-items: center; padding: 0 1rem; } [cite: 79]
.price-panel .price { font-size: 3rem; font-weight: 400; letter-spacing: -1px; line-height: 1; text-align: center; color: var(--vin-black-text); font-family: "Segoe UI Light", sans-serif; } [cite: 79]
.price-panel .price small { font-size: 1.2rem; color: #666; margin-left: 5px; font-weight: normal; text-transform: uppercase; } [cite: 79]
.price-block h2 { color: var(--vin-gray-text); font-size: 2rem; font-weight: 300; text-align: center; margin-top: 1rem; margin-bottom: 3rem; } [cite: 81]

/* Gallery & Box Car */
.gallery .client-gallery a span { display: block; position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.gallery .client-gallery a span img { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); }
.read-more-btn:hover { color: var(--primary-color) }

/* Color Picker */
.color-item div { align-items: center; border: 3px solid transparent; border-radius: 50%; cursor: pointer; display: flex; height: 60px; justify-content: center; width: 60px; } [cite: 92]
.color-item.active div { border-color: var(--primary-color); } /* Viền đỏ khi chọn màu */

/* Charging Station */
.box-item-sac > div:first-child { background-color: rgba(216, 44, 44, 0.05); padding: 2rem; }
.box-item-sac .sub-title { border-left: 4px solid var(--primary-color); padding-left: 1rem; }

/* ==========================================================================
   5. TOP 5 GIAO DỊCH (CẤU TRÚC DỌC - MÀU ĐỎ)
   ========================================================================== */
.sold-card { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #eee; transition: all 0.3s ease; }
.sold-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; border-color: var(--primary-color); }
.sold-card .card-img-top { width: 100%; height: 220px; object-fit: cover; object-position: center top; border-bottom: 1px solid #f0f0f0; }
.sold-card .card-title { font-size: 16px; font-weight: 700; margin-bottom: 5px; color: var(--primary-color); } /* Tên xe màu đỏ */
.sold-card .text-time { display: inline-block; background-color: #ffe5e5; color: var(--primary-color); font-weight: bold; font-size: 13px; padding: 6px 15px; border-radius: 50px; margin-top: 10px; border: 1px solid #ffcccc; box-shadow: 0 2px 5px rgba(192, 0, 0, 0.1); }
.sold-card:hover .text-time { background-color: var(--primary-color); color: #ffffff; border-color: var(--primary-color); transition: all 0.3s ease; }
@media (max-width: 576px) { .sold-card .card-img-top { height: 250px; } }

/* ==========================================================================
   PHẦN 7: BỘ NÚT LIÊN HỆ (PHIÊN BẢN SIÊU NỔI BẬT - HIGH CONTRAST)
   ========================================================================== */
.contact-call {
    position: fixed;
    bottom: 15px;
    left: 0;
right:0;
    z-index: 99;
    padding: 0 20px;
    pointer-events: none;
}

.contact-call .d-flex {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

.phone-btn, .callback-btn, .zalo-btn {
    pointer-events: auto;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
    /* Thêm bóng đổ đậm đà hơn cho tất cả các nút */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- 1. NÚT GỌI (ĐỎ - GIỮ NGUYÊN) --- */
.phone-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50px;
    padding: 4px 20px 4px 4px;
    height: 48px;
    animation: bounce-gentle 3s infinite;
}

.phone-icon-wrapper {
    width: 40px; height: 40px;
    background-color: #fff;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-right: 10px;
}

.phone-number {
    font-weight: 800; font-size: 1.1rem; line-height: 1; white-space: nowrap; color: #fff;
}

/* --- 2. NÚT YÊU CẦU GỌI LẠI (VÀNG CAM - SIÊU NỔI) --- */
.callback-btn {
    /* Đổi sang Gradient Vàng Cam để nổi bật giữa nền web */
    background: linear-gradient(45deg, #FFB800, #FF8C00); 
    color: #fff;
    border: 2px solid #fff; /* Viền trắng tách biệt */
    border-radius: 30px;
    padding: 0 20px;
    height: 45px;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2px;
    
    /* Hiệu ứng rung lắc liên tục mời gọi */
    animation: wobble-hor-bottom 2s infinite both; 
}
.callback-btn i {font-size: 22px;}
.callback-btn:hover {
    background: linear-gradient(45deg, #FF8C00, #FFB800); /* Đảo màu khi hover */
    transform: scale(1.05);
}

/* --- 3. NÚT ZALO (CÓ HIỆU ỨNG TỎA SÓNG XANH) --- */
.zalo-btn {
    width: 48px;
    height: 48px;
    background: var(--blue-zalo);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    position: relative; /* Để chứa hiệu ứng sóng */
}

/* Tạo vòng tròn sóng lan tỏa cho Zalo */
.zalo-btn::before, .zalo-btn::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: var(--blue-zalo);
    opacity: 0;
    z-index: -1; /* Nằm dưới icon */
    animation: pulse-blue 2s infinite; /* Sóng xanh */
}
.zalo-btn::after { animation-delay: 0.5s; }

.zalo-btn img { width: 28px; height: 28px; position: relative; z-index: 2; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .contact-call { padding: 0 10px; bottom: 10px; }
    
    /* Ép nút gọi tròn */
    .phone-number { display: none !important; }
    .phone-btn { padding: 0 !important; width: 45px !important; height: 45px !important; border-radius: 50%; justify-content: center; }
    .phone-icon-wrapper { margin: 0 !important; background: transparent; color: #fff; width: 100%; height: 100%; font-size: 22px; }

    /* Nút Zalo nhỏ lại xíu */
    .zalo-btn { width: 45px !important; height: 45px !important; }

    /* Nút Giữa gọn lại */
    .callback-btn { height: 40px; font-size: 11px; padding: 0 12px; white-space: nowrap; }
}

/* --- KEYFRAMES HIỆU ỨNG MỚI --- */
@keyframes bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Hiệu ứng rung lắc nghiêng cho nút Vàng */
@keyframes wobble-hor-bottom {
  0%, 100% { transform: translateX(0%); transform-origin: 50% 50%; }
  15% { transform: translateX(-4px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  45% { transform: translateX(-3px) rotate(-1.6deg); }
  60% { transform: translateX(1px) rotate(0.8deg); }
  75% { transform: translateX(-1px) rotate(-0.4deg); }
}

/* Hiệu ứng sóng xanh cho Zalo */
@keyframes pulse-blue {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   8. CÁC PHẦN CŨ (GIỮ NGUYÊN)
   ========================================================================== */
.blog-post figcaption { position: relative; padding: .5rem 1rem 1rem; background-color: var(--white-color); }
.blog-post .post-date { background-color: #27477d; text-transform: uppercase; position: absolute; font-size: .9rem; padding: .3rem .6rem; color: var(--white-color); top: -2rem; left: 0; height: 2rem; z-index: 1; }
.blog-post .post-date i { position: relative; background: var(--primary-color); color: var(--white-color); font-size: 1rem; display: inline-block; text-align: center; width: 2.5rem; height: 2rem; line-height: 1.9rem; margin-top: -.3rem; margin-left: -.6rem; margin-right: 1.4rem; }
.blog-post .post-date i::after { background-color: var(--primary-color); content: ""; height: 100%; position: absolute; top: 0; right: -.6rem; width: 1.2rem; transform: skew(30deg); }
.blog-post h4 a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.blog-post h4 { font-size: 1.1rem; line-height: 1.4; }
.blog-post .des { text-overflow: ellipsis; -webkit-line-clamp: 5; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.zoom-slow { position: relative; height: 0; padding-bottom: 62.5%; overflow: hidden; }
.zoom-slow > div { position: absolute; top: 50%; transform: translateY(-50%); }
.zoom-slow img { width: 100%; transition: all 10s; }
.zoom-slow:hover img { transform: scale(2); }
.pager { line-height: 1.7rem; }
.pager span span, .pager input, .pager span a { display: inline-block; min-width: 2rem; border-color: transparent; text-align: center; background: #27477d; color: var(--white-color) !important; }
.pager span span { background: var(--primary-color); }
.pager input { line-height: 1.3rem; vertical-align: .15rem; font-size: .8rem; }
.pager span a { background: #27477d; }
.post-meta { font-size: .8rem; color: #888; font-style: italic; margin-bottom: 1rem }
.post-meta i { padding-right: .3rem }
.post-meta time, .post-meta span { padding-right: 1rem }

/* ==========================================================================
   PHẦN ĐẶC QUYỀN VIP (LUXURY STYLE)
   ========================================================================== */
.luxury-section {
    position: relative;
    /* Thay ảnh nền nội thất xe VF9 tối màu vào đây */
    background: url('/Images/bg/footer-bg.jpg') no-repeat center center; 
    background-size: cover;
    background-attachment: fixed; /* Tạo hiệu ứng Parallax (Ảnh đứng yên khi cuộn) rất đẹp */
    padding: 80px 0;
    color: #fff;
    overflow: hidden;
}

/* Lớp phủ màu đen mờ để chữ nổi bật */
.overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Màu đen độ trong suốt 70% */
    z-index: 1;
}

.z-index-2 {
    position: relative;
    z-index: 2; /* Để nội dung nằm trên lớp phủ đen */
}

/* Phông chữ có chân (Serif) tạo cảm giác Sang trọng */
.sub-title-serif {
    font-family: "Times New Roman", Times, serif; /* Font có chân */
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 0;
    opacity: 0.9;
}

.main-title-serif {
    font-family: "Times New Roman", Times, serif;
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: 3px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Kẻ gạch ngang màu vàng kim */
.divider-gold {
    width: 80px;
    height: 3px;
    background: #c5a059; /* Màu vàng Gold sang trọng */
    margin-top: 20px;
}

/* Các ô lợi ích */
.privilege-item {
    padding: 20px;
    transition: transform 0.3s;
}

.privilege-item:hover {
    transform: translateY(-10px);
}

.icon-box-luxury {
    font-size: 3rem;
    color: #c5a059; /* Icon màu vàng Gold */
    margin-bottom: 20px;
}

.privilege-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.privilege-item p {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

/* Responsive trên Mobile */
@media (max-width: 768px) {
    .main-title-serif {
        font-size: 2.2rem;
    }
    .luxury-section {
        padding: 50px 0;
        background-attachment: scroll; /* Tắt hiệu ứng cuộn trên mobile cho nhẹ */
    }
}
/* ==========================================================================
   TIN TỨC & KHUYẾN MÃI (NEWS CARD) - STYLE HIỆN ĐẠI
   ========================================================================== */
.news-card {
    background: #fff;
    border: none; /* Bỏ viền để nhìn thoáng */
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Bóng đổ nhẹ nhàng */
}

.news-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px); /* Hiệu ứng bay lên tinh tế */
}

/* Ảnh thumbnail (Tỷ lệ 16:9) */
.news-img-wrapper {
    display: block;
    aspect-ratio: 16 / 9; /* Ép tỷ lệ 16:9 chuẩn cho tin tức */
    overflow: hidden;
}

.news-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.news-card:hover .news-thumb {
    transform: scale(1.08); /* Phóng to nhẹ ảnh khi hover */
}

.news-body {
    padding: 18px; /* Tăng padding cho thoáng */
}

/* Tiêu đề Bài viết */
.news-body h3 a {
    font-size: 1.15rem; /* Tiêu đề to và rõ hơn */
    font-weight: 800; /* Rất đậm */
    line-height: 1.3;
    color: var(--text-color);
    margin-bottom: 10px;
    /* Giới hạn 2 dòng chữ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-body h3 a:hover {
    color: var(--primary-color); /* Hover đổi màu đỏ */
}

/* Ngày đăng (Subdued/Tối giản) */
.news-date {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
}
.news-date i {
    color: var(--primary-color); /* Icon ngày tháng màu đỏ */
    margin-right: 5px;
}

/* Tóm tắt */
.news-summary {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    /* Giới hạn 3 dòng tóm tắt */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}