/*
 * VTI 2026 header (Figma 1216:13223). Loaded only on pages built with the
 * 2026 modules — see vti_is_layout_2026() in functions.php. Old pages keep the
 * legacy header styles from style.css.
 */
#header .header-wrapper,
#header .header-wrapper.stuck,
#header.sticky-hide-on-scroll--active {
    background: transparent !important;
    box-shadow: none !important;
}

#header .header-main {
    position: relative;
    z-index: 10;
    width: min(1440px, calc(100% - 48px));
    height: 80px;
    min-height: 80px;
    margin: 12px auto 0;
    border: 2px solid #fff;
    border-radius: 16px;
    background: transparent !important;
    box-shadow: none;
}

/* Glass lives on a pseudo-element: a backdrop-filter on .header-main itself
   would stop the mega menu's own blur from seeing the page behind it. */
#header .header-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(11.5px);
    backdrop-filter: blur(11.5px);
}

#header .header-wrapper.stuck .header-main,
#header.sticky-hide-on-scroll--active .header-main {
    margin-top: 12px;
}

#header .header-main > .header-inner {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    padding: 0 20px;
}

#header .header-main #logo {
    position: static;
    flex: 0 0 125px;
    width: 125px;
    margin: 0 !important;
}

#header .header-main #logo a {
    display: inline-flex;
    align-items: center;
    height: 40px;
}

#header .header-main #logo img {
    display: block;
    width: auto;
    max-width: 71px;
    max-height: 30px;
    margin: 0;
    object-fit: contain;
}

#header .header-main .header-nav-main {
    align-items: center;
    flex-wrap: nowrap;
}

#header .header-main .header-nav-main.nav-left {
    justify-content: center;
    column-gap: 16px;
}

#header .header-main .header-nav-main.nav-right {
    column-gap: 24px;
}

#header .header-main .header-nav-main > li {
    margin: 0 !important;
}

#header .header-main .header-nav-main > li > a,
#header .header-main .header-nav-main > li > a.nav-top-link {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px !important;
    border-radius: 8px;
    background: transparent !important;
    color: #18181b !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500;
    line-height: 20px !important;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

#header .header-main .header-nav-main > li > a:hover,
#header .header-main .header-nav-main > li.current-menu-item > a,
#header .header-main .header-nav-main > li.active > a {
    background: transparent !important;
    color: #0c5ed9 !important;
}

/*
 * Both header dropdowns (language + mega menu) hang off .header-main itself:
 * full header width / flush with its right edge, 8-10px below its bottom.
 * They are position: absolute, so every positioned ancestor between them and
 * .header-main must stay static — re-adding position here moves the dropdowns.
 */
#header .header-main .header-nav-main,
#header .header-main .header-nav-main > li.html_topbar_right,
#header .header-main .header-nav-main > li.menu-item-has-block,
#header .header-main .vti_language,
#header .header-main .vti_language > div {
    position: static;
}

#header .header-main .vti_language {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
}

#header .header-main .vti-language__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #18181b;
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-transform: none;
}

#header .header-main .vti-language__trigger:hover,
#header .header-main .vti-language__trigger[aria-expanded="true"] {
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
}

#header .header-main .vti-language__globe {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

#header .header-main .vti-language__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#header .header-main .vti-language__chevron {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

#header .header-main .vti_language .select_language {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 20;
    min-width: 180px;
    margin: 0;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 32px rgba(0, 16, 34, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

#header .header-main .vti_language .select_language a,
#header .header-main .vti_language .select_language > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    color: #18181b;
    font-family: "Instrument Sans", sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}

#header .header-main .vti_language .select_language a:hover {
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
}

@media (min-width: 850px) {
    #header .header-main .header-nav-main > li > a > .icon-angle-down {
        top: 0;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-left: 4px;
        opacity: 1;
    }

    #header .header-main .header-nav-main > li > a > .icon-angle-down::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #475467;
        -webkit-mask: url("../images/header/chevron-down.svg") center / contain no-repeat;
        mask: url("../images/header/chevron-down.svg") center / contain no-repeat;
    }

    #header .header-main .header-nav-main > li > a:hover > .icon-angle-down::before,
    #header .header-main .header-nav-main > li.current-dropdown > a > .icon-angle-down::before {
        background-color: #0c41bd;
    }

    #header .header-main .header-nav-main > li.menu-item-has-block > .nav-dropdown {
        display: block !important;
        position: absolute !important;
        inset: calc(100% + 10px) -2px auto !important;
        width: auto !important;
        border: 2px solid #fff;
        border-radius: 16px;
        /* Same glass as .header-main, closer to white. */
        background: rgba(255, 255, 255, 0.85) !important;
        box-shadow: none;
        -webkit-backdrop-filter: blur(11.5px);
        backdrop-filter: blur(11.5px);
    }

    /* Hover bridge over the 8px gap so the dropdown doesn't close. */
    #header .header-main .header-nav-main > li.menu-item-has-block > .nav-dropdown::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 10px;
    }

    #header .header-main .header-nav-main > li.menu-item-has-block > .nav-dropdown > .container {
        width: 100%;
    }

    /* Legacy block wrapper forces overflow-y: scroll → always-visible scrollbar. */
    #header .header-main .nav-dropdown .session_menu_services {
        max-height: none;
        overflow: visible;
    }

    #header .header-main .nav-dropdown .menu_about,
    #header .header-main .nav-dropdown .menu_services {
        padding: 24px 0;
    }

    #header .header-main .nav-dropdown .col_menu_about_item {
        flex: 1 1 0;
        max-width: none;
    }

    #header .header-main .nav-dropdown .col_menu_about_item:not(:has(.menu_about_item)) {
        display: none;
    }

    #header .header-main .nav-dropdown .menu_about_item {
        border-right: 0;
    }

    #header .header-main .nav-dropdown .menu_about_item a,
    #header .header-main .nav-dropdown .menu_service_item > .item_contain > a {
        min-height: 48px;
        padding: 8px 12px;
        border-radius: 10px;
        color: #18181b;
        font-family: "Instrument Sans", sans-serif;
        font-size: 15px;
        line-height: 22px;
        letter-spacing: 0;
    }

    #header .header-main .nav-dropdown .menu_about_item a:hover,
    #header .header-main .nav-dropdown .menu_service_item > .item_contain > a:hover {
        background: rgba(29, 78, 216, 0.08);
        color: #1d4ed8;
    }

    #header .header-main .nav-dropdown .menu_about_item a > img,
    #header .header-main .nav-dropdown .menu_service_item > .item_contain > a > img {
        flex: none;
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    /* PNG icons can't take `color`: this filter tints them to the hover #1d4ed8. */
    #header .header-main .nav-dropdown .menu_about_item a:hover > img,
    #header .header-main .nav-dropdown .menu_service_item > .item_contain > a:hover > img {
        filter: brightness(0) saturate(100%) invert(25%) sepia(87%) saturate(2099%) hue-rotate(214deg) brightness(87%) contrast(95%);
    }

    #header .header-main .nav-dropdown .menu_about_item a > span,
    #header .header-main .nav-dropdown .menu_service_item > .item_contain > a > span {
        margin-left: 0;
    }
}

#header a:focus-visible,
#header button:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 3px;
}

@media (max-width: 1199px) and (min-width: 850px) {
    #header .header-main {
        width: calc(100% - 32px);
        height: 64px;
        min-height: 64px;
        margin-top: 12px;
        border-radius: 16px;
    }

    #header .header-main > .header-inner {
        padding: 0 18px;
    }

    #header .header-main .header-nav-main.nav-left {
        column-gap: 18px;
        padding-left: 16px;
    }

    #header .header-main .header-nav-main.nav-right {
        column-gap: 12px;
    }

    #header .header-main .header-nav-main > li > a,
    #header .header-main .header-nav-main > li > a.nav-top-link {
        font-size: 14px !important;
    }
}

@media (max-width: 849px) {
    #header .header-main {
        width: calc(100% - 24px);
        height: 58px !important;
        min-height: 58px;
        margin-top: 12px;
        border-radius: 16px;
    }

    #header .header-main > .header-inner {
        padding: 0 14px;
    }

    /* Preview keeps the logo on the left; Flatsome's medium-logo-center would centre it. */
    #header .header-main #logo {
        flex: 0 0 auto;
        order: 0;
        width: auto;
        text-align: left;
    }

    #header .header-main #logo img {
        max-width: 71px;
        max-height: 30px;
        margin: 0;
    }

    #header .header-main .nav-icon > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    #header .header-main .nav-icon .icon-menu:before {
        content: "" !important;
        position: static;
        display: block;
        width: 24px;
        height: 24px;
        transform: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 12H21M3 6H21M3 18H21' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
    }

    #header .header-main .header-nav-main.nav-left,
    #header .header-main .header-nav-main.nav-right {
        column-gap: 0;
        padding-left: 0;
    }

    #header .header-main .vti-language__trigger {
        width: auto;
        min-width: 40px;
        padding: 0 10px;
    }
}

/* Preview mobile (≤640px): full-width header bar. */
@media (max-width: 640px) {
    #header .header-main,
    #header .header-wrapper.stuck .header-main,
    #header.sticky-hide-on-scroll--active .header-main {
        width: 100%;
        height: 64px !important;
        min-height: 64px;
        margin-top: 0;
        border: 0;
        border-radius: 0;
    }

    #header .header-main > .header-inner {
        padding: 0 20px;
    }
}

#header .header-wrapper.stuck .header-main.hide-for-sticky,
#header.sticky-hide-on-scroll--active .header-main.hide-for-sticky {
    display: block !important;
}

@media (min-width: 1200px) {
    #header .header-wrapper,
    #header .header-wrapper.stuck {
        position: fixed !important;
        top: 0 !important;
        right: 0;
        left: 0;
        width: 100%;
    }

    .admin-bar #header .header-wrapper,
    .admin-bar #header .header-wrapper.stuck {
        top: 32px !important;
    }

    #header .header-wrapper.stuck .header-main,
    #header.sticky-hide-on-scroll--active .header-main {
        margin-top: 12px;
    }
}

/*
 * Mega menu 2026 (preview/header, Figma 2858:56243) — modules/header-2026.php + js/header-2026.js.
 * Only rendered when the page language has a menu in the "Header 2026" location; the rules above
 * keep styling the legacy Flatsome nav as the fallback.
 * Desktop (>1099px): mega menu under each trigger. ≤1099px: 64px bar + full-height panel with accordions.
 */
.vti-header {
    --vti-primary: #0c5ed9;
    --vti-text: #1d2939;
    --vti-text-2: #475467;
    --vti-text-3: #667085;
    --vti-text-brand: #1d4ed8;
    --vti-arrow: #0c41bd;
    --vti-accent-soft: #f2f7ff;
    --vti-border-soft: #f2f4f7;
    --vti-border-default: #dbeafe;
    --vti-disabled: #d0d5dd;
    font-family: "Instrument Sans", sans-serif;
    letter-spacing: 0;
}

.vti-header a,
.vti-header p {
    letter-spacing: inherit;
}

.vti-header > .header-inner {
    justify-content: space-between;
    column-gap: 16px;
}

.vti-header p,
.vti-header ul,
.vti-header li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vti-header a {
    color: inherit;
    text-decoration: none;
}

/* Reset Flatsome's global `button` styles (uppercase, margin, min-height…). */
.vti-header .vti-nav__link,
.vti-header .vti-mega__tab,
.vti-header .vti-nav__toggle {
    margin: 0;
    min-height: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.vti-header .vti-nav__list {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vti-header .vti-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--vti-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

.vti-header .vti-chev {
    flex: none;
    color: var(--vti-text-2);
    transition: transform .2s;
}

.vti-header .vti-dd__btn[aria-expanded="true"] {
    color: var(--vti-primary);
}

.vti-header .vti-dd__btn[aria-expanded="true"] .vti-chev {
    color: var(--vti-arrow);
    transform: rotate(180deg);
}

.vti-header .vti-nav__toggle,
.vti-header .vti-nav__foot {
    display: none;
}

.vti-header .vti-nav__toggle {
    padding: 8px;
    border-radius: 8px;
    color: #404040;
    line-height: 0;
}

/* ---------- Mega menu (desktop) ---------- */
.vti-header .vti-dd {
    position: relative;
}

.vti-header .vti-dd__menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(calc(-50% + var(--shift, 0px)));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.vti-header .vti-dd.is-open > .vti-dd__menu {
    display: flex;
}

/* Hover bridge over the 8px gap. */
.vti-header .vti-dd.is-open::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 10px;
}

.vti-mega__side {
    display: flex;
    flex-direction: column;
    width: 304px;
    padding: 16px;
}

.vti-mega__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 436px;
    padding: 16px;
}

.vti-mega__intro {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
}

.vti-mega__intro-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vti-mega__badge {
    align-self: flex-start;
    height: 20px;
    margin-bottom: 8px;
    padding: 0 8px;
    border: 1px solid var(--vti-border-soft);
    border-radius: 9999px;
    background: var(--vti-accent-soft);
    color: var(--vti-text-brand);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
}

.vti-header .vti-mega__intro-title {
    color: var(--vti-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.vti-header .vti-mega__intro-desc {
    color: var(--vti-text-3);
    font-size: 14px;
    line-height: 20px;
}

.vti-header .vti-mega__explore {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vti-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.vti-mega__explore .vti-arrow {
    width: 16px;
    height: 16px;
    color: var(--vti-arrow);
}

.vti-header .vti-mega__img {
    display: block;
    width: 100%;
    height: 132px;
    border-radius: 8px;
    object-fit: cover;
}

.vti-mega__cols {
    display: flex;
    gap: 4px;
}

.vti-mega__cols > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vti-header .vti-mega__label {
    margin-bottom: 8px;
    color: var(--vti-text-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.vti-header .vti-mega__link {
    display: block;
    overflow: hidden;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--vti-text-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vti-mega__sub {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -4px 12px 8px;
    padding-left: 12px;
    border-left: 1px solid var(--vti-border-soft);
    color: var(--vti-text-3);
    font-size: 14px;
    line-height: 20px;
}

.vti-mega__sub > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabbed menus: Services / Industries / Products */
.vti-mega__tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
}

.vti-header .vti-mega__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: left;
}

.vti-mega__tab span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vti-mega__tab b {
    color: var(--vti-text-2);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.vti-mega__tab small {
    color: var(--vti-text-3);
    font-size: 12px;
    line-height: 16px;
}

.vti-mega--plain .vti-mega__tab b {
    color: var(--vti-text-3);
}

.vti-header .vti-mega__tab[aria-expanded="true"] {
    background: var(--vti-primary);
}

.vti-mega__tab[aria-expanded="true"] b {
    color: #fff;
}

.vti-mega__tab[aria-expanded="true"] small {
    color: var(--vti-disabled);
}

/* "Explore all" under the tab list (optional). */
.vti-mega__tabs .vti-mega__explore {
    margin-top: auto;
    padding: 8px 12px;
}

/* Tab chevrons are mobile-only. */
.vti-mega__tab .vti-chev {
    display: none;
}

.vti-mega__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vti-mega__panel[hidden] {
    display: none;
}

.vti-mega__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--vti-border-default);
}

/* Title-only panel (no image / description / links): no divider. */
.vti-mega__head:only-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.vti-header .vti-mega__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--vti-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

/* No link: plain dark text (the arrow is only printed on <a>). */
.vti-header span.vti-mega__title {
    color: var(--vti-text);
}

.vti-mega__title .vti-arrow {
    flex: none;
    color: var(--vti-arrow);
}

.vti-header .vti-mega__desc {
    margin-top: -8px;
    color: var(--vti-text-2);
    font-size: 14px;
    line-height: 20px;
}

@media (hover: hover) {
    .vti-header .vti-nav__link:hover,
    .vti-header .vti-mega__sub a:hover {
        color: var(--vti-primary);
    }

    .vti-header a.vti-mega__link:hover {
        background: #fff;
    }

    .vti-mega__tab:not([aria-expanded="true"]):hover b {
        color: var(--vti-primary);
    }
}

/* 1100–1199px: the bar is narrower (rules above) — tighten the nav so EN/VI labels + language still fit. */
@media (min-width: 1100px) and (max-width: 1199px) {
    .vti-header .vti-nav__list {
        gap: 2px;
    }
}

/* ---------- ≤1099px: hamburger + accordion panel (Figma mobile frames) ---------- */
@media (max-width: 1099px) {
    html:has(.vti-header.is-menu) {
        overflow: hidden;
    }

    #header .header-main.vti-header,
    #header .header-wrapper.stuck .header-main.vti-header {
        width: 100%;
        height: 64px !important;
        min-height: 64px;
        margin-top: 0;
        border: 0;
        border-radius: 0;
    }

    #header .vti-header::before {
        border-radius: 0;
    }

    #header .vti-header > .header-inner {
        padding: 0 12px 0 16px;
    }

    .vti-header .vti-nav__lang {
        display: none;
    }

    .vti-header .vti-nav__toggle {
        display: inline-flex;
    }

    /* Panel hangs off .header-main (full width here); absolute, not fixed, so a transformed sticky wrapper can't misplace it. */
    .vti-header .vti-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100dvh - 64px - var(--wp-admin--admin-bar--height, 0px));
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }

    .vti-header.is-menu .vti-nav {
        display: flex;
    }

    .vti-header .vti-nav__list {
        flex: 1 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 20px 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .vti-nav__list > li:not(:last-child) {
        border-bottom: 1px solid var(--vti-border-soft);
    }

    .vti-header .vti-nav__link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px 20px 10px 22px;
        border-radius: 0;
    }

    .vti-header .vti-dd__btn[aria-expanded="true"] {
        color: var(--vti-text);
    }

    .vti-header .vti-dd__btn[aria-expanded="true"] .vti-chev {
        color: var(--vti-text-2);
    }

    .vti-header .vti-nav__foot {
        display: block;
        padding: 24px 0;
    }

    #header .vti-nav__foot .vti-language__trigger {
        height: 36px;
        padding: 8px 20px;
    }

    #header .vti-nav__foot .vti_language .select_language {
        position: static;
        margin: 8px 20px 0;
    }

    .vti-header .vti-dd {
        position: static;
    }

    .vti-header .vti-dd.is-open::after {
        content: none;
    }

    .vti-header .vti-dd__menu {
        position: static;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        border: 0;
        border-top: 1px solid var(--vti-border-soft);
        border-radius: 0;
        background: none;
        transform: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .vti-mega__side,
    .vti-mega__main {
        width: auto;
        padding: 0;
    }

    .vti-mega__main {
        gap: 20px;
    }

    .vti-mega__intro {
        gap: 24px;
        padding: 0 0 20px;
        border-bottom: 1px solid var(--vti-border-soft);
        border-radius: 0;
        background: none;
    }

    /* Tabs → nested accordion: flatten the two columns, then interleave tab i / panel i with `order`. */
    .vti-header .vti-mega--tabs {
        gap: 4px;
    }

    .vti-mega--tabs .vti-mega__side,
    .vti-mega__tabs,
    .vti-mega--tabs .vti-mega__main {
        display: contents;
    }

    .vti-header .vti-mega__tab {
        order: calc(var(--i) * 2);
    }

    .vti-mega__tab b,
    .vti-mega__tab small {
        color: var(--vti-text-3) !important;
    }

    .vti-mega__tab[aria-expanded="true"] b {
        color: #fff !important;
    }

    .vti-mega__tab[aria-expanded="true"] small {
        color: var(--vti-disabled) !important;
    }

    .vti-mega__tab .vti-chev {
        display: block;
    }

    .vti-mega__tabs .vti-mega__explore {
        order: 999;
        padding: 12px 12px 0;
    }

    .vti-mega__tab[aria-expanded="true"] .vti-chev {
        color: #fff;
        transform: rotate(180deg);
    }

    .vti-mega__panel {
        order: calc(var(--i) * 2 + 1);
        margin-top: -4px;
        padding: 20px;
        border-radius: 0 0 8px 8px;
        background: rgba(255, 255, 255, 0.8);
    }

    .vti-mega__head {
        gap: 24px;
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Theme Settings: "Hiện ảnh trên menu mobile" tắt. */
    .vti-header .vti-mega--no-mobile-img .vti-mega__img {
        display: none;
    }

    .vti-header .vti-mega__desc {
        margin-top: -20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}