@import url('/onmate-brand-panels.css?v=8');
@import url('/ambient-surfaces.css?v=1');
/* ONMATE site chrome: the footer (scripts/footer/footer.mjs), the top bar and the "Dịch vụ" menu share one indigo "glass" tone
   so none of them reads as black against the nebula sky. Loaded last through THEME_HEAD, so it wins over every page sheet and needs
   no variables from them: colours are literals, which the theme generator re-maps for Băng / Cực quang / Đại dương. */
:root{--chrome-bg:rgb(24 28 92/.82);--chrome-bg-deep:rgb(22 26 88/.985);--chrome-bg-solid:rgb(22 26 88);--chrome-edge:rgb(150 165 255/.26);--chrome-line:rgb(160 175 255/.16);--chrome-shadow:0 24px 56px rgb(18 10 70/.55)}
.site-footer{position:relative;z-index:3;margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--chrome-edge);background:linear-gradient(180deg,rgb(24 28 92/0) 0,rgb(24 28 92/.6) 32%,rgb(26 22 88/.94) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#bccbe0;font-family:inherit;font-size:14px;line-height:1.6;text-align:left}
/* home and /hanh-trinh/ keep an opaque footer: on the journey page it slides over the pinned 3D cabin like a curtain */
body.pw-home .site-footer,body.pw-journey .site-footer{background:#1a1858 linear-gradient(180deg,#191d60,#1a1654)}
/* home: the last section's glow ends at the bottom of <main>, so the footer's usual top gap would show a flat dark strip of bare sky under it; the section's own bottom padding gives the room instead */
:root:root body.pw-home .site-footer{margin-top:0}
/* home: the sunrise glow and the sky fade into the opaque footer through a strip above it, so there is no cut line at the footer edge (the strip sits inside the last section's bottom padding, clear of the form) */
body.pw-home .site-footer::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:clamp(64px,7vw,110px);pointer-events:none;background:linear-gradient(180deg,rgb(25 29 96/0) 0,rgb(25 29 96/.35) 40%,rgb(25 29 96/.8) 75%,rgb(25 29 96) 100%)}
/* inner pages: the footer starts exactly where the last section ends (no bare-sky gap, no light top edge, no step; no backdrop blur either, which stopped the stars and scene lines dead at the footer edge); the old 96px gap becomes its own top padding and the gradient starts from the colour of the section above (--sf-from, set by nebula.css) */
html body:not(.pw-home):not(.pw-journey) .site-footer{margin-top:0;padding-top:clamp(48px,7vw,96px);border-top:0;background:linear-gradient(180deg,var(--sf-from,rgb(24 28 92/0)) 0,rgb(24 28 92/.6) 32%,rgb(26 22 88/.94) 100%);-webkit-backdrop-filter:none;backdrop-filter:none}
.site-footer *{box-sizing:border-box}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:focus-visible{outline:2px solid #72eaff;outline-offset:3px;border-radius:4px}
.sf-wrap{width:100%;max-width:1280px;margin:0 auto;padding:44px 5% 22px}

.sf-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.09)}
.sf-top .brand-mini .om-mark{width:36px;height:36px}
.sf-top .brand-mini .om-word{height:16px}
.sf-tag{margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#afc2d3}
.sf-chans{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto}
.sf-chan{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04);color:#f3f8fc;font-size:13px;font-weight:600;transition:border-color .2s,background .2s,color .2s}
.sf-chan svg{width:18px;height:18px;flex:none}
.sf-chan:hover{border-color:#72eaff;color:#72eaff;background:rgba(114,234,255,.08)}

.sf-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.85fr) minmax(0,1.25fr);gap:36px 40px;padding:34px 0 30px}
.sf-col{min-width:0}
/* style.css sets a bare "nav{display:flex;gap:36px}" and hides every nav on phones: the footer columns are navs */
.site-footer nav.sf-col{display:block;gap:0;font-size:14px}
.sf-h{margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:#f3f8fc}
.sf-company .sf-h{font-size:14px;letter-spacing:.03em}
.sf-company dl{margin:0}
.sf-company dl>div{margin:0 0 13px}
.sf-company dt{margin:0 0 2px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8fa6ba}
.sf-company dd{margin:0;color:#c9d8e6;overflow-wrap:anywhere}
.sf-company dd a{color:#72eaff;font-weight:700;font-size:16px}
.sf-col ul{list-style:none;margin:0;padding:0}
.sf-col li{margin:0 0 9px}
.sf-col li a{color:#c9d8e6;transition:color .2s}
.sf-col li a:hover{color:#72eaff;text-decoration:underline;text-underline-offset:4px}
.sf-col li a[aria-current=page]{color:#72eaff}

.sf-mapbox{position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#141a5a}
.sf-mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sf-dir{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:36px;color:#72eaff;font-size:13px;font-weight:700}
.sf-dir:hover{text-decoration:underline;text-underline-offset:4px}

.sf-bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:#8fa6ba}
.sf-bottom p{margin:0}

@media (max-width:1100px){
  .sf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .sf-chans{margin-left:0;width:100%}
}
@media (max-width:700px){
  .sf-wrap{padding:36px 22px 20px}
  .sf-grid{grid-template-columns:minmax(0,1fr);gap:30px;padding:28px 0 24px}
  .sf-mapbox{aspect-ratio:16/10;max-height:230px}
  .sf-chan{flex:1 1 auto;justify-content:center}
}
@media print{.site-footer .sf-mapbox,.site-footer .sf-chans{display:none}}

/* ---------- top bar ---------- */
/* the pages each set their own near-black bar (navigation, pages, nebula, home, service sheets): one tone for all, by specificity */
:root:root:root body .pow-header{background:linear-gradient(180deg,rgb(26 30 96/.9),rgb(23 27 90/.74));-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);box-shadow:inset 0 -1px 0 var(--chrome-edge)}
:root:root:root body .pow-header.is-scrolled{background:linear-gradient(180deg,rgb(26 30 96/.96),rgb(23 27 90/.9))}

/* ---------- "Dịch vụ" menu: desktop panel ---------- */
@media (min-width:1101px){
  html body #services-mega{background:var(--chrome-bg-deep);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--chrome-edge);box-shadow:var(--chrome-shadow),inset 0 1px 0 rgb(255 255 255/.07)}
}
/* ---------- "Dịch vụ" menu: phone/tablet panel (the bar's whole menu drops down) ---------- */
@media (max-width:1100px){
  /* inside the drop-down the services list is not a second box (the Băng/Cực quang/Đại dương sheets re-emit the desktop border after the phone reset) */
  html body #services-mega{background:transparent;border:0;box-shadow:none}
  html body .pow-header #pow-navigation{background:var(--chrome-bg-deep);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--chrome-edge);box-shadow:var(--chrome-shadow)}
}
html body .mega-heading{border-bottom-color:var(--chrome-line)}
html body .category-choice,html body .category-services li a{border-bottom-color:var(--chrome-line)}
html body .category-choice{transition:color .16s,background .16s,box-shadow .16s,padding .16s}
html body .category-choice:hover,html body .category-choice:focus-visible{color:#fff;padding-left:12px;background:linear-gradient(90deg,rgb(114 234 255/.12),transparent 85%);box-shadow:inset 2px 0 0 #72eaff}
html body .category-choice>span:last-child{color:#8fc7ee}
html body .category-art,html body .md-player{background:#131860;border-color:var(--chrome-edge)}

/* ---------- page frame (UI fix step D) ----------
   One content frame for the whole site: 1200px wide, a 20-48px gutter on small screens, one content width. Every page wrapper,
   the top bar, the "Dịch vụ" menu and the footer point at it, so changing the three tokens moves them all together.
   Full-bleed backgrounds (home sections, hero glows) stay full width; only their content lines up with the frame. /hanh-trinh/ (body.pw-journey) is left out on purpose: it keeps its own cockpit widths.
   :root:root raises the specificity on purpose: the page sheets load before this one and some scope their wrapper (body.pw .wrap). */
:root{--site-w:1200px;--gutter:clamp(20px,4vw,48px);--frame:min(var(--site-w),100% - 2*var(--gutter));--frame-edge:max(var(--gutter),calc((100% - var(--site-w))/2))}
:root:root body:not(.pw-journey) .wrap,:root:root body:not(.pw-journey) .hx-wrap,:root:root body:not(.pw-journey) .sw-wide,:root:root body:not(.pw-journey) .bm-wide,:root:root body:not(.pw-journey) .cx-wide,:root:root body:not(.pw-journey) .po-wide,:root:root body:not(.pw-journey) .sf-wrap,:root:root body:not(.pw-journey) .ab-nav ul{width:var(--frame);max-width:none;margin-inline:auto;padding-inline:0}
:root:root body:not(.pw-journey) .pow-header{padding-inline:var(--frame-edge)}
@media (min-width:1101px){:root:root body:not(.pw-journey) #services-mega{right:var(--frame-edge)}}
@media (max-width:1100px){:root:root body:not(.pw-journey) .pow-header #pow-navigation{left:var(--gutter);right:var(--gutter);background:var(--chrome-bg-solid,var(--chrome-bg-deep))}}
@media (max-width:340px){:root:root body:not(.pw-journey) .pow-header{padding-inline:12px}}
/* the /dich-vu/ screening room: its own 1560px stage and 5vw paddings become the frame (the hero keeps its full-bleed glow) */
:root:root body.film-page #page-content{max-width:none}
:root:root body.film-page .breadcrumbs,:root:root body.film-page .film-hero,:root:root body.film-page .film-room{padding-inline:var(--frame-edge)}
:root:root body.film-page .detail-contact{width:var(--frame);max-width:none;padding-inline:0}
/* long-reading pages: the article sidebar sits on the frame's left edge like the policy one (it used to be centred), reading column ~740px beside it */
:root:root body:not(.pw-journey) .art-layout{justify-content:start;gap:clamp(32px,5vw,72px)}

/* ===== phone tap targets (MOBILE_FIX_PLAN B5): the look stays, the hit areas grow to ~40px ===== */
@media (max-width:599px){
  /* footer link lists: 40px rows (were 18px text lines) */
  :root:root .sf-col li{margin:0}
  :root:root .sf-col li a{display:block;padding:10px 0}
  :root:root .sf-company dd a{padding-block:10px}
  :root:root .sf-dir{min-height:44px;margin-top:6px}
  /* breadcrumbs and "Tài liệu tham khảo" links: padding out, margin back in, so the layout does not move */
  :root:root .crumbs a{padding:13px 0;margin:-13px 0}
  :root:root .sources a{padding-block:11px;margin-block:-11px}
  /* invisible hit areas (no layout change): header logo / "Nhận tư vấn" / theme button, "back" pills, small CTA links */
  :root:root .pow-header .brand,:root:root .pow-header .contact,:root:root .th-btn,:root:root .pn-back,:root:root .po-help-cta,:root:root .toc .back{position:relative}
  :root:root .pow-header .brand::before{content:"";position:absolute;inset:-5px -6px}
  :root:root .pow-header .contact::before,:root:root .th-btn::before{content:"";position:absolute;inset:-3px;border-radius:inherit}
  :root:root .pn-back::before{content:"";position:absolute;inset:-5px -3px}
  :root:root .po-help-cta::before,:root:root .toc .back::before{content:"";position:absolute;inset:-12px -4px}
  /* film scene bar: 6px segments get a 30px-tall touch strip (it was 24px) */
  :root:root .fc-seg::before{inset:-12px 0}
  /* service-page FAQ: the 22px question line is the whole card header now, the card's padding stays */
  :root:root .ga-lp .faq summary{margin:-22px;padding:22px}
}