/* ThinkB4UClick 2026 deck design system.
   Canvas: 1920 x 1080, scaled to fit. All sizes below are canvas pixels.
   Built for a venue TV watched through a video call: big type, strong contrast, calm motion. */

@import url('../fonts/fonts.css');
@import url('../icons/phosphor-bold.css');
@import url('../icons/phosphor-fill.css');

:root {
  /* Surfaces */
  --paper: #F5F7FE;
  --surface: #FDFDFF;
  --tint: #EAF0FF;
  --line: #D3DCF6;

  /* Text */
  --ink: #0A1A44;
  --ink-2: #2F3D6B;
  --ink-3: #56648F;
  --on-dark: #F5F7FE;
  --on-dark-2: #C9D5FF;

  /* Brand */
  --cobalt: #1F4FE0;
  --cobalt-700: #1739B3;
  --cobalt-900: #0B1D63;
  --cobalt-950: #06113D;
  --cobalt-100: #E2E9FF;
  --sun: #FFC928;
  --sun-300: #FFDB6B;
  --sun-100: #FFF3CC;

  /* Semantic only: never decorative */
  --alert: #D93025;
  --alert-100: #FDE4E1;
  --safe: #12814A;
  --safe-100: #DCF3E5;

  --font-sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-mega: 158px;
  --fs-display: 116px;
  --fs-h1: 80px;
  --fs-h2: 64px;
  --fs-h3: 48px;
  --fs-lead: 44px;
  --fs-body: 38px;
  --fs-small: 31px;
  --fs-micro: 25px;

  /* Shape rule: cards 28, small controls 16, pills full, phones 64 */
  --r-card: 28px;
  --r-sm: 16px;
  --r-pill: 999px;
  --r-phone: 64px;

  --shadow-1: 0 2px 0 rgba(11, 29, 99, .05), 0 22px 48px -18px rgba(11, 29, 99, .28);
  --shadow-2: 0 2px 0 rgba(11, 29, 99, .06), 0 36px 80px -24px rgba(11, 29, 99, .40);

  --pad-x: 120px;
  --pad-y: 92px;
  --gap: 48px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #050B26;
  font-family: var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* ---------- Viewport + stage ---------- */
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
}
.frame { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
.frame.is-current { visibility: visible; opacity: 1; transition: opacity .2s ease; }
.is-embed .frame, .is-embed .frame.is-current { transition: none; }
.is-embed body { background: var(--paper); }

/* ---------- Slide base ---------- */
.slide {
  position: relative;
  width: 1920px; height: 1080px;
  padding: var(--pad-y) var(--pad-x);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.slide.theme-blue { background: var(--cobalt); color: var(--on-dark); }
.slide.theme-navy { background: var(--cobalt-950); color: var(--on-dark); }
.slide.theme-sun  { background: var(--sun); color: var(--ink); }

/* ---------- Typography ---------- */
.t-mega, .t-display, .t-h1, .t-h2, .t-h3 { font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
.t-mega    { font-size: var(--fs-mega); font-weight: 900; line-height: 1.14; letter-spacing: -0.03em; }
.t-display { font-size: var(--fs-display); font-weight: 900; line-height: 1.08; text-transform: uppercase; letter-spacing: -0.01em; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.18; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.15; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; }
.t-lead { font-size: var(--fs-lead); line-height: 1.38; font-weight: 500; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.t-body { font-size: var(--fs-body); line-height: 1.42; font-weight: 500; text-wrap: pretty; }
.t-small { font-size: var(--fs-small); line-height: 1.4; font-weight: 500; }
.t-upper { text-transform: uppercase; letter-spacing: .02em; }
.t-mono { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.01em; }
.t-blue { color: var(--cobalt); }
.t-alert { color: var(--alert); }
.t-safe { color: var(--safe); }
.t-muted { color: var(--ink-3); }
.theme-blue .t-lead, .theme-navy .t-lead { color: var(--on-dark-2); }
.theme-blue .t-blue, .theme-navy .t-blue { color: var(--sun); }
.theme-blue .t-muted, .theme-navy .t-muted { color: var(--on-dark-2); }

/* Highlighter: yellow marker under a word */
.mark {
  background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%);
  padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.theme-blue .mark, .theme-navy .mark { background: none; color: var(--sun); padding: 0; }
.strike { text-decoration: line-through; text-decoration-thickness: .1em; text-decoration-color: var(--alert); }

/* ---------- Layout primitives ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-s { display: flex; flex-direction: column; gap: 20px; }
.stack-m { display: flex; flex-direction: column; gap: 32px; }
.row { display: flex; align-items: center; gap: 24px; }
.fill { flex: 1; min-height: 0; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.v-center { justify-content: center; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; flex: 1; min-height: 0; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mt-auto { margin-top: auto; }
.nowrap { white-space: nowrap; }
.domain { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; }
.domain .bad { color: var(--alert); }

/* Slide header: optional topic chip + headline */
.slide-head { display: flex; flex-direction: column; gap: 22px; margin-bottom: 52px; }

/* ---------- Cards & surfaces ---------- */
.card { background: var(--surface); border-radius: var(--r-card); padding: 44px 48px; box-shadow: var(--shadow-1); }
.card--tint { background: var(--tint); box-shadow: none; }
.card--sun { background: var(--sun); box-shadow: none; color: var(--ink); }
.card--blue { background: var(--cobalt); color: var(--on-dark); box-shadow: none; }
.card--navy { background: var(--cobalt-900); color: var(--on-dark); box-shadow: none; }
.card--alert { background: var(--alert-100); box-shadow: none; }
.card--safe { background: var(--safe-100); box-shadow: none; }
.theme-blue .card:not(.card--sun):not(.card--tint):not(.card--alert):not(.card--safe),
.theme-navy .card:not(.card--sun):not(.card--tint):not(.card--alert):not(.card--safe) { color: var(--ink); }

/* Pills and labels */
.pill {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  padding: 12px 26px; border-radius: var(--r-pill);
  font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: .02em;
  background: var(--cobalt-100); color: var(--cobalt-700);
}
.pill i { font-size: 32px; }
.pill--sun { background: var(--sun); color: var(--ink); }
.pill--blue { background: var(--cobalt); color: var(--on-dark); }
.pill--alert { background: var(--alert); color: #FFF7F6; }
.pill--safe { background: var(--safe); color: #F4FFF8; }
.pill--ghost { background: transparent; box-shadow: inset 0 0 0 3px currentColor; }

/* Icon badge: round tile with a Phosphor glyph */
.icon-badge {
  width: 112px; height: 112px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 60px;
  background: var(--cobalt); color: var(--on-dark);
}
.icon-badge--sun { background: var(--sun); color: var(--ink); }
.icon-badge--alert { background: var(--alert); color: #FFF; }
.icon-badge--safe { background: var(--safe); color: #FFF; }
.icon-badge--sm { width: 80px; height: 80px; font-size: 44px; }

/* Source line for every statistic */
.source {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 500; color: var(--ink-3); line-height: 1.35;
}
.source a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.source a:hover { color: var(--cobalt); }
.theme-blue .source a:hover, .theme-navy .source a:hover { color: var(--sun); }
.source i { font-size: 22px; flex: none; }
.theme-blue .source, .theme-navy .source { color: var(--on-dark-2); }


/* ---------- Big numbers ---------- */
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat-num { font-size: 150px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.stat-num small { font-size: .42em; letter-spacing: -0.01em; font-weight: 800; }
.stat-label { font-size: 34px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.theme-blue .stat-num, .theme-navy .stat-num { color: var(--sun); }
.theme-blue .stat-label, .theme-navy .stat-label { color: var(--on-dark-2); }

/* ---------- Quiz ---------- */
.quiz { display: flex; flex-direction: column; justify-content: center; gap: 44px; flex: 1; min-height: 0; padding-bottom: 40px; }
.quiz-q { font-size: 72px; font-weight: 800; line-height: 1.16; letter-spacing: -0.02em; text-wrap: balance; max-width: 22em; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.opt {
  display: flex; align-items: center; gap: 28px;
  min-height: 172px; padding: 28px 40px 28px 30px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-1);
  font-size: 44px; font-weight: 700; line-height: 1.22; text-wrap: balance;
  transition: opacity .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.opt-key {
  width: 100px; height: 100px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cobalt); color: var(--on-dark);
  font-size: 50px; font-weight: 900;
  transition: background-color .4s var(--ease);
}
.theme-blue .opt, .theme-navy .opt { color: var(--ink); }
.opts.is-on .opt:not([data-correct]) { opacity: .34; }
.opts.is-on .opt[data-correct] { background: #00843D; color: white; box-shadow: none; border: none; }
.opts.is-on .opt[data-correct] .opt-key { background: white; color: #00843D; }
.explain {
  display: flex; gap: 28px; align-items: flex-start;
  padding: 34px 44px; border-radius: var(--r-card);
  background: var(--sun-100); color: var(--ink);
  font-size: 42px; font-weight: 700; line-height: 1.3; align-items: center;
}
.explain i { font-size: 56px; color: var(--ink); flex: none; }
.vote-hint {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 28px; font-weight: 700; color: var(--ink-3);
}
.vote-hint i { font-size: 36px; }
.theme-blue .vote-hint, .theme-navy .vote-hint { color: var(--on-dark-2); }

/* ---------- Countdown timer ---------- */
.timer {
  --p: 1; --size: 200px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--sun) calc(var(--p) * 360deg), rgba(10, 26, 68, .14) 0);
}
.timer::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--cobalt-950); }
.timer-num { position: relative; font-size: calc(var(--size) * .42); font-weight: 900; color: var(--sun); font-variant-numeric: tabular-nums; line-height: 1; }
.timer.is-done .timer-num { color: var(--alert); }
.timer.is-done { background: conic-gradient(var(--alert) 360deg, transparent 0); }
.timer--light::before { background: var(--surface); }
.timer--light .timer-num { color: var(--ink); }

/* ---------- Phone mock (content is real HTML so Vietnamese text stays exact) ---------- */
.phone {
  --phone-w: 500px; --phone-h: 890px;
  width: var(--phone-w); height: var(--phone-h); flex: none;
  padding: 16px; border-radius: var(--r-phone);
  background: var(--cobalt-950);
  box-shadow: var(--shadow-2), inset 0 0 0 3px rgba(255, 255, 255, .08);
  position: relative;
}
.phone::after { /* camera notch */
  content: ""; position: absolute; top: 30px; left: 50%; width: 120px; height: 32px;
  transform: translateX(-50%); border-radius: var(--r-pill); background: var(--cobalt-950); z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: calc(var(--r-phone) - 16px);
  background: #F2F4FA; overflow: hidden; display: flex; flex-direction: column;
  color: var(--ink); position: relative; text-align: left;
}
.phone-screen--dark { background: linear-gradient(180deg, #24335F, #0E173A); color: var(--on-dark); }
.app-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 74px 26px 20px; background: var(--surface);
  border-bottom: 2px solid var(--line);
}
.app-bar .avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 30px; font-weight: 800; background: var(--cobalt-100); color: var(--cobalt-700); overflow: hidden; }
.app-bar .avatar img { width: 100%; height: 100%; object-fit: cover; }
.app-title { font-size: 28px; font-weight: 800; line-height: 1.2; }
.app-title small { display: block; font-size: 21px; font-weight: 500; color: var(--ink-3); }
.chat { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; overflow: hidden; justify-content: flex-end; }
.msg {
  max-width: 86%; padding: 16px 22px; border-radius: 26px;
  font-size: 28px; font-weight: 500; line-height: 1.34;
  background: var(--surface); color: var(--ink); align-self: flex-start;
  box-shadow: 0 1px 0 rgba(11, 29, 99, .08);
}
.msg.out { align-self: flex-end; background: var(--cobalt); color: var(--on-dark); }
.msg .meta { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; opacity: .7; }
.msg.attach { padding: 10px; }
.msg.attach img { border-radius: 18px; }

/* Lock-screen style notification */
.notif {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px; border-radius: 30px;
  background: rgba(253, 253, 255, .94); color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(6, 17, 61, .5);
}
.notif .app-icon { width: 58px; height: 58px; border-radius: 15px; flex: none; display: grid; place-items: center; font-size: 34px; background: var(--cobalt); color: #FFF; }
.notif b { display: block; font-size: 25px; font-weight: 800; }
.notif p { font-size: 24px; line-height: 1.35; font-weight: 500; }
.notif time { margin-left: auto; font-size: 20px; color: var(--ink-3); white-space: nowrap; }

/* Browser window with a big, readable address bar */
.browser { text-align: left; border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.browser-bar { display: flex; align-items: center; gap: 18px; padding: 20px 26px; background: var(--tint); }
.browser-bar .dots { display: flex; gap: 10px; }
.browser-bar .dots span { width: 18px; height: 18px; border-radius: 50%; background: var(--line); }
.url {
  flex: 1; display: flex; align-items: center; gap: 14px;
  padding: 12px 24px; border-radius: var(--r-pill); background: var(--surface);
  font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--ink-2);
}
.url i { font-size: 30px; }
.url b { color: var(--ink); font-weight: 700; }
.url .bad { color: var(--alert); font-weight: 700; }
.browser-body { padding: 40px 44px; flex: 1; }

/* Fake form field inside a mock page (never functional) */
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-size: 24px; font-weight: 700; color: var(--ink-2); }
.field .input { padding: 18px 22px; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 3px var(--line); font-size: 28px; color: var(--ink-3); }
.btn-mock { display: inline-flex; justify-content: center; padding: 20px 32px; border-radius: var(--r-pill); background: var(--alert); color: #FFF; font-size: 30px; font-weight: 800; }

/* ---------- Red-flag callouts ---------- */
.flag {
  position: absolute; display: flex; align-items: center; gap: 16px;
  padding: 14px 26px 14px 14px; border-radius: var(--r-pill);
  background: var(--alert); color: #FFF;
  font-size: 30px; font-weight: 800; line-height: 1.15;
  box-shadow: 0 16px 36px -14px rgba(217, 48, 37, .65);
  z-index: 4; white-space: nowrap;
}
.flag .n { width: 54px; height: 54px; flex: none; border-radius: 50%; background: #FFF; color: var(--alert); display: grid; place-items: center; font-size: 30px; font-weight: 900; }
.flag-ring { position: absolute; border: 6px solid var(--alert); border-radius: var(--r-sm); z-index: 4; pointer-events: none; }
.flag-list { display: flex; flex-direction: column; gap: 22px; }
.flag-item { display: flex; align-items: center; gap: 22px; font-size: 36px; font-weight: 700; line-height: 1.25; }
.flag-item .n { width: 66px; height: 66px; flex: none; border-radius: 50%; background: var(--alert); color: #FFF; display: grid; place-items: center; font-size: 34px; font-weight: 900; }

/* ---------- Three moves (Dừng, Kiểm tra, Báo ngay) ---------- */
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }
.move { display: flex; flex-direction: column; gap: 22px; padding: 0 44px; position: relative; }
.move + .move { border-left: 4px solid var(--line); }
.theme-blue .move + .move, .theme-navy .move + .move { border-left-color: rgba(245, 247, 254, .22); }
.move-word { font-size: 76px; font-weight: 900; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; }
.move-text { font-size: 33px; font-weight: 500; line-height: 1.38; }

/* ---------- Hotlines ---------- */
.hotline { display: flex; flex-direction: column; gap: 14px; }
.hotline-num { font-size: 210px; font-weight: 900; line-height: .95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.hotline-label { font-size: 38px; font-weight: 700; line-height: 1.3; }

/* ---------- Illustrations from the asset folder ---------- */
.art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.art img { max-height: 100%; width: auto; object-fit: contain; }
.art--bleed-right { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; }
.art--bleed-right img { width: 100%; height: 100%; object-fit: cover; }
.art--rounded img { border-radius: var(--r-card); }

/* Brand ring motif carried over from last year */
.ring { position: absolute; border-radius: 50%; border: 44px solid var(--sun); pointer-events: none; }
.dot { position: absolute; border-radius: 50%; background: var(--sun); pointer-events: none; }

/* Temporary label for the five opener options (removed after choosing one) */
.option-badge {
  position: absolute; top: 34px; right: 40px; z-index: 6;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px; border-radius: var(--r-pill);
  background: var(--sun); color: var(--ink);
  font-size: 24px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 4px rgba(6, 17, 61, .18);
}

/* ---------- Backgrounds ----------
   Put one or two of these as the FIRST children of a slide: <div class="bg bg-grid" aria-hidden="true"></div>
   They sit behind all content and never take layout space. Pair them with an illustration when you can. */
.slide { isolation: isolate; }
.bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Graph-paper grid, strongest around the centre right */
.bg-grid { --grid: rgba(31, 79, 224, .1);
  background-image: linear-gradient(var(--grid) 2px, transparent 2px), linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size: 96px 96px; background-position: -2px -2px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 72% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 70% 90% at 72% 50%, #000 25%, transparent 80%); }
.theme-blue .bg-grid, .theme-navy .bg-grid { --grid: rgba(245, 247, 254, .09); }
.theme-sun .bg-grid { --grid: rgba(10, 26, 68, .1); }

/* Oversized brand rings cropped by the slide edge (top right, or --left for top left) */
.bg-rings { --ring-2: var(--cobalt); }
.bg-rings::before, .bg-rings::after { content: ""; position: absolute; border-radius: 50%; }
.bg-rings::before { width: 1120px; height: 1120px; right: -420px; top: -460px; border: 70px solid var(--sun); }
.bg-rings::after { width: 460px; height: 460px; right: 300px; bottom: -300px; border: 40px solid var(--ring-2); }
.bg-rings--left::before { right: auto; left: -420px; }
.bg-rings--left::after { right: auto; left: 300px; }
.theme-blue .bg-rings { --ring-2: rgba(245, 247, 254, .18); }
.theme-navy .bg-rings { --ring-2: var(--cobalt); }
.theme-sun .bg-rings { --ring-2: var(--ink); }
.theme-sun .bg-rings::before { border-color: var(--surface); }

/* Diagonal colour block on the right (or --left). Put the illustration or mock-up on the block. */
.bg-slant { --slant: var(--cobalt); }
.bg-slant::before { content: ""; position: absolute; inset: 0; background: var(--slant); clip-path: polygon(60% 0, 100% 0, 100% 100%, 46% 100%); }
.bg-slant--left::before { clip-path: polygon(0 0, 40% 0, 54% 100%, 0 100%); }
.bg-slant--sun { --slant: var(--sun); }
.theme-blue .bg-slant { --slant: var(--cobalt-900); }
.theme-navy .bg-slant { --slant: var(--cobalt); }
.theme-sun .bg-slant { --slant: var(--surface); }

/* Soft spotlight disc behind a visual, right side (or --left) */
.bg-spot { --spot: var(--cobalt-100); }
.bg-spot::before { content: ""; position: absolute; width: 940px; height: 940px; border-radius: 50%; background: var(--spot); right: 40px; top: 50%; transform: translateY(-50%); }
.bg-spot--left::before { right: auto; left: 40px; }
.theme-blue .bg-spot { --spot: var(--cobalt-700); }
.theme-navy .bg-spot { --spot: rgba(31, 79, 224, .42); }
.theme-sun .bg-spot { --spot: var(--sun-300); }

/* Full-bleed illustrated scene with a scrim behind the text on the left:
   <div class="bg bg-scene" aria-hidden="true"><img src="assets/group/scene.webp" alt=""></div>
   Use a full Codex scene (not a cut-out) whose left 40% is calm. */
.bg-scene { --scrim: var(--paper); }
.bg-scene img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.bg-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 30%, transparent 62%); }
.theme-blue .bg-scene { --scrim: var(--cobalt); }
.theme-navy .bg-scene { --scrim: var(--cobalt-950); }
.theme-sun .bg-scene { --scrim: var(--sun); }

/* Giant outlined word behind everything. Add data-allow-bleed.
   <div class="bg-word" aria-hidden="true" data-allow-bleed>GIẢ</div> */
.bg-word { position: absolute; z-index: -1; right: -30px; bottom: -90px; pointer-events: none; white-space: nowrap;
  font-size: 560px; font-weight: 800; line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 5px var(--word, rgba(31, 79, 224, .16)); }
.bg-word--left { right: auto; left: -30px; }
.theme-blue .bg-word, .theme-navy .bg-word { --word: rgba(245, 247, 254, .14); }
.theme-sun .bg-word { --word: rgba(10, 26, 68, .14); }

/* Warning tape across the bottom, for alarm moments only. Keep the bottom 200px of content clear. */
.bg-tape::before { content: ""; position: absolute; left: -5%; right: -5%; bottom: 60px; height: 96px; transform: rotate(-2.5deg);
  background: repeating-linear-gradient(-45deg, var(--sun) 0 46px, var(--ink) 46px 92px); box-shadow: var(--shadow-2); }

/* ---------- Step reveals ---------- */
[data-step] { opacity: 0; transform: translateY(18px); transition: opacity .38s var(--ease), transform .5s var(--ease); }
[data-step][data-anim="pop"] { transform: scale(.86); }
[data-step][data-anim="fade"] { transform: none; }
[data-step][data-anim="left"] { transform: translateX(-28px); }
[data-step].is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .frame, .frame.is-current { transition: none; }
  [data-step], [data-step][data-anim] { transform: none; transition: opacity .2s linear; }
  .opt, .opt-key { transition: none; }
}

/* ---------- Deck chrome ---------- */
.deck-progress { position: absolute; left: 0; bottom: 0; height: 8px; width: 100%; z-index: 20; pointer-events: none; }
.deck-progress span { display: block; height: 100%; width: 0; background: var(--cobalt); transition: width .3s var(--ease); }
.on-dark .deck-progress span { background: var(--sun); }
.deck-brand {
  position: absolute; left: 56px; bottom: 34px; z-index: 20; pointer-events: none;
  font-size: 22px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.deck-brand b { color: var(--cobalt); }
.on-dark .deck-brand { color: var(--on-dark-2); }
.on-dark .deck-brand b { color: var(--sun); }
.no-brand .deck-brand { display: none; }

.deck-ui {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: var(--r-pill); background: rgba(6, 17, 61, .82); color: var(--on-dark);
  font: 600 15px/1 var(--font-sans);
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.deck-ui.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.deck-ui button {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: inherit; font-size: 20px; display: grid; place-items: center;
}
.deck-ui button:hover { background: rgba(245, 247, 254, .14); }
.deck-ui button:active { transform: scale(.94); }
.deck-ui .count { padding: 0 10px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: center; }

.deck-black { position: fixed; inset: 0; background: #000; z-index: 60; display: none; }
.is-black .deck-black { display: block; }

/* Overview grid */
.is-overview #viewport { overflow-y: auto; }
.is-overview #stage { position: relative; left: 0; top: 0; transform: none !important; width: auto; height: auto;
  display: grid; grid-template-columns: repeat(auto-fill, 384px); gap: 28px; justify-content: center; padding: 40px; }
.is-overview .frame { position: relative; inset: auto; visibility: visible; opacity: 1; transition: none; width: 384px; height: 216px; border-radius: 10px; overflow: hidden; cursor: pointer; outline: 3px solid transparent; outline-offset: 3px; }
.is-overview .frame:hover { outline-color: var(--sun-300); }
.is-overview .frame.is-current { outline-color: var(--sun); }
.is-overview .frame > .slide { transform: scale(.2); transform-origin: 0 0; pointer-events: none; }
.is-overview .frame .frame-num { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 9px; border-radius: 8px; background: rgba(6, 17, 61, .8); color: #FFF; font: 700 14px/1.2 var(--font-sans); }
.frame-num { display: none; }
.is-overview .frame-num { display: block; }
.is-overview .deck-progress, .is-overview .deck-brand { display: none; }

/* ---------- Presenter view ---------- */
body.presenter { background: #0B1238; color: var(--on-dark); overflow: hidden; }
.presenter-layout { position: fixed; inset: 0; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; gap: 20px; padding: 20px; }
.presenter-layout .p-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; font: 700 22px/1 var(--font-sans); }
.presenter-layout .p-bar .clock { font-variant-numeric: tabular-nums; color: var(--sun); font-size: 30px; }
.presenter-layout .p-bar .hint { margin-left: auto; font-weight: 500; font-size: 15px; color: var(--on-dark-2); }
.p-current, .p-next { position: relative; border-radius: 12px; overflow: hidden; background: #000; }
.p-current { grid-row: 2; }
.p-side { grid-row: 2; display: grid; grid-template-rows: auto auto; align-content: center; gap: 16px; min-height: 0; }
.p-label { font: 800 14px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.p-next { aspect-ratio: 16 / 9; }
body.presenter #viewport { position: absolute; inset: 0; }

/* ---------- Print / PDF fallback: one page per slide, every step revealed ---------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { background: none; overflow: visible; height: auto; }
  #viewport { position: static; overflow: visible; }
  #stage { position: static; transform: none !important; width: 1920px; height: auto; }
  .frame { position: relative; visibility: visible; opacity: 1; width: 1920px; height: 1080px; break-after: page; overflow: hidden; }
  [data-step] { opacity: 1 !important; transform: none !important; }
  .deck-ui, .deck-progress, .deck-black, .frame-num { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.quiz-q{max-width:100%}

.quiz{width:100%;max-width:none}.quiz-q{width:100%;max-width:none}