/* The site's own colours, from the theme's style.css (--color_blue…), under the names the tokens below are mixed from.
   The theme's style.css isn't loaded on the new home, so the values are copied here. */
:root {
    --primary-color: #0f89db; /* --color_blue */
    --title-color: #1a202c;
    --text-primary: #fff;
    --text-secondary: #5e616e;
    --border-color: #e5e7eb;
    --white-color: #fff;
    --black-color: #000;
    --dark-color: rgba(33, 37, 41, 1);
    --red-color: #ec2029;
    --warning-color: #fbb040; /* --color_orange */
}
/* Design tokens (Material 3 roles), mixed from --primary-color above. Light only: the site has no dark mode. */
:root {
    color-scheme: light;
    /* Same stack as the theme's html (inc/custom-fonts.php), so the new header/footer match the old pages' content.
       iCielQuarion has no font file in the theme: every device shows its own system font (San Francisco, Segoe UI, Roboto…) */
    --font: iCielQuarion, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Helvetica Neue", Arial;
    --on-surface: light-dark(var(--title-color), #e3e3e3);
    --on-surface-var: light-dark(var(--text-secondary), #c4c7c5);
    --outline: light-dark(#4a5568, #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)));
    /* Small blue text: the brand blue is 3.7:1 on white, a bit darker reaches the 4.5:1 that small text needs */
    --primary-text: light-dark(color-mix(in srgb, var(--primary-color) 80%, #000), 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-grad, .xh-btn-grad:hover { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #000)); } /* primary → near-black, makes key CTAs stand out */
.xh-btn-grad:hover { filter: brightness(1.1); }
.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-text); }
.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 {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; }
/* Hotline pill: same height and text as the menu (16px/500) */
.xh-header .xh-header-cta { height: 44px; padding: 0 20px 0 16px; font-size: 16px; font-weight: 500; }
.xh-header .xh-header-cta .material-symbols-outlined { font-size: 18px; }
/* Hotline, outlined (default): white + primary border/text */
/* .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-cta > .material-symbols-outlined { animation: xh-ring 2.5s ease-in-out infinite; } /* rings briefly, then rests */
@keyframes xh-ring { 0%, 20%, 100% { transform: none; } 4%, 12% { transform: rotate(-15deg); } 8%, 16% { transform: rotate(15deg); } }
.xh-header .xh-cta-outlined:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.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; }
/* Cart: icon + count badge */
.xh-cart { position: relative; color: var(--primary); }
.xh-cart .material-symbols-outlined { font-size: 26px; }
.xh-cart-count { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red-color); color: var(--white-color); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.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-nav { min-width: 0; overflow: hidden; }
.xh-tabs a { white-space: nowrap; }
.xh-logo { flex: none; max-width: 40%; }
.xh-header-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* 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; }
.xh-drawer .xh-drawer-cart { display: none; } /* phones only, see the 599px block */
.xh-drawer-cart .xh-cart-count { position: static; margin-left: auto; margin-right: 8px; }

/* Footer */
/* Some old templates (single product) leave a <div> open, so the footer lands inside a bootstrap column: clear its floats
   and break out to the full width (the theme's style.css has html { overflow-x: hidden } on those pages) */
.laptop--content .xh-footer { clear: both; width: 100vw; margin-left: calc(50% - 50vw); }
.xh-footer { padding: 0 15px; background: var(--footer); font-size: 15px; color: var(--on-surface-var); }
.xh-footer ul { margin: 0; padding: 0; list-style: none; }
.xh-footer-head { padding: 15px 0 0; font: 700 22px/30px var(--font); color: var(--primary); text-align: center; }
/* Social | contact (long address) | policy | map */
.xh-footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; max-width: 1200px; margin: 0 auto; padding: 32px 0; border-bottom: 1px solid var(--outline-var); font-size: 15px; line-height: 22px; font-weight: 500; }
.xh-footer-title { margin: 0 0 16px; font: 700 16px/24px var(--font); color: var(--on-surface); }
.xh-footer-col ul, .xh-footer-info { display: grid; gap: 10px; }
.xh-footer-info li { display: flex; gap: 6px; }
.xh-footer-info .material-symbols-outlined { font-size: 20px; line-height: 22px; color: var(--primary); }
.xh-footer .xh-social { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 24px; }
.xh-social li { display: flex; }
.xh-social :is(li > a, li:not(:has(a))) { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--on-surface); }
.xh-footer .xh-social img { width: 32px; height: 32px; object-fit: contain; }
.xh-social a:hover img { transform: translateY(-2px); transition: transform .2s; }
.xh-footer-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.xh-footer-icons img { width: auto; height: 40px; }
.xh-footer-map { display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--outline-var); cursor: zoom-in; }
.xh-footer .xh-footer-map img { width: 100%; height: auto; }
.xh-footer-bottom { padding: 16px 0 24px; font-size: 13px; text-align: center; }

/* 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; }

/* Map viewer (main.js): a popup over the dimmed page, like the chat app's image viewer. The page stays visible behind,
   so it doesn't feel like leaving the site. */
.xh-zoom { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 72px 16px; border: 0; background: none; overflow: hidden; font: 500 14px/20px var(--font); color: #fff; }
.xh-zoom[open] { display: flex; align-items: center; justify-content: center; }
.xh-zoom::backdrop { background: rgb(0 0 0 / .75); }
.xh-zoom img { display: block; max-width: min(100%, 1200px); max-height: 100%; border-radius: 12px; box-shadow: 0 18px 60px rgb(0 0 0 / .35); transform-origin: 0 0; transition: transform .12s; touch-action: none; user-select: none; cursor: grab; }
.xh-zoom.is-moving img { transition: none; cursor: grabbing; }
.xh-zoom :is(button, a) { border: 0; background: none; color: #fff; text-decoration: none; cursor: pointer; }
.xh-zoom :is(button, a):hover { background: rgb(255 255 255 / .2); color: #fff; }
.xh-zoom-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 24px; background: rgb(0 0 0 / .5) !important; }
.xh-zoom-bar { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 12px; background: rgb(0 0 0 / .6); white-space: nowrap; }
.xh-zoom-bar button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 6px; font-size: 20px; }
.xh-zoom-bar output { min-width: 48px; text-align: center; }
.xh-zoom-bar a { margin-left: 4px; padding: 6px 10px; border-left: 1px solid rgb(255 255 255 / .3); border-radius: 0 6px 6px 0; }
.xh-zoom-bar a[hidden] { display: none; }

/* Floating Zalo button (same place as the old footer's) */
.xh-zalo { position: fixed; z-index: 25; right: 20px; bottom: 50px; display: block; width: 48px; height: 48px; border-radius: 15%; }
.xh-zalo img { width: 100%; height: 100%; border-radius: inherit; }

@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; }
    /* One column in HTML order, the map first; the 4 social badges spread over the full width */
    .xh-footer-top { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 10px 0; }
    .xh-footer-col:has(.xh-footer-map) { order: -1; }
    .xh-footer .xh-social { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
    .xh-social :is(li > a, li:not(:has(a))) { flex: 1; justify-content: center; }
    /* Policy links in 2 columns filled top to bottom (half each), like the old mobile footer */
    nav.xh-footer-col ul { grid: repeat(var(--rows), auto) / auto-flow minmax(0, 1fr); gap: 10px 16px; }
}
@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 .xh-header-cta { height: 36px; font-size: 14px; }
    .xh-header .xh-header-cta { margin-right: 4px; padding: 0 14px 0 10px; }
    .xh-header-right .xh-cart { display: none; } /* phones: "Giỏ hàng" is in the ☰ menu instead */
    .xh-drawer .xh-drawer-cart { display: list-item; }
    .xh-social :is(li > a, li:not(:has(a))) { flex-direction: column; gap: 6px; text-align: center; } /* phones: label under the icon so 4 fit in a row */
}
@media (prefers-reduced-motion: reduce) {
    .xh-drawer, .xh-drawer li, .xh-scrim, .xh-burger .material-symbols-outlined, .xh-tabs a::after, .xh-hotline-roll a, .xh-header-cta > .material-symbols-outlined { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; } /* ponytail: !important so it beats every per-state delay above */
}