/* KTV Portal — design tokens + reset. Ported from Artifact V3.2.1 (DESIGN LOCKED); prototype-only layers (viewer shell,
   build-spec panel, spec overlays, website concept preview) removed. Responsive rules use the `kp` container
   set on #app, identical breakpoints to the Artifact device frame. */
/* ============ TOKENS (nguồn duy nhất — xem màn "Design tokens") ============ */
/* ============ TOKENS — VAVARISE landing is the visual source of truth ============
   Values taken from the CURRENT landing (cms/build/templates/home.html :root + the /tro-thanh-ktv/ page, .p9):
   teal #00D0C8 · teal-deep #077d78 · orange #FF8A3D · orange-ink #c05f17 · orange-text #a84e0a · ink #102326 ·
   muted #566468 · surface #F4FBFA · mint #EFFFFD / #DDF8F6 · peach #FFF3EA / #FFF9F5 · lines #e7ebf0 / teal soft
   borders · radius 12 (buttons/fields) · 16–20 (cards) · pill CTAs · focus outline orange family.
   The landing has no dark theme, so the portal is light-only (the old prefers-color-scheme dark palette is removed).
   Semantic state colours (ok / warn / crit) stay distinct from the brand colours and keep AA contrast. */
:root{
  color-scheme:light;
  --accent:#00D0C8; --accent-hover:#00BFB8; --accent-text:#077D78; --accent-soft:#EFFFFD; --accent-line:#BFEFEC; --on-accent:#102326;
  --cta:#FF8A3D; --cta-hover:#FF7A24; --on-cta:#1A1A1A; --cta-soft:#FFF3EA; --cta-text:#A84E0A;
  --ink:#102326; --ink-2:#566468; --ink-3:#5E6C70;
  --bg:#F4FBFA; --p-bg:#F4FBFA; --surface:#FFFFFF; --surface-2:#F3FCFB;
  --line:#E3ECEC; --line-2:#C9DCDB; --field:#7F9598; --focus:#077D78; --focus-ring:#C05F17;
  --ok:#0E7C5F; --ok-soft:#E3F6EF; --warn:#9A6412; --warn-soft:#FDF3E1; --crit:#C43333; --crit-soft:#FDECEC;
  --shadow-1:0 2px 14px rgba(16,35,38,.04),0 1px 2px rgba(16,35,38,.04);
  --shadow-2:0 14px 34px rgba(16,35,38,.10);
  --hero-bg:linear-gradient(135deg,#EAFCFB 0%,#FFFFFF 55%,#FFF5EE 100%);
  --r-card:18px; --r-ctl:12px;
  --f-display:"Be Vietnam Pro","Segoe UI",Arial,system-ui,sans-serif;
  --f-body:"Be Vietnam Pro","Segoe UI",Arial,system-ui,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px!important;padding:0!important;border:0!important}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cta) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* App root = the Artifact's device viewport: container + page surface. */
html{background:var(--p-bg)}
body{background:var(--p-bg)}
#app{container:kp/inline-size;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--p-bg);color:var(--ink);font-size:16px;line-height:1.5}
#app:focus{outline:none}
.boot{flex:1;display:grid;place-items:center;padding:48px 16px;color:var(--ink-2)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:10px;border:2px solid var(--focus);font-weight:700}
.skip:focus{top:12px}