/**
 * =========================================================
 * EVERZEN MENU V2
 * =========================================================
 */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .header > .container {
        position: relative;
    }


    /*
     * Retreat dùng toàn chiều rộng container header.
     */
    .header .menu > ul > li.everzen-mega-retreat {
        position: static;
    }


    /*
     * Mega panel Retreat.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu {

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        left: 0;
        right: 0;

        top: calc(100% + 1px);

        width: 100%;
        min-width: 0;

        padding: 1.5rem 1.75rem;

        background: rgba(15, 85, 66, 0.96);

        visibility: hidden;
        opacity: 0;
        pointer-events: none;

        transition:
            opacity .2s ease,
            visibility .2s ease;

        z-index: 1000;
    }


    .header .menu > ul >
    li.everzen-mega-retreat:hover >
    ul.sub-menu {

        visibility: visible;
        opacity: 1;
        pointer-events: auto;

        top: calc(100% + 1px);
    }


    /*
     * Ba group chính.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group {

        position: relative;

        padding: 0 1.25rem;
    }


    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group:not(:last-child) {

        border-right:
            1px solid rgba(255,255,255,.22);
    }


    /*
     * Heading group:
     * Chương trình / Điểm nghỉ / Vùng đất
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    a {

        padding: 0 0 .8rem;

        margin-bottom: .35rem;

        color: #d0c574;

        font-weight: 600;

        text-transform: uppercase;

        letter-spacing: .04em;

        white-space: normal;

        pointer-events: none;
    }


    /*
     * Cấp 3 trong mega menu phải nằm cố định trong cột,
     * không dùng dropdown absolute cũ.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu {

        display: block;

        position: static;

        top: auto;
        left: auto;

        width: 100%;
        min-width: 0;

        padding: 0;
        margin: 0;

        background: transparent;

        visibility: visible;
        opacity: 1;
        pointer-events: auto;

        transition: none;
    }


    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li {

        padding: 0;
    }


    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a {

        padding: .42rem 0;

        line-height: 1.35;

        white-space: normal;

        text-transform: none;
    }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 991px) {

    .menu-mobile ul ul {
        padding-left: .8rem;
    }

    .menu-mobile ul ul ul {
        padding-left: 1rem;
    }


    /*
     * Heading group Retreat.
     */
    .menu-mobile li.everzen-mega-group > a {

        color: #d0c574;

        font-weight: 600;

        pointer-events: none;
    }


    .menu-mobile li.everzen-mega-group >
    ul >
    li >
    a {

        text-transform: none;
    }
}


/* =========================================================
   DESKTOP - FIX TOP LEVEL DROPDOWN OVER RETREAT MEGA MENU
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Dropdown thông thường như Everzen / Academy /
     * Education / Connect phải luôn nằm trên mega Retreat.
     */
    .header .menu > ul > li:not(.everzen-mega-retreat) {
        position: relative;
        z-index: 1101;
    }

    .header .menu > ul >
    li:not(.everzen-mega-retreat) >
    ul.sub-menu {
        z-index: 1102;
    }

    /*
     * Mega Retreat nằm dưới các dropdown top-level khác.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu {
        z-index: 1000;
    }
}

/* EVERZEN RETREAT MEGA COMPACT V3 20261012 START */

@media (min-width: 992px) {

    /*
     * =====================================================
     * 1. PANEL
     * =====================================================
     * Gọn chiều cao hơn.
     * Không thay đổi cấu trúc 3 nhóm lớn.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu {
        padding-top: 22px !important;
        padding-bottom: 24px !important;

        /*
         * Mở/đóng mềm hơn.
         *
         * Delay lúc mở giúp tránh trường hợp đang scroll,
         * menu chạy ngang qua con trỏ và bung tức thì.
         */
        transition:
            opacity .18s ease .11s,
            transform .18s ease .11s,
            visibility 0s linear .11s !important;

        transform: translateY(6px);
        will-change: opacity, transform;
    }


    /*
     * Khi thực sự hover Retreat.
     */
    .header .menu > ul >
    li.everzen-mega-retreat:hover >
    ul.sub-menu {
        transform: translateY(0);

        transition:
            opacity .18s ease .11s,
            transform .18s ease .11s,
            visibility 0s linear .11s !important;
    }


    /*
     * =====================================================
     * 2. BA NHÓM LỚN
     * =====================================================
     * CHƯƠNG TRÌNH | ĐIỂM NGHỈ | VÙNG ĐẤT
     *
     * Giữ gạch đứng đang có.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 26px !important;
        padding-right: 26px !important;
    }


    /*
     * =====================================================
     * 3. HEADING NHÓM
     * =====================================================
     * Giữ heading nổi bật.
     * Thêm gạch ngang phía dưới.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    a {
        display: block !important;

        margin: 0 0 14px !important;
        padding: 0 0 10px !important;

        border-bottom:
            1px solid rgba(221, 199, 107, .42);

        font-weight: 700 !important;
        line-height: 1.25 !important;
    }


    /*
     * =====================================================
     * 4. DANH SÁCH TRONG MỖI NHÓM = 2 CỘT
     * =====================================================
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 26px;
        row-gap: 2px;

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;

        box-shadow: none !important;
        background: transparent !important;

        transition: none !important;
    }


    /*
     * Item không còn mang style dropdown cấp dưới.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li {
        position: static !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;
    }


    /*
     * =====================================================
     * 5. ITEM TEXT
     * =====================================================
     * Không bold.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a {
        display: block !important;

        padding: 6px 0 !important;
        margin: 0 !important;

        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 1.4 !important;

        text-transform: none !important;

        background: transparent !important;
        box-shadow: none !important;

        white-space: normal;
    }


    /*
     * Hover item nhẹ hơn.
     * Không làm chữ nhảy vì đổi font-weight.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a:hover {
        font-weight: 400 !important;
    }


    /*
     * =====================================================
     * 6. LAPTOP / DESKTOP NHỎ
     * =====================================================
     * Giảm tiếp khoảng trống nhưng vẫn giữ 2 cột.
     */
    @media (max-width: 1366px) {

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu {
            padding-top: 18px !important;
            padding-bottom: 20px !important;
        }

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu >
        li.everzen-mega-group {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu >
        li.everzen-mega-group >
        a {
            margin-bottom: 11px !important;
            padding-bottom: 8px !important;
        }

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu >
        li.everzen-mega-group >
        ul.sub-menu {
            column-gap: 20px;
        }

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu >
        li.everzen-mega-group >
        ul.sub-menu >
        li >
        a {
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            font-size: 15px !important;
        }
    }
}

/* EVERZEN RETREAT MEGA COMPACT V3 20261012 END */


/* EVERZEN RETREAT MEGA GRID FLOW FINAL 20261012 START */

@media (min-width: 992px) {

    /*
     * =====================================================
     * 1. ITEM FLOW
     * =====================================================
     *
     * 3 hàng, chạy theo cột:
     *
     * item 1 | item 4
     * item 2 | item 5
     * item 3 | item 6
     *
     * Với 4 item:
     *
     * item 1 | item 4
     * item 2 |
     * item 3 |
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu {
        display: grid !important;

        grid-template-rows:
            repeat(3, auto);

        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);

        column-gap: 26px;
        row-gap: 2px;

        column-count: initial !important;
    }


    /*
     * Item luôn nằm đúng một cell.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;

        break-inside: auto !important;
    }


    /*
     * =====================================================
     * 2. ITEM TYPOGRAPHY
     * =====================================================
     *
     * Ép thật sự về regular.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a,
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a *,
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a:hover,
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a:hover * {
        font-family:
            "OpenSans",
            Arial,
            sans-serif !important;

        font-weight: 400 !important;
        font-style: normal !important;
    }


    /*
     * Giữ size hiện tại.
     */
    .header .menu > ul >
    li.everzen-mega-retreat >
    ul.sub-menu >
    li.everzen-mega-group >
    ul.sub-menu >
    li >
    a {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }


    /*
     * Laptop nhỏ.
     */
    @media (max-width: 1366px) {

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu >
        li.everzen-mega-group >
        ul.sub-menu {
            column-gap: 20px;
        }

        .header .menu > ul >
        li.everzen-mega-retreat >
        ul.sub-menu >
        li.everzen-mega-group >
        ul.sub-menu >
        li >
        a {
            font-size: 15px !important;
        }
    }
}

/* EVERZEN RETREAT MEGA GRID FLOW FINAL 20261012 END */

/* EVERZEN TOP NAV LINK AFFORDANCE 20261012 START */


/* =========================================================
 * DESKTOP
 * ========================================================= */

@media (min-width: 992px) {

    /*
     * Top-level anchor.
     */
    .header .menu > ul > li > a {
        position: relative;
    }


    /*
     * -----------------------------------------------------
     * MENU CÓ HOMEPAGE / LINK THẬT
     * -----------------------------------------------------
     *
     * Chỉ anchor có href thực mới có underline.
     *
     * Không áp dụng:
     * href="#"
     * href=""
     * javascript:
     */
    .header .menu > ul > li > a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]) {
        background-image:
            linear-gradient(
                currentColor,
                currentColor
            );

        background-repeat: no-repeat;

        /*
         * Gạch mảnh nằm dưới chữ.
         * Bình thường chỉ hiện nhẹ để user nhận ra đây là link.
         */
        background-size: 28% 1px;
        background-position: left calc(100% - 5px);

        transition:
            background-size .22s ease,
            color .18s ease;
    }


    /*
     * Hover/focus:
     * underline chạy dài ra.
     */
    .header .menu > ul > li > a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]):hover,
    .header .menu > ul > li > a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]):focus-visible {
        background-size: 100% 1px;
    }


    /*
     * -----------------------------------------------------
     * MENU CHỈ LÀ LABEL
     * -----------------------------------------------------
     *
     * Không underline.
     */
    .header .menu > ul > li > a[href="#"],
    .header .menu > ul > li > a[href=""],
    .header .menu > ul > li > a:not([href]) {
        background-image: none !important;
    }


    /*
     * -----------------------------------------------------
     * CHEVRON CHO MENU CÓ SUBMENU
     * -----------------------------------------------------
     */
    .header .menu > ul >
    li:has(> ul.sub-menu) >
    a {
        padding-right: 18px !important;
    }


    .header .menu > ul >
    li:has(> ul.sub-menu) >
    a::after {
        content: "";

        position: absolute;
        right: 2px;
        top: 50%;

        width: 6px;
        height: 6px;

        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;

        transform:
            translateY(-65%)
            rotate(45deg);

        opacity: .72;

        transition:
            transform .18s ease,
            opacity .18s ease;
    }


    /*
     * Khi hover parent:
     * chevron xoay nhẹ lên.
     */
    .header .menu > ul >
    li:has(> ul.sub-menu):hover >
    a::after {
        transform:
            translateY(-30%)
            rotate(225deg);

        opacity: 1;
    }
}


/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 991px) {

    /*
     * Link thật vẫn có tín hiệu underline nhỏ.
     */
    .menu-mobile > ul > li > a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]) {
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;

        text-decoration-color:
            rgba(255, 255, 255, .35);
    }


    /*
     * Label thuần không underline.
     */
    .menu-mobile > ul > li > a[href="#"],
    .menu-mobile > ul > li > a[href=""],
    .menu-mobile > ul > li > a:not([href]) {
        text-decoration: none !important;
    }


    /*
     * Chevron visual cho item có submenu.
     *
     * Không can thiệp logic mobile hiện có.
     */
    .menu-mobile > ul >
    li:has(> ul.sub-menu) >
    a::after {
        content: "⌄";

        display: inline-block;

        margin-left: 8px;

        font-size: .85em;
        font-weight: 400;

        opacity: .72;

        transform: translateY(-1px);
    }
}


/* EVERZEN TOP NAV LINK AFFORDANCE 20261012 END */

/* EVERZEN MOBILE TOP NAV HOME ICON 20261012 START */

@media (max-width: 991px) {

    /*
     * Bỏ chevron nhỏ sát chữ do patch trước tạo ra.
     * Chevron lớn bên phải của menu mobile gốc vẫn giữ nguyên.
     */
    .menu-mobile > ul >
    li:has(> ul.sub-menu) >
    a::after {
        content: none !important;
    }


    /*
     * Menu có link trang thật:
     * hiện icon HOME cố định ngay sau tên.
     */
    .menu-mobile > ul >
    li >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"])::after {
        content: "" !important;

        display: inline-block !important;

        width: 12px;
        height: 12px;

        margin-left: 7px;

        vertical-align: -1px;

        background-color: currentColor;

        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2v8.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z' fill='%23000'/%3E%3C/svg%3E")
            center / contain
            no-repeat;

        mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2v8.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z' fill='%23000'/%3E%3C/svg%3E")
            center / contain
            no-repeat;

        opacity: .82;
    }


    /*
     * Menu chỉ là label thì không có icon nhà.
     */
    .menu-mobile > ul > li > a[href="#"]::after,
    .menu-mobile > ul > li > a[href=""]::after,
    .menu-mobile > ul > li > a:not([href])::after {
        content: none !important;
    }


    /*
     * Bỏ underline link trên mobile.
     * Icon nhà đã đủ để biểu đạt homepage.
     */
    .menu-mobile > ul > li > a {
        text-decoration: none !important;
    }
}

/* EVERZEN MOBILE TOP NAV HOME ICON 20261012 END */

/* EVERZEN DESKTOP TOP NAV HOME ICON 20261012 START */

@media (min-width: 992px) {

    /*
     * =====================================================
     * BỎ UNDERLINE CŨ
     * =====================================================
     */
    .header .menu > ul > li > a {
        background-image: none !important;
    }


    /*
     * =====================================================
     * LINK THẬT = CÓ HOMEPAGE
     * =====================================================
     *
     * Dùng ::before cho icon HOME.
     * ::after vẫn dành cho chevron submenu.
     */
    .header .menu > ul >
    li >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"])::before {
        content: "";

        position: absolute;

        width: 12px;
        height: 12px;

        top: 50%;
        right: 2px;

        transform:
            translateY(-50%)
            translateX(-3px);

        background-color: currentColor;

        -webkit-mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2v8.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z' fill='%23000'/%3E%3C/svg%3E")
            center / contain
            no-repeat;

        mask:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2v8.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5z' fill='%23000'/%3E%3C/svg%3E")
            center / contain
            no-repeat;

        opacity: 0;
        pointer-events: none;

        transition:
            opacity .18s ease,
            transform .18s ease;
    }


    /*
     * Link có homepage nhưng KHÔNG có submenu:
     * chừa chỗ cho icon nhà.
     */
    .header .menu > ul >
    li:not(:has(> ul.sub-menu)) >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]) {
        padding-right: 20px !important;
    }


    /*
     * Link vừa có homepage vừa có submenu:
     *
     * HOME ở bên trái,
     * CHEVRON ở ngoài cùng bên phải.
     */
    .header .menu > ul >
    li:has(> ul.sub-menu) >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]) {
        padding-right: 36px !important;
    }


    .header .menu > ul >
    li:has(> ul.sub-menu) >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"])::before {
        right: 19px;
    }


    /*
     * Hover/focus:
     * icon nhà fade + trượt nhẹ ra vị trí cuối.
     */
    .header .menu > ul >
    li >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]):hover::before,

    .header .menu > ul >
    li >
    a[href]:not([href=""]):not([href="#"]):not([href^="javascript:"]):focus-visible::before {
        opacity: .9;

        transform:
            translateY(-50%)
            translateX(0);
    }


    /*
     * Label không có link:
     * tuyệt đối không có HOME.
     */
    .header .menu > ul > li > a[href="#"]::before,
    .header .menu > ul > li > a[href=""]::before,
    .header .menu > ul > li > a:not([href])::before {
        content: none !important;
    }
}

/* EVERZEN DESKTOP TOP NAV HOME ICON 20261012 END */