/* ================================================================
   ICON MENU — nút 3 gạch ngang ở header (thay cho form tìm kiếm)
   Hover vào icon -> xổ dọc 4 hàng (Thông tin / Trong nước / Nước ngoài / Loại tour)
   Hover tiếp vào từng hàng -> xổ ngang nội dung chi tiết (flyout)
   ================================================================ */

.vt-icon-menu { position: relative; }

.vt-icon-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: .8rem;
    border-radius: .6rem;
    color: inherit;
    transition: background .15s;
}

.vt-icon-menu-trigger:hover {
    background: #f1f5f9;
}

.vt-icon-menu-panel {
    /* position:fixed neo theo viewport (không theo .vt-icon-menu) để panel luôn
       sát mép trái màn hình và .vt-icon-flyout (con, position:absolute) chiếm
       toàn bộ phần còn lại tới sát mép phải màn hình — menu full chiều ngang. */
    --vt-menu-panel-width: 30rem;
    position: fixed;
    top: 7.2rem;
    left: 0;
    z-index: 60;
    width: var(--vt-menu-panel-width);
    background: #eaf2ff;
    border: 1px solid #dbe6f7;
    border-right: none;
    border-radius: 0 0 1rem 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    padding: .6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.6rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.vt-icon-menu.is-open .vt-icon-menu-panel {
    /* Chỉ mở/đóng bằng click (.is-open do JS toggle khi click .vt-icon-menu-trigger, xem
       main.js) — dùng chung 1 cơ chế cho cả PC lẫn mobile, không dùng :hover nữa. Trước đây
       dùng :hover cho desktop khiến "click lần 2 để đóng" không ăn thua khi chuột vẫn đang
       hover trên nút — hover tự mở lại đè lên trạng thái đã đóng. */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vt-icon-menu-row {
    /* KHÔNG đặt position:relative ở đây — .vt-icon-flyout cần neo (containing block)
       theo .vt-icon-menu-panel (đã position:absolute sẵn), để đỉnh flyout luôn bằng đỉnh
       panel dù đang mở hàng nào, thay vì lệch xuống theo vị trí từng hàng.
       Trạng thái mở do JS toggle class .is-open khi click (xem main.js), không dùng :hover
       nữa — tránh xổ nhầm block bên phải khi rê chuột ngang qua panel. */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.6rem;
    margin-bottom: .4rem;
    border-radius: .7rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.vt-icon-menu-row:last-child {
    margin-bottom: 0;
}

.vt-icon-menu-row svg {
    color: #94a3b8;
    transition: color .15s;
}

.vt-icon-menu-row:hover {
    background: #dbe9ff;
}

.vt-icon-menu-row.is-open,
.vt-icon-menu-row:focus-within {
    /* Nền xanh nhạt + vạch nhấn bên trái thay vì tô đặc cả khối xanh đậm #0046c1 (chữ trắng)
       — kiểu tô đặc nhìn thô/nặng, nhất là khi cấp 3 bên trong cũng tô đặc y hệt chồng lên
       nhau. box-shadow inset để không đẩy layout (không cần border thật chiếm chỗ). */
    background: #e6efff;
    color: #0046c1;
    box-shadow: inset 3px 0 0 #0046c1;
}

.vt-icon-menu-row.is-open svg,
.vt-icon-menu-row:focus-within svg {
    color: #0046c1;
}

/* Link thẳng trong panel (vd "Tour trọn gói") — dùng chung dáng .vt-icon-menu-row nhưng
   không có chevron/flyout con, và không có state .is-open (không toggle được, chỉ điều
   hướng). Chỉ hiện ở mobile/tablet, ẩn ở desktop vì đã có sẵn ngoài header (xem cuối file). */
.vt-icon-menu-link {
    text-decoration: none;
    cursor: pointer;
}

.vt-icon-menu-link:hover {
    background: #dbe9ff;
}

.vt-icon-menu-link--tours {
    display: none;
}

.vt-icon-flyout {
    /* Containing block = .vt-icon-menu-panel (position:fixed neo viewport) — left:100%
       nghĩa là bắt đầu ngay sau sidebar, width tính bằng viewport trừ bề rộng sidebar
       để luôn kéo dài tới sát mép phải màn hình, bất kể kích thước cửa sổ. */
    position: absolute;
    left: 100%;
    top: 0;
    width: calc(100vw - var(--vt-menu-panel-width));
    max-width: none;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-left: none;
    border-radius: 0 0 1rem 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    padding: 2.8rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-.6rem);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    /* Giới hạn chiều cao cố định (48rem = 480px, html có font-size:10px) thay vì gần full
       màn hình — vẫn co lại theo viewport thấp (điện thoại ngang, cửa sổ thu nhỏ) nhờ
       min() với vế còn lại. Nội dung dư ra tự cuộn dọc thay vì tràn khỏi màn hình. */
    max-height: min(48rem, calc(100vh - 7.2rem - 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vt-icon-flyout::-webkit-scrollbar { width: .6rem; }
.vt-icon-flyout::-webkit-scrollbar-track { background: transparent; }
.vt-icon-flyout::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.vt-icon-flyout::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.vt-icon-menu-row.is-open .vt-icon-flyout,
.vt-icon-menu-row:focus-within .vt-icon-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ================================================================
   Nội dung dùng chung bên trong flyout (link, nhóm vùng miền...)
   ================================================================ */

.vt-megamenu-single-links {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.vt-megamenu-region-group {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.vt-megamenu-region-groups {
    /* auto-fit: số cột tự co theo số nhóm thực tế (3 miền trong nước, 5 châu lục quốc tế...)
       thay vì cố định repeat(3,1fr) — mỗi cột vẫn giãn đều hết chiều rộng flyout. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2.4rem;
}

/* Đường phân cách giữa các cột (vùng miền / danh mục.../ tag) — áp dụng cho mọi
   cột trừ cột đầu tiên, đồng bộ giao diện giữa Trong nước / Nước ngoài / Loại tour */
.vt-megamenu-region-group + .vt-megamenu-region-group {
    border-left: 1px solid #e5e9f0;
    padding-left: 3.2rem;
}

.vt-megamenu-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem;
}

.vt-megamenu-two-col-item + .vt-megamenu-two-col-item {
    border-left: 1px solid #e5e9f0;
    padding-left: 3.2rem;
}

.vt-megamenu-region-title {
    /* Đổi từ <p> sang <button> để bấm mở/đóng được ở mobile (xem .is-open bên dưới) — reset
       lại style mặc định của button. <button> mặc định căn giữa chữ (text-align:center của
       trình duyệt) nên phải khai báo lại text-align:left, không thì trên PC chữ bị lệch vào
       giữa thay vì sát trái như trước (hồi còn là <p>). */
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: default;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 .4rem;
}

.vt-megamenu-region-title-chevron {
    display: none;
}

.vt-megamenu-links {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.vt-megamenu-viewall {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .6rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #0046c1;
    text-decoration: none;
}

.vt-megamenu-viewall svg {
    width: 1.4rem;
    height: 1.4rem;
}

.vt-megamenu-viewall:hover {
    text-decoration: underline;
}

/* Chia danh sách phẳng (vd: quốc gia) thành 2 cột cân bằng tự động */
.vt-megamenu-links--cols {
    display: block;
    column-count: 2;
    column-gap: 3.2rem;
    column-rule: 1px solid #e5e9f0;
}

.vt-megamenu-links--cols .vt-megamenu-link {
    break-inside: avoid;
}

.vt-megamenu-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    font-size: 1.35rem;
    color: #334155;
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-megamenu-link:hover {
    color: #0046c1;
}

.vt-megamenu-count {
    font-size: 1.2rem;
    font-weight: 500;
    color: #94a3b8;
}

.vt-megamenu-link--main {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.4rem;
}

.vt-megamenu-tag-badge {
    display: inline-block;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: #f97316;
    border-radius: .3rem;
    padding: .05rem .35rem;
    flex-shrink: 0;
}

.vt-megamenu-empty {
    font-size: 1.2rem;
    color: #94a3b8;
    font-style: italic;
}

/* ================================================================
   LANGUAGE SWITCH — 2 icon cờ VI/EN hiện thẳng trên header, không cần
   mở dropdown. Ngôn ngữ đang dùng hiển thị nổi bật (viền xanh + full
   opacity, không phải link — không click được vì đang đứng sẵn ở đó).
   Ngôn ngữ còn lại mờ hơn, sáng rõ + phóng to nhẹ khi hover để gợi ý
   có thể bấm.
   ================================================================ */

.vt-lang-switch {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.vt-lang-switch-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: .3rem;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}

.vt-lang-switch-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

a.vt-lang-switch-item {
    opacity: .5;
    cursor: pointer;
}

a.vt-lang-switch-item:hover {
    opacity: 1;
    transform: scale(1.08);
}

span.vt-lang-switch-item.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0046c1;
    cursor: default;
}

/* ================================================================
   RESPONSIVE — đặt Ở CUỐI FILE (không phải ngay sau phần khai báo gốc
   phía trên) để thắng được đúng theo thứ tự cascade: các rule base như
   .vt-megamenu-region-groups/.vt-icon-flyout còn được khai báo lại (không
   trong media query) ở phần "Nội dung dùng chung" bên trên — nếu đặt
   @media trước phần đó, cùng specificity thì rule base đứng SAU sẽ đè mất
   override responsive dù điều kiện media có khớp hay không.
   ================================================================ */

@media (max-width: 1350px) {
    /* Tour trọn gói: hiện trong panel — cùng breakpoint với lúc
       .header_header-nav-list--full__S7Of_ (menu ngang desktop) biến mất, để không có
       khoảng nào bị thiếu hẳn link này. */
    .vt-icon-menu-link--tours {
        display: flex;
    }
}

@media (max-width: 1024px) {
    /* Panel full-width, nền TRẮNG đơn giản thay vì "sidebar xanh nhạt" của desktop — kiểu
       sidebar chỉ hợp không gian hẹp cạnh bên trên desktop, còn full-width trên mobile mà vẫn
       tô nền xanh + từng khối con cũng tô xanh sẽ chồng màu lên nhau nhìn rối. Ở đây dùng
       1 danh sách phẳng, chỉ phân cách bằng đường kẻ mảnh — đơn giản, dễ nhìn hơn. */
    .vt-icon-menu-panel {
        width: 100vw;
        max-height: calc(100vh - 7.2rem);
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 0;
        background: #fff;
        padding: .4rem 1.6rem;
    }

    /* Bỏ dáng "thẻ bo góc rời nhau" của desktop (border-radius, margin, nền xanh) — chuyển
       thành list phẳng, các hàng chỉ ngăn cách bằng viền dưới mảnh. */
    .vt-icon-menu-row {
        flex-wrap: wrap;
        border-radius: 0;
        margin-bottom: 0;
        padding: 1.4rem 0;
        border-bottom: 1px solid #eef1f5;
        background: none;
        box-shadow: none;
    }
    .vt-icon-menu-row:last-child {
        border-bottom: none;
    }

    /* Trạng thái mở: chỉ đổi màu chữ + icon sang xanh, KHÔNG tô nền/viền nhấn — giữ mọi thứ
       phẳng, đồng nhất với phần còn lại của list. */
    .vt-icon-menu-row.is-open,
    .vt-icon-menu-row:focus-within {
        background: none;
        color: #0046c1;
        box-shadow: none;
    }
    .vt-icon-menu-row.is-open svg,
    .vt-icon-menu-row:focus-within svg {
        color: #0046c1;
    }

    /* Flyout: xổ THẲNG XUỐNG dưới hàng đang mở (accordion) thay vì sang ngang bên phải —
       màn hình hẹp không đủ chỗ đặt 2 cột cạnh nhau như desktop. Vẫn dùng .is-open sẵn có
       của hàng (JS, main.js) để quyết định đóng/mở, chỉ đổi display thay vì opacity/transform. */
    .vt-icon-flyout {
        position: static;
        flex-basis: 100%;
        width: 100%;
        max-width: none;
        max-height: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        margin: 0;
        padding: 0 0 .6rem;
        transform: none;
        display: none;
    }
    .vt-icon-menu-row.is-open .vt-icon-flyout {
        display: block;
    }

    .vt-megamenu-two-col,
    .vt-megamenu-region-groups {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .vt-megamenu-two-col-item + .vt-megamenu-two-col-item,
    .vt-megamenu-region-group + .vt-megamenu-region-group {
        border-left: none;
        padding-left: 0;
        border-top: none;
        padding-top: 0;
    }

    /* Cấp 3 (Miền Bắc/Trung/Nam, Trong nước/Nước ngoài, Danh mục tour/Tag...): bấm vào tiêu
       đề mới xổ ra danh sách con — mặc định thu gọn, vì 1 flyout có thể chứa rất nhiều địa
       điểm con (vd 3 miền x hàng chục tỉnh thành) nếu hiện hết cùng lúc như trước. Cùng kiểu
       "list phẳng + viền dưới" với cấp 1, chỉ thêm padding-left để thụt vào 1 chút — rõ đây
       là con của hàng cấp 1 phía trên (vd "Miền Bắc" là con của "Du lịch trong nước"). */
    .vt-megamenu-region-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        padding: 1.1rem 0 1.1rem 1.4rem;
        margin: 0;
        border-radius: 0;
        background: none;
        border-bottom: 1px solid #eef1f5;
        color: #1e293b;
        font-size: 1.3rem;
        cursor: pointer;
    }

    .vt-megamenu-region-title-chevron {
        display: block;
        flex-shrink: 0;
        color: #94a3b8;
        transition: transform .15s ease, color .15s ease;
    }

    /* .vt-icon-menu-row.is-open svg (định nghĩa ở phần đầu file, dùng cho mũi tên cấp 1) có
       độ ưu tiên cao hơn .vt-megamenu-region-title-chevron thông thường vì nhiều class hơn
       (0,2,1 so với 0,1,0) — nó vô tình chọn TRÚNG luôn svg chevron cấp 3 lồng bên trong (vì
       là selector con cháu, không chỉ con trực tiếp), ép màu xanh của cấp 1 lên luôn cấp 3
       dù cấp 3 chưa mở. Phải khai báo lại rõ ràng ở đây với độ ưu tiên cao hơn để thắng chắc. */
    .vt-icon-menu-row.is-open .vt-megamenu-region-title-chevron {
        color: #94a3b8;
    }

    /* Đang mở: chỉ đổi màu chữ + xoay chevron, không tô nền — nhất quán với cấp 1. */
    .vt-megamenu-region-group.is-open > .vt-megamenu-region-title,
    .vt-megamenu-two-col-item.is-open > .vt-megamenu-region-title {
        color: #0046c1;
        font-weight: 700;
    }
    .vt-icon-menu-row.is-open .vt-megamenu-region-group.is-open > .vt-megamenu-region-title .vt-megamenu-region-title-chevron,
    .vt-icon-menu-row.is-open .vt-megamenu-two-col-item.is-open > .vt-megamenu-region-title .vt-megamenu-region-title-chevron {
        color: #0046c1;
        transform: rotate(90deg);
    }

    /* "Thông tin" (Giới thiệu/Liên hệ) không có tiêu đề cấp 3 riêng (không đi qua
       .vt-megamenu-region-title như Miền Bắc/Trung/Nam) — vẫn phải thụt vào cùng mức để nhất
       quán với các mục con khác trong menu mobile. gap:0 vì .vt-megamenu-link ở mobile đã tự
       có padding:1rem 0 (trên+dưới) làm khoảng cách riêng — cộng thêm gap 1.4rem của
       container nữa thành giãn cách gấp đôi, quá xa. */
    .vt-megamenu-single-links {
        padding-left: 1.4rem;
        gap: 0;
    }
    /* Gạch ngang phân cách giữa Giới thiệu/Liên hệ, cùng màu viền với các mục khác trong
       menu (.vt-icon-menu-row, .vt-megamenu-region-title) — mục cuối không cần vì flyout
       đóng lại ngay sau đó. */
    .vt-megamenu-single-links .vt-megamenu-link {
        border-bottom: 1px solid #eef1f5;
    }
    .vt-megamenu-single-links .vt-megamenu-link:last-child {
        border-bottom: none;
    }

    /* Danh sách con: ẩn mặc định, thụt vào 1 chút cho rõ cấp bậc (không cần đường kẻ dọc nữa
       — viền dưới của cả list đã đủ phân tách). Giới hạn chiều cao + tự cuộn riêng nếu nhóm
       có quá nhiều địa điểm, thay vì đẩy dài cả trang xuống như trước. */
    .vt-megamenu-links {
        display: none;
        margin: 0;
        padding: 1rem 0 1rem 2.8rem;
        max-height: 32rem;
        overflow-y: auto;
    }
    .vt-megamenu-region-group.is-open > .vt-megamenu-links,
    .vt-megamenu-two-col-item.is-open > .vt-megamenu-links {
        display: flex;
    }

    /* Từng link con (tỉnh/thành, quốc gia, tag...) cần vùng chạm rộng hơn trên mobile —
       .5rem như desktop hơi chật cho ngón tay, 1rem thoáng và dễ bấm hơn. */
    .vt-megamenu-link {
        padding: 1rem 0;
    }

    .vt-megamenu-region-group,
    .vt-megamenu-two-col-item {
        margin-bottom: 0;
    }

    /* "Xem tất cả" (continent) nằm trong region-group, cùng ẩn/hiện theo trạng thái mở của
       nhóm — desktop không đổi (luôn hiện, không nằm trong media query này). */
    .vt-megamenu-region-group > .vt-megamenu-viewall {
        display: none;
        margin: 0 0 1rem 2.8rem;
    }
    .vt-megamenu-region-group.is-open > .vt-megamenu-viewall {
        display: inline-flex;
    }
}

@media (max-width: 480px) {
    /* Header thấp hơn (5.6rem thay vì 7.2rem) ở màn hình rất nhỏ — xem
       .header_header-wrapper__QShlx trong style.css. */
    .vt-icon-menu-panel {
        top: 5.6rem;
        max-height: calc(100vh - 5.6rem);
    }
}