/* ==========================================================================
   VIETAGO — lớp giao diện dựng trên Bootstrap
   --------------------------------------------------------------------------
   Nạp SAU bootstrap.min.css + main.css trong Layout/app.blade.php.

   Giao diện các trang Vietago viết bằng utility của Bootstrap. File này CHỈ
   làm 3 việc, không dựng lại hệ thống class riêng:

     1. BÙ UTILITY — theme đang dùng Bootstrap 5.0.2, thiếu một số tiện ích
        sinh sau (fw-semibold 5.1, bg-opacity 5.1, rounded-4 5.3, *-subtle 5.3,
        object-fit 5.3...). Phần này chỉ THÊM class mới nên không phá trang cũ.
     2. BẢNG MÀU THƯƠNG HIỆU — teal/amber + typography.
     3. THÀNH PHẦN DÙNG LẠI — header, rail trái, thẻ sản phẩm, voucher.

   ⚠️ Không đặt style bám vào class riêng kiểu `.vga-voucher__title`: markup
   nằm ở blade và dùng utility Bootstrap. Class `vga-*` ở đây chỉ dành cho thứ
   Bootstrap không làm được (sticky rail, hiệu ứng hover, gradient).
   ========================================================================== */

:root {
    --vga-teal: #008894;
    --vga-teal-hover: #00707a;
    --vga-teal-light: #e6f3f4;
    --vga-amber: #E5A800;
    --vga-bg: #F5F7FA;
    /* Font chung toàn site: BeVietnamPro (@font-face khai ở main.css, file .ttf
       trong assets/fonts/Be_Vietnam_Pro). Không nạp font Google nào nữa. */
    --vga-font: "BeVietnamPro", sans-serif;

    /* Khoảng cách từ mép trên tới rail trái khi dính — JS đo header thật rồi ghi đè */
    --vga-side-top: 130px;
}

body {
    font-family: var(--vga-font);
    color: #334155;
    -webkit-font-smoothing: antialiased;
}

/* Nền xám chỉ áp cho trang thực sự có block Vietago, tránh đổi nền trang khác */
body:has(.vga-sec) {
    background-color: var(--vga-bg);
}

/* ==========================================================================
   1. BÙ UTILITY BOOTSTRAP 5.1 → 5.3
   ========================================================================== */

/* -- font-weight (5.1: fw-semibold, 5.3: fw-medium) -- */
.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-extrabold {
    font-weight: 800 !important;
}

/* -- cỡ chữ phụ (mẫu dùng fs-7/fs-8 tự định nghĩa) -- */
.fs-7 {
    font-size: .875rem !important;
}

.fs-8 {
    font-size: .75rem !important;
}

.tracking-tight {
    letter-spacing: -.025em;
}

.tracking-wide {
    letter-spacing: .05em;
}

/* -- bo góc lớn (5.3) -- */
.rounded-4 {
    border-radius: .75rem !important;
}

.rounded-5 {
    border-radius: 1rem !important;
}

.rounded-top-4 {
    border-top-left-radius: .75rem !important;
    border-top-right-radius: .75rem !important;
}

/* -- object-fit (5.3) -- */
.object-fit-cover {
    object-fit: cover;
}

/* -- bg-opacity (5.1). Định nghĩa lại vài màu nền theo rgba để nhận biến,
      giá trị mặc định giữ nguyên màu cũ nên không ảnh hưởng trang khác. -- */
.bg-dark {
    background-color: rgba(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
}

.bg-black {
    background-color: rgba(0, 0, 0, var(--bs-bg-opacity, 1)) !important;
}

.bg-white {
    background-color: rgba(255, 255, 255, var(--bs-bg-opacity, 1)) !important;
}

.bg-opacity-10 {
    --bs-bg-opacity: .1;
}

.bg-opacity-25 {
    --bs-bg-opacity: .25;
}

.bg-opacity-50 {
    --bs-bg-opacity: .5;
}

.bg-opacity-75 {
    --bs-bg-opacity: .75;
}

/* -- màu nền/viền nhạt (5.3) — chỉ khai những màu bản mẫu dùng -- */
.bg-primary-subtle {
    background-color: #cfe2ff !important;
}

.bg-secondary-subtle {
    background-color: #e2e3e5 !important;
}

.bg-success-subtle {
    background-color: #d1e7dd !important;
}

.bg-danger-subtle {
    background-color: #f8d7da !important;
}

.bg-warning-subtle {
    background-color: #fff3cd !important;
}

.bg-info-subtle {
    background-color: #cff4fc !important;
}

.border-primary-subtle {
    border-color: #9ec5fe !important;
}

.border-secondary-subtle {
    border-color: #c4c8cb !important;
}

/* -- opacity trung gian -- */
.opacity-90 {
    opacity: .9 !important;
}

/* ==========================================================================
   2. BẢNG MÀU THƯƠNG HIỆU
   ========================================================================== */

.text-teal {
    color: var(--vga-teal) !important;
}

.bg-teal {
    background-color: var(--vga-teal) !important;
}

.bg-teal-subtle {
    background-color: var(--vga-teal-light) !important;
}

.text-amber {
    color: var(--vga-amber) !important;
}

.bg-amber {
    background-color: var(--vga-amber) !important;
}

.border-teal {
    border-color: var(--vga-teal) !important;
}

.btn-teal {
    background-color: var(--vga-teal);
    border: 1px solid var(--vga-teal);
    color: #fff;
    transition: all .2s ease;
    font-size:14px;
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:active {
    background-color: var(--vga-teal-hover);
    border-color: var(--vga-teal-hover);
    color: #fff;
}

.btn-outline-teal {
    background-color: transparent;
    border: 1px solid var(--vga-teal);
    color: var(--vga-teal);
    transition: all .2s ease;
}

.btn-outline-teal:hover,
.btn-outline-teal:focus,
.btn-outline-teal:active {
    background-color: var(--vga-teal);
    color: #fff;
}

.bg-teal-gradient {
    background: linear-gradient(135deg, #008894 0%, #005a63 100%);
}

.bg-gradient-teal {
    background: linear-gradient(135deg, #008894 0%, #00a8b5 100%);
}

/* Bootstrap tô .nav-pills bằng --bs-primary; đổi sang teal cho khớp mẫu */
.nav-pills .nav-link {
    color: #475569;
    font-size: .875rem;
    transition: all .2s ease;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--vga-teal-light);
    color: var(--vga-teal);
    font-weight: 700;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

/* Thanh quản trị (`.admin-bar`) cũng là sticky-top:0 → JS đo chiều cao của nó
   rồi ghi vào --vga-header-top để header dính bên dưới thay vì chồng lên. */
.vga-header {
    top: var(--vga-header-top, 0);
    z-index: 1020;
}

/* Chấm xanh nhấp nháy ở thanh chào mừng */
.vga-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .7);
    animation: vga-pulse 1.8s infinite;
    flex-shrink: 0;
}

@keyframes vga-pulse {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Thanh menu chính: pill bo tròn, cuộn ngang trên mobile, ẩn thanh cuộn */
.vga-mainnav .nav-link {
    border-radius: 999px;
    white-space: nowrap;
    transition: all .2s ease;
}

.vga-mainnav .nav-link:hover,
.vga-mainnav .nav-link.active {
    background-color: var(--vga-teal-light);
    color: var(--vga-teal) !important;
}

.vga-mainnav .nav-link.active {
    font-weight: 700;
}

.vga-mainnav .nav {
    scrollbar-width: none;
}

.vga-mainnav .nav::-webkit-scrollbar {
    height: 0;
}

/* --- Menu động của CMS (walker trả ra <ul class="main-menu"> ... ) ---------
   Ép về dáng nav pill của Bootstrap. Menu con (`div.mega` hoặc `ul.subnav`)
   thả trôi trong luồng sẽ đội chiều cao thanh menu lên → phải cho ra absolute
   và chỉ hiện khi rê chuột. */
.vga-mainnav > .container-xl > ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    list-style: none;
    margin: 0;
    padding: 2px 0;
    scrollbar-width: none;
}

.vga-mainnav > .container-xl > ul::-webkit-scrollbar {
    height: 0;
}

.vga-mainnav li {
    position: relative;
    list-style: none;
}

.vga-mainnav a {
    display: block;
    padding: .5rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    color: #212529;
    text-decoration: none;
    transition: all .2s ease;
}

.vga-mainnav a:hover,
.vga-mainnav li.active > a,
.vga-mainnav li.current-menu-item > a {
    background-color: var(--vga-teal-light);
    color: var(--vga-teal);
}

/* main.css ẩn mục thứ 6 trở đi để nhường cho nút "..." do JS của theme dựng;
   thanh menu mới cuộn ngang được nên hiện lại hết. */
.vga-mainnav .main-menu > li.depth-0:nth-child(n+6) {
    display: block;
}

/* Menu con: panel thả xuống, chỉ hiện khi rê chuột vào mục cha */
.vga-mainnav li > .mega,
.vga-mainnav li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1030;
    min-width: 220px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.vga-mainnav li:hover > .mega,
.vga-mainnav li:hover > ul {
    display: block;
}

/* <ul> nằm trong .mega là danh sách thường, không phải panel thứ hai */
.vga-mainnav .mega > ul {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

/* Cấp 3 mở sang phải */
.vga-mainnav li li > ul {
    top: 0;
    left: 100%;
}

/* Liên kết nhanh (menu `topbar_right`) — CMS trả ra <ul><li><a> */
.vga-quicklinks ul {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vga-quicklinks ul ul {
    display: none;
}

.vga-quicklinks li > a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.vga-quicklinks li > a:hover {
    color: var(--vga-teal);
}

.vga-quicklinks li > a i,
.vga-quicklinks li > a img {
    color: var(--vga-teal);
    max-height: 16px;
}

/* Bộ chọn ngôn ngữ / tiền tệ nằm trên nền xanh nhạt, không phải nền tối như
   thanh topbar cũ của theme → ép lại màu chữ cho đọc được */
.vga-header .topbar-items {
    padding: 0;
}

.vga-header .topbar-items > li > a {
    color: inherit;
    font-size: .875rem;
    text-decoration: none;
}

.vga-header .topbar-items .dropdown-menu a {
    color: #212529;
}

/* Ô tìm kiếm trên header — main.css ép input.form-control cao 40px, giữ nguyên
   nhưng bỏ viền trong để liền mạch với input-group */
.vga-header .form-control:focus {
    box-shadow: none;
}

.vga-header .dropdown-menu {
    font-size: .875rem;
}

.min-w-0 {
    min-width: 0;
}

/* Khung bọc ngăn kéo menu mobile.
   CSS của ngăn kéo bám selector `.vne_wrap .vne_header .bc-menu-mobile` nên bắt
   buộc phải có thẻ `.vne_header` bọc ngoài; ở đây chỉ dùng làm neo, phải trung
   hoà nền/viền/bóng của nó kẻo hiện thành một dải trắng dưới header. */
.vga-mnav-host,
.vga-mnav-host.is-fixed {
    position: relative !important; /* main.js gắn .is-fixed cho mọi .vne_header khi cuộn */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    height: 0;
}

/* ==========================================================================
   4. KHUNG TRANG: RAIL TRÁI + CỘT NỘI DUNG
   --------------------------------------------------------------------------
   Mỗi block là một Livewire component anh em, không có thẻ cha chung, nên
   không dựng được `<div class="row"><div class="col-3">rail</div>...` bằng
   markup. Cách làm:
     • Block rail bọc trong .vga-side-outer — phủ tuyệt đối toàn bộ vùng block
       (.page-template-content), bên trong dùng đúng .container-xl > .row > .col-lg-3
       của Bootstrap nên bề rộng khớp lưới 3/9 chuẩn.
     • Rail dính bằng position:sticky (giống sticky-top của mẫu).
     • Mọi section khác đẩy sang phải bằng .vga-main (25%/75% = đúng col 3/9).
   Không có rail thì .vga-main tự chiếm trọn bề ngang.
   ========================================================================== */

.vga-sec {
    position: relative;
}

@media (min-width: 992px) {
    body:has(.vga-side-outer) .page-template-content {
        position: relative;
    }

    .vga-side-outer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        pointer-events: none;
    }

    .vga-side-outer .vga-side-col {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        pointer-events: auto;
    }

    .vga-side {
        position: sticky;
        top: var(--vga-side-top);
        max-height: calc(100vh - var(--vga-side-top) - 1rem);
        overflow-y: auto;
        scrollbar-width: none;
    }

    .vga-side::-webkit-scrollbar {
        width: 0;
    }

    /* 25% + 75% tính trên bề ngang .row = đúng bằng col-lg-3 + col-lg-9 */
    body:has(.vga-side-outer) .vga-main {
        flex: 0 0 auto;
        width: 75%;
        margin-left: 25%;
    }
}

/* ==========================================================================
   5. THẺ SẢN PHẨM & VOUCHER
   ========================================================================== */

.vga-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.vga-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, .1) !important;
}

.vga-card h3 {
    transition: color .2s ease;
}

.vga-card:hover h3 {
    color: var(--vga-teal) !important;
}

/* Cắt mô tả còn 2 dòng cho các thẻ cao bằng nhau */
.vga-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vga-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vga-hover-white:hover {
    color: #fff !important;
}

/* Dải banner trượt ngang: ẩn thanh cuộn, bám mép khi vuốt */
.vga-scroller {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.vga-scroller::-webkit-scrollbar {
    height: 0;
}

.vga-scroller > * {
    scroll-snap-align: start;
}

/* ==========================================================================
   6. HERO + HỘP TÌM KIẾM
   ========================================================================== */

.vga-hero--img {
    background-size: cover;
    background-position: center;
}

/* Có ảnh nền thì phủ gradient teal lên trên cho chữ trắng vẫn đọc được;
   không ảnh thì dùng .bg-teal-gradient nên không cần lớp phủ. */
.vga-hero--img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 136, 148, .88) 0%, rgba(0, 90, 99, .92) 100%);
}

.vga-hero > * {
    position: relative;
}

.vga-hero .display-6 {
    letter-spacing: -.02em;
}

.max-w-500 {
    max-width: 500px;
}

.max-w-600 {
    max-width: 600px;
}

/* Ô nhập trong hộp tìm kiếm: bỏ viền trái để dính liền icon */
.vga-search .input-group-text {
    border-right: 0;
}

.vga-search .form-control {
    border-left: 0;
}

.vga-search .form-control:focus {
    border-color: #DAE1E7;
    box-shadow: none;
}

/* Chip gợi ý điểm đến */
.vga-chip.active {
    background-color: var(--vga-teal) !important;
    border-color: var(--vga-teal) !important;
    color: #fff !important;
}

/* Bảng chọn số khách */
.vga-guests-pop {
    min-width: 280px;
}

/* ==========================================================================
   7. NÚT CHAT NỔI
   ========================================================================== */

.vga-floating-chat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1030;
    text-decoration: none;
}

@media (max-width: 575.98px) {
    .vga-floating-chat {
        right: 12px;
        bottom: 12px;
    }
}

/* ==========================================================================
   8. THẺ COMBO / SALE SLIDE (block "Combo,Sale Slide")
   --------------------------------------------------------------------------
   Markup ở Template/Views/frontend/blocks/combo/_item.blade.php. Ảnh nền +
   lớp phủ tối dần để chữ tag/title/short_desc đọc được. Item không nhập chữ
   thì không có .has-text → không phủ tối, hiện y như bản cũ chỉ có ảnh.
   ========================================================================== */

.sec-combo .combo-card {
    position: relative;
    display: block;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    height: 210px;
}

/* Ảnh trong thẻ carousel không bị bó chiều cao như 2 ô grid */
.sec-combo .slide-item .combo-card img {
    display: block;
}

/* Không có ảnh vẫn giữ khối màu để chữ không rơi ra nền trắng */
.sec-combo .combo-card.has-text:not(:has(img)) {
    min-height: 230px;
    background: linear-gradient(135deg, var(--vga-teal) 0%, #00636d 100%);
}

/* Phủ mờ: mọi thẻ có ảnh đều dịu lại một lớp mỏng cho ảnh bớt gắt */
.sec-combo .combo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 20, 26, .18);
    border-radius: 10px;
    pointer-events: none;
    transition: background-color .25s ease;
}

/* Thẻ có chữ thì phủ đậm dần từ dưới lên để đọc được nội dung */
.sec-combo .combo-card.has-text::after {
    background: linear-gradient(180deg, rgba(2, 20, 26, .55) 0%, rgba(2, 20, 26, .1) 45%, rgba(2, 20, 26, .75) 100%);
}

/* Hover: đậm thêm chút, ảnh phóng nhẹ */
.sec-combo .combo-card:hover::after {
    background: rgba(2, 20, 26, .3);
}

.sec-combo .combo-card.has-text:hover::after {
    background: linear-gradient(180deg, rgba(2, 20, 26, .65) 0%, rgba(2, 20, 26, .25) 45%, rgba(2, 20, 26, .85) 100%);
}

.sec-combo .combo-card img {
    transition: transform .4s ease;
}

.sec-combo .combo-card:hover img {
    transform: scale(1.04);
}

.sec-combo .combo-card-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}

.sec-combo .combo-card-tag {
    align-self: flex-start;
    margin-bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--vga-teal);
    color: #fff;
    font-size: 10px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.sec-combo .combo-card-tag.is-hot {
    background: #dc3545;
    color: #fff;
}

.sec-combo .combo-card-title {
    display: block;
    margin: 12px 0 4px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}

.sec-combo .banner-sale-large .combo-card-tag{
    font-size: 15px;
}

.sec-combo .banner-sale-small .combo-card-btn{
    padding: 8px 15px !important;
    font-size: 14px !important;
}

.sec-combo .sale-item.banner-sale-large .combo-card-title {
    font-size: 40px;
}

.sec-combo .combo-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

/* Đáy thẻ: thương hiệu bên trái, nút bên phải (fix cứng trong blade) */
.sec-combo .combo-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.sec-combo .combo-card-brand {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
    color: var(--vga-amber);
}

.sec-combo .combo-card-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 99px;
    background: #fff;
    color: var(--vga-teal);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color .2s ease, color .2s ease;
}

.sec-combo .combo-card-btn i {
    font-size: 12px;
}

.sec-combo .combo-card:hover .combo-card-btn {
    background: var(--vga-teal);
    color: #fff;
}

/* Ô nhỏ bên phải của kiểu Grid chỉ cao 155px → thu nhỏ chữ cho vừa */
.sec-combo .banner-sale-small .combo-card-body {
    padding: 12px 14px;
}

.sec-combo .banner-sale-small .combo-card-title {
    margin: 8px 0 2px;
    font-size: 16px;
}

.sec-combo .banner-sale-small .combo-card-desc {
    -webkit-line-clamp: 1;
    font-size: 13px;
}

.sec-combo .banner-sale-small .combo-card-foot {
    margin-top: 8px;
}

.sec-combo .banner-sale-small .combo-card-brand {
    font-size: 12px;
}

.sec-combo .banner-sale-small .combo-card-btn {
    padding: 5px 12px;
    font-size: 13px;
    gap: 6px;
}

@media (max-width: 767.98px) {
    .sec-combo .combo-card-body {
        padding: 12px 14px;
    }

    .sec-combo .combo-card-title,
    .sec-combo .banner-sale-small .combo-card-title {
        font-size: 16px !important;
        margin: 8px 0 2px;
    }

    .sec-combo .combo-card-desc {
        font-size: 13px;
    }

    .sec-combo .combo-card-foot {
        margin-top: 8px;
    }

    .sec-combo .combo-card-btn {
        padding: 5px 12px;
        font-size: 13px;
        gap: 6px;
    }
}

/* ==========================================================================
   9. THẺ MÃ GIẢM GIÁ (block `vga_vouchers` — "Vietago: Mã giảm giá")
   --------------------------------------------------------------------------
   Markup ở Template/Views/frontend/blocks/vietago/vouchers.blade.php. Phần bố
   cục đã dùng utility Bootstrap; ở đây chỉ style những thứ utility không có: ô
   biểu tượng gradient, chip mã, đường kẻ gạch nối.

   Tên gradient khớp VgaVoucherBlock::GRADIENTS — thêm/đổi tên ở đó thì thêm
   class `.grad-*` tương ứng bên dưới, thiếu class thì rơi về gradient teal.
   ========================================================================== */

.sec-coupon .vga-coupon-card {
    background: #fff;
    border: 1px solid #E8EDF2;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.sec-coupon .vga-coupon-card:hover {
    border-color: var(--vga-teal);
    box-shadow: 0 8px 22px rgba(0, 136, 148, .14);
    transform: translateY(-2px);
}

/* Ô biểu tượng vuông bo góc, 4 tone màu luân phiên theo bản mẫu */
.sec-coupon .vga-coupon-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(135deg, var(--vga-teal) 0%, #00636d 100%);
}

.sec-coupon .vga-coupon-icon.grad-teal-sky {
    background: linear-gradient(135deg, #00B3A4 0%, #00838F 100%);
}

.sec-coupon .vga-coupon-icon.grad-sky-indigo {
    background: linear-gradient(135deg, #5B6CFF 0%, #3B4BD8 100%);
}

.sec-coupon .vga-coupon-icon.grad-teal {
    background: linear-gradient(135deg, #22B07D 0%, #10916A 100%);
}

.sec-coupon .vga-coupon-icon.grad-sky-teal {
    background: linear-gradient(135deg, #2E9BF0 0%, #1B72C4 100%);
}

/* Biểu tượng dùng chung của theme mang class màu riêng (text-danger...), ở đây
   nền đã là gradient nên ép về trắng cho đọc được */
.sec-coupon .vga-coupon-icon i {
    color: #fff !important;
}

/* Đáy thẻ: kẻ gạch nối cho giống cuống vé */
.sec-coupon .vga-coupon-foot {
    padding-top: 12px;
    border-top: 1px dashed #DDE5EC;
}

/* Chip mã: chữ đơn cách, nền teal nhạt */
.sec-coupon .vga-coupon-code {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
    font-family: var(--vga-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
}

.sec-coupon .vga-coupon-foot .btn {
    border-radius: 8px;
}

@media (max-width: 575.98px) {
    .sec-coupon .vga-coupon-code {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* ==========================================================================
   10. THẺ ĐIỂM ĐẾN (block "Vietago: Cảm hứng điểm đến")
   --------------------------------------------------------------------------
   Markup ở Template/Views/frontend/blocks/vietago/destinations.blade.php.
   Ảnh phủ gradient để chữ trắng đọc được, chân thẻ nền trắng tách riêng.
   Tab lọc dùng chung .vga-chip (mục 6) nên ở đây chỉ chỉnh khoảng cách.
   ========================================================================== */

/* Hàng tab: cuộn ngang trên mobile thay vì xuống dòng vỡ bố cục */
.sec-destination .vga-dest-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

.sec-destination .vga-dest-tabs::-webkit-scrollbar {
    display: none;
}

.sec-destination .vga-chip {
    flex-shrink: 0;
    padding: 7px 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #64748B;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.sec-destination .vga-chip:hover {
    background: #EEF2F6;
    color: var(--vga-teal);
}

.sec-destination .vga-chip.active {
    background-color: var(--vga-teal) !important;
    color: #fff !important;
}

/* --- Thẻ --- */
.sec-destination .vga-dest-card {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    transition: transform .25s, box-shadow .25s;
}

.sec-destination .vga-dest-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .14);
}

.sec-destination .vga-dest-media {
    height: 200px;
    background: #E2E8F0;
    overflow: hidden;
}

.sec-destination .vga-dest-card:hover .vga-dest-media img {
    transform: scale(1.06);
}

.sec-destination .vga-dest-media img {
    transition: transform .45s ease;
}

/* Lớp phủ tối dần từ dưới lên cho tên/mô tả */
.sec-destination .vga-dest-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .78) 0%, rgba(15, 23, 42, .28) 42%, rgba(15, 23, 42, 0) 68%);
}

.sec-destination .vga-dest-badges {
    z-index: 2;
    padding: 10px;
}

.sec-destination .vga-dest-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.sec-destination .vga-dest-badge--hot {
    background: #E23B3B;
    color: #fff;
}

.sec-destination .vga-dest-caption {
    z-index: 2;
    padding: 12px 14px 14px;
}

.sec-destination .vga-dest-caption > span:first-child {
    font-size: 18px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(15, 23, 42, .45);
}

/* --- Chân thẻ --- */
.sec-destination .vga-dest-foot {
    padding: 10px 14px;
    border-top: 1px solid #EEF2F6;
}

.sec-destination .vga-dest-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
}

.sec-destination .vga-dest-meta--strong {
    color: #64748B;
    font-weight: 100;
}

.sec-destination .vga-dest-meta i {
    color: #94A3B8;
    font-size: 11px;
}

@media (max-width: 575.98px) {
    .sec-destination .vga-dest-media {
        height: 150px;
    }

    .sec-destination .vga-dest-caption > span:first-child {
        font-size: 15px;
    }

    .sec-destination .vga-dest-meta {
        font-size: 11px;
    }
}

/* ==========================================================================
   11. THẺ KHÁCH SẠN CỦA BLOCK "Hotel: List Items" (kiểu Địa điểm)
   --------------------------------------------------------------------------
   Markup ở Hotel/Views/frontend/ajax/block-search-result.blade.php (dùng chung
   cho lần tải đầu và cho nội dung ajax khi bấm tab địa điểm).
   ========================================================================== */

.sec-hotel .vga-hotel-ico {
    height: 26px;
    width: auto;
}

/* Hàng tab địa điểm: cuộn ngang trên mobile thay vì vỡ bố cục */
.sec-hotel .vga-hotel-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

.sec-hotel .vga-hotel-tabs::-webkit-scrollbar {
    display: none;
}

.sec-hotel .vga-hotel-tabs .vga-chip {
    flex-shrink: 0;
    padding: 7px 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #64748B;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.sec-hotel .vga-hotel-tabs .vga-chip:hover {
    background: #EEF2F6;
    color: var(--vga-teal);
}

.sec-hotel .vga-hotel-tabs .vga-chip.active {
    background-color: var(--vga-teal) !important;
    color: #fff !important;
}

/* --- Thẻ --- */
.sec-hotel .vga-hotel-card {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    transition: transform .25s, box-shadow .25s;
}

.sec-hotel .vga-hotel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .14);
}

.sec-hotel .vga-hotel-media {
    height: 200px;
    overflow: hidden;
    background: #E2E8F0;
}

.sec-hotel .vga-hotel-media img {
    transition: transform .45s ease;
}

.sec-hotel .vga-hotel-card:hover .vga-hotel-media img {
    transform: scale(1.06);
}

/* Nhãn góc trên trái: Khuyến mãi (teal) / Bán chạy (đỏ) */
.sec-hotel .vga-hotel-tag {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-bottom-right-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    background: var(--vga-teal);
}

.sec-hotel .vga-hotel-tag--hot {
    background: #E23B3B;
}

/* Nút yêu thích */
.sec-hotel .vga-hotel-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #CBD5E1;
    font-size: 14px;
    cursor: pointer;
    transition: color .2s, transform .2s;
}

.sec-hotel .vga-hotel-wish:hover {
    transform: scale(1.08);
    color: #E23B3B;
}

/* Class "active" do UserWishListController trả về khi đã lưu yêu thích */
.sec-hotel .vga-hotel-wish.active {
    color: #E23B3B;
}

.sec-hotel .vga-hotel-wish.loading {
    opacity: .6;
}

/* Hạng sao ở góc dưới ảnh */
.sec-hotel .vga-hotel-star {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.sec-hotel .vga-hotel-star i {
    color: var(--vga-amber);
}

/* --- Thân thẻ --- */
.sec-hotel .vga-hotel-body {
    padding: 12px 14px 14px;
    gap: 6px;
}

.sec-hotel .vga-hotel-place {
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.sec-hotel .vga-hotel-score {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.sec-hotel .vga-hotel-score i {
    color: var(--vga-amber);
    margin-right: 3px;
}

.sec-hotel .vga-hotel-score__count {
    color: #94A3B8;
    font-weight: 500;
}

.sec-hotel .vga-hotel-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.sec-hotel .vga-hotel-name a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--vga-teal);
    text-decoration: none;
}

.sec-hotel .vga-hotel-name a:hover {
    color: var(--vga-teal-hover);
}

.sec-hotel .vga-hotel-addr {
    color: #94A3B8;
    font-size: 12px;
}

.sec-hotel .vga-hotel-addr i {
    margin-right: 5px;
}

/* Chip tiện ích lấy từ "Điểm nổi bật" của khách sạn */
.sec-hotel .vga-hotel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sec-hotel .vga-hotel-chips span {
    padding: 3px 9px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    color: #64748B;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

/* --- Chân thẻ: giá + nút --- */
.sec-hotel .vga-hotel-foot {
    padding-top: 10px;
    border-top: 1px solid #EEF2F6;
    margin-top: 10px;
}

.sec-hotel .vga-hotel-old {
    display: block;
    color: #94A3B8;
    font-size: 12px;
}

.sec-hotel .vga-hotel-price {
    color: var(--vga-teal);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.sec-hotel .vga-hotel-unit {
    color: #94A3B8;
    font-size: 11px;
}

.sec-hotel .vga-hotel-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--vga-teal);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s;
}

.sec-hotel .vga-hotel-btn:hover {
    background: var(--vga-teal-hover);
    color: #fff;
}

@media (max-width: 575.98px) {
    .sec-hotel .vga-hotel-media {
        height: 150px;
    }

    .sec-hotel .vga-hotel-name {
        font-size: 14px;
    }

    .sec-hotel .vga-hotel-price {
        font-size: 16px;
    }

    .sec-hotel .vga-hotel-btn {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ==========================================================================
   12. THẺ TOUR CỦA BLOCK "Tour: List Items"
   --------------------------------------------------------------------------
   Markup ở Tour/Views/frontend/blocks/list-tour/_card.blade.php.
   Mặc định thẻ NGANG (ảnh trái, nội dung phải) cho lưới 2 cột; thêm
   .vga-tour-card--stack thì xếp dọc, dùng trong băng chuyền owl vì ô hẹp.
   ========================================================================== */

.sec-tour .vga-tour-ico {
    height: 26px;
    width: auto;
}

.sec-tour .vga-tour-link {
    flex-shrink: 0;
    color: var(--vga-teal);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sec-tour .vga-tour-link:hover {
    text-decoration: underline;
}

/* --- Thẻ --- */
.sec-tour .vga-tour-card {
    display: flex;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    transition: transform .25s, box-shadow .25s;
}

.sec-tour .vga-tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .14);
}

.sec-tour .vga-tour-media {
    position: relative;
    flex: 0 0 40%;
    max-width: 40%;
    min-height: 250px;
    overflow: hidden;
    background: #E2E8F0;
}

.sec-tour .vga-tour-media img {
    transition: transform .45s ease;
}

.sec-tour .vga-tour-card:hover .vga-tour-media img {
    transform: scale(1.06);
}

/* Nhãn góc trên trái ảnh */
.sec-tour .vga-tour-tag {
    position: absolute;
    top: 12px;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 0 999px 999px 0;
    background: #E23B3B;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

/* Chip thời lượng góc dưới ảnh */
.sec-tour .vga-tour-duration {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.sec-tour .vga-tour-duration i {
    color: var(--vga-amber);
}

/* --- Thân thẻ --- */
.sec-tour .vga-tour-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
}

.sec-tour .vga-tour-place {
    color: var(--vga-teal);
    font-size: 13px;
    font-weight: 600;
}

.sec-tour .vga-tour-place i {
    margin-right: 5px;
}

.sec-tour .vga-tour-score {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.sec-tour .vga-tour-score i {
    color: var(--vga-amber);
    margin-right: 3px;
}

.sec-tour .vga-tour-score__count {
    color: #94A3B8;
    font-weight: 500;
}

.sec-tour .vga-tour-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.sec-tour .vga-tour-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1E293B;
    text-decoration: none;
}

.sec-tour .vga-tour-name a:hover {
    color: var(--vga-teal);
}

/* Dòng ngày khởi hành: bọc luôn ô select cho giống một dòng chữ */
.sec-tour .vga-tour-depart {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748B;
    font-size: 13px;
}

.sec-tour .vga-tour-depart i {
    color: #94A3B8;
}

.sec-tour .vga-tour-depart select {
    max-width: 100%;
    padding: 2px 22px 2px 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748B;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

.sec-tour .vga-tour-depart select:hover {
    background: #F1F5F9;
    color: var(--vga-teal);
}

/* Gạch đầu dòng "Điểm nổi bật" */
.sec-tour .vga-tour-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sec-tour .vga-tour-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.sec-tour .vga-tour-bullets i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--vga-teal);
    font-size: 13px;
}

.sec-tour .vga-tour-bullets span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Chân thẻ: giá + nút --- */
.sec-tour .vga-tour-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #EEF2F6;
}

.sec-tour .vga-tour-price-wrap p {
    margin: 0;
}

.sec-tour .vga-tour-price-wrap .regular_price del {
    color: #94A3B8;
    font-size: 13px;
}

.sec-tour .vga-tour-price-wrap .sale_price ins {
    color: var(--vga-teal);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.sec-tour .vga-tour-unit {
    display: block;
    color: #94A3B8;
    font-size: 12px;
}

.sec-tour .vga-tour-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--vga-teal);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s;
}

.sec-tour .vga-tour-btn:hover {
    background: var(--vga-teal-hover);
    color: #fff;
}

/* --- Biến thể xếp dọc (băng chuyền) --- */
.sec-tour .vga-tour-card--stack {
    flex-direction: column;
}

.sec-tour .vga-tour-card--stack .vga-tour-media {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 0;
    height: 190px;
}

.sec-tour .vga-tour-card--stack .vga-tour-name {
    font-size: 15px;
}

.sec-tour .vga-tour-card--stack .vga-tour-price-wrap .sale_price ins {
    font-size: 18px;
}

.sec-tour .vga-tour-card--stack .vga-tour-btn {
    padding: 8px 12px;
    font-size: 13px;
}

/* --- Màn nhỏ: thẻ ngang cũng chuyển thành dọc cho dễ đọc --- */
@media (max-width: 575.98px) {
    .sec-tour .vga-tour-card {
        flex-direction: column;
    }

    .sec-tour .vga-tour-media {
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 0;
        height: 170px;
    }

    .sec-tour .vga-tour-name {
        font-size: 15px;
    }

    .sec-tour .vga-tour-price-wrap .sale_price ins {
        font-size: 18px;
    }

    .sec-tour .vga-tour-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}


/* ==========================================================================
   13. BANNER KHUYẾN MÃI (block "Vietago: Banner khuyến mãi")
   --------------------------------------------------------------------------
   Markup ở Template/Views/frontend/blocks/vietago/_poster.blade.php.

   HAI CÁCH DÙNG ẢNH, khác nhau theo tông đúng như bản thiết kế:
     .is-split   — nền là MÀU, ảnh là khối bo góc bên phải    (Vàng cam, Kem, Trắng)
     .is-overlay — ảnh PHỦ KÍN banner, lớp màu của tông đè lên (Navy, Teal)

   Mỗi tông khai lại bộ biến --p-*; phần bố cục dùng chung bên dưới.
   ========================================================================== */

.sec-poster .vga-poster {
    --p-bg: linear-gradient(135deg, #FFC93C 0%, #FFB300 55%, #FFA000 100%);
    --p-overlay: none;
    --p-fg: #16213E;
    --p-muted: rgba(22, 33, 62, .78);
    --p-hl: #1D4ED8;
    --p-title-size: 30px;
    --p-btn-bg: #1D4ED8;
    --p-btn-fg: #fff;
    --p-chip-top-bg: #1D4ED8;
    --p-chip-top-fg: #fff;
    --p-chip-bg: #fff;
    --p-chip-fg: #16213E;
    --p-chip-bd: transparent;
    --p-chip-icon: #E8232A;
    position: relative;
    display: block;
    align-items: stretch;
    height: 230px;
    padding: 18px 20px;
    background: var(--p-bg);
    color: var(--p-fg);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    transition: transform .25s, box-shadow .25s;
    border-radius: 14px;
    /* Bắt buộc đi kèm border-radius: ảnh của kiểu overlay phủ kín banner
       (position:absolute; inset:0) và vuông góc, nên nếu không cắt theo bo góc của cha
       thì bốn góc bị ảnh đè lên — nhìn như radius không có tác dụng.
       Không sợ mất bóng đổ: overflow chỉ cắt phần tử CON, bóng của chính banner nằm ngoài. */
    overflow: hidden;
}

.sec-poster .vga-poster:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
    color: var(--p-fg);
}

/* --- Tông màu --- */
.sec-poster .vga-poster--navy {
    --p-bg: #003399e6;
    --p-overlay: linear-gradient(
        to right,
        #003399e6 0%,
        #0047ffa6 50%,
        rgb(0 136 148 / 50%) 100%
    );
    --p-fg: #fff;
    --p-muted: rgba(255, 255, 255, .82);
    --p-hl: #FFD400;
    --p-title-size: 21px;
    --p-btn-bg: #FFE100;
    --p-btn-fg: #0B1F4B;
    --p-chip-top-bg: #1D4ED8;
    --p-chip-top-fg: #fff;
    --p-chip-bg: rgba(4, 14, 38, .72);
    --p-chip-fg: #fccf30;
    --p-chip-bd: transparent;
    --p-chip-icon: #FFD400;
}

.sec-poster .vga-poster--teal {
    --p-bg: var(--vga-teal);
    --p-overlay: linear-gradient(90deg, rgba(0, 99, 109, .96) 0%, rgba(0, 136, 148, .88) 45%, rgba(0, 136, 148, .35) 100%);
    --p-fg: #fff;
    --p-muted: rgba(255, 255, 255, .88);
    --p-hl: #FFD400;
    --p-title-size: 21px;
    --p-btn-bg: var(--vga-teal);
    --p-btn-fg: #fff;
    --p-chip-top-bg: #00636D;
    --p-chip-top-fg: #fff;
    --p-chip-bg: #fff;
    --p-chip-fg: #16213E;
    --p-chip-bd: transparent;
    --p-chip-icon: var(--vga-teal);
}
.sec-poster .vga-poster--teal .vga-poster-brand{
    font-size:13px;
    background: #008894;
    padding: 2px 10px;
    border-radius: 10px;
    line-height: 20px;
}

.sec-poster .vga-poster--cream {
    --p-bg: #FDF3E3;
    --p-fg: #16213E;
    --p-muted: #64748B;
    --p-hl: #E23B3B;
    --p-title-size: 22px;
    --p-btn-bg: #1D4ED8;
    --p-btn-fg: #fff;
    --p-chip-top-bg: #FDE2E2;
    --p-chip-top-fg: #E23B3B;
    --p-chip-bg: #fff;
    --p-chip-fg: #16213E;
    --p-chip-bd: rgba(15, 23, 42, .12);
    --p-chip-icon: #E23B3B;
}

.sec-poster .vga-poster--cream .vga-poster-badge{
    background: #ff9900 !important;
    padding: 2px 10px;
}

.sec-poster .vga-poster--cream .vga-poster-title{
    color:#E23B3B;
    width: 80%;
}

.sec-poster .vga-poster--cream .vga-poster-title .hl{
    color:#1D4ED8;
}

.sec-poster .vga-poster--white {
    --p-bg: #fff;
    --p-fg: #16213E;
    --p-muted: #64748B;
    --p-hl: var(--vga-teal);
    --p-title-size: 25px;
    --p-btn-bg: var(--vga-teal);
    --p-btn-fg: #fff;
    --p-chip-top-bg: var(--vga-teal-light);
    --p-chip-top-fg: var(--vga-teal);
    --p-chip-bg: #F8FAFC;
    --p-chip-fg: #334155;
    --p-chip-bd: #E2E8F0;
    --p-chip-icon: var(--vga-teal);
}

/* --- Cột chữ --- */
.sec-poster .vga-poster-main {
    position: relative;
    /* trên cả ảnh (z-index 0) lẫn lớp phủ màu (z-index 1) */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.sec-poster .vga-poster-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sec-poster .vga-poster-brand {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
}

/* Cụm chữ bọc <span class="hl"> — dùng cho ".com" của thương hiệu và cụm nhấn trong tiêu đề */
.sec-poster .vga-poster-brand .hl,
.sec-poster .vga-poster-title .hl {
    color: var(--p-hl);
}

/* Đẩy sang phải bằng margin chứ không phải space-between: banner không nhập
   thương hiệu thì nhãn vẫn phải nằm góc phải như bản mẫu */
.sec-poster .vga-poster-badge {
    flex-shrink: 0;
    margin-left: auto;
    padding: 5px 14px;
    border-radius: 999px;
    background: #E8232A;
    color: #fff;
    font-size: 11px;
    font-weight: 00;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sec-poster .vga-poster-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 4px 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sec-poster .vga-poster-chip--top {
    background: var(--p-chip-top-bg);
    color: var(--p-chip-top-fg);
    font-size: 10px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.sec-poster .vga-poster-chip--bottom {
    background: var(--p-chip-bg);
    color: var(--p-chip-fg);
    border: 1px solid var(--p-chip-bd);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.sec-poster .vga-poster-chip--bottom i {
    color: var(--p-chip-icon);
}

/* Dòng nhấn ngay trên tiêu đề (bản mẫu navy: ĐÀI LOAN – TRENDING 2026) */
.sec-poster .vga-poster-eyebrow {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: -3px;
    color: var(--p-hl);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.sec-poster .vga-poster-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--p-title-size);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.3px;
}

.sec-poster .vga-poster-title.is-upper {
    text-transform: uppercase;
}

.sec-poster .vga-poster-sub {
    color: var(--p-muted);
    font-size: 11px;
    font-weight: 600;
}

.sec-poster .vga-poster-btn {
    padding: 7px 26px;
    border-radius: 999px;
    background: var(--p-btn-bg);
    color: var(--p-btn-fg);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
    position: absolute;
    bottom: 10px;
    /* nút nằm ngoài cột chữ nên phải tự nâng lên trên ảnh (z-index 0) và lớp phủ màu (1) */
    z-index: 2;
}

.sec-poster .vga-poster:hover .vga-poster-btn {
    filter: brightness(1.06);
}

/* --- Kiểu 1: ảnh là khối bo góc bên phải (tông nền sáng) --- */

.vga-poster--amber .vga-poster-chip--bottom{
    color: #e7000b !important;
    font-size: 0.75rem;
}

.vga-poster--amber .vga-poster-media{
    position: absolute !important;
    right:10px;
    bottom:10px;
    rotate: 3deg;
}

.sec-poster .is-split .vga-poster-media {
    flex: 0 0 40%;
    max-width: 40%;
    align-self: center;
    height: 66%;
    order: 2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}

.sec-poster .is-split .vga-poster-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Kiểu 2: ảnh phủ kín, lớp màu của tông đè lên (tông nền tối) --- */
.sec-poster .is-overlay .vga-poster-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: 0;
}

.sec-poster .is-overlay .vga-poster-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lớp phủ màu gắn vào CHÍNH banner, không gắn vào khối ảnh: ảnh tải chậm (hoặc
   lazy chưa tới lượt) thì lớp phủ vẫn có ngay từ khi trang vẽ, banner không bị
   loé nền trơn rồi mới tối lại. */
.sec-poster .is-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--p-overlay);
    pointer-events: none;
}

/**kiểu 3*/
.vga-poster.vga-poster--cream .vga-poster-media{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50% !important;
    min-width: 50% !important;
    border-radius:  0 !important;
}
/* Ảnh phủ kín thì cột chữ chỉ chiếm phần trái, chừa bên phải để lộ ảnh */
.sec-poster .is-overlay .vga-poster-main {
    max-width: 100%;
}

/* Owl để `.owl-carousel { display:none }` cho tới khi khởi tạo xong. Trong trình sửa
   Page Builder, HTML được nhồi vào iframe mà không tải lại trang nên có lúc owl chưa
   kịp chạy → cả khối biến mất, tưởng block hỏng. Chưa khởi tạo thì hiện tạm dạng
   hàng cuộn ngang; owl chạy xong (thêm .owl-loaded) là quy tắc này hết hiệu lực. */
.sec-poster .vga-poster-slide:not(.owl-loaded) {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sec-poster .vga-poster-slide:not(.owl-loaded)::-webkit-scrollbar {
    display: none;
}

/* Banner nhấc lên 3px khi rê chuột (xem .vga-poster:hover). Slot KHÔNG được cắt tràn:
   để overflow:hidden thì mép trên banner bị xén, mép dưới hở ra một vệt nền và bóng đổ
   mất sạch. Bo góc đã nằm sẵn trên chính banner nên slot không cần bo lại.
   Chừa 8px trên/dưới làm chỗ cho banner nhấc lên và cho bóng đổ, rồi bù lại bằng margin
   âm ở băng chuyền để chiều cao khối nhìn không đổi. */
.sec-poster .vga-poster-slide .vga-poster-slot {
    padding: 8px 0;
}

.sec-poster .vga-poster-slide {
    margin-top: -8px;
    margin-bottom: -8px;
}

/* Owl cắt slide bằng overflow:hidden trên .owl-stage-outer — cắt cả chiều dọc nên bóng đổ
   và 3px nhấc lên vẫn bị xén. Chỉ cần cắt theo chiều NGANG; clip thay hidden để không sinh
   ngữ cảnh cuộn (hidden ở một trục sẽ ép trục kia thành auto). */
.sec-poster .vga-poster-slide .owl-stage-outer {
    overflow-x: clip;
    overflow-y: visible;
}

.sec-poster .vga-poster-slide:not(.owl-loaded) > .vga-poster-slot {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}

@media (max-width: 991.98px) {
    .sec-poster .vga-poster-slide:not(.owl-loaded) > .vga-poster-slot {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 575.98px) {
    .sec-poster .vga-poster-slide:not(.owl-loaded) > .vga-poster-slot {
        flex-basis: 85%;
        max-width: 85%;
    }
}

/* --- Nút mũi tên của băng chuyền: tròn trắng, đặt hai bên --- */
.sec-poster .vga-poster-slide .owl-nav {
    margin: 0;
}

.sec-poster .vga-poster-slide .owl-nav button.owl-prev,
.sec-poster .vga-poster-slide .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    transition: background-color .2s, color .2s;
}

.sec-poster .vga-poster-slide .owl-nav button.owl-prev:hover,
.sec-poster .vga-poster-slide .owl-nav button.owl-next:hover {
    background: var(--vga-teal);
    color: #fff;
}

.sec-poster .vga-poster-slide .owl-nav button.owl-prev {
    left: -19px;
}

.sec-poster .vga-poster-slide .owl-nav button.owl-next {
    right: -19px;
}

.sec-poster .vga-poster-slide .owl-nav button.disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 1399.98px) {
    .sec-poster .vga-poster-slide .owl-nav button.owl-prev {
        left: 6px;
    }

    .sec-poster .vga-poster-slide .owl-nav button.owl-next {
        right: 6px;
    }
}

@media (max-width: 991.98px) {
    .sec-poster .vga-poster {
        --p-title-size: 22px;
    }
}

@media (max-width: 767.98px) {
    .sec-poster .vga-poster {
        --p-title-size: 20px;
        height: 210px;
        padding: 15px 16px;
        gap: 10px;
    }

    .sec-poster .is-overlay .vga-poster-main {
        max-width: 78%;
    }

    .sec-poster .vga-poster-btn {
        padding: 9px 18px;
        font-size: 12px;
    }

    .sec-poster .vga-poster-brand {
        font-size: 15px;
    }
}


/* ==========================================================================
   14. BANNER ĐẦU TRANG (.hero_slide) — HIỆN NGAY, KHÔNG CHỜ JAVASCRIPT
   --------------------------------------------------------------------------
   Owl để `.owl-carousel { display:none }` tới khi khởi tạo xong, mà jQuery +
   owl.carousel.min.js + main.js đều nằm cuối body → banner đầu trang chỉ hiện
   sau khi tải và chạy xong chỗ JS đó. Người xem nhìn một khoảng trống ở đúng
   chỗ đập vào mắt nhất, rồi banner mới nhảy vào.

   Chưa khởi tạo thì hiện sẵn SLIDE ĐẦU (các slide sau ẩn để không xổ dọc);
   owl chạy xong sẽ thêm .owl-loaded và quy tắc này tự hết hiệu lực.
   Chiều cao đã được .banner-item giữ chỗ bằng aspect-ratio nên không nhảy layout.
   ========================================================================== */

.hero_slide:not(.owl-loaded) {
    display: block;
}

.hero_slide:not(.owl-loaded) > .slide-item + .slide-item {
    display: none;
}

/* --------------------------------------------------------------------------
   14.1 Lớp phủ mờ đậm hơn trên ảnh băng chuyền (.hero_slide)
   main.css đã có lớp phủ ở `.sec-banner-search .banner-item::after` nhưng còn
   nhạt (0.55 → 0.12), ảnh sáng màu làm chữ trắng của tiêu đề/mô tả khó đọc.
   Thêm một bậc đậm hơn và giữ đủ tối tới tận đáy ảnh.
   Chọn selector dài hơn (thêm .hero_slide) để chắc chắn đè được main.css,
   không phụ thuộc thứ tự nạp file.
   -------------------------------------------------------------------------- */

.sec-banner-search .hero_slide .banner-item::after {
    background: linear-gradient(180deg,
    rgba(0, 0, 0, .72) 0%,
    rgba(0, 0, 0, .60) 45%,
    rgba(0, 0, 0, .42) 100%);
}

/* Điện thoại: khối chữ + hộp tìm kiếm nằm đè lên toàn bộ ảnh nền nên phủ đều */
@media (max-width: 991.98px) {
    .sec-banner-search .hero_slide .banner-item::after {
        background: linear-gradient(180deg,
        rgba(0, 0, 0, .74) 0%,
        rgba(0, 0, 0, .66) 100%);
    }
}


/* ==========================================================================
   15. CAM KẾT & ĐÁNH GIÁ (block "Vietago: Cam kết & Đánh giá")
   --------------------------------------------------------------------------
   Markup ở Template/Views/frontend/blocks/vietago/reviews.blade.php.
   Hai phần đi liền nhau trong một section: hàng thẻ cam kết ở trên, khối đánh
   giá khách hàng ở dưới.
   ========================================================================== */

/* --- Hàng thẻ cam kết --- */
.sec-review .vga-trust-row {
    margin-bottom: 44px;
}

.sec-review .vga-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #E3EFF0;
    border-radius: 14px;
    background: linear-gradient(135deg, #F1FAF9 0%, #FFFFFF 60%);
}

.sec-review .vga-trust-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--vga-teal);
    color: #fff;
    font-size: 18px;
}

/* SVG admin dán có thể mang width/height riêng — ép về một cỡ cho ba ô đều nhau.
   SVG dùng currentColor thì nét tự trắng theo màu chữ của ô. */
.sec-review .vga-trust-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Icon có sẵn (Font Awesome) đi kèm class màu riêng của theme — ép trắng cho nổi trên nền đậm */
.sec-review .vga-trust-icon i {
    color: #fff !important;
}

.sec-review .vga-trust-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sec-review .vga-trust-title {
    color: #16213E;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.sec-review .vga-trust-desc {
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
}

/* --- Đầu khối đánh giá --- */
.sec-review .vga-review-head {
    margin-bottom: 22px;
}

.sec-review .vga-review-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--vga-teal);
    font-size: 13px;
    font-weight: 800;
}

.sec-review .vga-review-eyebrow i {
    color: var(--vga-amber);
}

.sec-review .vga-review-title {
    margin: 0;
    color: #16213E;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.sec-review .vga-review-sub {
    margin: 6px 0 0;
    color: #64748B;
    font-size: 14px;
}

/* --- Thẻ nhận xét --- */
.sec-review .vga-review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #EEF2F6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* Dấu ngoặc kép mờ ở góc phải trên, chỉ để trang trí */
.sec-review .vga-review-quote {
    position: absolute;
    top: 18px;
    right: 20px;
    color: var(--vga-teal);
    opacity: .18;
    font-size: 28px;
}

.sec-review .vga-review-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    color: #F5A623;
    font-size: 15px;
}

.sec-review .vga-review-text {
    margin: 0 0 18px;
    color: #334155;
    font-size: 14px;
    line-height: 1.65;
}

.sec-review .vga-review-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #EEF2F6;
}

.sec-review .vga-review-avatar {
    flex-shrink: 0;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    object-fit: cover;
}

.sec-review .vga-review-avatar--text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
    font-weight: 800;
}

.sec-review .vga-review-name {
    display: block;
    overflow: hidden;
    color: #16213E;
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sec-review .vga-review-target {
    display: block;
    overflow: hidden;
    color: var(--vga-teal);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .sec-review .vga-trust-row {
        margin-bottom: 30px;
    }

    .sec-review .vga-trust-card {
        padding: 14px 16px;
        gap: 12px;
    }

    .sec-review .vga-trust-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .sec-review .vga-trust-icon svg {
        width: 19px;
        height: 19px;
    }

    .sec-review .vga-review-title {
        font-size: 21px;
    }

    .sec-review .vga-review-card {
        padding: 18px;
    }
}


/* ==========================================================================
   16. CHÂN TRANG (Layout/parts/footer.blade.php)
   --------------------------------------------------------------------------
   Nền xanh navy đậm, chữ sáng. Cột đầu là thông tin doanh nghiệp (Cài đặt →
   Chân trang), các cột sau là Menu (Giao diện → Menu), dưới cùng là dòng bản
   quyền + ô tên đối tác thanh toán.

   Đặt màu ngay trên .vga-footer để đè nền cũ của main.css mà không phải !important.
   ========================================================================== */

.vga-footer {
    --f-bg: #10254A;
    --f-fg: #E7EDF7;
    --f-muted: #9FB0CC;
    --f-line: rgba(255, 255, 255, .09);

    background: var(--f-bg);
    color: var(--f-fg);
}

/* main.css tô nền chân trang bằng ảnh footer.jpg với selector 3 lớp
   (.vne_wrap .vne_footer .main-footer) nên phải viết đủ đặc hiệu để gỡ ảnh đó ra,
   nếu không màu navy bên trên không bao giờ nhìn thấy. */
.vne_wrap .vne_footer.vga-footer .main-footer,
.vga-footer .main-footer {
    padding: 52px 0 34px;
    background: transparent none;
}

/* Số cột menu thay đổi theo số menu admin gán (2, 3 hay 4). Lưới Bootstrap cố định
   col-lg-2 nên 3 menu sẽ hụt 2 ô bên phải, 4 menu thì cột quá hẹp làm tiêu đề vỡ 2 dòng.
   Cho cột thông tin giữ chiều rộng cố định, các cột menu chia đều phần còn lại. */
@media (min-width: 992px) {
    .vga-footer .vga-footer-row {
        display: flex;
        flex-wrap: wrap;
    }

    .vga-footer .vga-footer-col--info {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .vga-footer .vga-footer-col--menu {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }
}

.vga-footer .mt-footer {
    margin-top: 0;
}

/* --- Cột thông tin doanh nghiệp --- */
.vga-footer .vga-footer-logo {
    max-height: 46px;
    width: auto;
    margin-bottom: 16px;
}

.vga-footer .vga-footer-company {
    margin: 0 0 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.vga-footer .vga-footer-about {
    margin: 0 0 10px;
    color: var(--f-muted);
    font-size: 13px;
    line-height: 1.75;
}

.vga-footer .vga-footer-contact {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vga-footer .vga-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--f-muted);
    font-size: 13px;
    line-height: 1.6;
}

.vga-footer .vga-footer-contact i {
    flex-shrink: 0;
    margin-top: 3px;
    width: 16px;
    text-align: center;
    color: #4FD1C5;
    font-size: 13px;
}

.vga-footer .vga-footer-contact a {
    color: var(--f-muted);
    text-decoration: none;
    transition: color .2s;
}

.vga-footer .vga-footer-contact a:hover {
    color: #fff;
}

/* --- Mạng xã hội --- */
.vga-footer .vga-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.vga-footer .vga-social {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--f-fg);
    font-size: 15px;
    text-decoration: none;
    transition: background-color .2s, transform .2s, color .2s;
}

.vga-footer .vga-social:hover {
    transform: translateY(-2px);
    color: #fff;
}

.vga-footer .vga-social--facebook:hover  { background: #1877F2; }
.vga-footer .vga-social--zalo:hover      { background: #0068FF; }
.vga-footer .vga-social--youtube:hover   { background: #FF0000; }
.vga-footer .vga-social--tiktok:hover    { background: #000; }
.vga-footer .vga-social--instagram:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }

/* --- Nút chứng nhận (Bộ Công Thương, Thương mại điện tử) ---
   Nằm ngay dưới cột thông tin, không dính hàng đối tác thanh toán ở dòng bản quyền. */
.vga-footer .vga-footer-certs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.vga-footer .vga-footer-cert,
.vga-footer .vga-footer-cert img {
    max-height: 44px;
    width: auto;
}

.vga-footer a.vga-footer-cert {
    display: inline-flex;
    align-items: center;
    opacity: .92;
    transition: opacity .2s, transform .2s;
}

.vga-footer a.vga-footer-cert:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* --- Cột liên kết dựng từ Menu --- */
.vga-footer .nav-footer .title {
    margin-bottom: 18px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.vga-footer .vga-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vga-footer .vga-footer-links a {
    color: var(--f-muted);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition: color .2s;
}

.vga-footer .vga-footer-links a:hover {
    color: #fff;
}

/* Nhãn chứng nhận dưới cột cuối */
.vga-footer .vga-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 7px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00B3A4 0%, var(--vga-teal) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Nội dung cũ chưa chuyển đổi cũng phải đọc được trên nền tối */
.vga-footer .nav-footer .context,
.vga-footer .nav-footer .context p {
    color: var(--f-muted);
    font-size: 14px;
}

.vga-footer .nav-footer .context a {
    color: var(--f-muted);
    text-decoration: none;
}

.vga-footer .nav-footer .context a:hover {
    color: #fff;
}

/* --- Dòng cuối --- */
.vga-footer .copy-right {
    padding: 20px 0 24px;
    border-top: 1px solid var(--f-line);
}

.vga-footer .copy-right,
.vga-footer .copy-right p {
    color: var(--f-muted);
    font-size: 13px;
}

.vga-footer .vga-footer-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.vga-footer .vga-footer-badges img {
    max-height: 30px;
    width: auto;
}

.vga-footer .vga-footer-paylabel {
    color: var(--f-muted);
    font-size: 13px;
    margin-right: 2px;
}

/* Ô tên đối tác thanh toán: nền tối, chữ theo màu nhận diện của từng bên */
.vga-footer .vga-pay {
    padding: 5px 12px;
    border-radius: 6px;
    background: #0A1B38;
    color: #E7EDF7;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
}

.vga-footer .vga-pay--vnpay      { color: #fff; }
.vga-footer .vga-pay--momo       { color: #E6428E; }
.vga-footer .vga-pay--visa       { color: #4C8BF5; }
.vga-footer .vga-pay--mastercard { color: #F79E1B; }
.vga-footer .vga-pay--zalopay    { color: #0068FF; }
.vga-footer .vga-pay--paypal     { color: #79B7E7; }

@media (max-width: 991.98px) {
    .vga-footer .main-footer {
        padding: 36px 0 24px;
    }

    .vga-footer .nav-footer .title {
        margin-bottom: 12px;
    }

    .vga-footer .mt-footer {
        margin-bottom: 26px;
    }
}

@media (max-width: 767.98px) {
    .vga-footer .vga-footer-badges {
        justify-content: flex-start;
        margin-top: 12px;
    }
}


/* ==========================================================================
   17. CỤM NÚT LIÊN HỆ NỔI (.gfx_hotline.vga-chat)
   --------------------------------------------------------------------------
   Markup ở Layout/parts/footer.blade.php. Mỗi kênh là một nút pill: chữ bên
   trái, biểu tượng trong vòng tròn trắng bên phải. Nút cuối là nút đóng/mở
   (main.js tự thêm class .close khi cụm đang đóng) kèm chấm đỏ nhấp nháy.

   main.css cũ ép .gfx_hotline_item a thành vòng tròn 45px nên các quy tắc ở
   đây phải viết kèm .vga-chat cho đủ đặc hiệu mà không cần !important.
   ========================================================================== */

.gfx_hotline.vga-chat {
    right: 18px;
    bottom: 24px;
    gap: 10px;
    align-items: flex-end;
}

.gfx_hotline.vga-chat .gfx_hotline_item {
    justify-content: flex-end;
}

/* --- Nút từng kênh --- */
.gfx_hotline.vga-chat .gfx_hotline_item a.vga-chat-btn {
    --c-bg: var(--vga-teal);
    --c-fg: #fff;

    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 18px;
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-fg);
    overflow: visible;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, filter .2s;
}

.gfx_hotline.vga-chat .gfx_hotline_item a.vga-chat-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .34);
}

.gfx_hotline.vga-chat .vga-chat-btn__text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.gfx_hotline.vga-chat .vga-chat-btn__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
}

.gfx_hotline.vga-chat .gfx_hotline_item a.vga-chat-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Màu theo từng kênh */
.gfx_hotline.vga-chat .vga-chat-btn--zalo      { --c-bg: #1667E8; }
.gfx_hotline.vga-chat .vga-chat-btn--whatsapp  { --c-bg: #2DBE60; }
.gfx_hotline.vga-chat .vga-chat-btn--messenger { --c-bg: linear-gradient(135deg, #00B2FF 0%, #A033FF 60%, #FF5280 100%); }
.gfx_hotline.vga-chat .vga-chat-btn--phone     { --c-bg: linear-gradient(135deg, #00A0AE 0%, var(--vga-teal) 100%); }

/* --- Nút đóng / mở --- */
.gfx_hotline.vga-chat .vga-chat-toggle {
    position: relative;
    width: auto;
    height: auto;
    margin-top: 2px;
    border-radius: 999px;
}

.gfx_hotline.vga-chat .vga-chat-toggle__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: #10254a;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
    transition: background-color .2s;
}

.gfx_hotline.vga-chat .vga-chat-toggle:hover .vga-chat-toggle__pill {
    background: rgba(17, 39, 68, .72);
}

/* Nhãn đổi theo trạng thái: main.js thêm class .close khi cụm đang đóng */
.gfx_hotline.vga-chat .vga-chat-toggle__off {
    display: none;
}

.gfx_hotline.vga-chat .vga-chat-toggle.close .vga-chat-toggle__on,
.gfx_hotline.vga-chat .gfx_hotline_close.close .vga-chat-toggle__on {
    display: none;
}

.gfx_hotline.vga-chat .gfx_hotline_close.close .vga-chat-toggle__off {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.gfx_hotline.vga-chat .vga-chat-toggle__on {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.gfx_hotline_item.messenger a.vga-chat-btn--messenger{
    background: #fb5185 !important;
}

.gfx_hotline_item.messenger a.vga-chat-btn--zalo{
    background: #0067CF !important;
}

.gfx_hotline_item.hotline a.vga-chat-btn--phone{
    background: #60d669 !important;
}

/* Linh vật (nếu admin có tải lên) chỉ hiện khi cụm đang đóng, nằm trên nút */
.gfx_hotline.vga-chat .vga-chat-toggle__mascot {
    display: none;
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 78px;
    height: 88px;
    margin-bottom: 6px;
    pointer-events: none;
}

.gfx_hotline.vga-chat .gfx_hotline_close.close .vga-chat-toggle__mascot {
    display: block;
}

/* --- Chấm đỏ nhấp nháy --- */
.gfx_hotline.vga-chat .vga-chat-toggle__dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #EF4444;
}

/* Vòng loang ra rồi mờ dần — cùng nhịp với hiệu ứng "ping" quen thuộc */
.gfx_hotline.vga-chat .vga-chat-toggle__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #EF4444;
    opacity: .75;
    animation: vga-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes vga-ping {
    75%, 100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Người dùng bật "giảm chuyển động" trong hệ điều hành thì thôi nhấp nháy */
@media (prefers-reduced-motion: reduce) {
    .gfx_hotline.vga-chat .vga-chat-toggle__dot::before {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .gfx_hotline.vga-chat {
        right: 12px;
        bottom: 16px;
        gap: 8px;
    }

    .gfx_hotline.vga-chat .vga-chat-btn__text,
    .gfx_hotline.vga-chat .vga-chat-toggle__pill {
        font-size: 14px;
    }

    .gfx_hotline.vga-chat .gfx_hotline_item a.vga-chat-btn {
        padding: 6px 7px 6px 15px;
    }

    .gfx_hotline.vga-chat .vga-chat-toggle__pill {
        padding: 9px 18px;
    }
}


/* --- Băng chuyền nhận xét (mục 15) ------------------------------------------
   Owl để `.owl-carousel { display:none }` tới khi khởi tạo xong, mà JS nằm cuối
   trang; chưa khởi tạo thì hiện tạm dạng hàng cuộn ngang để khối không biến mất
   (nhất là trong trình sửa Page Builder). Xong owl thêm .owl-loaded là hết hiệu lực.
   -------------------------------------------------------------------------- */
.sec-review .vga-review-slide:not(.owl-loaded) {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sec-review .vga-review-slide:not(.owl-loaded)::-webkit-scrollbar {
    display: none;
}

.sec-review .vga-review-slide:not(.owl-loaded) > .vga-review-slot {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}

@media (max-width: 991.98px) {
    .sec-review .vga-review-slide:not(.owl-loaded) > .vga-review-slot {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 575.98px) {
    .sec-review .vga-review-slide:not(.owl-loaded) > .vga-review-slot {
        flex-basis: 85%;
        max-width: 85%;
    }
}

/* Thẻ trong băng chuyền cao bằng nhau */
.sec-review .vga-review-slide .owl-stage {
    display: flex;
}

.sec-review .vga-review-slide .owl-item {
    display: flex;
}

.sec-review .vga-review-slot {
    display: flex;
    width: 100%;
}

/* Mũi tên: tròn trắng, đặt hai bên như băng chuyền banner */
.sec-review .vga-review-slide .owl-nav {
    margin: 0;
}

.sec-review .vga-review-slide .owl-nav button.owl-prev,
.sec-review .vga-review-slide .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    transition: background-color .2s, color .2s;
}

.sec-review .vga-review-slide .owl-nav button.owl-prev:hover,
.sec-review .vga-review-slide .owl-nav button.owl-next:hover {
    background: var(--vga-teal);
    color: #fff;
}

.sec-review .vga-review-slide .owl-nav button.owl-prev { left: -19px; }
.sec-review .vga-review-slide .owl-nav button.owl-next { right: -19px; }

.sec-review .vga-review-slide .owl-nav button.disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 1399.98px) {
    .sec-review .vga-review-slide .owl-nav button.owl-prev { left: 6px; }
    .sec-review .vga-review-slide .owl-nav button.owl-next { right: 6px; }
}


/* ==========================================================================
   18. CỤM GIỮA CỦA ĐẦU TRANG (.vga-head)
   --------------------------------------------------------------------------
   Markup ở Layout/parts/header.blade.php: ô tìm kiếm + Tra cứu đặt chỗ +
   Trở thành đối tác (có menu xổ) + Ưu đãi. Logo và nút đăng nhập/đăng ký nằm
   ngoài cụm này, giữ nguyên phần đã có.
   ========================================================================== */

.vne_header .content {
    gap: 18px;
}

.vga-head {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Ô tìm kiếm --- */
.vga-head-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    /* 420px hồi ô này chỉ có 1 chỗ nhập. Nay có thêm nút chọn loại dịch vụ nên
       nới ra, không thì chỗ gõ điểm đến chỉ còn hơn trăm px. */
    max-width: 500px;
    min-width: 260px;
    height: 46px;
    padding: 0 5px 0 16px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.vga-head-search:focus-within {
    border-color: var(--vga-teal);
    box-shadow: 0 0 0 3px rgba(0, 136, 148, .12);
}

/* Nút chọn loại dịch vụ nằm trong ô tìm kiếm, ngăn với ô nhập bằng một vạch dọc.
   Có nút này vì hệ thống tìm kiếm theo từng loại dịch vụ — mỗi loại một trang
   riêng, không có trang "tìm tất cả" để form trỏ về. */
.vga-head-search__type {
    flex-shrink: 0;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #E2E8F0;
}

.vga-head-search__type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1E293B;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.vga-head-search__type-btn > i.fa-solid:first-child {
    color: var(--vga-teal);
}

.vga-head-search__caret {
    font-size: 10px;
    color: #94A3B8;
}

.vga-head-search__type-menu {
    min-width: 190px;
    padding: 6px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 12px 28px -14px rgba(16, 24, 40, .35);
    background: #fff;
}

.vga-head-search__type-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3d4c62;
    font-size: 14px;
    text-align: left;
}

.vga-head-search__type-menu .dropdown-item i {
    width: 16px;
    color: #7a8699;
}

.vga-head-search__type-menu .dropdown-item:hover {
    background: #f4f8fb;
    color: var(--vga-teal);
}

.vga-head-search__type-menu .dropdown-item:hover i {
    color: var(--vga-teal);
}

.vga-head-search__icon {
    flex-shrink: 0;
    margin-right: 10px;
    color: #94A3B8;
    font-size: 15px;
}

.vga-head-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #1E293B;
    font-size: 14px;
    outline: none;
}

.vga-head-search__input::placeholder {
    color: #94A3B8;
}

.vga-head-search__btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--vga-teal);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s;
}

.vga-head-search__btn:hover {
    background: var(--vga-teal-hover);
}

/* --- Các mục bên phải ô tìm kiếm --- */
.vga-head-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.vga-head-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.vga-head-link:hover {
    background: #F1F5F9;
    color: var(--vga-teal);
}

.vga-head-link i {
    color: #64748B;
    font-size: 15px;
}

.vga-head-link:hover i {
    color: var(--vga-teal);
}

/* Nút "Trở thành đối tác" có nền nhạt để nổi hơn các mục còn lại */
.vga-head-link--pill {
    background: #F1F5F9;
}

.vga-head-link--pill:hover {
    background: #E2E8F0;
}

.vga-head-link__gift {
    color: #E5A800 !important;
}

/* Nhãn số cạnh chữ Ưu đãi */
.vga-head-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #E23B3B;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* --- Menu xổ xuống --- */
.vga-head-drop {
    position: relative;
}

.vga-head-drop__caret {
    font-size: 11px !important;
    transition: transform .2s;
}

.vga-head-drop.is-open .vga-head-drop__caret {
    transform: rotate(180deg);
}

.vga-head-drop__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 1030;
    min-width: 246px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}

.vga-head-drop.is-open .vga-head-drop__menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.vga-head-drop__menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 10px;
    color: #1E293B;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.vga-head-drop__menu a:hover {
    background: var(--vga-teal-light);
    color: var(--vga-teal);
}

.vga-head-drop__menu i {
    width: 18px;
    color: var(--vga-teal);
    font-size: 15px;
    text-align: center;
}

/* --- Màn hẹp: bớt dần cho khỏi vỡ hàng --- */
@media (max-width: 1599.98px) {
    /* Cụm liên kết được phép co lại thay vì đẩy tràn sang cụm đăng nhập */
    .vga-head-nav {
        flex: 0 1 auto;
        min-width: 0;
    }
}

@media (max-width: 1399.98px) {
    .vga-head {
        gap: 12px;
    }

    .vga-head-search {
        max-width: 380px;
    }

    /* Chỗ hẹp: nút chọn loại rút còn icon + mũi tên, nhường chỗ cho ô gõ điểm đến.
       Vẫn bấm được, bảng xổ vẫn ghi đủ chữ. */
    .vga-head-search__type-btn > span {
        display: none;
    }

    .vga-head-link {
        padding: 9px 10px;
        font-size: 13px;
    }
}

@media (max-width: 1199.98px) {
    .vga-head-nav {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .vga-head {
        display: none;
    }
}

/* ==========================================================================
   19. BỐ CỤC SIDEBAR TOÀN SITE (.page-detail-row)
   --------------------------------------------------------------------------
   Markup ở Layout/app.blade.php: sidebar dịch vụ nằm cùng hàng với vùng nội
   dung, áp cho MỌI trang chứ không riêng trang dựng bằng Page Builder.
   Trước đây khối này là <style> viết thẳng trong layout — chuyển ra đây để
   sửa giao diện chỉ đụng một file CSS.
   ========================================================================== */
/* Bố cục trang có template: sidebar co theo nội dung, content ăn hết phần còn lại */
.page-detail-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    padding: 30px 0;
    margin: 0 200px;
}

.page-detail-row > .sidebar_home {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 250px;
    max-width: 100%;
}

/* min-width:0 để nội dung dài (bảng, ảnh, chuỗi không dấu cách) không đẩy content phình ra */
.page-detail-row > .vne_wrap {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.page-detail-row .page-template-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.page-detail-row .page-template-content img,
.page-detail-row .page-template-content video {
    max-width: 100%;
    height: auto;
}

/* NGOẠI LỆ cho ảnh phủ kín khung.

   Thẻ điểm đến (.destination-item của block "Location: List Items") có khung
   cao cố định — 190px, 390px trong băng chuyền, 400/570px ở thẻ lớn — và
   main.css cho ảnh `height:100% + object-fit:cover` để phủ kín khung đó.

   Rule chống tràn ngay trên có 2 class + tên thẻ nên mạnh hơn `.destination-item
   img` của main.css, lại còn nạp sau, nên nó ép ảnh về `height:auto`: ảnh co
   lại còn khoảng nửa khung, phần dưới trơ lớp gradient đen của `::after` trên
   nền trắng thành một mảng xám nhờ, chữ tên điểm đến trôi xuống đáy mảng đó.

   Trả lại height:100% cho ĐÚNG thẻ này. Các ảnh nội dung khác vẫn giữ
   `height:auto` như cũ. */
.page-detail-row .page-template-content .destination-item img {
    height: 100%;
}

.page-detail-row .page-template-content iframe,
.page-detail-row .page-template-content embed,
.page-detail-row .page-template-content object {
    max-width: 100%;
}

.page-detail-row .page-template-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.page-detail-row .page-template-content pre {
    overflow-x: auto;
    white-space: pre-wrap;
}

/* Sidebar là 1 card trắng bao cả menu + khối AI */
.page-detail-row > .sidebar_home {
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(16, 42, 67, 0.08);
}

/* Ghi đè .main-menu của theme (inline-flex, padding 24px) cho khớp dạng card */
.page-detail-row .sidebar_home .main-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 2px;
    list-style: none;
}

.page-detail-row .sidebar_home ul.main-menu li,
.page-detail-row .sidebar_menu_more li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* main.css:8510 khai `.main-menu > li.depth-0:nth-child(n+6){display:none}` — rule đó
   dành cho menu NGANG của theme gốc (chỉ cho 5 mục rồi đẩy phần dư vào nút "..."
   .menu-more). Sidebar dọc dùng chung class .main-menu nên dính vạ: mục thứ 6 trở đi
   thêm ở Giao diện → Menu biến mất trên desktop, trong khi ngăn kéo điện thoại vẫn
   hiện (ở đó các <li> nằm trong <ul class="vga-mnav__stack">, không phải .main-menu).
   Cột dọc không có lý do giới hạn 5 mục nên bật lại hết. */
.page-detail-row .sidebar_home ul.main-menu > li.depth-0:nth-child(n+6) {
    display: block;
}

.page-detail-row .sidebar_home ul.main-menu li a,
.page-detail-row .sidebar_menu_more li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 22px;
    color: #3d4c62;
    text-decoration: none;
    transition: .2s ease-in-out;
}

.page-detail-row .sidebar_home ul.main-menu li a svg,
.page-detail-row .sidebar_menu_more li a svg {
    flex: 0 0 auto;
    margin-right: 0;
    color: #7a8699;
}

.page-detail-row .sidebar_home ul.main-menu li a:hover,
.page-detail-row .sidebar_menu_more li a:hover {
    background: #f4f8fb;
    color: #008894;
}

/* Mục đang xem: class "active" do MenuWalker gắn khi link trùng trang hiện tại */
.page-detail-row .sidebar_home ul.main-menu li.active > a,
.page-detail-row .sidebar_home ul.main-menu li.current-menu-item > a {
    background: var(--vga-teal-light, #e6f6f7);
    color: #008894;
    font-weight: 600;
}

.page-detail-row .sidebar_home ul.main-menu li.active > a svg {
    color: #008894;
}

.page-detail-row .sidebar_home ul.main-menu li.active > a{
    border-left: 3px solid;
}
/* Badge Hot / Ưu đãi / -20%: nhập bằng HTML trong tên menu ở admin */
.page-detail-row .sidebar_home .menu-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 99px;
    background: #ff2d37;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

/* Khối "Khám phá thêm" */
.sidebar_menu_section {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
}

.sidebar_menu_heading {
    margin: 0 0 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9aa5b5;
}

.sidebar_menu_more {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Mũi tên ">" cuối mỗi dòng */
.sidebar_menu_more li a::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-top: 1.5px solid #b6bfcc;
    border-right: 1.5px solid #b6bfcc;
    transform: rotate(45deg);
}

/* Card AI trong sidebar. Width cố định vì sidebar là fit-content:
   nếu để co theo nội dung, dòng mô tả sẽ kéo cả sidebar phình ra */
.sidebar_ai_card {
    width: 260px;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, #0a8f9e 0%, #0b6bb4 100%);
    box-shadow: 0 8px 24px rgba(11, 107, 180, 0.25);
}

.sidebar_ai_card_badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}

.sidebar_ai_card_badge svg {
    flex: 0 0 auto;
    color: #ffd76a;
}

.sidebar_ai_card_desc {
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
}

.sidebar_ai_card_btn {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    background: #fff;
    color: #0b7c8c;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: .3s ease-in-out;
}

.sidebar_ai_card_btn:hover {
    background: #eafaff;
    color: #0b6bb4;
    text-decoration: none;
}

/* Desktop: sidebar dính khi cuộn. Dùng sticky chứ không fixed —
   fixed sẽ đẩy sidebar ra khỏi luồng flex, vne_wrap chiếm nốt chỗ và chui xuống dưới.
   Mốc 1200 chứ không phải 992: dưới 1200 sidebar dọc ngốn 250px làm cột kết quả
   chỉ còn ~420px, nên ở đó nó đổi sang hàng chip ngang (mục 22.3). */
@media (min-width: 1200px) {
    .page-detail-row > .sidebar_home {
        position: sticky;
        /* Cuộn xuống là header đổi sang .is-fixed và che mất phần trên trang. main.js đo
           chiều cao thật của header rồi ghi vào --sidebar-sticky-top (kể cả khi có thanh
           quản trị), nên phải đọc biến đó — để cứng 90px thì header cao hơn sẽ đè lên
           sidebar, trông như sidebar hết dính. */
        top: var(--sidebar-sticky-top, 90px);
        align-self: flex-start;
        /* Sidebar dài hơn màn hình thì tự cuộn trong chính nó, không thì phần dưới
           (thẻ AI) bị khuất và không bao giờ với tới được. */
        max-height: calc(100vh - var(--sidebar-sticky-top, 90px) - 16px);
        overflow-y: auto;
        scrollbar-width: none;
    }

    .page-detail-row > .sidebar_home::-webkit-scrollbar {
        width: 0;
    }
}

/* Cùng mốc với .m-200 ở mục 22.1 để đầu trang và phần thân thẳng lề nhau */
@media (max-width: 1599.98px) {
    .page-detail-row {
        margin: 0 60px;
    }
}

@media (max-width: 1199.98px) {
    .page-detail-row {
        margin: 0;
    }

    .page-detail-row > .sidebar_home,
    .page-detail-row > .vne_wrap {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* ==========================================================================
   20. THANH TRÊN CÙNG (.vne_topbar)
   --------------------------------------------------------------------------
   Markup ở Layout/parts/header.blade.php. Ba mục khai ở Cài đặt → Đầu trang:
   dòng chào mừng (kèm chấm xanh nhấp nháy), nút vàng, hotline góc phải.
   ========================================================================== */

.vne_topbar .vga-top-welcome {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #E7EDF7;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* Chấm xanh báo "đang hoạt động" */
.vne_topbar .vga-top-dot {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
}

.vne_topbar .vga-top-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22C55E;
    opacity: .75;
    animation: vga-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .vne_topbar .vga-top-dot::before {
        animation: none;
    }
}

/* Nút vàng "VietAgo AI Assistant" */
.vne_topbar .vga-top-ai {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 16px;
    padding: 5px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD400 0%, #F5A623 100%);
    color: #16213E;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    transition: filter .2s, transform .2s;
}

.vne_topbar .vga-top-ai:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #16213E;
}

.vne_topbar .vga-top-ai i {
    color: #16213E;
    font-size: 13px;
}

/* Hotline góc phải */
.vne_topbar .vga-top-hotline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #E7EDF7;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s;
}

.vne_topbar .vga-top-hotline:hover {
    color: #fff;
}

/* Nhận cả biểu tượng Font Awesome lẫn SVG dán thẳng vào blade */
.vne_topbar .vga-top-hotline i {
    color: #4FD1C5;
    font-size: 13px;
}

.vne_topbar .vga-top-hotline svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: #4CC9F0;
}

.vne_topbar .vga-top-ai svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

@media (max-width: 991.98px) {
    /* Màn hẹp giữ lại hotline (thứ khách cần nhất), bỏ dòng chào mừng cho đỡ chật */
    .vne_topbar .vga-top-welcome {
        display: none;
    }

    .vne_topbar .vga-top-ai {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .vne_topbar .vga-top-ai {
        font-size: 12px;
        padding: 4px 12px;
    }
}


/* ==========================================================================
   21. CHỌN NGÔN NGỮ / TIỀN TỆ
   --------------------------------------------------------------------------
   Nút hình viên thuốc ở thanh trên cùng (🌐 VN | VND ⌄) mở hộp chọn 2 tab.
   Markup: Layout/parts/header.blade.php (nút) + Layout/parts/locale-modal.blade.php.
   ========================================================================== */

/* --- Nút viên thuốc --- */
.vne_topbar .topbar-items .vga-locale {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.vga-locale__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: transparent;
    color: #E7EDF7;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition: border-color .2s, background-color .2s, color .2s;
}

.vga-locale__btn:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.vga-locale__globe {
    flex-shrink: 0;
}

.vga-locale__sep {
    opacity: .45;
    font-weight: 400;
}

.vga-locale__caret {
    font-size: 11px;
    opacity: .8;
}

/* --- Bản nằm ở hàng đầu trang (logo · đăng nhập · ba gạch) ---
   Dùng cho điện thoại và tablet: từ 990px xuống, viên thuốc "VN | VND" ở thanh
   trên cùng biến mất (main.css ẩn `.topbar-items`, và từ 768px xuống ẩn luôn cả
   `.vne_topbar`). Nút này thế chỗ, đặt cạnh nút ba gạch để khách đổi ngôn ngữ mà
   không phải mở ngăn kéo. Từ 991px trở lên giữ ẩn để không có hai nút cùng nghĩa
   trên một trang. */
.vne_header .content .header-right > .vga-locale--head {
    display: none;
}

/* Bản trong menu mobile nằm trên nền sáng nên phải đổi màu chữ/viền */
.vga-locale__btn--mobile {
    width: 100%;
    justify-content: center;
    border-color: #E2E8F0;
    color: #334155;
}

.vga-locale__btn--mobile:hover {
    border-color: var(--vga-teal);
    background: var(--vga-teal-light);
    color: var(--vga-teal);
}

/* --- Hộp chọn --- */
/* Ngăn kéo menu điện thoại nằm ở z-index 9999 (custom.css) — cao hơn mức 1055
   mặc định của modal. JS ở locale-modal.blade.php đã đóng ngăn kéo trước khi mở
   hộp chọn; dòng này là lớp chặn thứ hai, để nếu JS chưa kịp chạy thì hộp vẫn
   nổi lên trên chứ không khuất phía sau. */
.vga-locale-modal.modal {
    z-index: 10060;
}

.vga-locale-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}

.vga-locale-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 22px 0;
    border-bottom: 1px solid #EEF2F6;
}

.vga-locale-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vga-locale-tab {
    position: relative;
    padding: 16px 2px;
    border: 0;
    background: transparent;
    color: #94A3B8;
    font-size: 17px;
    font-weight: 500;
    transition: color .2s;
}

.vga-locale-tab:hover {
    color: #334155;
}

/* Gạch chân teal cho tab đang mở */
.vga-locale-tab.active {
    color: #16213E;
}

.vga-locale-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--vga-teal);
}

.vga-locale-modal__close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #64748B;
    font-size: 18px;
    transition: background-color .2s, color .2s;
}

.vga-locale-modal__close:hover {
    background: #F1F5F9;
    color: #16213E;
}

.vga-locale-modal__body {
    padding: 22px;
    max-height: min(70vh, 620px);
    overflow-y: auto;
}

.vga-locale-modal__title {
    margin: 0 0 14px;
    color: #16213E;
    font-size: 15px;
    font-weight: 500;
}

/* --- Lưới lựa chọn --- */
.vga-locale-grid {
    display: grid;
    gap: 8px;
}

.vga-locale-grid--lang {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vga-locale-grid--currency {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Một ngôn ngữ */
.vga-locale-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #1E293B;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}

.vga-locale-item:hover {
    background: #F8FAFC;
    color: #1E293B;
}

.vga-locale-item.is-active {
    border-color: #BFE6E4;
    background: #F0FBF9;
    color: var(--vga-teal);
    cursor: default;
}

.vga-locale-item__code {
    flex-shrink: 0;
    min-width: 26px;
    color: #94A3B8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
}

.vga-locale-item.is-active .vga-locale-item__code {
    color: var(--vga-teal);
}

.vga-locale-item__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.vga-locale-item__check {
    margin-left: auto;
    color: var(--vga-teal);
    font-size: 14px;
}

/* Một loại tiền tệ */
.vga-locale-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    color: #1E293B;
    text-decoration: none;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.vga-locale-money:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
    color: #1E293B;
}

.vga-locale-money.is-active {
    border-color: #BFE6E4;
    background: #F0FBF9;
    cursor: default;
}

.vga-locale-money__code {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.vga-locale-money.is-active .vga-locale-money__code {
    color: var(--vga-teal);
}

.vga-locale-money__name {
    display: block;
    overflow: hidden;
    color: #64748B;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vga-locale-money__symbol {
    flex-shrink: 0;
    color: #94A3B8;
    font-size: 20px;
    font-weight: 800;
}

.vga-locale-money.is-active .vga-locale-money__symbol {
    color: var(--vga-teal);
}

@media (max-width: 767.98px) {
    .vga-locale-grid--lang {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vga-locale-grid--currency {
        grid-template-columns: 1fr;
    }

    .vga-locale-modal__head {
        padding: 4px 16px 0;
    }

    .vga-locale-modal__body {
        padding: 16px;
    }

    .vga-locale-tab {
        font-size: 15px;
        padding: 14px 2px;
    }
}

@media (max-width: 575.98px) {
    .vga-locale-grid--lang {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   22. RESPONSIVE TOÀN SITE
   --------------------------------------------------------------------------
   Gom mọi chỉnh sửa cho màn nhỏ vào một mục để sau này sửa chỉ mở một chỗ.
   Mốc dùng theo Bootstrap: 1399.98 (laptop nhỏ) · 1199.98 · 991.98 (tablet)
   · 767.98 · 575.98 (điện thoại).

   Nguyên tắc: chỉ ghi đè trong media query, không đụng bố cục desktop đã duyệt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   22.1 Lề khung `.m-200`
   main.css khai `.m-200 { margin: 0 200px }` KHÔNG kèm mốc màn hình. Đầu trang
   và thanh trên cùng đều dùng class này, nên dưới 400px bề rộng khả dụng còn
   âm → `.vne_header .content` co về 0, logo và nút menu chồng lên nhau.
   -------------------------------------------------------------------------- */
/* Mốc 1600 chứ không phải 1400: lề 200px mỗi bên chỉ còn chừa 1016px cho đầu
   trang ở màn 1440 — cụm "Tra cứu / Đối tác / Ưu đãi" đè lên nút Đăng nhập. */
@media (max-width: 1599.98px) {
    .m-200 {
        margin: 0 60px;
    }
}

@media (max-width: 1199.98px) {
    .m-200 {
        margin: 0 32px;
    }
}

@media (max-width: 991.98px) {
    .m-200 {
        margin: 0 20px;
    }
}

@media (max-width: 575.98px) {
    .m-200 {
        margin: 0 14px;
    }
}

/* --------------------------------------------------------------------------
   22.2 Đầu trang trên màn nhỏ
   main.css ép `.header-left { width: 90% }` dưới 1024px — logo chiếm gần trọn
   hàng, đẩy nút menu ra sát mép. Trả về co theo nội dung và cho nút menu một
   vùng chạm đủ lớn.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .vne_header .content {
        min-height: 64px;
        gap: 12px;
    }

    .vne_header .content .header-left {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
        min-height: 64px;
    }

    .vne_header .content .header-left .vne-logo img {
        max-height: 42px;
        width: auto;
        object-fit: contain;
    }

}

@media (max-width: 575.98px) {
    .vne_header .content .header-left .vne-logo img {
        max-height: 36px;
    }
}

/* Từ 1200px trở xuống menu chính chuyển vào ngăn kéo, nên .header-right chứa cả
   nút đăng nhập lẫn nút ba gạch. Mặc định nó là block → hai cụm rơi xuống hai
   hàng, đầu trang cao 89px và lệch. Xếp lại thành một hàng. */
@media (max-width: 1199.98px) {
    .vne_header .content .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }

    /* main.css chỉ bật nút ba gạch ở ≤768px và ở iPad (theo `device-width`), nên
       cửa sổ 769–1199px trên máy tính không có nút nào mở được ngăn kéo — mà
       sidebar dịch vụ thì đã ẩn ở dải này (22.3). Bật lại theo bề rộng cửa sổ. */
    .vne-more-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        background: #fff;
        color: var(--vga-teal, #008894);
        font-size: 20px;
        line-height: 1;
        float: none;
    }

    .vne-more-menu i {
        color: inherit;
    }

    .vne_header .content .header-right .topbar-items {
        margin: 0;
    }

    .vga-head-search {
        max-width: 280px;
        min-width: 180px;
    }

    .vga-head-search__btn {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --------------------------------------------------------------------------
   22.3 Sidebar dịch vụ (.sidebar_home) trên màn nhỏ
   Sidebar được include ở MỌI trang (Layout/app.blade.php). Dưới 1200px nó ẩn
   hẳn: menu dịch vụ đã nằm trong ngăn kéo (mục 23), để lại thì vừa trùng lặp
   vừa chiếm ~670px đầu trang.

   Mốc 1199.98 chứ không phải 991.98 vì trên iPad ngang sidebar dọc ngốn 250px
   làm cột kết quả chỉ còn ~420px và thẻ khách sạn vỡ.
   Nút mở ngăn kéo cũng phải hiện đúng dải này — xem 22.2.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .page-detail-row {
        gap: 12px;
        padding: 12px 0 24px;
    }

    .page-detail-row > .sidebar_home {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   22.4 Thẻ khách sạn kiểu danh sách (.hotel_item.hotel_list)
   main.css khai ảnh `width: 370px !important` và cột giá `width: 200px` bằng
   px cứng. Cột kết quả chỉ rộng ~620px ở laptop 1280 (đã trừ sidebar dịch vụ
   + cột lọc), nên phần thân chỉ còn ~50px: tên khách sạn và địa chỉ rơi thành
   từng chữ một. Ở 1024px thì thẻ vỡ hẳn.
   Cách sửa: ảnh tính theo %, cột giá xuống dưới thân khi cột kết quả hẹp.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .hotel_list {
        align-items: stretch;
        flex-wrap: nowrap;
    }

    .hotel_list .hotel-thumbnail {
        flex: 0 0 auto;
        width: 36% !important;
        max-width: 370px;
        height: auto;
        min-height: 220px;
    }

    .hotel_list .hotel-content {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    /* Tên và địa chỉ dài không được kéo thẻ phình ngang */
    .hotel_list .hotel-content .hotel_body {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Cột kết quả hẹp (laptop ≤1600): giá xuống dưới thân, trải ngang cả hàng */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .hotel_list .hotel-content {
        flex-flow: column nowrap;
    }

    .hotel_list .hotel-content .hotel_body {
        width: 100%;
    }

    .hotel_list .hotel-content .hotel-price {
        width: 100%;
        height: auto;
        margin-top: auto;
        padding: 12px 15px;
        border-left: 0;
        border-top: 1px solid #E7E7E7;
        flex-flow: row wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px 16px;
    }

    /* Ba cụm trong cột giá vốn xếp dọc canh phải; nằm ngang thì canh trái cho dễ đọc */
    .hotel_list .hotel-content .hotel-price .review-ht,
    .hotel_list .hotel-content .hotel-price ._price,
    .hotel_list .hotel-content .hotel-price .hotel-note {
        text-align: left;
    }

    .hotel_list .hotel-content .hotel-price .hotel-review-counter {
        text-align: left;
    }

    .hotel_list .hotel-content .hotel-price .hotel-note {
        width: 100%;
        order: 3;
    }

    .hotel_list .hotel-content .hotel-price .hotel-store {
        margin-left: auto;
    }
}

/* --------------------------------------------------------------------------
   22.5 Hộp tìm kiếm trên ảnh bìa trang chủ (.banner_hero_tab.tab-search)
   main.css chia các ô bằng `flex: 1 1 0` cho MỌI bề rộng, chỉ riêng ô cuối
   (nút Tìm kiếm) mới xuống hàng dưới 992px. Trên điện thoại ba ô chia nhau
   375px → "Thành phố, Khách sạn…" còn đúng chữ "Th", khoảng ngày bị cắt mất
   một nửa; ở 768px ô "Khách - Phòng" đè lên ngày trả phòng. Dưới 992px cho mỗi
   ô một hàng riêng.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .banner_hero_tab.tab-search .vne_form .g-field-search > .row > [class*="col-"] {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        padding: 10px 14px;
        border-right: 0;
        border-top: 1px solid #E8EDF3;
    }

    .banner_hero_tab.tab-search .vne_form .g-field-search > .row > [class*="col-"]:last-child {
        padding: 12px 14px;
        border-top: 0;
    }

    /* Nhãn nhỏ phía trên và giá trị: cho phép xuống dòng thay vì bị cắt */
    .banner_hero_tab.tab-search .vne_form .form-content label,
    .banner_hero_tab.tab-search .vne_form .date-label-small {
        white-space: normal;
    }

    .banner_hero_tab.tab-search .vne_form .render,
    .banner_hero_tab.tab-search .vne_form .date-display-block {
        min-width: 0;
    }

    .banner_hero_tab.tab-search .vne_form .form-date-search-hotel .inputDate {
        flex-wrap: nowrap;
        gap: 6px;
        padding-left: 0 !important;
    }

    /* .render mặc định `width:100%` + ellipsis: hai ô ngày chia đôi hàng nên
       "08/08/2026" bị rút thành "08/08…". Cho nó co theo chữ. */
    .banner_hero_tab.tab-search .date-display-block {
        flex: 0 0 auto;
        width: auto;
    }

    .banner_hero_tab.tab-search .vne_wrap .vne_form .form-content .render,
    .banner_hero_tab.tab-search .vne_form .form-content .render {
        width: auto;
        overflow: visible;
        text-overflow: clip;
    }

    .banner_hero_tab.tab-search .vne_form .smart-search,
    .banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   22.7 Ảnh bìa trang chủ trên màn nhỏ (.sec-banner-search)
   Giữ đúng ý đồ: băng chuyền ảnh (.hero_slide) là NỀN của khối chữ + hộp tìm
   kiếm (.banner_hero_body).

   Trên màn rộng ảnh cao cố định 600px và khối chữ phủ lên bằng position:absolute
   — vừa khít. Xuống điện thoại thì hộp tìm kiếm xếp dọc cao hơn 600px, mà khối
   absolute không đẩy được ảnh nên nó thò xuống che khối bên dưới.

   Cách sửa: đảo vai hai lớp. Ảnh chuyển thành lớp phủ tuyệt đối phía sau, khối
   chữ trở về luồng thường và tự quyết định chiều cao — ảnh cao đúng bằng nội
   dung, dù nội dung dài bao nhiêu. Chữ vẫn nằm trên ảnh như thiết kế.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .sec-banner-search {
        position: relative;
        overflow: hidden;
        border-radius: 15px;
    }

    .sec-banner-search .hero_slide {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        border-radius: 0;
    }

    /* Chuỗi thẻ owl dựng ra ở giữa phải cao 100% thì ảnh mới phủ kín nền */
    .sec-banner-search .hero_slide,
    .sec-banner-search .hero_slide .owl-stage-outer,
    .sec-banner-search .hero_slide .owl-stage,
    .sec-banner-search .hero_slide .owl-item,
    .sec-banner-search .hero_slide .slide-item,
    .sec-banner-search .hero_slide .banner-item picture {
        height: 100%;
    }

    /* main.css khoá `height: 600px !important` cho .banner-item img */
    .sec-banner-search .hero_slide .banner-item img {
        height: 100% !important;
        object-fit: cover;
    }

    .sec-banner-search .banner_hero_body {
        position: relative;
        z-index: 2;
        top: auto;
        left: auto;
        padding: 30px 15px;
    }
}

/* --------------------------------------------------------------------------
   22.6 Bảng giá theo loại khách ở form đặt tour (table.table-price)
   Cột đầu bị đặt cứng `width: 150px`; trong cột đặt chỗ hẹp của tour quốc tế
   (nhiều loại khách, chữ dài) bảng đội ra khỏi khung ~10px ở 768px.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    table.table-price {
        width: 100%;
        table-layout: fixed;
    }

    table.table-price tr td {
        padding: 8px 6px;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    table.table-price tr td:nth-child(1) {
        width: auto;
    }

    table.table-price .btn-group button {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* --------------------------------------------------------------------------
   22.8 Thanh 3 bước của trang đặt chỗ (.cart-breadcrumbs)
   main.css đặt `gap: 100px` giữa các bước và mũi tên ở `left: 200px` — số đo
   cứng theo màn rộng. Trên điện thoại ba nhãn xuống ba dòng, mũi tên rơi vào
   giữa chữ và bước "Hoàn tất" lòi ra ngoài mép phải.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .cart-breadcrumbs {
        margin-bottom: 32px;
    }

    .cart-breadcrumbs ul {
        gap: 0;
        justify-content: space-between;
        align-items: flex-start;
    }

    .cart-breadcrumbs ul li {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        text-align: center;
        font-size: 12px;
        line-height: 16px;
        padding: 0 6px;
    }

    .cart-breadcrumbs ul li .icon {
        width: 42px;
        height: 42px;
    }

    /* Mũi tên về đúng khe giữa hai bước, ngang tầm vòng tròn */
    .cart-breadcrumbs ul li:not(:last-child)::after {
        left: auto;
        right: -6px;
        top: 21px;
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .cart-breadcrumbs ul li {
        font-size: 11px;
        line-height: 15px;
        padding: 0 4px;
    }

    .cart-breadcrumbs ul li .icon {
        width: 36px;
        height: 36px;
    }

    .cart-breadcrumbs ul li:not(:last-child)::after {
        top: 18px;
        right: -5px;
        font-size: 11px;
    }
}

/* --------------------------------------------------------------------------
   22.9 Chi tiết khách sạn: khối tiện ích + bản đồ (.hotel-attribute)
   Hai cột 8/4 giữ nguyên từ 768px, nên trên iPad dọc cột bản đồ chỉ còn ~230px:
   bản đồ bị cắt và danh sách "Xem xung quanh đây" xuống dòng từng chữ.
   Dưới 992px xếp thành một cột.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hotel-attribute > .row > [class*="col-md-"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .hotel-attribute .map_review {
        margin-top: 16px;
    }
}

/* --------------------------------------------------------------------------
   22.10 Cột lọc trên màn nhỏ (.vne_filter / .bc_filter)
   main.js đã có window.toggleEclose(): dưới 990px nó gắn class `e-close` cho
   từng tiêu đề nhóm lọc — nhưng không có CSS nào ẩn phần nội dung, nên trên
   điện thoại toàn bộ bộ lọc (điểm đến, quốc gia, giá, sao, tiện ích…) vẫn mở
   và người dùng phải cuộn qua ~1500px mới thấy kết quả đầu tiên.
   Rule dưới đây chỉ ăn theo class, không theo bề rộng, nên khi bấm mở lại thì
   slideDown của theme vẫn thắng (display inline).
   -------------------------------------------------------------------------- */
.vne_filter .g-filter-item .item-title.e-close + .item-content,
.bc_filter .g-filter-item .item-title.e-close + .item-content {
    display: none;
}

.vne_filter .g-filter-item .item-title.e-close i.fa-angle-up,
.bc_filter .g-filter-item .item-title.e-close i.fa-angle-up {
    transform: rotate(180deg);
}

/* Các nhóm đã gập thì khoảng cách 20px trên + 15px dưới của bản desktop biến
   mỗi dòng tiêu đề thành một ô cao 135px — gom lại thành danh sách gọn, mỗi
   dòng vẫn đủ cao để bấm bằng ngón tay. */
@media (max-width: 991.98px) {
    .vne_filter .g-filter-item,
    .bc_filter .g-filter-item {
        margin: 0;
        border-top: 1px solid #EEF1F5;
    }

    .vne_filter .g-filter-item:first-of-type,
    .bc_filter .g-filter-item:first-of-type {
        border-top: 0;
    }

    .vne_filter .g-filter-item .item-title,
    .bc_filter .g-filter-item .item-title {
        margin: 0;
        padding: 14px 0;
        cursor: pointer;
    }

    .vne_filter .g-filter-item .item-title h3,
    .bc_filter .g-filter-item .item-title h3 {
        margin: 0;
        font-size: 15px;
        line-height: 22px;
    }

    /* Nhóm đang mở cần thở ra một chút so với tiêu đề */
    .vne_filter .g-filter-item .item-content,
    .bc_filter .g-filter-item .item-content {
        padding-bottom: 14px;
    }
}

/* --------------------------------------------------------------------------
   22.11 Dải tiêu đề trang danh sách (section.banner_category)
   Tiêu đề ("Tour du lịch", "Khách sạn"…) là chữ trắng đặt trên ảnh nền lấy từ
   cài đặt. Khi chưa gán ảnh, nền còn lại là màu sáng của trang → chữ trắng
   trên nền trắng, coi như mất tiêu đề. Thêm màu nền dự phòng: có ảnh thì ảnh
   phủ lên (background-size: cover), không có thì ra nền xanh đậm.
   Kèm theo, mốc `.banner_category_h` cao 500px vốn dành cho màn rộng chiếm
   gần trọn màn hình đầu tiên của điện thoại.
   -------------------------------------------------------------------------- */
/* !important vì blade gắn `style="background: url(...) no-repeat"` ngay trên thẻ
   — shorthand đó đặt lại background-color về trong suốt. Ảnh (nếu có) vẫn nằm
   trên màu nền này nên trang đã gán ảnh không đổi gì. */
section.banner_category {
    background-color: #0F2A43 !important;
}

@media (max-width: 991.98px) {
    /* Chiều cao phải là auto: một số trang danh sách đặt luôn ô tìm kiếm bên
       trong dải này, ép chiều cao cứng thì ô tìm kiếm thò ra đè lên khối dưới. */
    section.banner_category,
    section.banner_category.banner_category_h {
        height: auto !important;
        min-height: 120px;
        padding: 18px 0;
        align-items: center !important;
    }

    section.banner_category h1 {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    section.banner_category h1 {
        font-size: 22px;
        line-height: 30px;
    }
}

/* --------------------------------------------------------------------------
   22.12 Ô tìm kiếm nằm trong dải tiêu đề (trang chi tiết khách sạn)
   Ba ô + nút chia nhau ~800px ở laptop 1280 nên ô "Số phòng & khách" chỉ còn
   193px và dòng "1 Phòng · 1 Người lớn · 0 Trẻ em" bị cắt còn "0 Tr".
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    section.banner_category .form-select-guests .render {
        font-size: 14px;
    }

    section.banner_category .g-field-search > .row > [class*="col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Dưới 1200px thì nhường hẳn một hàng cho nút Tìm, ba ô rộng gấp rưỡi */
@media (max-width: 1199.98px) {
    section.banner_category .g-field-search > .row {
        flex-wrap: wrap;
    }

    section.banner_category .g-field-search > .row > [class*="col-"]:last-child {
        flex: 1 1 100%;
        width: 100%;
        padding-top: 10px;
    }

    section.banner_category .g-field-search > .row > [class*="col-"]:last-child .btn,
    section.banner_category .g-field-search > .row > [class*="col-"]:last-child button {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   22.13 Nút Đăng nhập / Đăng ký ở đầu trang
   Ở 1200–1600px hai nút bị bóp làm chữ "Đăng nhập" gãy thành hai dòng, đầu
   trang cao hẳn lên so với logo.
   -------------------------------------------------------------------------- */
.vne_header .header-right .topbar-items > li > a {
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   22.15 Nút Ngôn ngữ / Tiền tệ ở đầu trang trên điện thoại và tablet
   Viên thuốc "VN | VND" nằm trong `.topbar-items` của thanh trên cùng, mà
   main.css ẩn cả cụm đó ở `max-width: 990px` (rồi ẩn nốt `.vne_topbar` từ 768px
   xuống). Nên suốt dải 0–990px khách chỉ còn cách mở ngăn kéo ba gạch mới đổi
   được ngôn ngữ. Header có sẵn một nút thứ hai (markup ở
   Layout/parts/header.blade.php, ẩn mặc định ở mục 20), đây là chỗ bật nó lên.

   Nút nằm NGOÀI <ul class="topbar-items"> vì chính cái ul đó bị ẩn — để bên
   trong thì nút mất theo, dù rule ở đây có đúng.

   MỐC PHẢI ĐÚNG 990px: lấy theo mốc ẩn `.topbar-items` chứ không phải mốc ẩn
   `.vne_topbar` (768px). Đặt 768px thì dải 769–990px không còn nút nào — đã
   đo hụt một lần đúng như vậy.
   -------------------------------------------------------------------------- */
@media (max-width: 990px) {
    .vne_header .content .header-right > .vga-locale--head {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    /* Nền đầu trang là màu trắng, khác thanh trên cùng màu xanh đậm, nên đảo
       lại màu chữ/viền. Bỏ chữ tiền tệ cho gọn — hộp chọn vẫn đủ hai tab. */
    .vga-locale--head .vga-locale__btn {
        gap: 5px;
        padding: 5px 10px;
        border-color: #E2E8F0;
        color: #334155;
    }

    .vga-locale--head .vga-locale__btn:hover,
    .vga-locale--head .vga-locale__btn:focus {
        border-color: var(--vga-teal);
        background: var(--vga-teal-light);
        color: var(--vga-teal);
    }
}

/* Máy nhỏ (≤380px): bỏ chữ, giữ lại quả cầu cho khỏi chật hàng logo. */
@media (max-width: 380px) {
    .vga-locale--head .vga-locale__value {
        display: none;
    }

    .vga-locale--head .vga-locale__btn {
        padding: 5px 8px;
    }
}


/* ==========================================================================
   23. NGĂN KÉO MENU TRÊN ĐIỆN THOẠI (.vga-mnav)
   --------------------------------------------------------------------------
   Markup ở Layout/parts/header.blade.php, mở/đóng bằng assets/js/home.js
   (class .bc-more-menu, .bc-menu-mobile, .b-close — không đổi tên).

   Nội dung đều là dữ liệu đang có: menu vị trí Primary + các mục khai ở
   Cài đặt → Đầu trang. Mục này chỉ lo phần nhìn.

   Đặc hiệu cao (kèm .vga-mnav) để thắng bản cũ trong main.css/custom.css.
   ========================================================================== */

.vne_header .bc-menu-mobile.vne-mnav.vga-mnav {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    border: 0;
    box-shadow: -8px 0 40px rgba(15, 42, 67, .18);
    overflow: hidden;
}

/* --- Thanh trên cùng: tên miền · ngôn ngữ · hotline --- */
.vga-mnav .vga-mnav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 0 14px;
    height: 38px;
    background: #0a1f44;
    color: #E7EDF7;
    font-size: 12.5px;
}

.vga-mnav .vga-mnav__host {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vga-mnav .vga-mnav__topright {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.vga-mnav .vga-mnav__locale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: transparent;
    color: #E7EDF7;
}

.vga-mnav .vga-mnav__tophotline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4CC9F0;
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

/* --- Hàng thương hiệu: logo · nút đăng nhập · nút đóng --- */
.vga-mnav .vga-mnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #EEF2F6;
}

.vga-mnav .vga-mnav__logo img {
    height: 36px;
    max-width: 150px;
    object-fit: contain;
}

.vga-mnav .vga-mnav__headright {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vga-mnav .vga-mnav__login {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--vga-teal, #008894);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.vga-mnav .vga-mnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #334155;
    font-size: 18px;
}

/* --- Thân cuộn --- */
.vga-mnav .vga-mnav__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
}

/* --- Hai nút Đăng nhập / Đăng ký --- */
.vga-mnav .vga-mnav__auth {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vga-mnav .vga-mnav__authbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.vga-mnav .vga-mnav__authbtn.is-active {
    background: var(--vga-teal, #008894);
    color: #fff;
}

/* Chỉ có một nút (tắt đăng ký) thì trải hết hàng */
.vga-mnav .vga-mnav__auth > .vga-mnav__authbtn:only-child {
    grid-column: 1 / -1;
}

/* --- Hồ sơ khi đã đăng nhập --- */
.vga-mnav .vga-mnav__profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 12px;
    background: #F1F8F9;
}

.vga-mnav .vga-mnav__avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vga-teal, #008894);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.vga-mnav .vga-mnav__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vga-mnav .vga-mnav__profileinfo {
    min-width: 0;
}

.vga-mnav .vga-mnav__profileinfo strong {
    display: block;
    font-size: 14px;
    color: #0F2A43;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vga-mnav .vga-mnav__profileinfo small {
    display: block;
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Ô tìm kiếm --- */
/* --- Hàng chọn loại dịch vụ của ô tìm kiếm (Tour / Khách sạn / Vé tham quan) ---
   Trên máy tính chỗ này là nút thả xuống; trong ngăn kéo dùng thẻ bấm ngang cho
   vừa ngón tay và khỏi vướng vùng cuộn. Nhiều loại thì trượt ngang, không xuống dòng. */
.vga-mnav .vga-mnav__searchform {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vga-mnav .vga-mnav__stype {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.vga-mnav .vga-mnav__stype::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.vga-mnav .vga-mnav__stype-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    color: #47617A;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.vga-mnav .vga-mnav__stype-btn > i {
    font-size: 12px;
    color: #94A3B8;
}

.vga-mnav .vga-mnav__stype-btn.is-active {
    border-color: var(--vga-teal, #008894);
    background: var(--vga-teal, #008894);
    color: #fff;
}

.vga-mnav .vga-mnav__stype-btn.is-active > i {
    color: #fff;
}

.vga-mnav .vga-mnav__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
}

.vga-mnav .vga-mnav__searchicon {
    flex: 0 0 auto;
    color: #94A3B8;
}

.vga-mnav .vga-mnav__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    color: #1F2937;
}

.vga-mnav .vga-mnav__search input:focus {
    outline: 0;
    box-shadow: none;
}

.vga-mnav .vga-mnav__search button {
    flex: 0 0 auto;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--vga-teal, #008894);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}

/* --- Nhãn nhóm --- */
.vga-mnav .vga-mnav__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 18px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #94A3B8;
}

.vga-mnav .vga-mnav__label svg {
    color: #94A3B8;
}

/* --- Lưới hai cột: menu Primary + các mục khai ở Cài đặt --- */
.vga-mnav .vga-mnav__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vga-mnav .vga-mnav__grid > li {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vga-mnav .vga-mnav__grid > li > a {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #E6EEF5;
    border-radius: 12px;
    background: #F6FAFC;
    color: #22384F;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    text-decoration: none;
    /* Tên dài ("Tours & Hoạt động") cắt gọn thay vì đội ô cao lên */
    overflow: hidden;
}

.vga-mnav .vga-mnav__grid > li > a:hover,
.vga-mnav .vga-mnav__grid > li > a:focus {
    border-color: #BFE0E4;
    background: #EAF6F7;
    color: var(--vga-teal, #008894);
}

.vga-mnav .vga-mnav__grid > li > a > svg,
.vga-mnav .vga-mnav__grid > li > a > i,
.vga-mnav .vga-mnav__grid > li > a > img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: var(--vga-teal, #008894);
    object-fit: contain;
}

/* Mũi tên và menu con của walker không có chỗ trong ô lưới */
.vga-mnav .vga-mnav__grid > li > a > i.fa-angle-down,
.vga-mnav .vga-mnav__grid > li > a > i.caret,
.vga-mnav .vga-mnav__grid > li > .menu-dropdown,
.vga-mnav .vga-mnav__grid > li > .mega,
.vga-mnav .vga-mnav__grid > li > ul {
    display: none !important;
}

/* Nhãn Hot/-20% admin gắn kèm tên menu */
.vga-mnav .vga-mnav__grid .menu-badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 99px;
    background: #FF2D37;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    white-space: nowrap;
}

/* Ô thẻ AI: tông vàng cho nổi như bản mẫu */
.vga-mnav .vga-mnav__fixed--ai > a {
    border-color: #FCE7B2;
    background: #FFF8E8;
    color: #8A6100;
}

.vga-mnav .vga-mnav__fixed--ai > a > i {
    color: #E8A80B;
}

.vga-mnav .vga-mnav__badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 99px;
    background: #FF2D37;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}

/* --- Nhóm xếp dọc: tài khoản, đối tác --- */
.vga-mnav .vga-mnav__stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vga-mnav .vga-mnav__stack > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #E6EEF5;
    border-radius: 12px;
    background: #fff;
    color: #22384F;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.vga-mnav .vga-mnav__stack > a:hover {
    border-color: #BFE0E4;
    background: #F6FAFC;
    color: var(--vga-teal, #008894);
}

.vga-mnav .vga-mnav__stack > a > svg,
.vga-mnav .vga-mnav__stack > a > i {
    flex: 0 0 auto;
    width: 18px;
    font-size: 15px;
    text-align: center;
    color: var(--vga-teal, #008894);
}

.vga-mnav .vga-mnav__stack > a.vga-mnav__logout,
.vga-mnav .vga-mnav__stack > a.vga-mnav__logout > i {
    color: #E11D48;
}

/* Màn rất hẹp: ô lưới bớt chữ cho khỏi tràn */
@media (max-width: 359.98px) {
    .vga-mnav .vga-mnav__grid > li > a {
        font-size: 12px;
        padding: 9px 10px;
    }
}

/* Lớp phủ nền: home.js chèn <div class="bc-effect-bg"> khi mở ngăn kéo và bắt
   click trên nó để đóng, nhưng chưa file CSS nào tạo hình cho thẻ này — nó cao
   0px nên nền không tối đi và bấm ra ngoài không đóng được menu. */
.bc-effect-bg {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(15, 42, 67, .45);
}


/* ==========================================================================
   24. HỘP TÌM KIẾM TRÊN MÀN SIÊU HẸP (máy gập ~280–345px)
   --------------------------------------------------------------------------
   Galaxy Z Fold ở màn ngoài chỉ rộng 280–345px CSS, hẹp hơn iPhone SE (375px).
   Ngưỡng gãy: 355px — dưới mức đó mọi hàng nhiều cột về một cột.

   Đo bằng CONTAINER QUERY chứ không phải media query: hộp tìm kiếm còn được
   dùng trong trang /ve-may-bay và có thể nằm trong khối hẹp, nên phải đo bề
   rộng của chính nó thay vì bề rộng cửa sổ.

   Tên thật của các khối (spec gọi .search-card/.tabs/.tab):
     .banner_hero_tab.tab-search  → thẻ bọc cả tab lẫn form (trang chủ)
     .fc-search-box               → hộp form vé máy bay
     ul.nav.nav-tabs > li > a     → hàng tab và từng tab
     .fc-flex                     → cặp Điểm đi / Điểm đến (kèm nút hoán đổi)
     #fc-date-wrap.fc-grid        → cặp Ngày đi / Ngày về
     .form-select-guests          → ô Số khách và hạng vé

   Safari dưới bản 16 chưa có container query → cuối mục có bản dự phòng bằng
   @media, chỉ chạy khi trình duyệt không hiểu container query.
   ========================================================================== */

.banner_hero_tab.tab-search,
.fc-search-box {
    container-type: inline-size;
    container-name: searchcard;
}

/* --------------------------------------------------------------------------
   24.1 Chặn tràn từ gốc — áp cho MỌI bề rộng
   Flex/grid item mặc định `min-width: auto`, nghĩa là nó từ chối co nhỏ hơn
   nội dung bên trong (ở đây là input với chiều rộng nội tại khá lớn). Đó là
   nguyên nhân cặp Điểm đi/Điểm đến bị bóp méo thay vì xuống dòng.
   -------------------------------------------------------------------------- */
.fc-search-box .row > [class*="col-"],
.banner_hero_tab.tab-search .g-field-search > .row > [class*="col-"],
.fc-flex,
.fc-field,
.fc-grid,
.form-select-guests,
.form-select-guests .form-group,
.form-select-guests .form-content,
.form-select-guests .wrapper-more {
    min-width: 0;
}

.fc-field input,
.fc-field input.form-control,
.form-select-guests input {
    width: 100%;
    min-width: 0;
}

/* Chữ "khách" chỉ dùng ở màn hẹp nên mặc định ẩn. Phải khai TRƯỚC khối
   @container bên dưới, không thì hai rule cùng đặc hiệu và rule đứng sau thắng. */
.form-select-guests .render .gv-short {
    display: none;
}

/* Ngày đi/Ngày về: hai cột bằng nhau nhưng được phép co (1fr không co được) */
.fc-search-box .fc-grid {
    grid-template-columns: minmax(0, 1fr);
}

.fc-search-box .fc-grid.is-round-trip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   24.2 Hàng tab: cuộn ngang, cấm xuống dòng
   Ba tab xuống hai dòng làm vỡ đường gạch chân và đội cao cả đầu hộp.
   -------------------------------------------------------------------------- */
/* !important vì main.css ép `display: grid !important` + lưới 2 cột dưới 768px
   — chính chỗ đó đẩy tab thứ ba xuống dòng hai. */
.banner_hero_tab.tab-search ul.nav.nav-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.banner_hero_tab.tab-search ul.nav.nav-tabs::-webkit-scrollbar {
    display: none;
    height: 0;
}

.banner_hero_tab.tab-search ul.nav.nav-tabs > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.banner_hero_tab.tab-search ul.nav.nav-tabs li a {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   24.3 Dưới 355px: mọi hàng nhiều cột về một cột
   -------------------------------------------------------------------------- */
@container searchcard (max-width: 355px) {
    /* --- Tab --- */
    .banner_hero_tab.tab-search ul.nav.nav-tabs li a,
    ul.nav.nav-tabs li a {
        padding: 10px 9px;
        font-size: 12px;
        line-height: 24px;
    }

    /* --- Các cột của form về một hàng --- */
    .fc-search-box .row > [class*="col-"],
    .g-field-search > .row > [class*="col-"] {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .fc-search-box .row > [class*="col-"], .g-field-search > .row > [class*="col-"]:first-child{
        padding-bottom: 0 !important;
    }

    /* --- Cặp Điểm đi / Điểm đến --- */
    .fc-flex {
        position: relative;
        flex-direction: column;
        gap: 8px;
    }

    .fc-flex > .fc-field {
        width: 100%;
    }

    /* Nút hoán đổi: hai ô xếp chồng thì mũi tên phải quay dọc mới đúng nghĩa.
       Nhấc khỏi luồng và ghim vào khe giữa hai ô, lệch về mép phải. */
    .fc-flex > button#swap-btn {
        position: absolute;
        top: 50%;
        right: 8px;
        left: auto;
        bottom: auto;
        z-index: 5;
        width: 34px;
        height: 34px;
        margin: 0;
        transform: translateY(-50%) rotate(90deg);
        border-radius: 50%;
        background: #fff;
        border: 1px solid #E2E8F0;
    }

    /* --- Cặp ngày --- */
    .fc-search-box .fc-grid,
    .fc-search-box .fc-grid.is-round-trip {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 10px 0;
    }

    .form-select-guests{
        margin-bottom: 10px;
    }

    /* Nhãn "Ngày về" từng xuống hai dòng làm hai ô lệch nhau; một cột thì hết */
    .fc-field.fc-date label {
        white-space: nowrap;
    }

    /* --- Nhãn và giá trị --- */
    /* Đọc được nhãn quan trọng hơn giữ một dòng → cho xuống dòng, bỏ cắt đuôi */
    .form-select-guests > label,
    .fc-field > label {
        overflow: visible;
        overflow-wrap: break-word;
        white-space: normal;
        text-overflow: clip;
    }

    /* "1 Hành khách - Phổ thông" → "1 khách, phổ thông" */
    .form-select-guests .render,
    .vne_wrap .vne_form .form-content .render {
        width: auto;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .form-select-guests .render .gv-long,
    .form-select-guests .render .gv-sep {
        display: none;
    }

    .form-select-guests .render .gv-short {
        display: inline;
    }

    .form-select-guests .render .cabin-label {
        text-transform: lowercase;
    }

    .form-select-guests .render .cabin-label::before {
        content: ", ";
    }

    /* --- Vùng chạm: giữ 44px kể cả ở 280px, không bớt padding --- */

    .fc-btn-search {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   24.4 Dự phòng cho trình duyệt chưa có container query (Safari < 16)
   Ở đó chỉ đo được bề rộng cửa sổ — đúng cho trường hợp hộp trải hết chiều
   ngang, tức đúng cảnh máy gập đang gặp.
   -------------------------------------------------------------------------- */
@supports not (container-type: inline-size) {
    @media (max-width: 355px) {
        .banner_hero_tab.tab-search ul.nav.nav-tabs li a {
            padding: 10px 9px;
            font-size: 12px;
            line-height: 24px;
        }

        .fc-search-box .row > [class*="col-"],
        .g-field-search > .row > [class*="col-"] {
            flex: 1 1 100%;
            width: 100%;
            max-width: 100%;
        }

        .fc-flex {
            position: relative;
            flex-direction: column;
            gap: 8px;
        }

        .fc-flex > .fc-field {
            width: 100%;
        }

        .fc-flex > button#swap-btn {
            position: absolute;
            top: 50%;
            right: 8px;
            left: auto;
            bottom: auto;
            z-index: 5;
            width: 34px;
            height: 34px;
            margin: 0;
            transform: translateY(-50%) rotate(90deg);
            border-radius: 50%;
            background: #fff;
            border: 1px solid #E2E8F0;
        }

        .fc-search-box .fc-grid,
        .fc-search-box .fc-grid.is-round-trip {
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
        }

        .form-select-guests > label,
        .fc-field > label {
            overflow: visible;
            overflow-wrap: break-word;
            white-space: normal;
            text-overflow: clip;
        }

        .form-select-guests .render {
            width: auto;
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
        }

        .form-select-guests .render .gv-long,
        .form-select-guests .render .gv-sep {
            display: none;
        }

        .form-select-guests .render .gv-short {
            display: inline;
        }

        .form-select-guests .render .cabin-label {
            text-transform: lowercase;
        }

        .form-select-guests .render .cabin-label::before {
            content: ", ";
        }


        .fc-btn-search {
            width: 100%;
        }
    }
}

/* --------------------------------------------------------------------------
   24.5 Tab Khách sạn / Tour ở màn siêu hẹp
   Hai tab này không dùng .fc-search-box mà dùng form chung .vne_form, nên phải
   khai riêng. Ở 280px: placeholder "Thành phố, Khách sạn, Địa danh" và khoảng
   ngày bị cắt, còn dòng "1 Phòng · 1 Người lớn · 0 Trẻ em" bị bẻ giữa từ
   ("Phòn / g") vì các cụm là flex item và bị ép co.
   -------------------------------------------------------------------------- */
@container searchcard (max-width: 355px) {
    .banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location,
    .banner_hero_tab.tab-search .vne_form .g-map-place input[name="map_place"],
    .banner_hero_tab.tab-search .vne_form .form-content .render,
    .banner_hero_tab.tab-search .form-select-guests .render,
    .banner_hero_tab.tab-search .inputDate .render,
    .banner_hero_tab.tab-search .inputDate .date-display-block .render,
    .banner_hero_tab.tab-search .date-range-sep {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #1d293d;
    }

    /* Khoang ngay nhan - tra: hai gia tri + dau gach dai hon o nen 280px */
    .banner_hero_tab.tab-search .vne_form .form-date-search-hotel .inputDate {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Ba cụm số phòng/khách: cho xuống dòng nguyên cụm, cấm bẻ giữa từ */
    .banner_hero_tab.tab-search .form-select-guests .render,
    .banner_hero_tab.tab-search .vne_form .form-content .wrapper-more .render {
        display: flex;
        flex-wrap: wrap;
        row-gap: 2px;
        max-width: 100%;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .banner_hero_tab.tab-search .form-select-guests .render > span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Vùng chạm 44px cho cả hai tab này */
}

@supports not (container-type: inline-size) {
    @media (max-width: 355px) {
        .banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location,
        .banner_hero_tab.tab-search .vne_form .g-map-place input[name="map_place"],
        .banner_hero_tab.tab-search .vne_form .form-content .render,
        .banner_hero_tab.tab-search .form-select-guests .render,
        .banner_hero_tab.tab-search .inputDate .render,
        .banner_hero_tab.tab-search .inputDate .date-display-block .render,
        .banner_hero_tab.tab-search .date-range-sep {
            font-size: 13px;
        }

        .banner_hero_tab.tab-search .vne_form .form-date-search-hotel .inputDate {
            flex-wrap: wrap;
            row-gap: 2px;
        }

        .banner_hero_tab.tab-search .form-select-guests .render,
        .banner_hero_tab.tab-search .vne_form .form-content .wrapper-more .render {
            display: flex;
            flex-wrap: wrap;
            row-gap: 2px;
            max-width: 100%;
            overflow: visible;
            white-space: normal;
            text-overflow: clip;
            word-break: keep-all;
            overflow-wrap: normal;
        }

        .banner_hero_tab.tab-search .form-select-guests .render > span {
            flex: 0 0 auto;
            white-space: nowrap;
        }

    }
}

/* --------------------------------------------------------------------------
   24.6 Vùng chạm 44px trong hộp tìm kiếm
   Áp cho MỌI bề rộng của thiết bị cảm ứng, không riêng dưới 355px: ngón tay ở
   máy 414px cũng cần 44px như ở máy 280px. `pointer: coarse` giới hạn đúng
   thiết bị chạm nên máy tính dùng chuột giữ nguyên bố cục cũ.

   Không bớt padding để lấy chỗ — cứ để ô cao lên.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .banner_hero_tab.tab-search .vne_form .form-content,
    .banner_hero_tab.tab-search .vne_form .smart-search,
    .banner_hero_tab.tab-search .vne_form .inputDate,
    .fc-search-box .form-select-guests .form-content,
    .fc-btn-search {
        min-height: 44px;
    }

    /* Chính ô nhập mới là thứ người dùng chạm, không phải thẻ bọc ngoài */
    .banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location,
    .banner_hero_tab.tab-search .vne_form .g-map-place input[name="map_place"],
    .banner_hero_tab.tab-search .vne_form .form-content input.form-control,
    .fc-search-box .fc-field input,
    .fc-search-box .fc-field input.form-control {
        height: auto;
        min-height: 44px;
    }

    /* Radio "Một chiều / Khứ hồi": vùng chạm tính theo <label> bọc ngoài */
    .fc-type-option {
        display: inline-flex;
        align-items: center;
        min-height: 25px;
    }

    /* Nút hoán đổi điểm đi/điểm đến */
    .fc-flex > button#swap-btn {
        width: 44px;
        height: 44px;
    }
}

/* --------------------------------------------------------------------------
   24.7 Form vé máy bay trên điện thoại nói chung (không riêng máy gập)
   Ngưỡng 355px ở trên chỉ lo màn siêu hẹp. Nhưng ngay ở iPhone 414px form vẫn
   giữ 4 cột ngang: ô ngày chỉ còn 83px nên "08/08/2026" bị cắt khi chọn khứ
   hồi. Dưới 992px cho mỗi ô một hàng — cùng mốc mà form khách sạn đang dùng.

   Chỗ này dùng media query chứ không container query vì nó là quy ước bố cục
   chung của theme (xem mục 22), không phải phép đo riêng của hộp tìm kiếm.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fc-search-box .row > [class*="col-"] {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    /* Hai ô ngày giữ nguyên mặc định (khai ở 24.1): hàng ngang giờ rộng cả hàng
       nên chúng vẫn đứng cạnh nhau được. KHÔNG khai lại ở đây — rule này đứng
       sau khối @container nên sẽ đè mất bố cục một cột dưới 355px. */

    /* main.css cho .row-5 padding 7px cộng với margin âm -12px của .row nên
       hàng lòi khỏi hộp 7px về bên phải */
    .fc-search-box .row.row-5 {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   25. NHÃN VÀ Ô NHẬP CỦA HỘP TÌM KIẾM TRÊN ẢNH BÌA (.banner_hero_tab.tab-search)
   --------------------------------------------------------------------------
   Markup: Template/Views/frontend/blocks/form-search-all-service/banner_index.blade.php
           gọi Hotel/Views/frontend/layouts/search/fields/{location,date,guests}.blade.php

   Ba ô "Điểm đến / Nhận - trả phòng / Khách & phòng" lệch nhau cả hai trục vì
   ba cây thẻ khác nhau:

   • Trục ngang — main.css vẽ icon bằng background-image rồi thụt chữ vào bằng
     padding-left. Ô điểm đến thụt 30px, ô ngày 26px (icon đặt trên .inputDate,
     KHÔNG bọc nhãn) nên nhãn của hai ô này vẫn dính mép trái còn giá trị thì
     lùi vào; riêng ô khách & phòng đặt icon trên .wrapper-more (BỌC cả nhãn)
     nên nhãn của nó lại thụt 26px. Kết quả: ba nhãn ở ba mốc 0/0/26px.
   • Trục dọc — ô điểm đến và ô ngày cao 26px, ô khách & phòng để cao tự nhiên
     (~22px), mà hàng lại `align-items:center` nên cột thấp hơn bị đẩy xuống
     vài px so với hai cột kia.

   Cách xử ở đây: chốt một mốc thụt chung, kéo icon của ô khách & phòng xuống
   đúng dòng giá trị (để nhãn hết bị thụt kép), rồi khoá nhãn 16px + giá trị
   26px cho cả ba ô. Sau đó mỗi cột tự canh giữa khối nhãn+giá trị của mình,
   nên ba cột luôn khớp nhau bất kể chiều cao hàng.
   ========================================================================== */

.banner_hero_tab.tab-search .vne_form {
    /* icon 18px + khoảng hở 10px */
    --vga-search-indent: 28px;
    --vga-search-value-h: 26px;
}

/* --------------------------------------------------------------------------
   25.1 Cột: cao bằng nhau (vạch ngăn dọc đều tay) + canh giữa nội dung
   -------------------------------------------------------------------------- */
.banner_hero_tab.tab-search .vne_form .g-field-search > .row {
    align-items: stretch;
}

.banner_hero_tab.tab-search .vne_form .g-field-search > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   25.2 Icon ô khách & phòng: chuyển từ .wrapper-more (bọc cả nhãn) xuống .render
   để nó nằm đúng dòng giá trị như icon của hai ô kia
   -------------------------------------------------------------------------- */
.banner_hero_tab.tab-search .form-select-guests .wrapper-more {
    padding-left: 0;
    background-image: none;
}

.banner_hero_tab.tab-search .form-select-guests .wrapper-more .render {
    padding-left: var(--vga-search-indent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5b5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px 18px;
}

/* --------------------------------------------------------------------------
   25.3 Trục ngang: nhãn bắt đầu đúng chỗ chữ giá trị bắt đầu
   -------------------------------------------------------------------------- */
.banner_hero_tab.tab-search .vne_form .form-content label {
}

/* Lấy .form-content làm mốc để chỉ trúng ô ngày của khách sạn (.form-date-search-hotel)
   và của tour (.form-date-search); ô ngày vé máy bay nằm trong .fc-search-box,
   có icon .fc-icon riêng nên phải để yên */
.banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location,
.banner_hero_tab.tab-search .vne_form .g-map-place input[name="map_place"],
.banner_hero_tab.tab-search .vne_form .form-content .inputDate {
    padding-left: var(--vga-search-indent);
}

/* --------------------------------------------------------------------------
   25.4 Trục dọc: nhãn 16px + hở 6px + giá trị 26px — giống hệt nhau ở cả ba ô
   -------------------------------------------------------------------------- */
.banner_hero_tab.tab-search .vne_form .form-content label {
    height: 16px;
    line-height: 16px;
    margin: 10px 0px 0px 0;
}

.banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location,
.banner_hero_tab.tab-search .vne_form .g-map-place input[name="map_place"],
.banner_hero_tab.tab-search .vne_form .form-content .inputDate,
.banner_hero_tab.tab-search .form-select-guests .wrapper-more .render {
    height: var(--vga-search-value-h);
    line-height: var(--vga-search-value-h);
}

.banner_hero_tab.tab-search .vne_form .smart-search input.smart-search-location::placeholder{
    color:#1d293d;
    font-size:13px;
    font-weight: 700 !important;
}

/* Các lớp bọc giữa .form-content và .inputDate không được chèn thêm khoảng */
.banner_hero_tab.tab-search .form-content .form-date-search-hotel,
.banner_hero_tab.tab-search .form-content .form-date-search,
.banner_hero_tab.tab-search .form-content .date-wrapper,
.banner_hero_tab.tab-search .form-content .check-in-wrapper {
    margin: 0;
    padding: 0;
}

/* Mũi tên xổ xuống bám theo dòng giá trị (cao 26px) chứ không bám đáy ô */
.banner_hero_tab.tab-search .form-select-guests .dropdown-toggle:after {
    bottom: 9px;
}

/* ==========================================================================
   26. BẢNG CHỌN KHÁCH BỊ ĐÈ (.select-guests-dropdown)
   --------------------------------------------------------------------------
   Bảng xổ là .dropdown-menu của Bootstrap nên đã có z-index 1000. Nhưng z-index
   chỉ so bì bên trong LỚP CHỒNG gần nhất, mà mọi hộp tìm kiếm đều nằm trong một
   khối bọc `position` + `z-index: 99`:

     .banner_hero_body                       trang chủ (phủ lên ảnh bìa)
     .flight-search-hero                     trang vé máy bay
     .banner_category_main                   dải tiêu đề trang danh sách
     .sec-banner-header .banner-form-simple  ô tìm kiếm ở trang chi tiết
     .banner_hero_tab.tab-search             thẻ bọc tab + form ở trang chủ

   Cả cụm bên trong — kể cả bảng xổ z-index 1000 — bị gói lại thành đúng mức 99
   khi so với phần còn lại của trang. Trong khi đó nút điều hướng băng chuyền
   `.owl-nav button` của các khối bên dưới lại để z-index 100: hơn 99 nên nó vẽ
   đè lên bảng xổ. Nâng z-index của chính bảng xổ KHÔNG cứu được, phải nâng khối
   bọc.

   Riêng .fc-search-box (form vé máy bay) còn một lỗi nữa: mục 24 đặt
   `container-type: inline-size` lên nó, thuộc tính này tự tạo một lớp chồng,
   mà thẻ lại KHÔNG được định vị nên cả cụm rơi xuống lớp nội dung thường —
   mọi thẻ `position` đứng sau đều đè lên được. Cho nó một mức định vị thật.

   Mốc 300: trên nút băng chuyền (100), vẫn dưới đầu trang (1020), ngăn kéo menu
   (1030) và nút chat nổi (1030) — xem mục 3, 17, 23.

   Chỉ nâng KHI bảng xổ đang mở (`:has`), không nâng thường trực: các khối bọc
   này là absolute và thường thò xuống quá khối bên dưới, để 300 cả ngày thì
   vùng trống của chúng lại ăn mất cú bấm vào nút băng chuyền ở khối dưới.
   ========================================================================== */

.sec-banner-search .banner_hero_body:has(.dropdown-menu.show),
.banner_hero_tab.tab-search:has(.dropdown-menu.show),
.flight-search-hero:has(.dropdown-menu.show),
.banner_category_main:has(.dropdown-menu.show),
.sec-banner-header .banner-form-simple:has(.dropdown-menu.show) {
    z-index: 300;
}

/* Cái này thì nâng thường trực vì là lỗi cấu trúc, không phải chuyện lúc mở:
   z-index 10 đủ để hơn mọi thẻ position bên trong hộp (cao nhất là nút hoán đổi
   điểm đi/đến, z-index 5 — mục 24) */
.fc-search-box {
    position: relative;
    z-index: 10;
}

/* Ô đang mở phải nằm trên các ô nhập kế bên: .form-group của ô kế bên cũng là
   position nên viền/mũi tên của nó vẽ ở cùng lớp với bảng xổ */
.form-select-guests:has(.dropdown-menu.show) {
    position: relative;
    z-index: 1000;
}

/* Nút "Tìm kiếm" (.g-button-submit) để position:relative mà lại đứng SAU ô số
   khách trong DOM nên nó vẽ đè lên. Đang mở bảng xổ thì hạ nó xuống lớp 0 —
   vẫn trên nội dung thường, nhưng dưới bảng xổ (1000). */
.vne_form:has(.dropdown-menu.show) .g-button-submit {
    z-index: 0;
}

/* --------------------------------------------------------------------------
   26.1 Màn nhỏ: bảng xổ bị CẮT chứ không phải bị đè
   Mục 22.7 đảo vai hai lớp của ảnh bìa — .hero_slide thành lớp phủ tuyệt đối
   nằm sau, .banner_hero_body trở về luồng thường. Để ảnh không lòi khỏi góc bo,
   mục đó đặt `overflow: hidden` lên .sec-banner-search. Nhưng overflow cắt TẤT
   CẢ con cháu chứ không riêng ảnh: bảng chọn khách xổ dài quá đáy khối là bị
   cắt cụt, nhìn như bị ảnh bìa che.

   Cắt thì vẫn phải cắt, nhưng cắt đúng lớp ảnh (.hero_slide) — chính nó mới là
   thứ cần bo góc. Khối chữ nằm ngoài phạm vi cắt nên bảng xổ tràn xuống thoải
   mái; phần tràn đã có mục 26 nâng z-index nên không bị khối dưới đè.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .sec-banner-search {
        overflow: visible;
    }

    /* 22.7 đang gỡ bo góc của lớp này (border-radius: 0) vì hồi đó thẻ cha lo
       việc cắt; giờ trả lại cho nó */
    .sec-banner-search .hero_slide {
        overflow: hidden;
        border-radius: 25px;
        margin: 10px;
        width: calc(100% - 20px);
    }
}

/* ==========================================================================
   27. FORM VÉ MÁY BAY (.fc-search-box)
   --------------------------------------------------------------------------
   Markup: Flight/Views/frontend/blocks/flight-form.blade.php (trang /ve-may-bay)
           và Flight/Views/frontend/layouts/search/form-search.blade.php (tab
           "Vé máy bay" trong hộp tìm kiếm trang chủ) — hai file, cùng bộ class.

   Form này có kiểu riêng: mỗi ô là một hộp trắng cao 50px, bo 10px, đổ bóng
   nhẹ, icon thật nằm trong markup (.fc-icon). Ba chỗ đang hỏng:

   1. Ô ngày có HAI icon lịch. Khối "tìm kiếm trong banner" của main.css viết
      cho form khách sạn nhưng selector chỉ có `.banner_hero_tab.tab-search
      .inputDate` — mà ô ngày của vé máy bay cũng mang class .inputDate. Nó ăn
      nguyên bộ: icon vẽ bằng background-image (thành icon thứ hai), ép phẳng
      cao 26px, bỏ nền trắng, bỏ bo góc. Icon thật .fc-icon ghim ở top:38px nên
      rớt hẳn xuống dưới ô đã bị bóp còn 26px.

   2. Ô "Số khách và hạng vé" không có hộp trắng nào cả — main.css chỉ khai
      `border-radius` cho .render mà quên nền, chiều cao, padding. Chữ nằm trần
      sát ngay dưới nhãn 16px in đậm, chen giữa hai ô hộp trắng 50px hai bên.
      Mũi tên xổ xuống lại bị `display: none !important` nên không có dấu hiệu
      gì cho biết bấm được.

   3. .fc-icon ghim `top: 38px` — con số đo theo nhãn 24px + lề 4px của màn
      rộng. Đổi cỡ chữ nhãn ở màn nhỏ là icon lệch ngay. Đo từ đáy thì bám theo
      ô nhập, không phụ thuộc nhãn.
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1 Trong hộp banner: trả ô ngày về kiểu của chính form vé máy bay
   -------------------------------------------------------------------------- */
.banner_hero_tab.tab-search .fc-field .inputDate {
    background-image: none;
    background-color: #fff;
    height: 50px;
    border-radius: 10px !important;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------------------
   27.2 Ô "Số khách và hạng vé" dùng chung một hộp với các ô kế bên
   Selector phải kèm .banner_hero_tab để thắng mục 25 (viết cho ô số khách của
   form khách sạn, 5 lớp class) khi form nằm trong tab trang chủ.
   -------------------------------------------------------------------------- */
.fc-search-box .form-select-guests .wrapper-more,
.banner_hero_tab.tab-search .fc-search-box .form-select-guests .wrapper-more {
    padding: 0;
    background-image: none;
}

.fc-search-box .form-select-guests .form-content,
.banner_hero_tab.tab-search .fc-search-box .form-select-guests .form-content {
    position: relative;
    padding-right: 0;
    cursor: pointer;
}

.fc-search-box .form-select-guests .render,
.banner_hero_tab.tab-search .fc-search-box .form-select-guests .wrapper-more .render {
    display: block;
    height: 50px;
    line-height: 50px;
    /* chừa 34px bên phải cho mũi tên */
    padding: 0 34px 0 12px;
    background-image: none;
    background-color: #fff;
    border-radius: 10px !important;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .25);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mũi tên xổ xuống. Dùng chính ::after của .dropdown-toggle nên phải !important
   để thắng `display: none !important` của main.css. */
.fc-search-box .form-select-guests .form-content.dropdown-toggle::after,
.banner_hero_tab.tab-search .fc-search-box .form-select-guests .form-content.dropdown-toggle::after {
    display: block !important;
    content: "";
    position: absolute;
    right: 14px;
    bottom: 19px;
    width: 8px;
    height: 8px;
    margin: 0;
    border: 0;
    border-right: 1.6px solid #9aa5b5;
    border-bottom: 1.6px solid #9aa5b5;
    transform: rotate(45deg);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   27.3 Icon đo từ đáy ô thay vì từ đỉnh nhãn
   -------------------------------------------------------------------------- */
.fc-field .fc-icon {
    top: auto;
    /* (50 - 16) / 2 — icon cao 16px, ô cao 50px */
    bottom: 17px;
    line-height: 0;
}

/* --------------------------------------------------------------------------
   27.4 Màn nhỏ: nhãn gọn lại, ô thấp bớt, nút trải hết hàng
   Dưới 992px mục 24.7 đã cho mỗi ô một hàng riêng, nên chiều ngang không còn
   là vấn đề — chỗ cần tiết kiệm là chiều dọc.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fc-search-box .fc-field > label,
    .fc-search-box .form-select-guests > label {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 4px;
    }

    .fc-search-box .fc-flex .fc-field:first-child input,
    .fc-search-box .fc-flex .fc-field:last-child input,
    .fc-search-box .fc-field .inputDate,
    .banner_hero_tab.tab-search .fc-field .inputDate,
    .fc-search-box .fc-field select {
        height: 48px;
    }

    .fc-search-box .form-select-guests .render,
    .banner_hero_tab.tab-search .fc-search-box .form-select-guests .wrapper-more .render {
        height: 48px;
        line-height: 48px;
    }

    .fc-search-box .form-select-guests .form-content.dropdown-toggle::after,
    .banner_hero_tab.tab-search .fc-search-box .form-select-guests .form-content.dropdown-toggle::after {
        bottom: 18px;
    }

    .fc-field .fc-icon {
        /* (48 - 16) / 2 */
        bottom: 16px;
    }

    .fc-btn-search {
        width: 100%;
        height: 48px;
    }
}

/* ==========================================================================
   28. DẢI TÌM KIẾM KHÁCH SẠN CÓ ẢNH NỀN (block "Hotel: Form Search")
   --------------------------------------------------------------------------
   Blade: themes/Vietago/Hotel/Views/frontend/blocks/form-search-hotel/index.blade.php

   Hộp xanh đậm bo góc: tiêu đề + mô tả trắng, bên dưới là thanh tìm kiếm trắng.
   Ảnh nền do người quản trị chọn ở ô "- Layout Normal: Background Image Uploader"
   của block, blade truyền vào biến --vga-hero-search-bg. Không chọn ảnh thì
   var() rơi về `none`, hộp vẫn còn nền xanh nên chữ trắng không bao giờ mất.

   Thanh tìm kiếm KHÔNG viết kiểu mới: blade gắn thêm class
   `banner_hero_tab tab-search` để ăn nguyên bộ kiểu ô nhập của hộp tìm kiếm
   trên ảnh bìa trang chủ (main.css mục "form" + mục 25 file này). Ở đây chỉ
   chỉnh lại phần đệm/lề vì khối này không có hàng tab phía trên.
   ========================================================================== */

.vga-hero-search {
    padding-bottom: 20px;
}

/* Ghi đè .tab-search của main.css (nền trắng, đệm 0 25px 25px, đổ bóng mảnh).
   Cùng độ ưu tiên 1 class nên thắng nhờ vietago.css nạp sau main.css */
.vga-hero-search__box {
    padding: 40px;
    border-radius: 16px;
    background-color: #10233F;
    background-image: linear-gradient(0deg, #10233f96, #10233f66), var(--vga-hero-search-bg, none);
    var(--vga-hero-search-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none;
}

.vga-hero-search__title {
    margin: 0 0 10px 0;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
}

.vga-hero-search__desc {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Thanh trắng: 3 class nên thắng .banner_hero_tab.tab-search của main.css */
.vga-hero-search__box .banner_hero_tab.tab-search {
    margin-top: 24px;
    padding: 8px 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 35, 63, 0.18);
}

/* --------------------------------------------------------------------------
   28.1 Dưới 992px: mỗi ô nhập là một thẻ bo góc riêng

   Mục 22.5 xếp các ô thành từng hàng ngăn nhau bằng một vạch ngang trong cùng
   một hộp trắng. Mẫu thiết kế trên điện thoại cho mỗi ô một khung riêng, nút
   Tìm trải hết bề ngang. Mọi rule ở đây có thêm .vga-hero-search__box (4 class
   nên thắng mục 22.5) để hộp tìm kiếm trang chủ giữ nguyên kiểu cũ.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .home-title h2{
        font-size: 20px !important;
    }

    .h4,h4{
        font-size: 18px !important;
    }

    .vga-hero-search__box {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .vga-hero-search__box .banner_hero_tab.tab-search {
        margin-top: 20px;
        padding: 0px;
        border-radius: 20px;
    }

    .vga-hero-search__box .banner_hero_tab.tab-search .vne_form .g-field-search > .row > [class*="col-"] {
        margin-bottom: 10px;
        padding: 10px 14px;
        border: 1px solid #E8EDF3;
        border-radius: 15px;
        background: #fff;
    }

    /* Ô cuối chứa nút bấm, không phải ô nhập nên không đóng khung */
    .vga-hero-search__box .banner_hero_tab.tab-search .vne_form .g-field-search > .row > [class*="col-"]:last-child {
        margin-bottom: 0;
        padding: 4px 0 10px 0 !important;
        border: 0;
        background: none;
    }

    .vga-hero-search__box .banner_hero_tab.tab-search .vne_form .g-button-submit button {
        width: 100%;
        height: 56px;
        border-radius: 12px;
    }

    /* --- Ô ngày: rộng cả hàng nên tách nhãn "Nhận phòng" / "Trả phòng" ------
       Trên máy tính ô này hẹp nên main.css ẩn hai nhãn nhỏ và chỉ để một nhãn
       chung do admin đặt. Ở đây làm ngược lại: ẩn nhãn chung, hiện hai nhãn nhỏ
       và đẩy hai ngày về hai mép. */
    .vga-hero-search__box .banner_hero_tab.tab-search .form-date-search-hotel .check-in-wrapper > label {
        display: none;
    }

    .vga-hero-search__box .banner_hero_tab.tab-search .inputDate .date-label-small {
        display: block;
        margin: 5px 0 2px 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: #6b7280 !important;
        white-space: nowrap;
    }

    /* Nhãn nằm trên giá trị nên ô phải cao theo nội dung, không giữ 26px nữa */
    .vga-hero-search__box .banner_hero_tab.tab-search .inputDate {
        height: auto !important;
        align-items: flex-end;
        justify-content: space-between;
        /* Icon lịch chuyển xuống dòng giá trị; để nguyên ở đây thì nhãn cũng bị
           thụt vào 26px, trong khi mẫu cho nhãn sát mép trái */
        padding-left: 0;
        background-image: none;
    }

    .banner_hero_tab.tab-search .inputDate .check-in-render {
        padding-left: 26px;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 18px 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5b5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
        font-size: 13px !important;
    }

    /* Ngày trả phòng dạt về mép phải */
    .vga-hero-search__box .banner_hero_tab.tab-search .inputDate .date-display-block:last-child {
        text-align: right;
    }

    .vga-hero-search__box .banner_hero_tab.tab-search .date-range-sep {
        align-self: flex-end;
        padding-bottom: 2px;
    }
}

/* --------------------------------------------------------------------------
   28.2 Dưới 768px: thu nhỏ tiêu đề để thanh tìm kiếm không bị đẩy quá sâu
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .vga-hero-search__box {
        padding: 24px 16px;
    }

    .vga-hero-search__title {
        font-size: 28px;
    }

    .vga-hero-search__desc {
        font-size: 15px;
        line-height: 22px;
    }
}

/* ==========================================================================
   29. BLOCK "COMBO, SALE SLIDE" — NHÃN CẠNH TIÊU ĐỀ + MÀU NHÃN TAG
   --------------------------------------------------------------------------
   Blade: themes/Vietago/Template/Views/frontend/blocks/combo/
   Class: themes/Vietago/Template/Blocks/ComboBlock.php

   Ô "Nhãn cạnh tiêu đề" (label_title) trước đây có trong admin nhưng blade chỉ
   dùng để xét @if rồi bỏ, không in ra. Nay in thành viên thuốc hồng cạnh tiêu đề.

   Màu nhãn tag lấy từ hằng ComboBlock::TAG_COLORS — thêm màu mới thì khai ở cả
   hai chỗ, khoá phải trùng nhau (khoá `red` ↔ class `.is-red`).
   ========================================================================== */

.sec-combo .combo-label-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 99px;
    background: #FF5C8A;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.sec-combo .combo-label-badge i {
    font-size: 12px;
}

@media (max-width: 575.98px) {
    /* Màn hẹp: nhãn dài quá thì cho xuống dòng thay vì đẩy tràn tiêu đề */
    .sec-combo .combo-label-badge {
        white-space: normal;
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   29.1 Bảng màu nhãn tag trên thẻ
   Đặt SAU .combo-card-tag.is-hot (dòng 762) nên cùng độ ưu tiên thì thắng.
   -------------------------------------------------------------------------- */
.sec-combo .combo-card-tag.is-red {
    background: #A81028;
    color: #fff;
}

.sec-combo .combo-card-tag.is-blue {
    background: #2F6BFF;
    color: #fff;
}

.sec-combo .combo-card-tag.is-amber {
    background: var(--vga-amber);
    color: #1f2937;
}

.sec-combo .combo-card-tag.is-teal {
    background: var(--vga-teal);
    color: #fff;
}

.sec-combo .combo-card-tag.is-pink {
    background: #FF3D77;
    color: #fff;
}

/* Dùng trên ảnh tối: nền kính mờ, viền mảnh cho nổi khỏi ảnh */
.sec-combo .combo-card-tag.is-white {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   29.2 Kiểu "1 banner lớn bên trái + các banner nhỏ bên phải"

   main.css chốt cứng chiều cao 300px cho banner lớn và 155px cho banner nhỏ, nên
   2 banner nhỏ (155×2 + hở) cao hơn banner lớn 10px, mép dưới lệch nhau. Ở đây
   cho cột phải chia đều chiều cao theo banner lớn — đặt 2 hay 4 banner nhỏ đều
   thẳng mép. Chỉ áp từ 768px trở lên, dưới đó các banner xếp dọc hết.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .sec-combo .vga-combo-grid > [class*="col-"] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Khung phải là hộp flex, không thì thẻ bên trong giữ nguyên 210px cố định:
       khung giãn ra bao nhiêu là hở trắng bấy nhiêu (banner lớn từng hở 110px) */
    .sec-combo .vga-combo-grid .sale-item {
        display: flex;
        height: auto;
        /* Khoảng cách giữa các banner nhỏ đã do gap lo, bỏ padding cũ kẻo lệch */
        padding-bottom: 0;
    }

    .sec-combo .vga-combo-grid .banner-sale-large {
        flex: 1 1 auto;
        /* Chiều cao tối thiểu của cả khối; nội dung dài hơn thì tự cao thêm */
        min-height: 320px;
    }

    .sec-combo .vga-combo-grid .banner-sale-small {
        flex: 1 1 auto;
        min-height: 130px;
    }

    .sec-combo .vga-combo-grid .combo-card {
        flex: 1 1 auto;
        min-height: auto !important;
    }

    .sec-combo .vga-combo-grid .combo-card-body {
        flex: unset !important;
    }

}
.sec-combo .vga-combo-grid .combo-card-btn{
    padding: 8px 15px !important;
    font-size: 14px !important;
}
/* --------------------------------------------------------------------------
   29.2.1 Thẻ tự cao theo nội dung (áp cho MỌI kiểu, cả băng chuyền)

   Ba số đo cũ đánh nhau: khung 300/155px, thẻ 210px cứng, chữ thì canh đáy bằng
   một lớp position:absolute. Từ lúc thêm khối giá, nội dung cao 190–206px:
     • thẻ 210px không chứa nổi → phần thừa trào NGƯỢC LÊN, đè mất padding-top
     • khung 155px thấp hơn thẻ 230px → overflow:hidden cắt cụt chân thẻ
     • khung 320px cao hơn thẻ 210px → hở 110px trắng dưới đáy

   Cách chữa: trả phần chữ về luồng thường để thẻ tự cao theo nội dung, đẩy ảnh
   ra lớp nền tuyệt đối. 210px hạ xuống làm mức TỐI THIỂU cho thẻ ít chữ.

   ⚠️ Ảnh bắt buộc phải position:absolute. Để trong luồng thì `height:100%` của
   main.css mất tác dụng (cha hết chiều cao cố định), ảnh bung ra đúng kích thước
   gốc và kéo thẻ cao gần 600px.
   -------------------------------------------------------------------------- */
.sec-combo .combo-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 230px;
}

.sec-combo .combo-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.sec-combo .combo-card-body {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   29.3 Màu phủ lên ảnh thẻ (ô "Màu phủ lên ảnh" của từng item)

   Mục 28 gốc (dòng 703–725) phủ tối cho chữ đọc được. Ở đây thay bằng gradient
   màu, để độ mờ .88 cho ảnh nền còn hiện lờ mờ phía sau đúng như bản mẫu.
   Mỗi màu khai 2 rule: thường và :hover — vì rule hover gốc có thêm 1 lớp
   pseudo-class, không viết đè thì rê chuột vào là màu nhảy về đen.
   -------------------------------------------------------------------------- */
.sec-combo .combo-card.ov-amber::after,
.sec-combo .combo-card.ov-amber:hover::after {
    background: linear-gradient(115deg, rgba(255, 158, 0, 0.88) 0%, rgba(255, 90, 0, 0.88) 45%, rgba(245, 0, 60, 0.88) 100%);
}

.sec-combo .combo-card.ov-blue::after,
.sec-combo .combo-card.ov-blue:hover::after {
    background: linear-gradient(115deg, rgba(27, 69, 216, 0.88) 0%, rgba(30, 155, 224, 0.88) 100%);
}

.sec-combo .combo-card.ov-pink::after,
.sec-combo .combo-card.ov-pink:hover::after {
    background: linear-gradient(115deg, rgba(245, 0, 110, 0.88) 0%, rgba(255, 59, 59, 0.88) 100%);
}

.sec-combo .combo-card.ov-teal::after,
.sec-combo .combo-card.ov-teal:hover::after {
    background: linear-gradient(115deg, rgba(0, 136, 148, 0.9) 0%, rgba(0, 99, 109, 0.9) 100%);
}

.sec-combo .combo-card.ov-plum::after,
.sec-combo .combo-card.ov-plum:hover::after {
    background: linear-gradient(115deg, rgba(124, 44, 190, 0.88) 0%, rgba(232, 47, 133, 0.88) 100%);
}

.sec-combo .combo-card.ov-green::after,
.sec-combo .combo-card.ov-green:hover::after {
    background: linear-gradient(115deg, rgba(22, 146, 81, 0.88) 0%, rgba(0, 136, 148, 0.88) 100%);
}

.sec-combo .combo-card.ov-none::after,
.sec-combo .combo-card.ov-none:hover::after {
    background: none;
}

/* --------------------------------------------------------------------------
   29.4 Hàng nhãn trên đỉnh thẻ: tag bên trái, nhãn xác thực bên phải
   -------------------------------------------------------------------------- */
.sec-combo .combo-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    /* Đẩy toàn bộ phần chữ còn lại xuống đáy thẻ (trước đây .combo-card-tag lo việc này) */
    margin-bottom: auto;
}

.sec-combo .combo-card-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   29.5 Khối giá ở đáy thẻ (thay chỗ chữ vietago.com khi admin nhập giá)
   -------------------------------------------------------------------------- */
.sec-combo .combo-card-foot.has-price {
    align-items: flex-end;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.sec-combo .combo-card-price {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sec-combo .combo-card-price-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.sec-combo .combo-card-price-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: #FFD24D;
    white-space: nowrap;
}

/* Ô nhỏ bên phải của kiểu grid: chỗ hẹp nên thu gọn nhãn và giá */
.sec-combo .banner-sale-small .combo-card-badge {
    padding: 3px 9px;
    font-size: 10px;
}

.sec-combo .banner-sale-small .combo-card-foot.has-price {
    padding-top: 8px;
}

.sec-combo .banner-sale-small .combo-card-price-value {
    font-size: 18px;
}

@media (max-width: 767.98px) {
    .sec-combo .combo-card-price-value {
        font-size: 20px;
    }

    .sec-combo .combo-card-badge {
        padding: 3px 9px;
        font-size: 10px;
    }
}

/* ==========================================================================
   30. SỐ THẺ KHÁCH SẠN MỖI HÀNG CHIA THEO BỀ RỘNG THẬT CỦA KHỐI
   --------------------------------------------------------------------------
   Blade: Hotel/Views/frontend/blocks/list-hotel/index.blade.php (.vga-hotel-result)

   Markup dùng col-lg-3 → luôn 4 thẻ/hàng từ 992px trở lên. Nhưng mọi trang đều
   có sidebar (.page-detail-row), nên bề rộng còn lại KHÔNG tỉ lệ với bề rộng màn
   hình. Số đo thật:

       màn 1424px → vùng nội dung 1030px → thẻ 234px
       màn 1264px → vùng nội dung  870px → thẻ 194px
       màn 1203px → vùng nội dung  809px → thẻ 178px   ← chi chít
       màn 1108px → vùng nội dung 1108px → thẻ 253px   ← RỘNG HƠN màn 1203px!

   Màn hẹp hơn lại cho thẻ rộng hơn, vì dưới 1200px sidebar tự xuống hàng và trả
   lại toàn bộ bề ngang. Điểm gãy theo màn hình vì thế không bao giờ đúng.

   Cách chữa: bỏ chia theo cột Bootstrap, dùng grid auto-fill — trình duyệt tự
   nhét được bao nhiêu thẻ rộng tối thiểu 230px thì nhét, đo trên bề rộng THẬT.
   Class col-* giữ nguyên trên markup để nơi nào không nạp file này vẫn xem được.
   ========================================================================== */
.sec-hotel .vga-hotel-result {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
    margin: 0;
}

.sec-hotel .vga-hotel-result > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    /* .row của Bootstrap đẩy khoảng cách bằng padding + margin-top của cột;
       trong grid đã có gap lo nên phải dọn, không thì hở gấp đôi */
    padding: 0;
    margin-top: 0;
}

/* Dòng "Không tìm thấy dữ liệu" trải hết hàng thay vì co thành một ô */
.sec-hotel .vga-hotel-result > p {
    grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   30.1 Giá không được vỡ giữa chữ số

   .page-detail-row .page-template-content (mục 19) đặt word-break: break-word
   cho nội dung trang. Thẻ hẹp là "1.500.000 đ" bị cắt dọc thành 4 dòng, mỗi
   dòng vài ký tự. Giá phải giữ nguyên khối; hết chỗ thì cho NÚT xuống hàng.
   -------------------------------------------------------------------------- */
.sec-hotel .vga-hotel-price,
.sec-hotel .vga-hotel-old {
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
}

.sec-hotel .vga-hotel-foot {
    flex-wrap: wrap;
}

/* ==========================================================================
   31. FORM VÉ MÁY BAY TRONG DẢI TÌM KIẾM (/ve-may-bay)
   --------------------------------------------------------------------------
   Blade: Flight/Views/frontend/blocks/flight-form.blade.php

   Block này đã bọc trong hộp .vga-hero-search giống trang khách sạn / tour, nhưng
   form vé máy bay có bộ class riêng (.fc-*) nên vẫn giữ kiểu cũ: mỗi ô là một hộp
   trắng viền bo góc, nhãn đen 16px đậm, nút xanh dương gradient. Nhìn cạnh hai
   trang kia là lệch hẳn.

   Mục này kéo nó về đúng kiểu: ô phẳng ngăn nhau bằng vạch dọc, nhãn chữ nhỏ in
   hoa xám, nút teal bo 12px.

   ⚠️ Mọi rule đều bắt đầu bằng .vga-hero-search. Bộ class .fc-* còn dùng ở tab
   "Vé máy bay" trong hộp tìm kiếm trang chủ (mục 27) — không khoá phạm vi là đổi
   luôn trang chủ.
   ========================================================================== */

/* Hàng ô: chia đều, ngăn bằng vạch dọc mảnh — giống mục "form" của main.css */
.vga-hero-search .fc-search-box .row {
    align-items: stretch;
    margin: 0;
}

.vga-hero-search .fc-search-box > form > .row > [class*="col-"] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 6px 18px;
    border-right: 1px solid #e8edf3;
}

/* Cột nút chỉ rộng bằng nút. Markup để col-md-1 nên nút bị bóp còn một chữ */
.vga-hero-search .fc-search-box > form > .row > [class*="col-"]:last-child {
    flex: 0 0 auto;
    width: auto;
    padding-right: 0;
    border-right: 0;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .vga-hero-search .fc-search-box > form > .row {
        flex-wrap: nowrap;
    }
}

/* Nhãn: chữ nhỏ in hoa xám thay cho đen 16px đậm */
.vga-hero-search .fc-search-box .fc-field label {
    margin: 5px 0 2px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 16px;
    text-transform: uppercase;
    color: #6b7280;
}

/* Ô nhập phẳng: bỏ hộp trắng, viền, bóng và bo góc của fc-base.css */
.vga-hero-search .fc-search-box .fc-flex .fc-field input,
.vga-hero-search .fc-search-box .fc-field .inputDate,
.vga-hero-search .fc-search-box .fc-field select {
    height: 35px;
    padding: 0;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent;
    font-size: 15px;
    color: #1f2937;
}

.vga-hero-search .fc-search-box .fc-field input::placeholder {
    color: #9aa5b5;
}

/* Nút hoán đổi điểm đi/đến nằm giữa hai ô, thu nhỏ cho vừa hàng phẳng */
.vga-hero-search .fc-search-box .swap-btn {
    align-self: flex-end;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* Ô ngày: icon lịch có sẵn trong markup (.fc-icon), ghim lại theo đáy ô */
.vga-hero-search .fc-search-box .fc-field .fc-icon {
    top: auto;
    bottom: 4px;
}

/* Nút Tìm: teal, cùng cỡ với nút của trang khách sạn / tour */
.vga-hero-search .fc-search-box .fc-btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 150px;
    height: 56px;
    padding: 0 28px;
    border-radius: 12px;
    background: var(--vga-teal);
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.vga-hero-search .fc-search-box .fc-btn-search:hover {
    background: var(--vga-teal-hover);
    opacity: 1;
}

.vga-hero-search .fc-search-box .fc-btn-search i {
    margin-right: 0;
}

/* --------------------------------------------------------------------------
   31.1 Dưới 992px: mỗi ô một thẻ riêng, giống mục 28.1 của hai trang kia
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .vga-hero-search .fc-search-box > form > .row > [class*="col-"] {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        padding: 10px 14px;
        border: 1px solid #E8EDF3;
        border-radius: 12px;
        background: #fff;
    }

    .vga-hero-search .fc-search-box > form > .row > [class*="col-"]:last-child {
        margin-bottom: 0;
        padding: 4px 0 0 0;
        border: 0;
        background: none;
    }

    .vga-hero-search .fc-search-box .fc-btn-search {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   31.2 Ô "Số khách và hạng vé" và cặp ô Điểm đi / Điểm đến

   Mục 27.2 cho ô số khách một hộp trắng cao 50px để nó không trơ trọi giữa các
   ô hộp khác. Ở dải này mọi ô đã phẳng nên phải gỡ hộp đó ra, nếu không nó là ô
   duy nhất còn khung.

   Cặp Điểm đi / Điểm đến dùng chung một cột: fc-base.css cho mỗi ô `width: 50%`
   và cho phép xuống dòng, nên nút hoán đổi bị đẩy hẳn xuống hàng dưới.
   -------------------------------------------------------------------------- */
.vga-hero-search .fc-search-box .form-select-guests > label {
    margin: 5px 0 2px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 16px;
    text-transform: uppercase;
    color: #6b7280;
}

.vga-hero-search .fc-search-box .form-select-guests .render,
.vga-hero-search .fc-search-box .form-select-guests .wrapper-more .render {
    height: 26px;
    line-height: 26px;
    padding: 0 22px 0 0;
    border-radius: 0 !important;
    box-shadow: none;
    background-color: transparent;
    font-size: 15px;
    color: #1f2937;
}

.vga-hero-search .fc-search-box .form-select-guests .form-content.dropdown-toggle::after {
    bottom: 8px;
}

/* Hai ô cùng hàng với nút hoán đổi, không cho xuống dòng */
.vga-hero-search .fc-search-box .fc-flex {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
}

.vga-hero-search .fc-search-box .fc-flex .fc-field {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

/* Chữ dài hơn ô thì cắt bằng ... chứ không đội cao hàng */
.vga-hero-search .fc-search-box .fc-flex .fc-field input {
    text-overflow: ellipsis;
}

/* Ô ngày vẫn là lưới 1 cột (2 cột khi khứ hồi), giữ nguyên cách xếp của nó */
.vga-hero-search .fc-search-box .fc-flex.fc-grid {
    display: grid;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   31.3 Hai chỗ cần độ ưu tiên cao hơn mới đè được

   1. Nút hoán đổi khai bằng `button#swap-btn` (có id) ở fc-base.css, ghim
      top:38px theo bố cục ô hộp cũ. Selector chỉ có class không thắng nổi id.
   2. Ô số khách: mục 27.2 khai bản 5 lớp class kèm .banner_hero_tab để thắng
      mục 25. Muốn phẳng ở đây thì phải dài hơn nó.
   -------------------------------------------------------------------------- */
.vga-hero-search .fc-search-box button#swap-btn {
    top: auto;
    bottom: 0;
    width: 26px;
    height: 26px;
    box-shadow: none;
}

.vga-hero-search .banner_hero_tab.tab-search .fc-search-box .form-select-guests .wrapper-more .render,
.vga-hero-search .banner_hero_tab.tab-search .fc-search-box .form-select-guests .render {
    height: 35px;
    line-height: 30px;
    box-shadow: none;
    background-color: transparent;
    font-size: 15px;
    color: #1f2937;
}

.vga-hero-search .banner_hero_tab.tab-search .fc-search-box .form-select-guests .form-content.dropdown-toggle::after {
    bottom: 8px;
}

/* ==========================================================================
   32. DÒNG "NGÀY KHỞI HÀNH" Ở THẺ TOUR KIỂU DANH SÁCH (trang /tour)

   Thẻ .tour_item.tour_list xếp 5 dòng thông tin vào lưới 2 cột (main.css
   dòng 6075). Dòng ngày khởi hành có thêm ô <select> ngày nên rộng hơn hẳn
   4 dòng còn lại: main.css để `white-space: nowrap` + `overflow: hidden`
   nên ô chọn bị CẮT, phần thò sang cột phải thì đè lên icon của "Thời Gian".

   Sửa: cho phép xuống dòng — ô chọn ngày tụt xuống dòng dưới khi hàng không
   đủ chỗ. Icon lịch phải luôn nằm ngang hàng với chữ "Ngày Khởi Hành".

   Cách giữ icon khớp: main.css ghim icon `position:absolute; top:50%`, tức
   là giữa CẢ khối — khối cao 2 dòng thì icon rơi vào khe giữa hai dòng. Nên
   ở đây trả icon về dòng chảy làm phần tử flex đầu tiên, để `align-items:
   center` tự canh nó theo đúng dòng chứa nhãn, không phụ thuộc khối cao mấy
   dòng. Lề âm -20px kéo icon vào đúng chỗ padding-left cũ, nhờ đó chữ và ô
   chọn (khi xuống dòng) vẫn thẳng hàng với 4 dòng thông tin kia.
   ========================================================================== */
/* Ô lưới mặc định căng cao bằng hàng. Dòng ngày khởi hành cao 2 dòng sẽ kéo
   ô "Thời Gian" bên cạnh cao theo, mà icon của nó ghim top:50% nên tụt xuống
   giữa hộp trong khi chữ vẫn ở trên → lệch. Cho các ô bám mép trên. */
.tour_item.tour_list .tour-info {
    align-items: start;
}

.tour_item.tour_list .tour-content .tour-info p.select-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    overflow: visible;
    text-overflow: clip;
    /* Giữ `white-space: nowrap` của main.css: nhãn "Ngày Khởi Hành:" không tự
       bẻ đôi giữa chừng, chỉ có ô chọn ngày là bị đẩy xuống dòng dưới. */
}

.tour_item.tour_list .tour-content .tour-info p.select-date img {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin-left: -20px;
    margin-right: 0;
}

/* Ô chọn không được rộng hơn ô lưới — hết chỗ thì tự co lại, không thò sang
   cột bên cạnh nữa. min-width:0 để thắng kích thước nội dung mặc định. */
.tour_item.tour_list .tour-content .tour-info p.select-date select {
    max-width: 100%;
    min-width: 0;
}

/* ==========================================================================
   33. TRANG GIỚI THIỆU (/gioi-thieu)

   Markup ở Page/Views/frontend/blocks/abouts/*.blade.php — 8 block đều đã
   chuyển sang khung .vga-sec + .container-xl giống các block trang chủ, nhờ
   vậy nền trang tự chuyển sang xám #F5F7FA (rule `body:has(.vga-sec)` ở đầu
   file) và lề trái/phải khớp đúng trang chủ.

   Bảng dùng chung cho cả mục 33:
     • tiêu đề  #16213E, 800, letter-spacing -.3px
     • chữ phụ  #64748B
     • thẻ      nền trắng, viền #EEF2F6, bo 16px, đổ bóng rất nhẹ
     • nhấn     teal --vga-teal, điểm xuyết amber --vga-amber
   ========================================================================== */

/* --------------------------------------------------------------------------
   33.0 Đầu khối dùng chung — mọi block giới thiệu đều gọi .vga-ab-head
   -------------------------------------------------------------------------- */
.vga-ab-head {
    margin-bottom: 24px;
}

.vga-ab-head--center {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.vga-ab-title {
    margin: 0;
    color: #16213E;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.vga-ab-title--sm {
    font-size: 24px;
}

/* Nửa tiêu đề được admin tách riêng (ô "Sub Title" / "Title Primary") */
.vga-ab-title-accent {
    color: var(--vga-teal);
}

.vga-ab-sub {
    margin-top: 10px;
    color: #64748B;
    font-size: 15px;
    line-height: 1.65;
}

.vga-ab-sub p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   33.1 Đầu trang (.sec-about-hero)

   Ảnh nền ở lớp .vga-abh-bg trải tuyệt đối + phủ gradient teal đậm để chữ
   trắng luôn đọc được, kể cả khi admin thay ảnh sáng. Khối tự cao theo nội
   dung vì ảnh KHÔNG đặt trên chính thẻ section.
   -------------------------------------------------------------------------- */
.sec-about-hero {
    overflow: hidden;
    margin-bottom: 40px;
    padding: 40px 20px 60px;
    border-radius: 20px;
}

.sec-about-hero .vga-abh-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .28;
}

/* Lớp phủ tối dần về bên trái để cột chữ luôn tương phản đủ */
.sec-about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgb(0 46 51 / 64%) 0%, rgb(0 88 96 / 46%) 55%, rgba(0, 108, 116, .35) 100%);
}

.sec-about-hero .vga-abh-inner {
    position: relative;
    z-index: 2;
}

/* -- hàng chip điểm nhấn -- */
.sec-about-hero .vga-abh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.sec-about-hero .vga-abh-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(4px);
}

a.vga-abh-chip:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* SVG admin dán mang màu đỏ của bản mẫu cũ — ép về một cỡ, màu để nguyên */
.sec-about-hero .vga-abh-chip svg,
.sec-about-hero .vga-abh-chip img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* -- tiêu đề + mô tả -- */
.sec-about-hero .vga-abh-title {
    margin: 0;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.6px;
}

.sec-about-hero .vga-abh-sub {
    margin: 10px 0 0;
    color: var(--vga-amber);
    font-size: 19px;
    font-weight: 700;
}

.sec-about-hero .vga-abh-desc {
    margin-top: 16px;
    max-width: 620px;
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    line-height: 1.7;
}

.sec-about-hero .vga-abh-desc p:last-child {
    margin-bottom: 0;
}

/* -- nút -- */
.sec-about-hero .vga-abh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.vga-abh-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.vga-abh-btn i {
    font-size: 12px;
}

.vga-abh-btn:hover {
    transform: translateY(-1px);
}

.vga-abh-btn--solid {
    background: var(--vga-amber);
    color: #3A2A00;
    box-shadow: 0 6px 16px rgba(229, 168, 0, .28);
}

.vga-abh-btn--solid:hover {
    background: #F2B70C;
    color: #3A2A00;
}

.vga-abh-btn--ghost {
    border-color: rgba(255, 255, 255, .55);
    background: transparent;
    color: #fff;
}

.vga-abh-btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Nút phụ dùng trên NỀN SÁNG (thẻ ở mục 33.7) — viền teal, nền teal nhạt */
.vga-abh-btn--soft {
    border-color: #CBE6E8;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
}

.vga-abh-btn--soft:hover {
    background: #D6EDEE;
    color: var(--vga-teal-hover);
}

/* -- thẻ trắng bên phải: thư ngỏ + con số -- */
.sec-about-hero .vga-abh-card {
    position: relative;
    padding: 26px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 30, 34, .22);
}

.sec-about-hero .vga-abh-quote {
    position: relative;
    padding-top: 6px;
    color: #334155;
    font-size: 15px;
    line-height: 1.7;
}

.sec-about-hero .vga-abh-quote-mark {
    display: block;
    margin-bottom: 10px;
    color: var(--vga-teal);
    opacity: .25;
    font-size: 26px;
}

/* Hai class do admin gõ trong ô "Thư ngỏ" (trình soạn thảo) */
.sec-about-hero .about-quote {
    font-style: italic;
}

.sec-about-hero .about-quote-author {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #E2E8F0;
}

.sec-about-hero .about-quote-author .about-author {
    color: #16213E;
    font-size: 15px;
    font-weight: 800;
}

.sec-about-hero .about-quote-author p {
    margin: 2px 0 0;
    color: #64748B;
    font-size: 13px;
}

.sec-about-hero .vga-abh-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.sec-about-hero .vga-abh-total {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #E3EFF0;
    border-radius: 14px;
    background: linear-gradient(135deg, #F1FAF9 0%, #FFFFFF 65%);
}

.sec-about-hero .vga-abh-total-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--vga-teal);
}

/* SVG bản mẫu vẽ nét trắng sẵn (stroke trắng) nên nền teal là hợp */
.sec-about-hero .vga-abh-total-icon svg,
.sec-about-hero .vga-abh-total-icon img {
    width: 22px;
    height: 22px;
}

.sec-about-hero .vga-abh-total-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Số dài ("1.000.000+") không được bẻ đôi trong ô hẹp — co cỡ chữ theo màn */
.sec-about-hero .vga-abh-total-text strong {
    color: #16213E;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.sec-about-hero .vga-abh-total-text small {
    color: #64748B;
    font-size: 12px;
}

.sec-about-hero .vga-abh-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--vga-teal);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sec-about-hero .vga-abh-profile:hover {
    color: var(--vga-teal-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   33.2 Câu chuyện (.sec-about-story)
   -------------------------------------------------------------------------- */
.sec-about-story {
    margin-bottom: 48px;
}

.sec-about-story .vga-abs-text {
    color: #475569;
    font-size: 15.5px;
    line-height: 1.8;
}

.sec-about-story .vga-abs-text p {
    margin-bottom: 14px;
}

.sec-about-story .vga-abs-text p:last-child {
    margin-bottom: 0;
}

.sec-about-story .vga-abs-text strong {
    color: #16213E;
}

.sec-about-story .vga-abs-values {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Không có bài viết bên trái thì các thẻ trải ngang cho khỏi hụt cột */
.sec-about-story .vga-abs-values--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.sec-about-story .vga-abs-values--row .vga-abs-value {
    flex: 1 1 260px;
}

.sec-about-story .vga-abs-value {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.sec-about-story .vga-abs-value:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .09);
}

.sec-about-story .vga-abs-value-photo {
    flex-shrink: 0;
    width: 92px;
    border-radius: 12px;
    overflow: hidden;
}

.sec-about-story .vga-abs-value-photo img {
    width: 100%;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
}

.sec-about-story .vga-abs-value-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.sec-about-story .vga-abs-value-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-about-story .vga-abs-value-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--vga-teal);
}

.sec-about-story .vga-abs-value-icon svg,
.sec-about-story .vga-abs-value-icon img {
    width: 18px;
    height: 18px;
}

.sec-about-story .vga-abs-value-title {
    color: #16213E;
    font-size: 16px;
    font-weight: 800;
}

.sec-about-story .vga-abs-value-desc {
    color: #64748B;
    font-size: 13.5px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   33.3 Sứ mệnh – Tầm nhìn – Giá trị (.sec-about-vision)
   -------------------------------------------------------------------------- */
.sec-about-vision {
    margin-bottom: 48px;
}

.sec-about-vision .vga-abv-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sec-about-vision .vga-abv-card:hover {
    transform: translateY(-3px);
    border-color: #D8ECEE;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

/* Icon của khối này là SVG 62×62 đã có sẵn nền bo góc trong hình — không bọc
   thêm ô màu, chỉ khống chế kích thước cho ba thẻ đều nhau. */
.sec-about-vision .vga-abv-icon {
    display: block;
    margin-bottom: 16px;
}

.sec-about-vision .vga-abv-icon svg,
.sec-about-vision .vga-abv-icon img {
    width: 56px;
    height: 56px;
}

.sec-about-vision .vga-abv-title {
    margin: 0 0 8px;
    color: #16213E;
    font-size: 18px;
    font-weight: 800;
}

.sec-about-vision .vga-abv-desc {
    color: #64748B;
    font-size: 14.5px;
    line-height: 1.7;
}

.sec-about-vision .vga-abv-desc p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   33.4 Quy trình phục vụ (.sec-about-service)

   Đường nối giữa các bước vẽ bằng ::after của thẻ, chỉ hiện từ 1200px trở lên
   — dưới mốc đó các bước xuống dòng nên đường nối sẽ chỉ sang chỗ trống.
   -------------------------------------------------------------------------- */
.sec-about-service {
    margin-bottom: 48px;
}

.sec-about-service .vga-abp-card {
    position: relative;
    padding: 26px 22px 24px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.sec-about-service .vga-abp-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
    font-size: 17px;
    font-weight: 800;
}

.sec-about-service .vga-abp-title {
    margin: 0 0 6px;
    color: #16213E;
    font-size: 16.5px;
    font-weight: 800;
}

.sec-about-service .vga-abp-desc {
    color: #64748B;
    font-size: 14px;
    line-height: 1.65;
}

.sec-about-service .vga-abp-desc p:last-child {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .sec-about-service .vga-abp-card::after {
        content: "";
        position: absolute;
        top: 46px;
        right: -26px;
        width: 26px;
        border-top: 2px dashed #CBE6E8;
    }

    .sec-about-service .vga-abp-card--last::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   33.5 Đội ngũ (.sec-about-team)
   -------------------------------------------------------------------------- */
.sec-about-team {
    margin-bottom: 48px;
}

.sec-about-team .vga-abt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px 20px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    text-align: center;
}

.sec-about-team .vga-abt-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 12px;
    border: 3px solid var(--vga-teal-light);
    border-radius: 50%;
    overflow: hidden;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
    font-size: 30px;
}

.sec-about-team .vga-abt-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec-about-team .vga-abt-name {
    color: #16213E;
    font-size: 16px;
    font-weight: 800;
}

.sec-about-team .vga-abt-role {
    margin-top: 2px;
    color: var(--vga-teal);
    font-size: 13px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   33.6 Hệ sinh thái landing page (.sec-about-landing)
   -------------------------------------------------------------------------- */
.sec-about-landing {
    overflow: hidden;
    margin-bottom: 48px;
    padding: 44px 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #F1FAF9 0%, #FFFFFF 100%);
}

.sec-about-landing .vga-abl-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    opacity: .08;
}

.sec-about-landing .vga-abl-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #E6EEF0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.sec-about-landing .vga-abl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
}

.sec-about-landing .vga-abl-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.sec-about-landing .vga-abl-logo {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sec-about-landing .vga-abl-logo img {
    max-width: 150px;
    max-height: 46px;
    object-fit: contain;
}

.sec-about-landing .vga-abl-logo-text {
    color: #16213E;
    font-size: 17px;
    font-weight: 800;
}

.sec-about-landing .vga-abl-label {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
    font-size: 12px;
    font-weight: 700;
}

.sec-about-landing .vga-abl-desc {
    color: #64748B;
    font-size: 14px;
    line-height: 1.65;
}

.sec-about-landing .vga-abl-desc p:last-child {
    margin-bottom: 0;
}

.sec-about-landing .vga-abl-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.sec-about-landing .vga-abl-tool {
    padding: 5px 11px;
    border: 1px solid #EEF2F6;
    border-radius: 999px;
    background: #F8FAFC;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
}

/* Nút đẩy xuống đáy thẻ để các thẻ cùng hàng thẳng chân */
.sec-about-landing .vga-abl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--vga-teal);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sec-about-landing .vga-abl-link i {
    font-size: 12px;
    transition: transform .18s ease;
}

.sec-about-landing .vga-abl-link:hover {
    color: var(--vga-teal-hover);
}

.sec-about-landing .vga-abl-link:hover i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   33.7 Con số nổi bật & quá trình phát triển (.sec-about-info)
   -------------------------------------------------------------------------- */
.sec-about-info {
    margin-bottom: 48px;
}

.sec-about-info .vga-abi-lead {
    max-width: 560px;
}

.sec-about-info .vga-abi-num {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 16px;
    border: 1px solid #E3EFF0;
    border-radius: 16px;
    background: linear-gradient(135deg, #F1FAF9 0%, #FFFFFF 65%);
    text-align: center;
}

/* Con số dài nhất ("1.000.000+") phải lọt trong ô hẹp 1/4 cột mà không bị bẻ
   giữa chừng — cỡ chữ co theo bề ngang màn hình, chặn trên/dưới bằng clamp. */
.sec-about-info .vga-abi-num strong {
    color: var(--vga-teal);
    font-size: clamp(17px, 1.35vw, 24px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.4px;
    white-space: nowrap;
}

.sec-about-info .vga-abi-num span {
    color: #64748B;
    font-size: 13px;
}

.sec-about-info .vga-abi-history {
    margin-top: 40px;
}

.sec-about-info .vga-abi-photo {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
}

.sec-about-info .vga-abi-photo img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
}

/* -- mốc thời gian: vạch dọc chạy qua các năm -- */
.sec-about-info .vga-abi-timeline {
    position: relative;
    margin-top: 22px;
    padding-left: 4px;
}

.sec-about-info .vga-abi-step {
    position: relative;
    padding-bottom: 22px;
}

.vga-abi-step-body {
    margin-left: 50px;
}

.sec-about-info .vga-abi-step:last-child {
    padding-bottom: 0;
}

/* Vạch nối chạy từ dưới nhãn năm xuống bước kế tiếp */
.sec-about-info .vga-abi-step::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 33px;
    width: 2px;
    background: #E3EFF0;
}

.sec-about-info .vga-abi-step:last-child::before {
    display: none;
}

.sec-about-info .vga-abi-year {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 999px;
    background: var(--vga-teal);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
}

.sec-about-info .vga-abi-step-title {
    margin: 5px 0 4px;
    color: #16213E;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.sec-about-info .vga-abi-step-desc {
    color: #64748B;
    font-size: 14px;
    line-height: 1.65;
}

.sec-about-info .vga-abi-step-desc p:last-child {
    margin-bottom: 0;
}

/* -- thẻ thông tin thêm -- */
.sec-about-info .vga-abi-cards {
    margin-top: 40px;
}

.sec-about-info .vga-abi-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.sec-about-info .vga-abi-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.sec-about-info .vga-abi-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--vga-teal);
    color: #fff;
}

.sec-about-info .vga-abi-card-icon svg,
.sec-about-info .vga-abi-card-icon img {
    width: 24px;
    height: 24px;
}

.sec-about-info .vga-abi-card-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sec-about-info .vga-abi-card-title {
    color: #16213E;
    font-size: 18px;
    font-weight: 800;
}

.sec-about-info .vga-abi-card-sub {
    color: #64748B;
    font-size: 13.5px;
}

.sec-about-info .vga-abi-card-body {
    color: #64748B;
    font-size: 14.5px;
    line-height: 1.7;
}

.sec-about-info .vga-abi-card-body p:last-child {
    margin-bottom: 0;
}

.sec-about-info .vga-abi-card-body ul {
    margin: 0;
    padding-left: 18px;
}

.sec-about-info .vga-abi-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 18px;
}

/* --------------------------------------------------------------------------
   33.8 Đối tác / khách hàng tiêu biểu (.sec-about-item)
   -------------------------------------------------------------------------- */
.sec-about-item {
    margin-bottom: 48px;
}

.sec-about-item .vga-abm-card {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sec-about-item .vga-abm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
    color: inherit;
}

/* Ảnh logo và ảnh giấy chứng nhận lệch tỉ lệ nhau rất nhiều — khung cố định
   + object-fit: contain giữ cả hàng thẻ bằng nhau mà không méo hình. */
.sec-about-item .vga-abm-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 12px;
    background: #F8FAFC;
}

.sec-about-item .vga-abm-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sec-about-item .vga-abm-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sec-about-item .vga-abm-title {
    color: #16213E;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
}

.sec-about-item .vga-abm-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sec-about-item .vga-abm-line {
    position: relative;
    padding-left: 13px;
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
}

.sec-about-item .vga-abm-line::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--vga-teal);
    opacity: .55;
}

.sec-about-item .vga-abm-label {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--vga-teal-light);
    color: var(--vga-teal);
    font-size: 12px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   33.9 Màn nhỏ

   Mốc bám theo mục 22 của file: 1200 / 992 / 768 / 576.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .sec-about-hero .vga-abh-title {
        font-size: 38px;
    }

    .vga-ab-title {
        font-size: 27px;
    }
}

@media (max-width: 991.98px) {
    .sec-about-hero {
        padding: 40px 0 44px;
        margin-bottom: 32px;
    }

    .sec-about-hero .vga-abh-title {
        font-size: 32px;
    }

    .sec-about-hero .vga-abh-desc {
        max-width: none;
    }

    .sec-about-story,
    .sec-about-vision,
    .sec-about-service,
    .sec-about-team,
    .sec-about-landing,
    .sec-about-info,
    .sec-about-item {
        margin-bottom: 36px;
    }

    .sec-about-info .vga-abi-history,
    .sec-about-info .vga-abi-cards {
        margin-top: 28px;
    }
}

@media (max-width: 767.98px) {
    .sec-about-hero {
        padding: 32px 0 36px;
    }

    .sec-about-hero .vga-abh-title {
        font-size: 27px;
    }

    .sec-about-hero .vga-abh-sub {
        font-size: 16px;
    }

    .sec-about-hero .vga-abh-card {
        padding: 20px;
    }

    .sec-about-hero .vga-abh-totals {
        grid-template-columns: 1fr;
    }

    /* Nút trải hết hàng cho dễ bấm bằng ngón tay */
    .sec-about-hero .vga-abh-actions .vga-abh-btn,
    .sec-about-info .vga-abi-card-actions .vga-abh-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .vga-ab-title {
        font-size: 23px;
    }

    .vga-ab-title--sm {
        font-size: 20px;
    }

    .sec-about-story .vga-abs-value-photo {
        width: 76px;
    }

    .sec-about-story .vga-abs-value-photo img {
        min-height: 76px;
    }

    .sec-about-item .vga-abm-media {
        height: 92px;
    }

    .sec-about-landing {
        padding: 32px 0;
        border-radius: 18px;
    }
}

@media (max-width: 575.98px) {
    .sec-about-hero .vga-abh-chip {
        font-size: 12px;
        padding: 6px 11px;
    }

    .sec-about-vision .vga-abv-card,
    .sec-about-service .vga-abp-card,
    .sec-about-info .vga-abi-card {
        padding: 20px 18px;
    }

    /* Nhãn năm hẹp lại, vạch nối dịch theo cho khỏi lệch */
    .sec-about-info .vga-abi-step {
        gap: 12px;
    }

    .sec-about-info .vga-abi-step::before {
        left: 29px;
    }
}


/* ==========================================================================
   34. THẺ SẢN PHẨM CAO BẰNG NHAU (BĂNG CHUYỀN + LƯỚI)
   --------------------------------------------------------------------------
   Bệnh chung của cả theme: thẻ tour / khách sạn / du thuyền / sự kiện / tin
   tức cao theo đúng lượng chữ bên trong, nên chỉ cần một tiêu đề dài hơn hay
   một dòng thông tin thừa là thẻ đó thò xuống dưới, chân thẻ (giá + nút) so le
   nhau. Owl Carousel không tự chữa: mỗi .owl-item là một khối độc lập.

   Cách chữa gồm ba lớp:
     (a) băng chuyền → ép .owl-stage thành flex để mọi ô cao bằng ô cao nhất;
     (b) lưới Bootstrap → cột chứa thẻ thành flex để thẻ cao kín cột;
     (c) từng loại thẻ → xếp dọc bằng flex, cụm giá/nút đẩy xuống đáy.

   Có sẵn, không cần đụng: .vga-review-slide (mục 15), .vga-hotel-card và
   .vga-tour-card (mục 11–12) đều đã tự cao bằng nhau.
   Cố ý bỏ qua: .vga-poster-slide, .province_slide, .prize_slide, .prize-list,
   .slide_video, .video-slide, .slide_attribute_gallery, .owl-parter và các
   băng chuyền banner — ô chỉ chứa ảnh/logo có chiều cao cố định, không có
   khung nền nên chênh lệch không lộ ra.
   ========================================================================== */

/* --- (a) Băng chuyền: mọi ô trong một màn cao bằng nhau ---
   Danh sách gom bằng :is() cho khỏi lặp 8 selector bốn lần; specificity vẫn
   tính như một class thường. */

:is(.product_slide, .product_flashsale, .post-slide, .post_slide,
    .post_related_slide, .sale_slide_one, .sale_slide_two,
    .sale_slide_three).owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

/* Bề rộng từng ô do owl tính sẵn bằng style inline — chỉ tắt co giãn của flex
   để owl giữ nguyên số đo đó, không đụng vào width. */
:is(.product_slide, .product_flashsale, .post-slide, .post_slide,
    .post_related_slide, .sale_slide_one, .sale_slide_two,
    .sale_slide_three).owl-carousel .owl-item {
    display: flex;
    flex: 0 0 auto;
    height: auto;
}

:is(.product_slide, .product_flashsale, .post-slide, .post_slide,
    .post_related_slide, .sale_slide_one, .sale_slide_two,
    .sale_slide_three).owl-carousel .owl-item > * {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

/* Thẻ nằm trong ô phải cao kín ô, nếu không nền trắng hụt so với thẻ cạnh bên.
   Chỉ đụng chiều cao, không ép các thẻ khác đổi kiểu hiển thị. */
:is(.product_slide, .product_flashsale, .post-slide, .post_slide,
    .post_related_slide, .sale_slide_one, .sale_slide_two,
    .sale_slide_three).owl-carousel .slide-item > * {
    flex: 1 1 auto;
    height: 100%;
}

/* --- (b) Lưới Bootstrap: thẻ cao kín ô của hàng ---
   Cột vốn đã cao bằng hàng (align-items:stretch của .row), nhưng thẻ bên trong
   chỉ cao bằng nội dung. Cho cột thành flex thì thẻ mới kéo dài hết cột. */

[class*="col-"]:has(> .tour_item),
[class*="col-"]:has(> .hotel_item),
[class*="col-"]:has(> .post-item) {
    display: flex;
    flex-direction: column;
}

[class*="col-"] > .tour_item,
[class*="col-"] > .hotel_item,
[class*="col-"] > .post-item {
    flex: 1 1 auto;
}

/* --- (c1) Thẻ tour .tour_item (Tour/.../search/loop-grid + loop-normal) ---
   Loại trừ hai biến thể có bố cục riêng và vốn đã cao bằng nhau:
     • .tour_list — thẻ ngang trang /tour trên desktop (ảnh trái, nội dung
       phải), tiêu đề dài bao nhiêu dòng cũng được;
     • .vga-tour-card — thẻ của block "Tour: List Items" (mục 12), mang kèm
       class .tour_item nhưng chạy theo hệ class .vga-tour-* riêng. */

.tour_item:not(.tour_list):not(.vga-tour-card) {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tour_item:not(.tour_list):not(.vga-tour-card) .tour-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* main.css đặt height:46px cho tiêu đề nhưng thẻ <a> là phần tử inline nên số
   đo đó không có tác dụng: tiêu đề 4 dòng vẫn đẩy cả thẻ cao lên. Cho về dạng
   hộp và cắt đúng 2 dòng, giống thẻ khách sạn vốn đã làm vậy. */
.tour_item:not(.tour_list):not(.vga-tour-card) .tour-content .tour-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* height cứng 120px (125px ở màn nhỏ) cắt mất dòng thứ 5 "Số Chỗ Còn Nhận" khi
   tour khai đủ thông tin → đổi sang chiều cao tối thiểu. */
.tour_item:not(.tour_list):not(.vga-tour-card) .tour-content .tour-info {
    height: auto;
    min-height: 120px;
}

/* Giá và nút "Chi tiết tour" tụt xuống đáy, nhờ vậy các thẻ trong cùng hàng
   thẳng chân với nhau dù số dòng thông tin lệch nhau. */
.tour_item:not(.tour_list):not(.vga-tour-card) .tour-content .tour-footer {
    margin-top: auto;
    padding-top: 15px;
}

/* --- (c2) Thẻ khách sạn / du thuyền / sự kiện .hotel_item ---
   Chân thẻ có hai dạng tuỳ module: .hotel-price.price_footer (khách sạn) và
   .price_flex (du thuyền, sự kiện) — cả hai đều là khối cuối của .hotel-content.
   Loại trừ .hotel_list (thẻ ngang) vì nó xếp ảnh trái – nội dung phải. */

.hotel_item:not(.hotel_list) {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hotel_item:not(.hotel_list) .hotel-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.hotel_item:not(.hotel_list) .hotel-content > .price_footer,
.hotel_item:not(.hotel_list) .hotel-content > .price_flex {
    margin-top: auto;
}

/* --- (c3) Thẻ tin tức .post-item (News: loop, news-grid, news-grid-2) --- */

.post-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-item .post-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Nút "Xem chi tiết" thẳng hàng giữa các thẻ, kể cả khi mô tả chỉ có 1 dòng */
.post-item .post-content .post-store {
    margin-top: auto;
    padding-top: 15px;
}


/* ==========================================================================
   35. BANNER VÉ MÁY BAY (.fc-hero) KHÔNG ĐÈ LÊN SIDEBAR
   --------------------------------------------------------------------------
   Blade: pro/FlightConnect/Views/frontend/index.blade.php và
   search-result.blade.php (thẻ .fc-hero / .fc-hero.fc-search-result-form).
   CSS gốc: public/pro/flight-connect/css/fc-base.css.

   Module vé máy bay dựng banner kiểu full-bleed — `width: 100vw` cộng lề âm
   `calc(50% - 50vw)` để ảnh chạy sát hai mép màn hình. Kiểu đó chỉ đúng khi
   vùng nội dung nằm giữa trang. Vietago lại xếp sidebar dịch vụ bên trái và
   cột nội dung bên phải (.page-detail-row trong Layout/app.blade.php), nên lề
   âm kéo banner trùm sang trái, đè kín menu dịch vụ và thẻ AI của sidebar.

   Ở đây khoá banner lại trong đúng cột nội dung. Rule nằm ở vietago.css nên
   chỉ theme này nhận — module vé máy bay và các theme khác giữ nguyên bản gốc.

   Chỉ áp từ 1200px trở lên: dưới mốc đó sidebar đã ẩn và .page-detail-row bỏ
   luôn lề hai bên (mục 19 + 22.3), banner tràn hết bề ngang mới đúng.

   Cần !important vì fc-base.css khai width/max-width/margin đều !important.
   ========================================================================== */

@media (min-width: 1200px) {
    .page-detail-row .fc-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 16px;
    }

    /* Ảnh phủ kín khung nên phải bo góc theo, nếu không bốn góc vuông thò ra
       ngoài khung bo. Không dùng overflow:hidden trên .fc-hero vì hộp tìm
       chuyến (.fc-hero-inner) đặt absolute và có thể cao hơn banner — cắt là
       mất luôn phần trên của form. */
    .page-detail-row .fc-hero > img {
        border-radius: 16px;
    }
}


/* --------------------------------------------------------------------------
   22.14 Băng chuyền mã giảm giá trên điện thoại (block "Vietago: Mã giảm giá")
   Dưới 576px lưới xếp dọc: 4 thẻ chiếm gần trọn màn hình, khách phải cuộn mãi
   mới qua được khối. Đổi thành vuốt ngang, mỗi màn ĐÚNG 1 thẻ.

   Giữ nguyên markup lưới Bootstrap (row + col) để desktop không đổi một nét
   nào — ở đây chỉ bỏ xuống dòng, bật cuộn ngang + scroll-snap. Không dùng owl
   vì block này chạy bằng vietago.js (vanilla, không jQuery); chấm chỉ vị trí
   do bindSnapCarousels() trong file đó cập nhật.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .sec-coupon .vga-coupon-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Thẻ nhấc lên 2px + đổ bóng khi chạm (mục 9): cuộn ngang biến trục dọc
           thành auto, không chừa chỗ là bóng bị xén và sinh thanh cuộn dọc con. */
        padding-bottom: 6px;
    }

    .sec-coupon .vga-coupon-row::-webkit-scrollbar {
        display: none;
    }

    /* Một thẻ = trọn bề ngang khung cuộn. Lề âm của `.row` và padding của cột
       triệt tiêu nhau nên thẻ vẫn thẳng mép với tiêu đề bên trên. */
    .sec-coupon .vga-coupon-row > .vga-coupon-slot {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: start;
    }
}

/* Chấm chỉ vị trí của băng chuyền vuốt ngang. Blade gắn kèm `.d-sm-none` nên
   từ 576px trở lên Bootstrap ẩn hẳn (display:none !important). */
.vga-snap-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.vga-snap-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #CBD5E1;
    transition: width .2s ease, background .2s ease;
}

.vga-snap-dot.is-active {
    width: 20px;
    border-radius: 999px;
    background: var(--vga-teal);
}

/* ==========================================================================
   36. HỘP GỢI Ý ĐIỂM ĐẾN (.vga-suggest)

   Thay hộp xổ của <datalist> — cái đó do trình duyệt vẽ nên xổ ra nguyên danh
   sách địa điểm, dài gần hết màn hình và CSS không với tới được. Hộp này do
   assets/js/vietago.js dựng (mục 3b), dùng chung cho cả ba ô điểm đến: đầu
   trang trên máy tính, ngăn kéo trên điện thoại, hộp trên ảnh bìa.

   Hộp nằm ngoài cùng ở <body> (JS ghim toạ độ theo ô nhập) vì các ô đó nằm
   trong khối flex bo tròn có overflow riêng — để bên trong là bị cắt cụt.
   ========================================================================== */
.vga-suggest {
    position: fixed;
    /* Trên cả đầu trang dính (1030) lẫn ngăn kéo menu điện thoại (998) */
    z-index: 2000;
    /* ~5 dòng rồi cuộn. JS còn bóp thêm khi màn hình thấp hoặc bàn phím ảo che */
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .45);
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

.vga-suggest[hidden] {
    display: none;
}

.vga-suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3d4c62;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}

.vga-suggest__item i {
    flex-shrink: 0;
    width: 14px;
    color: #94A3B8;
    font-size: 13px;
}

/* Đoạn trùng với chữ khách vừa gõ */
.vga-suggest__item b {
    color: #1E293B;
    font-weight: 700;
}

.vga-suggest__item:hover,
.vga-suggest__item.is-active {
    background: #f4f8fb;
    color: var(--vga-teal);
}

.vga-suggest__item:hover i,
.vga-suggest__item.is-active i,
.vga-suggest__item:hover b,
.vga-suggest__item.is-active b {
    color: var(--vga-teal);
}

/* Dòng đếm phần bị cắt bớt: có nó khách mới biết còn nơi khác mà gõ tiếp,
   không thì tưởng danh sách chỉ có ngần ấy. */
.vga-suggest__more {
    padding: 8px 12px 4px;
    border-top: 1px solid #EEF2F6;
    margin-top: 4px;
    color: #94A3B8;
    font-size: 12px;
}

.vga-suggest__empty {
    padding: 12px;
    color: #94A3B8;
    font-size: 13px;
    line-height: 1.4;
}

/* Thanh cuộn mảnh cho gọn — WebKit cần pseudo-element riêng */
.vga-suggest::-webkit-scrollbar {
    width: 8px;
}

.vga-suggest::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 999px;
    background: #CBD5E1;
}