/* Design tokens (Material 3 roles). Brand colours are mixed from the site's --primary-color (theme style.css, different on
   every site), so nothing here is a fixed blue. Light only: the site has no dark mode. */
:root {
    color-scheme: light;
    --font: Roboto, Arial, sans-serif;
    --on-surface: light-dark(var(--title-color), #e3e3e3);
    --on-surface-var: light-dark(var(--text-secondary), #c4c7c5);
    --outline: light-dark(var(--switch-wayflight-btn), #8e918f);
    --outline-var: light-dark(var(--border-color), #444746);
    --primary: light-dark(var(--primary-color), color-mix(in srgb, var(--primary-color) 45%, var(--white-color)));
    --on-primary: light-dark(var(--text-primary), color-mix(in srgb, var(--primary-color) 35%, var(--black-color)));
    --page: light-dark(var(--white-color), #1b1b1b);
    --surface: light-dark(var(--white-color), #131314);
    --surface-dim: light-dark(color-mix(in srgb, var(--primary-color) 3%, var(--white-color)), #1b1b1b);
    --surface-band: light-dark(color-mix(in srgb, var(--primary-color) 9%, var(--white-color)), #282a2c);
    --tonal: light-dark(color-mix(in srgb, var(--primary-color) 25%, var(--white-color)), color-mix(in srgb, var(--primary-color) 45%, var(--black-color)));
    --on-tonal: light-dark(color-mix(in srgb, var(--primary-color) 55%, var(--black-color)), color-mix(in srgb, var(--primary-color) 25%, var(--white-color)));
    --secondary: light-dark(color-mix(in srgb, var(--primary-color) 18%, var(--white-color)), color-mix(in srgb, var(--primary-color) 55%, var(--black-color)));
    --highlight: color-mix(in srgb, var(--warning-color) 35%, var(--white-color));
    --footer: light-dark(color-mix(in srgb, var(--primary-color) 6%, var(--white-color)), #1e1f20);
    --inverse: light-dark(var(--dark-color), #e3e3e3);
    --on-inverse: light-dark(var(--white-color), #303030);
    --inverse-primary: light-dark(color-mix(in srgb, var(--primary-color) 45%, var(--white-color)), var(--primary-color));
}
/* Header/footer text: scoped (not body/a/img) so the booking pages keep their own styles when this header is used site-wide */
:where(.xh-header, .xh-drawer, .xh-footer, .xh-notice, .xh-cookie, .xh-scrim), :where(.xh-header, .xh-drawer, .xh-footer, .xh-cookie) * { box-sizing: border-box; }
:where(.xh-header, .xh-drawer, .xh-footer, .xh-cookie) { font: 400 14px/20px var(--font); color: var(--on-surface); }
:where(.xh-header, .xh-drawer, .xh-footer, .xh-cookie) :is(a, a:hover, a:visited) { color: inherit; text-decoration: none; }
:where(.xh-header, .xh-drawer, .xh-footer, .xh-cookie) :is(button, select, input) { font: inherit; color: inherit; }
:where(.xh-header, .xh-drawer, .xh-footer, .xh-cookie) button { cursor: pointer; }
:where(.xh-header, .xh-footer) img { max-width: 100%; display: block; }
:where(.xh-header, .xh-drawer, .xh-footer, .xh-cookie) :is(p, ul, li) { margin: 0; }
/* Icons are inline SVG (core/icons.php), sized by font-size like the icon font they replace */
.material-symbols-outlined { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: middle; font-size: 24px; }

/* Buttons */
.xh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 100px; font-size: 14px; font-weight: 500; background: none; white-space: nowrap; }
.xh-btn .material-symbols-outlined { font-size: 18px; }
.xh-btn-filled { background: var(--primary); color: var(--on-primary); }
.xh-btn-filled:hover { box-shadow: 0 1px 3px rgba(0,0,0,.3); background: color-mix(in srgb, var(--primary) 92%, var(--on-primary)); }
.xh-btn-tonal { height: 32px; padding: 0 24px 0 16px; background: var(--tonal); color: var(--on-tonal); }
.xh-btn-outlined { padding: 0 24px 0 16px; border: 1px solid var(--outline); color: var(--primary); }
.xh-btn-outlined:hover, .xh-btn-text:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.xh-btn-text { padding: 0 12px; color: var(--inverse-primary); }
.xh-icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--on-surface-var); }
.xh-icon-btn:hover { background: color-mix(in srgb, var(--on-surface-var) 8%, transparent); }

/* Header */
.xh-header { position: sticky; top: 0; z-index: 21; display: flex; align-items: center; height: var(--header-h, 64px); padding: 0 8px 0 12px; background: var(--surface); border-bottom: 1px solid var(--outline-var); }
.xh-logo { display: flex; align-items: center; gap: 6px; margin: 0 24px 0 4px; white-space: nowrap; font-size: 22px; color: var(--on-surface-var); }
.xh-logo .material-symbols-outlined { color: var(--primary); font-size: 28px; }
.xh-logo { min-width: 0; }
.xh-logo-name { overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--primary); }
.xh-logo img { width: auto; height: 40px; }
.xh-logo-s img { height: 28px; }
.xh-logo-l img { height: 52px; }
/* Header options (Đầu trang): menu position, ☰ hidden on desktop, not sticky, highlighted button, notice bar */
.xh-nav-center .xh-nav, .xh-nav-right .xh-nav { flex: 1; }
.xh-nav-center .xh-tabs { justify-content: center; }
.xh-nav-right .xh-tabs { justify-content: flex-end; margin-right: 16px; }
.xh-header.is-static { position: relative; }
.xh-header-cta { margin-right: 8px; }
/* Both header pills: same height and text as the menu (16px/500), so only fill vs outline tells them apart */
.xh-header :is(.xh-plane, .xh-header-cta) { height: 44px; padding: 0 20px 0 16px; font-size: 16px; font-weight: 500; }
.xh-header :is(.xh-plane, .xh-header-cta) .material-symbols-outlined { font-size: 18px; }
/* Hotline, outlined (default): white + primary border/text, so it doesn't share the spotlight with "Tìm chuyến bay" */
/* .xh-header prefix: the <a> colour reset above (:is(a:hover) = 0,1,1) would otherwise win and paint the text black */
.xh-header .xh-cta-filled { color: var(--on-primary); }
.xh-header .xh-cta-outlined { border: 1.5px solid var(--primary); background: var(--surface); color: var(--primary); transition: background .2s; }
.xh-header .xh-cta-outlined:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
/* "✈ Tìm chuyến bay": the main action; it stands out by its fill + shadow, not by bigger/bolder text */
.xh-plane { margin-right: 8px; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent); transition: transform .2s, box-shadow .2s; }
.xh-plane .material-symbols-outlined { transform: rotate(45deg); transition: transform .3s cubic-bezier(.2, 0, 0, 1); }
.xh-plane:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent); }
.xh-plane:hover .material-symbols-outlined { transform: rotate(45deg) translateY(-3px); } /* the plane takes off */
.xh-plane:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.xh-plane-short { display: none; }
.xh-hotline-call { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; }
.xh-hotline-roll { display: grid; overflow: hidden; } /* all numbers in one cell: the pill is as wide as the longest one and never jumps */
.xh-hotline-roll a { grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateY(100%); transition: transform .5s cubic-bezier(.2, 0, 0, 1), opacity .3s; }
.xh-hotline-roll .is-on { opacity: 1; pointer-events: auto; transform: none; }
.xh-hotline-roll .is-off { transform: translateY(-100%); }
.xh-hotline-roll .is-on::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole pill calls the number shown */
.xh-hotline-call:has(:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.xh-hotline { display: none; position: static; } /* phones only, see the 599px block */
.xh-hotline summary { list-style: none; cursor: pointer; }
.xh-hotline summary::-webkit-details-marker { display: none; }
.xh-hotline[open] .xh-cta-outlined { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.xh-hotline-menu { position: absolute; z-index: 22; top: calc(100% + 8px); right: 0; min-width: 280px; padding: 12px 8px 8px; border: 1px solid var(--outline-var); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 28px rgb(0 0 0 / .18); }
.xh-hotline[open] .xh-hotline-menu { animation: xh-pop .2s cubic-bezier(.2, 0, 0, 1); }
@keyframes xh-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.xh-hotline-menu p { padding: 0 12px 8px; font-size: 15px; color: var(--on-surface-var); }
.xh-hotline-menu ul { display: grid; gap: 4px; padding: 0; list-style: none; }
.xh-header .xh-hotline-menu a { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px 0 8px; border-radius: 28px; font-size: 20px; font-weight: 700; letter-spacing: .3px; font-variant-numeric: tabular-nums; color: var(--on-surface); transition: background .2s; }
.xh-header .xh-hotline-menu a:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); text-decoration: none; }
.xh-hotline-menu a .material-symbols-outlined { display: grid; place-items: center; width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 22px; }
/* ✈ popup: the flight search form in an iframe */
.xh-search-pop { width: min(1240px, 96vw); height: min(700px, 90dvh); padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--white-color); box-shadow: 0 8px 32px rgb(0 0 0 / .3); }
.xh-search-pop::backdrop { background: rgb(0 0 0 / .5); }
.xh-search-pop[open] { display: flex; flex-direction: column; }
.xh-search-pop-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 20px; border-bottom: 1px solid var(--border-color); font: 500 16px/24px var(--font); color: var(--title-color); }
.xh-search-pop-bar .xh-icon-btn { width: 40px; height: 40px; color: var(--text-secondary); }
.xh-search-pop iframe { display: block; flex: 1; width: 100%; border: 0; }
/* Phones: the popup becomes a full screen page sliding up, with a bigger ✕ */
@media (max-width: 719px) {
    .xh-search-pop { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
    .xh-search-pop[open] { animation: xh-sheet .3s cubic-bezier(.2, 0, 0, 1); }
    .xh-search-pop-bar { font-size: 18px; }
    .xh-search-pop-bar .xh-icon-btn { width: 48px; height: 48px; font-size: 26px; color: var(--title-color); } /* big ✕, easy to hit */
}
@keyframes xh-sheet { from { transform: translateY(100%); } }
.xh-notice { display: block; margin: 0; padding: 8px 24px; background: var(--primary); color: var(--on-primary); text-align: center; font-size: 14px; line-height: 20px; }
a.xh-notice:hover { text-decoration: underline; }
@media (min-width: 1024px) {
    .no-burger [data-toggle-drawer] { display: none; }
    .no-burger .xh-logo { margin-left: 12px; }
}
.xh-tabs { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.xh-tabs a { position: relative; display: flex; align-items: center; height: var(--header-h, 64px); padding: 0 8px; font-size: 16px; font-weight: 700; color: var(--on-surface-var); }
.xh-tabs a { transition: color .2s; }
.xh-nav-normal .xh-tabs a, .xh-nav-normal ~ .xh-drawer .xh-tabs a { font-weight: 400; }
.xh-nav-medium .xh-tabs a, .xh-nav-medium ~ .xh-drawer .xh-tabs a { font-weight: 500; }
/* Hover: a soft pill behind the word + the underline grows from the middle. The current page keeps a full underline. */
.xh-tabs a::before { content: ""; position: absolute; inset: 12px -4px; border-radius: 20px; background: currentColor; opacity: 0; transition: opacity .2s; }
.xh-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, 0, 0, 1); }
.xh-tabs a:hover, .xh-tabs .current-menu-item a { color: var(--on-surface); }
.xh-tabs a:hover::before { opacity: .08; }
.xh-tabs a:hover::after { transform: scaleX(.5); }
.xh-tabs .current-menu-item a::after { transform: none; }
.xh-tabs a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
.xh-header-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.xh-select { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--on-surface-var); }
.xh-select select { appearance: none; min-width: 128px; height: 40px; padding: 0 32px 0 12px; border: 0; background: none; font-size: 16px; cursor: pointer; }
.xh-select::after { content: ""; width: 24px; height: 24px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") center / contain no-repeat; position: absolute; right: 4px; pointer-events: none; }
/* Header language picker: just the globe icon, the real <select> sits invisibly on top of it */
.xh-header .xh-select { justify-content: center; cursor: pointer; }
.xh-header .xh-select::after { display: none; }
.xh-header .xh-select select { position: absolute; inset: 0; min-width: 0; opacity: 0; }
/* Drawer (menu ☰). Big targets and 18px text for older eyes/fingers; slide + stagger motion for the younger look. */
.xh-burger { transition: background .2s; }
.xh-burger .material-symbols-outlined { transition: transform .3s cubic-bezier(.2, 0, 0, 1); }
.xh-burger[aria-expanded="true"] { background: var(--secondary); }
.xh-burger[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.xh-burger-text { display: none; }
.xh-scrim { position: fixed; z-index: 18; inset: var(--drawer-top, 64px) 0 0; background: rgb(0 0 0 / .4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.xh-drawer { position: fixed; z-index: 19; top: var(--drawer-top, 64px); left: 0; bottom: 0; width: min(320px, 85vw); padding: 12px; overflow-y: auto; background: var(--surface); border-radius: 0 16px 16px 0; box-shadow: 0 8px 24px rgb(0 0 0 / .2);
    transform: translateX(-100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, 0, 0, 1), visibility 0s .35s; }
.xh-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.xh-scrim:has(+ .is-open) { opacity: 1; visibility: visible; transition-delay: 0s; }
html:has(.xh-drawer.is-open) { overflow: hidden; } /* the page behind doesn't scroll while the menu is open */
.xh-drawer .xh-tabs { flex-direction: column; gap: 4px; }
.xh-drawer li { opacity: 0; transform: translateX(-16px); transition: opacity .25s, transform .35s cubic-bezier(.2, 0, 0, 1); }
.xh-drawer.is-open li { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 40ms); }
.xh-drawer .xh-tabs a { justify-content: space-between; height: 56px; padding: 0 16px 0 20px; border-radius: 28px; font-size: 18px; transition: background .2s, color .2s; }
.xh-drawer .xh-tabs a::before { display: none; }
.xh-drawer .xh-tabs a::after { content: ""; position: static; width: 24px; height: 24px; flex: none; background: var(--primary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E") center / contain no-repeat; transform: translateX(-6px); opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.2, 0, 0, 1); }
.xh-drawer .xh-tabs a:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.xh-drawer .xh-tabs a:active { background: color-mix(in srgb, var(--on-surface) 14%, transparent); }
.xh-drawer .xh-tabs a:hover::after, .xh-drawer .current-menu-item a::after { opacity: 1; transform: none; }
.xh-drawer .current-menu-item a { background: var(--secondary); color: var(--on-tonal); font-weight: 700; }

/* Footer */
.xh-footer { padding: 0 max(24px, calc((100% - 1720px) / 2)); background: var(--footer); font-size: 15px; color: var(--on-surface-var); }
.xh-footer ul { margin: 0; padding: 0; list-style: none; }
.xh-footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 40px 64px 32px 104px; border-bottom: 1px solid var(--outline-var); font-size: 16px; line-height: 24px; }
@media (min-width: 1024px) { .xh-footer-top { grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(180px, 1fr)); } } /* the contact column holds the long address */
.xh-footer-title { margin: 0 0 16px; font: 700 18px/26px var(--font); color: var(--on-surface); }
.xh-footer-col ul, .xh-footer-info { display: grid; gap: 12px; }
.xh-footer-info li { display: flex; gap: 8px; }
.xh-footer-info .material-symbols-outlined { font-size: 20px; line-height: 24px; color: var(--primary); }
.xh-footer-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.xh-footer .xh-social { display: flex; gap: 8px; }
.xh-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--on-surface); transition: transform .2s; }
.xh-social a:hover { transform: translateY(-2px); }
.xh-social svg { width: 22px; height: 22px; }
.xh-footer-icons img { width: auto; height: 35px; }
.xh-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 24px; }
.xh-footer .xh-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-left: 104px; }
.xh-footer a:hover { text-decoration: underline; }
.xh-footer-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-right: 64px; }
.xh-footer-right a { display: inline-flex; align-items: center; gap: 8px; }
body nav.multi-steps-nav { margin: 16px auto 0; border-radius: 20px; }
:is(.section-infor-wrap, .method-payment-wrap, .section-complete-wrap) { padding-bottom: 32px; }

/* Cookie bar */
.xh-cookie { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 4px 24px; background: var(--inverse); color: var(--on-inverse); }
.xh-cookie[hidden] { display: none; }

@media (max-width: 1023px) {
    .xh-nav { display: none; }
    .burger-text .xh-burger { display: inline-flex; gap: 4px; width: auto; height: 40px; margin-right: 8px; padding: 0 14px 0 10px; border-radius: 20px; font-size: 15px; font-weight: 500; }
    .burger-text .xh-burger-text { display: inline; }
    .xh-logo { margin-right: 8px; }
    .xh-footer-bottom { flex-direction: column; align-items: flex-start; }
    .xh-footer-top { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 16px; padding: 24px 0; }
    .xh-footer-shop { grid-column: 1 / -1; } /* contact block full width, the link columns two by two below it */
    .xh-footer .xh-footer-links, .xh-footer-right { padding: 0; }
}
@media (max-width: 719px) {
    .xh-cookie { flex-direction: column; align-items: flex-start; padding: 12px 24px; }
}
@media (max-width: 599px) {
    :root { --header-h: 56px; }
    .xh-header { padding: 0 4px; }
    .xh-logo { margin-left: 0; font-size: 20px; }
    .xh-logo img { max-height: 40px; }
    .xh-logo:has(img) .xh-logo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* phones: the logo image alone, name kept for screen readers */
    .xh-header :is(.xh-plane, .xh-header-cta) { height: 36px; font-size: 14px; }
    .xh-header .xh-plane { margin-right: 4px; padding: 0 14px 0 10px; gap: 4px; }
    .xh-plane-long { display: none; }
    .xh-plane-short { display: inline; }
    .xh-header .xh-header-cta { width: 36px; padding: 0; } /* icon only; the text stays for screen readers */
    .xh-cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .xh-hotline-call { display: none; }
    .xh-hotline { display: block; }
    .xh-hotline-menu { left: 8px; right: 8px; top: calc(100% + 4px); min-width: 0; }
}
@media (max-width: 480px) {
    .xh-footer-right { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .xh-drawer, .xh-drawer li, .xh-scrim, .xh-burger .material-symbols-outlined, .xh-tabs a::after, .xh-plane, .xh-plane .material-symbols-outlined, .xh-hotline-roll a, .xh-search-pop { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; } /* ponytail: !important so it beats every per-state delay above */
}