/* ==========================================================================
   Deck "Dùng AI cho nhẹ đầu"
   Ngôn ngữ thị giác: PK (Pika) Design System — chỉ dùng token, chỉ dùng Nunito.
   Ngoại lệ có chủ ý so với rules.md (ghi chú tại chỗ):
     · R004/R017 — thêm --slide-hero 64px cho tiêu đề slide chiếu máy chiếu.
     · R010 — emoji CHỈ nằm trong nội dung meme / trích dẫn (đó là câu đùa),
       không có emoji nào trong chrome (topbar, thanh nhắc lời, nút).
     · Light mode only, đúng DS — deck trình chiếu không có dark mode.
   ========================================================================== */

/* ---- 1 · Fonts (R011: Nunito toàn bộ) ---------------------------------- */
@font-face{font-family:"Nunito";src:url("fonts/Nunito-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/Nunito-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/Nunito-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/Nunito-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

/* ---- 2 · Token (nguyên văn tokens.css của PK DS) ----------------------- */
:root{
  --cyan-50:#edfbfd;--cyan-100:#a5e1eb;--cyan-200:#78d2e1;--cyan-300:#5ecbdb;
  --cyan-400:#46c4d7;--cyan-500:#3aabbc;--cyan-600:#2e95a4;
  --red-50:#fff0f0;--red-100:#ffdfe0;--red-200:#ffc8c8;--red-400:#ff4b4b;--red-500:#ea2b2b;
  --yellow-50:#fffbea;--yellow-100:#fff4d4;--yellow-200:#ffe79a;--yellow-400:#ffc800;--yellow-500:#e0a800;
  --orange-50:#fff5e6;--orange-100:#ffe5b4;--orange-400:#ff9600;--orange-500:#e08600;
  --green-50:#edfaf4;--green-100:#c6f0da;--green-400:#2ec47a;--green-500:#22a866;
  --blue-50:#eef9ff;--blue-100:#ddf4ff;--blue-400:#1cb0f6;--blue-500:#1899d6;--blue-900:#235390;
  --purple-50:#f8f0ff;--purple-100:#edd5ff;--purple-400:#ce82ff;--purple-500:#a560e8;--purple-600:#6a4bcf;
  --white:#fff;
  --neutral-50:#f8fafc;--neutral-100:#edf2f7;--neutral-150:#f1f5f9;--neutral-200:#e2e8f0;
  --neutral-300:#cbd5e1;--neutral-400:#94a3b8;--neutral-500:#64748b;--neutral-600:#475569;
  --neutral-700:#334155;--neutral-800:#1e293b;--neutral-900:#0f172a;
  --surface-soft:rgba(255,255,255,.6);--border-soft:rgba(255,255,255,1);
  --icon-coral:#ff6b70;--icon-coral-bg:#ffe6e9;--icon-amber:#ffb732;--icon-amber-bg:#fff6e6;
  --icon-lime:#84bb26;--icon-lime-bg:#e8f1e5;--icon-indigo:#614fe8;--icon-indigo-bg:#e6e6ff;
  --text-heading:var(--neutral-900);--text-primary:var(--neutral-800);--text-secondary:var(--neutral-500);
  --text-inverse:var(--white);--text-on-brand:var(--white);--text-link:var(--cyan-500);
  --surface-bg:var(--neutral-50);--surface-card:var(--white);--surface-sunken:var(--neutral-100);
  --surface-overlay:rgba(0,0,0,.45);--surface-tinted:var(--cyan-50);--surface-primary:var(--cyan-50);
  --surface-success:var(--green-50);--surface-error:var(--red-50);--surface-warning:var(--orange-50);
  --surface-info:var(--blue-50);--surface-premium:var(--yellow-50);--surface-reward:var(--yellow-50);
  --border-default:var(--neutral-200);--border-strong:var(--neutral-400);--border-focus:var(--cyan-400);
  --border-error:var(--red-400);--border-warning:var(--orange-400);--border-info:var(--blue-400);
  --border-premium:var(--yellow-400);
  --color-primary:var(--cyan-400);--color-correct:var(--green-400);--color-error:var(--red-400);
  --color-warning:var(--orange-400);--color-info:var(--blue-400);--color-reward:var(--yellow-400);
  --color-streak:var(--orange-400);--color-premium:var(--yellow-500);--color-task:var(--purple-600);
  --state-hover:rgba(0,0,0,.04);--state-pressed:rgba(0,0,0,.08);--state-selected:var(--cyan-50);
  --color-primary-shadow:#3aabbc;--color-error-shadow:#ea2b2b;--color-reward-shadow:#e0a800;
  --color-warning-shadow:#e08600;--color-correct-shadow:#22a866;
  --focus-ring-shadow:0 0 0 3px rgba(70,196,215,.14);
  --shadow-soft:0 6px 18px rgba(15,23,42,.05);--shadow-soft-sm:0 2px 10px rgba(15,23,42,.03);
  --shadow-brand-sm:0 4px 12px rgba(70,196,215,.16);--shadow-raised:0 4px 12px rgba(0,0,0,.08);
  --shadow-modal:0 12px 32px rgba(0,0,0,.18);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --border-thick:2px;--button-depth:4px;
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;
  --radius-2xl:24px;--radius-3xl:32px;--radius-pill:9999px;
  --motion-fast:100ms;--motion-normal:200ms;--motion-slow:400ms;--motion-bounce:600ms;
  --ease-in-signature:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font-bold:700;--font-extrabold:800;--font-black:900;
  --z-header:20;--z-fab:100;--z-modal:500;--z-toast:700;
  /* Ngoại lệ R004 — chỉ dùng cho tiêu đề slide nhìn từ xa */
  --slide-hero:64px;
  --stage-pad:var(--space-16);
}

/* ---- 3 · Nền trang & sân khấu 1280×720 --------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--surface-bg);color:var(--text-primary);
  font-family:"Nunito",sans-serif;font-weight:var(--font-bold);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow:hidden;color-scheme:light;
}
body::before{ /* nhịp nền rất nhẹ, không gradient (DS: no gradients) */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--neutral-200) 1px,transparent 1px);
  background-size:28px 28px;
}
#stage{
  position:fixed;left:50%;top:50%;width:1280px;height:720px;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center;
  background:var(--surface-card);border-radius:var(--radius-3xl);
  box-shadow:var(--shadow-modal);overflow:hidden;
}

/* ---- 4 · Chrome: thanh trên, thanh nhắc lời dưới ----------------------- */
.topbar{
  position:absolute;inset:0 0 auto 0;height:56px;z-index:var(--z-header);
  display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--stage-pad);
}
.eyebrow{font-size:11px;line-height:1;font-weight:var(--font-extrabold);letter-spacing:.6px;
  text-transform:uppercase;color:var(--cyan-600)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--color-primary);margin-right:var(--space-2);vertical-align:2px}
.topbar .spacer{flex:1}
.counter{font-size:11px;line-height:1;font-weight:var(--font-extrabold);letter-spacing:.6px;
  color:var(--text-secondary);font-variant-numeric:tabular-nums}
.progress{position:absolute;left:0;top:0;height:4px;width:100%;background:var(--neutral-150);z-index:var(--z-header)}
.progress i{display:block;height:100%;width:0;background:var(--color-primary);
  border-radius:var(--radius-pill);transition:width var(--motion-slow) var(--ease-in-signature)}

/* Góc điều khiển nhỏ: luôn thấy trạng thái micro, nhưng lời nhắc thì ẩn
   cho tới khi bấm con mắt — để khán giả không đọc trước lời của người nói. */
.hud{
  position:absolute;right:var(--stage-pad);bottom:var(--space-4);z-index:var(--z-header);
  display:flex;align-items:center;gap:var(--space-2);
}
.hud-btn{
  appearance:none;border:1px solid var(--border-default);cursor:pointer;
  width:26px;height:26px;padding:0;flex:none;border-radius:var(--radius-pill);
  display:grid;place-items:center;background:var(--surface-card);color:var(--neutral-400);
  opacity:.45;transition:opacity var(--motion-normal),background var(--motion-normal),color var(--motion-normal);
}
.hud-btn:hover{opacity:1}
.hud-btn svg{width:14px;height:14px}
.hud-btn:focus-visible{outline:0;box-shadow:var(--focus-ring-shadow);opacity:1}
body[data-mic="on"] .hud-btn.mic{background:var(--color-primary);border-color:var(--color-primary);
  color:var(--text-on-brand);opacity:1}
body[data-mic="err"] .hud-btn.mic{background:var(--color-error);border-color:var(--color-error);
  color:var(--text-on-brand);opacity:1}
#eyeBtn .eye-on{display:none}
body[data-hint="on"] #eyeBtn{opacity:1;background:var(--cyan-50);border-color:var(--cyan-200);color:var(--cyan-600)}
body[data-hint="on"] #eyeBtn .eye-on{display:block}
body[data-hint="on"] #eyeBtn .eye-off{display:none}

.prompter{
  position:absolute;left:var(--stage-pad);bottom:var(--space-4);z-index:var(--z-header);
  max-width:620px;height:34px;
  display:flex;align-items:center;gap:var(--space-2);
  padding:0 var(--space-3);border-radius:var(--radius-pill);
  background:var(--surface-soft);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft-sm);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--motion-normal),transform var(--motion-normal);
}
body[data-hint="on"] .prompter{opacity:1;transform:none}
.prompter .lead{font-size:11px;line-height:1;font-weight:var(--font-extrabold);letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-secondary);flex:none}
.prompter .say{
  font-size:13px;line-height:18px;font-weight:var(--font-black);color:var(--cyan-600);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
.prompter .say.none{color:var(--text-secondary);font-weight:600}
.prompter .heard{
  font-size:11px;line-height:1;font-weight:600;color:var(--neutral-400);
  max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  direction:rtl;text-align:right;flex:none;
}
.meter{width:34px;height:4px;border-radius:var(--radius-pill);background:var(--neutral-200);flex:none;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--color-primary);
  border-radius:var(--radius-pill);transition:width 120ms linear}

/* ---- 5 · Slide --------------------------------------------------------- */
.slide{
  position:absolute;inset:56px var(--stage-pad) 64px var(--stage-pad);
  display:none;flex-direction:column;justify-content:center;
}
/* Slide tip: tiêu đề bám mép trên, phần thân căn giữa khoảng còn lại —
   tránh cả hai lỗi "chữ trôi lơ lửng" và "hụt hẫng khoảng trắng dưới". */
.slide:has(> .row.top){justify-content:flex-start;padding-top:var(--space-4)}
.slide:has(> .row.top) > .split,
.slide:has(> .row.top) > .spells{flex:1 1 auto;align-content:center}

.slide.active{display:flex;animation:slideIn var(--motion-slow) var(--ease-in-signature) both}
@keyframes slideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.slide.full{inset:0}

h1,h2,h3,p,ul,ol{margin:0}
h1{font-size:var(--slide-hero);line-height:1.08;font-weight:var(--font-black);color:var(--text-heading);letter-spacing:-.5px}
h2{font-size:48px;line-height:56px;font-weight:var(--font-black);color:var(--text-heading);letter-spacing:-.3px}
h3{font-size:32px;line-height:40px;font-weight:var(--font-black);color:var(--text-heading)}
.t1{font-size:24px;line-height:32px;font-weight:var(--font-extrabold);color:var(--text-heading)}
.t2{font-size:20px;line-height:28px;font-weight:var(--font-extrabold);color:var(--text-heading)}
.lead-p{font-size:20px;line-height:28px;font-weight:var(--font-bold);color:var(--text-primary)}
.body-p{font-size:17px;line-height:26px;font-weight:var(--font-bold);color:var(--text-primary)}
.sub{font-size:17px;line-height:26px;font-weight:600;color:var(--text-secondary)}
.small{font-size:15px;line-height:22px;font-weight:600;color:var(--text-secondary)}
.tiny{font-size:13px;line-height:18px;font-weight:600;color:var(--text-secondary)}
.overline{font-size:11px;line-height:1;font-weight:var(--font-extrabold);letter-spacing:.6px;
  text-transform:uppercase;color:var(--cyan-600)}
.label{font-size:13px;line-height:1;font-weight:600;letter-spacing:.3px;color:var(--text-secondary)}
.ghost{color:var(--neutral-400);font-weight:600}
.faint{display:block;margin-top:var(--space-2);font-size:15px;line-height:22px;color:var(--neutral-400)}

.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--space-2)}
.stack-lg{display:flex;flex-direction:column;gap:var(--space-6)}
.row{display:flex;align-items:center;gap:var(--space-4)}
.row.top{align-items:flex-start}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.split.wide-l{grid-template-columns:1.3fr 1fr}
.split.wide-r{grid-template-columns:1fr 1.3fr}
.center{text-align:center;align-items:center}
.grow{flex:1;min-width:0}

.card{
  background:var(--surface-soft);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);border-radius:var(--radius-2xl);padding:var(--space-6);
}
.card.tight{padding:var(--space-4) var(--space-5)}
.card.flat{box-shadow:var(--shadow-soft-sm)}
.card.tint{background:var(--surface-tinted);border-color:var(--cyan-100)}
.card.warn{background:var(--surface-warning);border-color:var(--orange-100)}
.card.bad{background:var(--surface-error);border-color:var(--red-100)}
.card.good{background:var(--surface-success);border-color:var(--green-100)}
.card.gold{background:var(--surface-premium);border-color:var(--yellow-200)}

.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-4);align-items:stretch}
.vs .arrow{align-self:center;color:var(--neutral-300)}
.vs .arrow svg{width:28px;height:28px}
.tagline{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:12px;line-height:1;font-weight:var(--font-extrabold);
  padding:6px var(--space-3);border-radius:var(--radius-pill)}
.tagline.no{background:var(--red-50);color:var(--red-500)}
.tagline.yes{background:var(--green-50);color:var(--green-500)}
.tagline.neutral{background:var(--neutral-100);color:var(--neutral-600)}

ul.bullets{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
ul.bullets>li{position:relative;padding-left:22px;
  font-size:17px;line-height:26px;font-weight:var(--font-bold);color:var(--text-primary)}
ul.bullets>li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  border-radius:var(--radius-pill);background:var(--color-primary)}
ul.bullets.warn>li::before{background:var(--color-warning)}
ul.bullets.bad>li::before{background:var(--color-error)}
ul.bullets.good>li::before{background:var(--color-correct)}
ul.bullets.sm>li{font-size:15px;line-height:22px;padding-left:18px}
ul.bullets.sm>li::before{width:8px;height:8px;top:7px}

.prompt-box{
  background:var(--neutral-900);color:var(--neutral-100);border-radius:var(--radius-2xl);
  padding:var(--space-5) var(--space-6);font-size:15px;line-height:24px;font-weight:600;
  box-shadow:var(--shadow-raised);
}
.prompt-box .label{color:var(--cyan-300);margin-bottom:var(--space-3);display:block}
.prompt-box em{font-style:normal;color:var(--cyan-300);font-weight:var(--font-extrabold)}
.prompt-box b{color:var(--white);font-weight:var(--font-extrabold)}
.prompt-box.sm{font-size:13px;line-height:21px;padding:var(--space-4) var(--space-5)}

.tipno{
  width:56px;height:56px;flex:none;border-radius:var(--radius-lg);
  display:grid;place-items:center;background:var(--color-primary);color:var(--text-on-brand);
  font-size:24px;line-height:28px;font-weight:var(--font-black);
  box-shadow:var(--shadow-brand-sm);font-variant-numeric:tabular-nums;
}

/* ---- 6 · Cue — chỗ cần đọc to ------------------------------------------ */
.cue{
  font-weight:var(--font-black);color:var(--cyan-600);
  background:color-mix(in srgb,var(--cyan-400) 10%,transparent);
  border-bottom:3px solid var(--cyan-300);
  border-radius:var(--radius-xs);padding:0 2px;
  transition:background var(--motion-normal),border-color var(--motion-normal),
             color var(--motion-normal),box-shadow var(--motion-normal);
}
/* đang chờ nghe: nền nhấp nháy nhẹ — không thêm ký tự nào để khỏi lẫn với dấu câu */
.cue.armed{border-bottom-color:var(--cyan-500);animation:cueWait 1.6s ease-in-out infinite}
@keyframes cueWait{
  0%,100%{background:color-mix(in srgb,var(--cyan-400) 14%,transparent);box-shadow:none}
  50%{background:color-mix(in srgb,var(--cyan-400) 34%,transparent);box-shadow:var(--shadow-brand-sm)}
}
.cue.done{color:var(--text-secondary);background:transparent;border-bottom-color:var(--neutral-200)}
.cue.hit{animation:cueHit var(--motion-bounce) var(--ease-spring)}

/* Nút cũng có thể là cue: giữ nguyên dáng nút 3D, chỉ thêm dấu hiệu đang chờ nghe */
.btn.cue{
  background:var(--color-reward);color:var(--neutral-800);
  border-bottom:var(--button-depth) solid var(--color-reward-shadow);
  border-radius:var(--radius-xl);padding:0 var(--space-8);margin:0;
}
.btn.cue.armed{animation:btnWait 1.6s ease-in-out infinite}
.btn.cue.done{background:var(--color-reward);color:var(--neutral-800)}
@keyframes btnWait{
  0%,100%{box-shadow:0 0 0 0 rgba(255,200,0,.5)}
  50%{box-shadow:0 0 0 9px rgba(255,200,0,0)}
}
@keyframes cueHit{0%{transform:scale(1)}35%{transform:scale(1.1)}100%{transform:scale(1)}}

/* ---- 6b · Hiện dần theo bước + text animation ------------------------- */
.cuebank{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;pointer-events:none}
.hl{color:var(--cyan-500)}

/* trạng thái ẩn mặc định của mọi phần tử có bước */
[data-step]{opacity:0;pointer-events:none;
  transition:opacity var(--motion-slow) var(--ease-in-signature),
             transform var(--motion-slow) var(--ease-in-signature),
             filter var(--motion-slow) var(--ease-in-signature)}
[data-step].on{opacity:1;pointer-events:auto}

/* các kiểu vào — dùng qua data-anim, áp cho cả phần tử không có bước */
[data-anim]{opacity:0;
  transition:opacity var(--motion-slow) var(--ease-in-signature),
             transform var(--motion-slow) var(--ease-in-signature),
             filter var(--motion-slow) var(--ease-in-signature)}
[data-anim="type"]{transform:none}
[data-anim="up"]{transform:translateY(12px)}
[data-anim="left"]{transform:translateX(-18px)}
[data-anim="right"]{transform:translateX(18px)}
[data-anim="pop"]{transform:scale(.9)}
[data-anim="fade"]{transform:none}
[data-anim="blur"]{filter:blur(14px);opacity:0;transform:translateY(8px)}
[data-anim="stamp"]{transform:rotate(-6deg) scale(2.2);opacity:0}
[data-anim="wipe"]{clip-path:inset(0 100% 0 0);opacity:0}

/* khi đã hiện: về vị trí gốc, riêng pop/stamp nảy bằng ease-spring */
[data-anim].on,[data-anim].seen{opacity:1;filter:none}
[data-anim="up"].on,[data-anim="up"].seen,
[data-anim="left"].on,[data-anim="left"].seen,
[data-anim="right"].on,[data-anim="right"].seen,
[data-anim="blur"].on,[data-anim="blur"].seen{transform:none}
[data-anim="pop"].on,[data-anim="pop"].seen{transform:none;
  transition:opacity var(--motion-normal) linear,transform var(--motion-bounce) var(--ease-spring)}
[data-anim="stamp"].on,[data-anim="stamp"].seen{transform:rotate(-6deg) scale(1);
  transition:opacity var(--motion-fast) linear,transform var(--motion-bounce) var(--ease-spring)}
[data-anim="wipe"].on,[data-anim="wipe"].seen{clip-path:inset(0 0 0 0);
  transition:clip-path var(--motion-bounce) var(--ease-in-signature),opacity var(--motion-fast) linear}
[data-anim="blur"].on,[data-anim="blur"].seen{transition:opacity var(--motion-slow) linear,
  filter 700ms var(--ease-in-signature),transform 700ms var(--ease-in-signature)}

/* máy đánh chữ */
.typing{position:relative}
.typing::after{
  content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
  background:var(--cyan-500);animation:caret .7s steps(1) infinite
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- 7 · Meme ---------------------------------------------------------- */
.meme{position:relative;display:block;margin:0;line-height:0;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised);
  background:var(--neutral-100)}
.meme img{display:block;width:100%;height:auto}
.meme .mt,
.zoomwrap .canvas .mt{
  position:absolute;left:var(--x);top:var(--y);width:var(--w,30%);
  font-family:"Nunito",sans-serif;font-weight:var(--font-black);
  font-size:var(--fs,15px);line-height:1.12;color:var(--white);text-align:center;
  text-transform:uppercase;letter-spacing:.2px;
  -webkit-text-stroke:3px var(--neutral-900);paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.meme .mt.dark,
.zoomwrap .canvas .mt.dark{color:var(--neutral-900);-webkit-text-stroke:0;text-shadow:none;text-transform:none}
/* quầng trắng mỏng để chữ đen đọc được cả khi đè lên áo/hoạ tiết */
.zoomwrap .canvas .mt.dark{text-shadow:0 0 6px #fff,0 0 12px #fff,0 0 18px #fff}
.meme .mt.tl,
.zoomwrap .canvas .mt.tl{text-align:left}
.meme .mt.tn,
.zoomwrap .canvas .mt.tn{text-transform:none}
/* meme dạng cột dọc (chopper, expanding brain): khoá theo chiều cao
   để không tràn khỏi vùng slide — chữ đặt theo % nên vẫn bám đúng chỗ */
.meme.fit-h{width:auto;height:var(--mh,430px);max-width:none;justify-self:center}
.meme.fit-h img{height:100%;width:auto}
.meme-cap{font-size:13px;line-height:18px;font-weight:600;color:var(--text-secondary);
  text-align:center;margin-top:var(--space-2)}

/* ---- 8 · Nút 3D push-down (R001 — chỉ Button) -------------------------- */
.btn{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  font-size:15px;line-height:20px;font-weight:var(--font-extrabold);letter-spacing:.8px;
  text-transform:uppercase;color:var(--text-on-brand);
  background:var(--color-primary);border-bottom:var(--button-depth) solid var(--color-primary-shadow);
  border-radius:var(--radius-xl);padding:0 var(--space-6);height:50px;min-width:120px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  transition:transform var(--motion-fast),border-bottom-width var(--motion-fast);
}
.btn:active{transform:translateY(3px);border-bottom-width:1px}
.btn:focus-visible{outline:0;box-shadow:var(--focus-ring-shadow)}
.btn.lg{height:60px;font-size:17px;padding:0 var(--space-8)}
.btn.reward{background:var(--color-reward);color:var(--neutral-800);border-bottom-color:var(--color-reward-shadow)}
.btn svg{width:20px;height:20px}

/* ---- 9 · Slide đặc biệt ------------------------------------------------ */
/* Slide mở màn: ảnh meme phủ kín khung, rồi camera zoom vào khung "Problem
   solved" (góc dưới phải = gốc 75% 75%) để lộ ra câu hỏi. */
.zoomwrap{position:absolute;inset:0;overflow:hidden;background:var(--white)}
.zoomwrap .canvas{
  position:absolute;inset:0;
  transform:scale(1);transform-origin:75% 75%;
  transition:transform 2000ms var(--ease-in-signature);
}
.zoomwrap .canvas img{width:100%;height:100%;object-fit:cover;display:block}
.zoomwrap .canvas .mt{transition:opacity var(--motion-slow) var(--ease-in-signature)}
.zoomwrap.zoomed .canvas{transform:scale(2.2)}
.zoomwrap.zoomed .canvas .mt{opacity:0}

.teaseline{
  position:absolute;left:0;right:0;bottom:var(--space-16);text-align:center;
  font-size:24px;line-height:32px;font-weight:var(--font-extrabold);color:var(--text-heading);
}
.teaseline > *{
  display:inline-block;padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);
  background:var(--surface-soft);border:1px solid var(--border-soft);box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px);
}
.zoomwrap.zoomed .teaseline{opacity:0}

.zoomwrap .veil{position:absolute;inset:0;background:rgba(15,23,42,.84);opacity:0;
  transition:opacity 900ms 800ms var(--ease-in-signature);pointer-events:none}
.zoomwrap.zoomed .veil{opacity:1}

.zoomwrap .reveal{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-16)}
.zoomwrap .reveal[data-step]{transition:opacity 700ms 1500ms var(--ease-in-signature)}
.sticky{
  background:var(--yellow-200);color:var(--neutral-900);border-radius:var(--radius-sm);
  padding:var(--space-8);box-shadow:var(--shadow-modal);transform:rotate(-1.5deg);
  max-width:840px;text-align:center;
}

.videowrap{position:absolute;inset:0;background:var(--neutral-900);display:grid;place-items:center}
.videowrap video{max-width:100%;max-height:100%}
.playveil{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(15,23,42,.55);z-index:2}
.playveil.gone{display:none}

.ppap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:stretch}
.ppap .pane{
  border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-5);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);
  background:var(--surface-soft);border:1px solid var(--border-soft);box-shadow:var(--shadow-soft);
  min-height:296px;
}
.ppap .pane .big{font-size:48px;line-height:1}
.ppap .pane.win{background:var(--surface-premium);border-color:var(--yellow-200)}
.stamp{
  display:inline-block;border:var(--border-thick) solid var(--color-correct);color:var(--green-500);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);transform:rotate(-6deg);
  font-size:20px;line-height:28px;font-weight:var(--font-black);text-transform:uppercase;letter-spacing:.8px;
}

.spells{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.spell{display:flex;gap:var(--space-3);align-items:flex-start;
  background:var(--surface-soft);border:1px solid var(--border-soft);box-shadow:var(--shadow-soft-sm);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}
.spell .k{width:26px;height:26px;flex:none;border-radius:var(--radius-pill);background:var(--cyan-50);
  color:var(--cyan-600);display:grid;place-items:center;font-size:13px;line-height:1;font-weight:var(--font-black)}
.spell .v{font-size:15px;line-height:22px;font-weight:var(--font-bold);color:var(--text-primary)}

.praise{display:flex;flex-direction:column;gap:var(--space-4);align-items:center}
.praise img{width:100%;max-width:920px;height:auto;display:block;border-radius:var(--radius-lg);
  border:1px solid var(--border-default);box-shadow:var(--shadow-soft)}

/* ---- 10 · Lớp phủ: kịch bản đọc + phím tắt ----------------------------- */
.sheet{
  position:fixed;inset:0;z-index:var(--z-modal);background:var(--surface-overlay);
  display:none;place-items:center;padding:var(--space-8);
}
.sheet.on{display:grid}
.sheet .panel{
  background:var(--surface-card);border-radius:var(--radius-2xl);box-shadow:var(--shadow-modal);
  width:min(900px,100%);max-height:86vh;overflow:auto;padding:var(--space-8);
}
.script-row{display:flex;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--neutral-100)}
.script-row .n{width:40px;flex:none;font-size:13px;line-height:18px;font-weight:var(--font-black);
  color:var(--text-secondary);font-variant-numeric:tabular-nums}
.script-row .q{font-size:15px;line-height:22px;font-weight:var(--font-extrabold);color:var(--cyan-600)}
.script-row .w{font-size:13px;line-height:18px;font-weight:600;color:var(--text-secondary)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-4);align-items:center}
kbd{
  display:inline-block;min-width:32px;text-align:center;font-family:inherit;
  font-size:12px;line-height:1;font-weight:var(--font-extrabold);
  padding:8px var(--space-2);border-radius:var(--radius-sm);
  background:var(--neutral-100);border:1px solid var(--border-default);
  border-bottom:2px solid var(--neutral-300);color:var(--neutral-700);
}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  z-index:var(--z-toast);opacity:0;pointer-events:none;
  background:var(--neutral-900);color:var(--white);border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-5);font-size:14px;line-height:20px;font-weight:var(--font-bold);
  box-shadow:var(--shadow-modal);transition:opacity var(--motion-normal),transform var(--motion-normal)
}
.toast.on{opacity:1;transform:translateX(-50%)}