/* ========== FIXED HEADER ========== */
#vnt-header-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990 !important;
    width: 100%;
}

#vnt-content {
    padding-top: 100px;
}

@media (max-width: 767px) {
    /* topHead ẩn khỏi header → mainHead lên top → padding chỉ cần 50px */
    #vnt-content {
        padding-top: 50px;
    }
}

/* ========== RESET OLD HEADER STYLES ========== */
.topHead .menuNav,
.topHead .list-header-account-menu,
.topHead > .wrapper > .header-account-menu.hidden-lg {
    display: none !important;
}

/* ========== TOP BAR ========== */
.topHead {
    background: var(--c-primary) !important;
    height: 40px;
    padding: 0 !important;
}

.topHead .wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 40px;
}

.topHead-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.topHead-item {
    color: #fff !important;
    font-size: 13px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: opacity 0.2s;
    line-height: 40px;
    height: 35px;
}

.topHead-item:hover {
    opacity: 0.85;
    color: #fff !important;
    text-decoration: none !important;
}

.topHead-item i {
    font-size: 14px;
}

.topHead-item strong {
    font-weight: 700;
    color: #ffe600;
}

.topHead-center {
    flex: 1;
    max-width: 700px;
    margin: 0 24px;
}

.topHead-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    height: 40px;
}

/* ========== SEARCH BAR in topHead ========== */
.topHead .global-search-wrapper {
    z-index: 10000;
}

.topHead .global-search-bar {
    height: 32px;
    border: none;
    /* 10px cho khớp bo góc dùng chung của web - client 2026-07-29.
       Rule NÀY mới là rule ăn (2 lớp `.topHead .global-search-bar` đè
       `.global-search-bar` 1 lớp trong global-search.css) — sửa mỗi bên kia không thấy đổi. */
    border-radius: 10px;
    background: #fff;
}

.topHead .global-search-bar input#globalSearchInput {
    font-size: 13px;
    padding: 6px 12px;
}

.topHead .global-search-bar .gs-btn-search {
    width: 36px;
    min-width: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #999;
    font-size: 15px;
    border-left: 1px solid #eee;
}

.topHead .global-search-bar .gs-btn-search:hover {
    color: var(--c-primary);
    background: #f9f9f9;
}

/* ========== HOTLINE POPUP (keep existing behavior) ========== */
.topHead .hotlineTop {
    position: relative;
}

.topHead .hotlineTop .popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10001;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 280px;
    padding: 0;
}

.topHead-left:hover .hotlineTop .popup {
    display: block;
}

.topHead .tableHotline p {
    display: flex;
    justify-content: space-between;
    padding: 6px 16px;
    margin: 0;
    font-size: 13px;
    color: #555;
}

.topHead .tableHotline p a {
    color: var(--c-primary);
    font-weight: 600;
    margin-left: 12px;
}

.topHead .tableHotline p:hover {
    background: #fdf0f6;
}

/* Hàng cuối: bỏ đường kẻ dưới cho gọn sát mép bo góc popup (padding popup đã = 0) */
.topHead .tableHotline p:last-child {
    border-bottom: none;
}

/* ========== MAIN HEADER ========== */
.mainHead {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 !important;
}

.mainHead .wrapper {
    height: 60px;
}

.mainHead-inner {
    display: flex;
    align-items: center;
    height: 60px;
    gap: 16px;
}

/* Hide old layout classes */
.mainHead .wrapPoss,
.mainHead .header-tools,
.mainHead .menuToggle {
    display: none !important;
}

/* Logo */
.mainHead .logo {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    float: none !important;
    max-width: none !important;
    padding: 0 !important;
}

.mainHead .logo a {
    display: flex;
    align-items: center;
}

.mainHead .logo img {
    display: block;
}

/* ========== MAIN NAVIGATION ========== */
.mainNav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Không cho nav shrink dưới max-content của ul → items không bị overflow
       sang auth section (gây HOT badge của Combo đè Đăng nhập). */
    min-width: max-content;
}

.mainNav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
}

.mainNav > ul > li {
    position: relative;
}

.mainNav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 18px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
    text-transform: none !important;
}

.mainNav > ul > li > a i.fa {
    font-size: 15px;
    color: var(--c-primary);
}

.mainNav > ul > li > a .fa-angle-down {
    font-size: 12px;
    color: #999;
    margin-left: 2px;
}

.mainNav > ul > li:hover > a,
.mainNav > ul > li.current > a {
    color: var(--c-primary);
}

/* Dropdown submenu */
.mainNav > ul > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    min-width: 220px;
    padding: 8px 0;
    z-index: 1000;
    list-style: none;
}

.mainNav > ul > li:hover > ul {
    display: block;
}

/* Mega-menu Tour: nav đã đổi .menuTop → .mainNav nên rule hover cũ
   (.menuTop>ul>li:hover>.megaMenu) không khớp → mega-menu không hiện.
   Cho li.nopos static để .megaMenu bám .wrapper (khung nội dung 1200px căn giữa,
   không tràn full-width), hiện khi hover Tour + trình bày đẹp hơn. */
.mainHead .wrapper { position: relative; }
.mainNav > ul > li.nopos {
    position: static;
}
.mainNav > ul > li.nopos > .megaMenu {
    z-index: 1000;
    /* Gọn trong khung nội dung 1200px (căn theo .wrapper), không tràn full-width */
    left: 0;
    right: 0;
    margin-top: 8px;
    /* Khung (viền/bo/bóng) chuyển vào .grid → .megaMenu KHÔNG overflow:hidden để
       ::before bridge không bị cắt (fix hover: chuột đi xuống panel không bị mất). */
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
/* Bridge trong suốt phủ khoảng trống giữa nav và panel → hover liên tục khi rê chuột xuống */
.mainNav > ul > li.nopos > .megaMenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 16px;
    background: transparent;
}
/* Khung đẹp nằm ở .grid (bo góc + đổ bóng + viền hồng), clip nội dung gọn */
.mainNav > ul > li.nopos > .megaMenu > .grid {
    background: #fff;
    border: 1px solid #eef0f2;
    border-top: 3px solid #d6248c;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.14);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.mainNav > ul > li.nopos:hover > .megaMenu {
    display: block;
}
/* Tinh chỉnh trình bày bên trong mega-menu cho gọn gàng */
.mainNav > ul > li.nopos > .megaMenu .grid .col1 { border-right: 1px solid #f0f0f0; }
.mainNav > ul > li.nopos > .megaMenu .menuFo > .wrap { padding: 16px 18px; }
.mainNav > ul > li.nopos > .megaMenu .menuFo ul li a { transition: color .12s; }
.mainNav > ul > li.nopos > .megaMenu .menuFo ul ul li a:hover { color: #d6248c; }
.mainNav > ul > li.nopos > .megaMenu .menuNa ul li a { transition: background .12s, color .12s; }

/* ═══════ Mega-menu Tour — restyle đồng bộ design system mới (tokens.css) ═══════
   Trước: tiêu đề 16px đen đậm, link 14px thô, nền xám → lỗi thời.
   Nay: font Be Vietnam Pro, tiêu đề cột HỒNG brand + gạch phân cách nhẹ, link muted
   hover hồng + trượt nhẹ, nav trái bo góc hover hồng, footer dạng pill brand. */
.mainNav > ul > li.nopos > .megaMenu { font-family: var(--dlv-font-sans); }
.mainNav > ul > li.nopos > .megaMenu > .grid {
    border: 1px solid var(--c-border-soft);
    border-top: 3px solid var(--c-primary);
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(0,0,0,.13);
}
.mainNav > ul > li.nopos > .megaMenu .col1 { padding: 14px 8px; border-right: 1px solid var(--c-border-soft); }
.mainNav > ul > li.nopos > .megaMenu .col2 { background: #fff; padding: 14px 6px; }
.mainNav > ul > li.nopos > .megaMenu .menuFo { background: #fff; }
.mainNav > ul > li.nopos > .megaMenu .menuFo > .wrap { padding: 4px 12px; border-bottom: 0; }

/* Nav trái (Du lịch trong nước / nước ngoài / khách đoàn / ...) */
.mainNav > ul > li.nopos > .megaMenu .menuNa ul li a {
    font-size: 14px; font-weight: 600; color: var(--c-text);
    padding: 11px 20px 11px 12px; margin: 2px 0; border-radius: 8px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.mainNav > ul > li.nopos > .megaMenu .menuNa ul li a:before { color: var(--c-text-soft); transition: color .15s; }
.mainNav > ul > li.nopos > .megaMenu .menuNa ul li:hover > a { background: var(--c-primary-light); color: var(--c-primary); }
.mainNav > ul > li.nopos > .megaMenu .menuNa ul li:hover > a:before { color: var(--c-primary); }

/* Cột: divider nhẹ theo token, bỏ viền cột cuối */
.mainNav > ul > li.nopos > .megaMenu .menuFo .wrap > ul > li { border-right: 1px solid var(--c-border-soft); }
.mainNav > ul > li.nopos > .megaMenu .menuFo .wrap > ul > li:last-child { border-right: 0; }

/* Tiêu đề cột (Du lịch Miền Bắc / Trung / Nam / Chùm tour nghỉ lễ) */
.mainNav > ul > li.nopos > .megaMenu .menuFo .wrap > ul > li > a {
    font-size: 14px; font-weight: 700; color: var(--c-primary);
    line-height: 1.4; margin: 2px 0 9px; padding-bottom: 8px;
    border-bottom: 1px solid var(--c-border-soft);
}
.mainNav > ul > li.nopos > .megaMenu .menuFo .wrap > ul > li > a:hover { color: var(--c-primary-hover); }

/* Link điểm đến */
.mainNav > ul > li.nopos > .megaMenu .menuFo .wrap > ul > li ul li a {
    font-size: 13.5px; font-weight: 500; color: var(--c-text-muted);
    line-height: 1.55; padding: 4px 0; margin: 0;
    transition: color .15s, transform .15s;
}
.mainNav > ul > li.nopos > .megaMenu .menuFo .wrap > ul > li ul li a:hover {
    color: var(--c-primary); transform: translateX(3px);
}

/* Footer "Tất cả tour ..." → pill brand */
.mainNav > ul > li.nopos > .megaMenu .linkAllMenu {
    text-align: center; padding: 12px 0 6px; margin-top: 4px;
    border-top: 1px solid var(--c-border-soft);
}
.mainNav > ul > li.nopos > .megaMenu .linkAllMenu a {
    display: inline-flex; align-items: center;
    padding: 9px 24px; border-radius: 999px;
    background: var(--c-primary-light); color: var(--c-primary);
    font-size: 13.5px; font-weight: 700; transition: all .18s;
}
.mainNav > ul > li.nopos > .megaMenu .linkAllMenu a:hover {
    background: var(--c-primary); color: #fff;
    box-shadow: 0 6px 16px rgba(214,36,140,.28);
}
.mainNav > ul > li.nopos > .megaMenu .linkAllMenu a span:after { content: "  →"; font-weight: 600; }

.mainNav > ul > li > ul > li > a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    transition: all 0.15s;
}

.mainNav > ul > li > ul > li > a:hover {
    background: #fdf0f6;
    color: var(--c-primary);
}

/* ========== AUTH BUTTONS ========== */
.mainHead-auth {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Không dùng margin-left thêm: .mainHead-inner đã có gap: 28px giữa các flex items.
       Trước đây có margin-left: 24px → tổng 52px giữa nav và auth (thừa). */
}

.btn-auth {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
    line-height: 1.4;
    text-transform: none !important;
}

.mainHead-auth a.btn-login {
    color: #333 !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    height: auto !important;
    line-height: 1.4 !important;
    width: auto !important;
}

.mainHead-auth a.btn-login:hover {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    background: #fff !important;
}

.mainHead-auth a.btn-register {
    color: #fff !important;
    background: var(--c-primary) !important;
    border: 1px solid var(--c-primary) !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    height: auto !important;
    line-height: 1.4 !important;
    width: auto !important;
}

.mainHead-auth a.btn-register:hover {
    background: #b81e76 !important;
    border-color: #b81e76 !important;
}

/* Account menu when logged in */
.mainHead-auth .header-account-menu {
    position: relative;
}

.mainHead-auth .account-menu-name {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--c-primary, #d6248c);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--c-primary, #d6248c) !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.2s ease-in-out;
}

.mainHead-auth .account-menu-name:hover {
    border-color: var(--c-primary, #d6248c);
    color: var(--c-primary, #d6248c) !important;
    transform: scale(1.1);
}

/* Override old sub-account-header: hide by default, show on hover */
.mainHead-auth .sub-account-header {
    display: none !important;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999;
    padding-top: 10px;
    width: 200px;
}

.mainHead-auth .header-account-menu:hover .sub-account-header,
.mainHead-auth .header-account-menu.show-sub-account .sub-account-header {
    display: block !important;
}

.mainHead-auth .box-popup-account-header {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 12px;
    border: none !important;
}

.mainHead-auth .box-popup-account-header:before {
    display: none !important;
}

.mainHead-auth .list-account-header-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mainHead-auth .list-account-header-nav li a {
    display: block;
    padding: 8px 12px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
}

.mainHead-auth .list-account-header-nav li a:hover {
    background: #fdf0f6;
    color: var(--c-primary);
}

/* ========== MOBILE ========== */
.mainHead-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.mainHead-mobile .account-menu-name {
    color: #666 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mainHead-mobile .sub-account-header {
    display: none !important;
}

.mainHead-mobile .header-account-menu:hover .sub-account-header {
    display: block !important;
}

/* Hide old mobile menu wrapper outside our new structure */
.topHead > .wrapper > .header-account-menu {
    display: none !important;
}

/* ========== RESPONSIVE ========== */
/* Laptop 13" (~1280px) / 14" (~1366px): 9 mục menu + Đăng nhập/Đăng ký hơi rộng so với khung
   .wrapper (max 1200px) nên nội dung header (~1223px) tràn khung → nút "Đăng ký" bị CẮT mép phải.
   Thu gọn NHẸ padding/khoảng cách nav (nhẹ hơn mức ≤1199px) để vừa khung mà vẫn thoáng. */
@media (min-width: 1200px) and (max-width: 1366px) {
    .mainHead-inner { gap: 12px; }
    .mainNav > ul > li > a { padding: 18px 8px; }
    .mainHead-auth { gap: 6px; }
}

@media (max-width: 1199px) {
    /* iPad ngang / cửa sổ desktop hẹp (992–1199px; hay gặp khi iPad Safari để "Request
       Desktop Website" → server nhận UA desktop): 9 mục menu + Đăng nhập/Đăng ký quá rộng
       nên nút "Đăng ký" bị đẩy ra NGOÀI header. Thu gọn logo/khoảng cách/padding cho vừa khung. */
    .mainHead-inner { gap: 10px; }
    .mainHead .logo img { width: 140px; height: auto; }
    .mainNav > ul > li > a {
        padding: 18px 5px;
        font-size: 12px;
    }
    .mainHead-auth { gap: 6px; }
    .mainHead-auth a.btn-login,
    .mainHead-auth a.btn-register {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 991px) {
    .topHead-center {
        max-width: 280px;
        margin: 0 12px;
    }

    .mainNav > ul > li > a {
        padding: 18px 6px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .topHead .wrapper {
        justify-content: space-between !important;
    }

    .topHead-center {
        flex: 1;
        max-width: none;
        margin: 0 10px;
    }

    .topHead-left {
        gap: 8px;
    }

    .topHead-item span {
        display: none;
    }

    .topHead-item i {
        font-size: 18px;
    }

    .topHead-item strong {
        display: inline;
    }

    .mainHead {
        height: auto;
        padding: 0;
    }

    .mainHead .wrapper {
        height: auto;
        padding: 0;
    }

    /* Header row: [Logo 90px] [Search flex:1] [User+☰] */
    .mainHead-inner {
        height: 50px;
        padding: 0 10px;
        gap: 8px;
        display: flex !important;
        align-items: center !important;
    }

    /* Logo nhỏ hơn để nhường chỗ cho search */
    .mainHead .logo { flex-shrink: 0; }
    .mainHead .logo img {
        width: 90px;
        height: auto;
    }

    /* Search inline trong header: flex:1 chiếm space giữa logo và icons */
    .mainHead-mob-search {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-top: none !important;
        position: relative !important;
    }
    .mainHead-mob-search .global-search-wrapper {
        /* display:block = "CSS đã về" → gỡ lớp ẩn chống FOUC đặt trong critical CSS
           (xem critical-home.css / critical-inner.css). Cùng specificity nhưng file này
           nạp SAU khối <style id="dlv-critical"> nên thắng. */
        display: block;
        width: 100%;
        position: relative;
        z-index: 10000;
    }
    /* HOMEPAGE (.hp-mob-search-row): ô tìm kiếm nằm trong BODY (#vnt-content), KHÔNG trong
       #vnt-header-top. z-index:10000 ở stacking-context gốc sẽ vượt LÊN TRÊN header
       (#vnt-header-top z-index:9990) → khi bấm ☰ mở menu, thanh search nổi ĐÈ lên menu drawer
       mobile (.jsMenuView; z-index nội bộ 100001 nhưng cả cụm nằm trong context header 9990),
       nhìn như thanh tìm kiếm "lọt ra giữa" menu. Hạ xuống dưới 9990 để search chìm dưới
       header + drawer; dropdown kết quả vẫn thừa sức đè nội dung body (z-index thấp).
       Trang con KHÔNG bị: search ở đó nằm TRONG header nên cùng context, không xung đột. */
    .hp-mob-search-row .mainHead-mob-search .global-search-wrapper {
        z-index: 500;
    }
    .mainHead-mob-search .global-search-bar {
        height: 36px;
        border: 1.5px solid #e0e0e0;
        border-radius: 10px;
        background: #f5f5f5;
        overflow: hidden;
        display: flex !important;
        align-items: center !important;
    }
    .mainHead-mob-search .global-search-bar:focus-within {
        border-color: var(--c-primary);
        background: #fff;
        box-shadow: 0 0 0 2px rgba(214,36,140,.1);
    }
    .mainHead-mob-search .global-search-bar input {
        /* PHẢI >=16px: iOS Safari TỰ PHÓNG TO trang khi focus input có font-size <16px (13px→zoom,
           che nội dung). 16px = chặn auto-zoom, không cần user-scalable=no (giữ accessibility).
           !important vì rule ID `.global-search-bar input#globalSearchInput{font-size:13px}` (đặc hiệu
           cao hơn selector class này) sẽ thắng nếu không có !important → vẫn 13px → vẫn zoom. */
        font-size: 16px !important;
        padding: 0 10px;
        height: 100%;
        background: transparent;
        border: none !important;
        outline: none !important;
        flex: 1;
        min-width: 0;
    }
    /* Placeholder nhỏ hơn cho đỡ bị cắt chữ trong thanh hẹp (đo iPhone 390px: box ~128px,
       text 14px cần 140px → 13px + bỏ "..." mới vừa). CHỈ giảm ::placeholder — font-size
       của INPUT phải giữ 16px (iOS auto-zoom xét font input, không xét placeholder). */
    .mainHead-mob-search .global-search-bar input::placeholder {
        font-size: 13px;
    }
    .mainHead-mob-search .global-search-bar .gs-btn-search {
        width: 38px;
        min-width: 38px;
        height: 100%;
        padding: 0 !important;
        background: var(--c-primary);
        color: #fff !important;
        border: none !important;
        border-radius: 0 8px 8px 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    /* Dropdown kết quả = panel TRÀN NGANG viewport (không bị bó trong ô search flex:1
       giữa logo & icon). Header mobile fixed ~50px → neo panel ngay dưới header. */
    .mainHead-mob-search .gs-dropdown {
        position: fixed;
        top: 52px;
        left: 8px;
        right: 8px;
        width: auto;
        min-width: 0;
        max-height: calc(100vh - 66px);
        border-radius: 14px;
        z-index: 10001;
        box-shadow: 0 14px 44px rgba(0,0,0,.24);
        padding: 14px 0;
    }

    /* ── User icon + hamburger không đè nhau ── */
    .mainHead-mobile {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
        margin-left: auto;
        position: static !important;
        height: 50px !important;
    }
    /* Giữ relative để sub-account-header absolute anchor đúng */
    .mainHead-mobile .header-account-menu {
        position: relative !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    .mainHead-mobile .account-menu-name {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #f5f5f5 !important;
        cursor: pointer !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        vertical-align: middle !important;
    }
    .mainHead-mobile .account-menu-name i {
        line-height: 1 !important;
        display: block !important;
        font-size: 16px !important;
        vertical-align: middle !important;
    }
    /* Dropdown login trên mobile: căn phải, z-index cao hơn search bar */
    .mainHead-mobile .sub-account-header {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        width: 220px !important;
        z-index: 10002 !important;
        padding-top: 8px;
    }
    .mainHead-mobile .header-account-menu:hover .sub-account-header,
    .mainHead-mobile .header-account-menu.open .sub-account-header,
    .mainHead-mobile .header-account-menu.show-sub-account .sub-account-header {
        display: block !important;
    }
    /* Hamburger wrapper */
    .mainHead-mob-burger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 32px;
        width: 32px;
        align-self: center;
        cursor: pointer;
    }
    /* icon_menu 3 bars trong flex context */
    .mainHead-mob-burger .icon_menu {
        width: 22px !important;
        height: 16px !important;
        position: relative !important;
        display: block !important;
        cursor: pointer;
    }
    .mainHead-mob-burger .icon_menu::before,
    .mainHead-mob-burger .icon_menu::after {
        content: '' !important;
        position: absolute !important;
        width: 100% !important;
        height: 2px !important;
        background: #555 !important;
        left: 0 !important;
    }
    .mainHead-mob-burger .icon_menu::before { top: 0 !important; }
    .mainHead-mob-burger .icon_menu::after  { top: 14px !important; }
    .mainHead-mob-burger .icon_menu .style_icon {
        position: absolute !important;
        width: 100% !important;
        height: 2px !important;
        background: #555 !important;
        left: 0 !important;
        top: 7px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .mainHead-mob-burger:hover .icon_menu::before,
    .mainHead-mob-burger:hover .icon_menu::after,
    .mainHead-mob-burger:hover .icon_menu .style_icon { background: var(--c-primary) !important; }
}


/* ── Fix .wrapPos popup z-index + position ─────────────────────────────
 * style_minimize.css set .wrapPos.active { z-index: 109 } - thấp hơn header (9990)
 * → popup bị header che, không đóng được khi scroll.
 * Override tại đây (header CSS loaded sau style_minimize) để popup cao hơn header.
 * Desktop: popup full-screen từ top:0 - header bị che (intentional, UX chuẩn)
 * Mobile: popup bắt đầu từ top:90px để không che hotline bar + header
 * ─────────────────────────────────────────────────────────────────────── */
.wrapPos.active {
    z-index: 10001 !important; /* > header 9990 */
}
.formMenuTour .bgBlack,
.formMenuTour-new .bgBlack {
    z-index: 10000 !important;
}
@media (max-width: 767px) {
    .wrapPos {
        top: 90px !important; /* Dưới header mobile */
    }
    .formMenuTour .bgBlack,
    .formMenuTour-new .bgBlack {
        top: 90px !important;
    }
}

/* ── MOBILE: Search popup KHÔNG fixed overlay, thay bằng inline dropdown ──
 * Thay vì popup fixed full-screen (che content khi scroll),
 * trên mobile form expand inline ngay dưới icon bar.
 * Desktop: giữ nguyên behavior (wrapPos.active = fixed overlay).
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Ẩn bgBlack overlay trên mobile (không cần dim vì form inline) */
    .formMenuTour .bgBlack { display: none !important; }

    /* wrapPos: không fixed, không overlay - inline block bên dưới icon */
    .formMenuTour .wrapPos {
        position: static !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        display: none !important;
        width: 100% !important;
        padding: 0 !important;
        z-index: auto !important;
        align-items: unset !important;
        overflow: visible !important;
        background: transparent !important;
    }

    /* Khi active: hiện inline */
    .formMenuTour .wrapPos.active {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }

    /* Popup box: full-width card, không center */
    .formMenuTour .wrapPos .popup {
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
        margin: 8px 0 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* gridForm: stack dọc - mỗi col chiếm full width */
    .formMenuTour .gridForm { flex-direction: column !important; }
    .formMenuTour .gridForm .col {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ẩn các col khác khi 1 col đang mở */
    .formMenuTour .gridForm .col .wrapPos.active ~ * { display: none; }

    /* Form content padding */
    .formMenuTour .popup .content { padding: 14px 16px 16px !important; }
    .formMenuTour .popup .tTxt { font-size: 13px !important; margin-bottom: 10px !important; }

    /* close button */
    .formMenuTour .closez {
        width: 36px !important; height: 36px !important;
        top: 4px !important; right: 4px !important;
        font-size: 18px !important;
    }

    /* Title bar */
    .formMenuTour .popup .title {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

    /* Input fields */
    .formMenuTour .popup input,
    .formMenuTour .popup select,
    .formMenuTour .popup .chosen-single {
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* Search button */
    .formMenuTour .popup button {
        height: 48px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    /* search-desktop wrapper: padding để form không sát mép */
    .search-desktop .wrapper { padding: 0 12px !important; }
    .search-desktop .formMenuTour { padding: 0 !important; }
}

/* ── MOBILE: Ẩn hoàn toàn search-desktop ─────────────────────────────
 * Trên mobile không dùng popup search desktop nữa.
 * Thay bằng nút "Bộ lọc" (đã có sẵn trong search_tour.php bottom sheet).
 * Desktop: không thay đổi.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Ẩn toàn bộ search icon bar + popup */
    .search-desktop { display: none !important; }

    /* Xóa tất cả override wrapPos inline đã add trước đó */
    .formMenuTour .bgBlack,
    .formMenuTour .wrapPos,
    .formMenuTour .wrapPos.active { display: none !important; }
}

/* ── Fix bổ sung: wrapPos.active position:fixed thoát khỏi parent hidden ──
 * .search-desktop { display:none } ẩn container nhưng fixed child vẫn hiện.
 * Phải ẩn trực tiếp wrapPos và bgBlack trên mobile.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Ẩn tất cả wrapPos (kể cả khi active/fixed) */
    .formMenuTour .wrapPos,
    .formMenuTour .wrapPos.active,
    .formMenuTour .bgBlack,
    .formMenuTour .bgBlack.active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ── Datepicker: không bị clip bởi bottom sheet overflow ── */
@media (max-width: 767px) {
    /* Cho phép datepicker popup thoát ra ngoài bottom sheet */
    .tour-bottom-sheet { overflow: visible !important; }
    .tour-bottom-sheet-body { overflow: visible !important; }
    /* Nhưng vẫn cần scroll - dùng pseudo scroll container */
    .tour-bottom-sheet-body > * { overflow-y: auto; }
    
    /* Native date input: ẩn datepick text, hiện type=date */
    .datepick-native-wrapper .datepick { display: none !important; }
    .datepick-native-wrapper input[type="date"] { display: block !important; }
}

/* ── Fix box_search_mobile.php: ẩn formMenuTour-new .wrapPos trên mobile ──
 * mota_tour_con.php dùng box_search_mobile.php thay vì box_search.php.
 * box_search_mobile.php dùng .formMenuTour-new .wrapPos (có position:fixed).
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .formMenuTour-new .wrapPos,
    .formMenuTour-new .wrapPos.active,
    .formMenuTour-new .bgBlack,
    .formMenuTour-new .bgBlack.active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MOBILE: topHead → floating phone button (like Zalo widget)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* mainHead lên top: 0 (topHead không còn chiếm 40px nữa) */
    #vnt-header-top .mainHead {
        /* mainHead nằm ngay dưới topHead trong DOM.
           topHead hidden → mainHead tự lên top qua fixed parent */
    }

    /* topHead: floating phone button - bên TRÁI, trên Zalo */
    .topHead {
        position: fixed !important;
        bottom: 210px !important; /* Zalo(142px) + height(50px) + gap(18px) = 210px */
        left: 12px !important;
        right: auto !important;
        top: auto !important;
        width: 42px !important;   /* nhỏ đi ~5% (44→42) */
        height: 42px !important;
        border-radius: 50% !important;
        background: var(--c-primary) !important;
        box-shadow: 0 4px 16px rgba(214,36,140,.45) !important;
        z-index: 2000 !important;
        overflow: visible !important;
    }

    /* Ẩn toàn bộ nội dung topHead trừ phone icon */
    .topHead .wrapper {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    .topHead-left {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        position: static !important;
    }
    /* Chỉ show phone icon link */
    .topHead-left > a.topHead-item:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        color: #fff !important;
        padding: 0 !important;
    }
    /* Ẩn text "Hotline: 1900 1177" */
    .topHead-left > a.topHead-item:first-child span { display: none !important; }
    /* Phone icon lớn hơn */
    .topHead-left > a.topHead-item:first-child i.fa-phone {
        font-size: 20px !important;
        color: #fff !important;
    }

    /* Ẩn email link và toàn bộ topHead-right */
    .topHead-left > a:not(:first-child):not(.hotlineTop) { display: none !important; }
    .topHead .topHead-right,
    .topHead .topHead-center { display: none !important; }

    /* hotlineTop popup: float left từ button */
    .topHead .hotlineTop {
        position: absolute !important;
        left: 0 !important;
        bottom: 58px !important;
        top: auto !important;
    }
    .topHead .hotlineTop .popup {
        left: 0 !important;    /* popup mở từ trái sang phải (button bên trái) */
        right: auto !important;
        bottom: 0 !important;
        top: auto !important;
        min-width: 260px !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
    }
    /* Trigger popup bằng hover/focus trên button */
    .topHead:hover .hotlineTop .popup,
    .topHead:focus-within .hotlineTop .popup {
        display: block !important;
    }

    /* Pulse animation như Zalo */
    .topHead::before {
        content: '' !important;
        position: absolute !important;
        inset: -4px !important;
        border-radius: 50% !important;
        background: rgba(214,36,140,.3) !important;
        animation: dlv-phone-pulse 2s ease-in-out infinite !important;
        z-index: -1 !important;
    }
    @keyframes dlv-phone-pulse {
        0%, 100% { transform: scale(1); opacity: .6; }
        50%       { transform: scale(1.15); opacity: 0; }
    }
}