[hidden]{display:none!important}
/* Pika Math - layout: app một màn hình. Trang duyệt (home/chương trình/module) cuộn bình thường;
   màn học (player) khoá đúng 1 màn: thanh trên | bảng hình co giãn | bảng điều khiển với nút chính ghim đáy. */
/* ===== PK Design System: token chép từ design/pk-ds/project/tokens.css (luồng 6, 15/10/2026) =====
   Chỉ chép biến app dùng. Font Nunito nạp từ Google Fonts ở index.html (không chép @font-face). */
: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:#ffffff;
  --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); --surface-input:rgba(255,255,255,.4);
  --text-heading:var(--neutral-900); --text-primary:var(--neutral-800); --text-secondary:var(--neutral-500); --text-disabled:var(--neutral-400);
  --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-disabled:var(--neutral-100);
  --surface-overlay:rgba(0,0,0,.45); --surface-tinted:var(--cyan-50);
  --border-default:var(--neutral-200); --border-strong:var(--neutral-400); --border-focus:var(--cyan-400);
  --color-primary:var(--cyan-400); --color-correct:var(--green-400); --color-error:var(--red-400); --color-reward:var(--yellow-400);
  --color-primary-shadow:#3aabbc; --color-correct-shadow:#22a866; --color-reward-shadow:#e0a800;
  --state-hover:rgba(0,0,0,.04); --state-pressed:rgba(0,0,0,.08);
  --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-16:64px;
  --button-depth:4px; --screen-padding:16px; --min-touch-target:48px;
  --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; --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --safe-area-bottom:env(safe-area-inset-bottom,0px);
  --font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* trạng thái ô đáp án (golden-patterns §2): viền -400 · chữ -500/600 · nền màu-500 @8% */
  --ans-sel-bg:color-mix(in srgb,var(--cyan-500) 8%,transparent);
  --ans-ok-bg:color-mix(in srgb,var(--green-500) 8%,transparent);
  --ans-no-bg:color-mix(in srgb,var(--red-500) 8%,transparent);
  /* sai = viền nét đứt vàng nhạt + gợi ý, không đỏ, không ✗ (đổi UX chính 20/10, audit/31); dùng cho trạng thái sai của câu trả lời */
  --no-bd:#dfb955; --no-bg:#fff6d8; --no-tx:#7a4e0e;
  /* chữ cho trẻ: thân ≥ 17px */
  --kid-body:17px; --kid-q:24px;
  /* icon cho trạng thái đúng / sai (dùng làm mask, màu lấy từ currentColor) */
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
  --ico-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
}
/* Tên biến cũ của app (renderer, cảnh, explore dùng) trỏ về token PK. Luôn sáng: app ép data-theme="light". */
:root,:root:root[data-skin]{
  --bg:var(--surface-bg); --surface:var(--surface-card); --surface-2:var(--neutral-100); --ink:var(--text-heading); --muted:var(--text-secondary); --line:var(--neutral-200);
  --cam:var(--cyan-500); --cam-ink:var(--white); --cam-soft:var(--cyan-50);
  --sky:var(--blue-400); --sky-soft:var(--blue-50); --leaf:var(--green-500); --leaf-soft:var(--green-50);
  --berry:var(--purple-500); --berry-soft:var(--purple-50); --sun:var(--yellow-400); --bad:var(--red-400); --bad-soft:var(--ans-no-bg);
  --f-display:var(--font-family); --f-body:var(--font-family);
  --shadow:var(--shadow-soft);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text-primary);font-family:var(--font-family);font-size:var(--kid-body);font-weight:700;line-height:1.5;-webkit-tap-highlight-color:transparent}
#root{height:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--border-focus);outline-offset:2px;box-shadow:var(--focus-ring-shadow)}
h1,h2,h3,h4{text-wrap:balance}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sm{font-size:13px}.muted{color:var(--muted)}
.pspace{flex:1}

/* ---------- controls ---------- */
.btn{border:0;border-radius:var(--radius-lg);padding:12px 22px;font-weight:800;font-size:var(--kid-body);letter-spacing:.5px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
/* PK Button: 3D (viền đáy 4px màu bóng), bấm thì lún xuống */
.btn.primary{background:var(--color-primary);color:var(--text-on-brand);box-shadow:0 var(--button-depth) 0 var(--color-primary-shadow);text-transform:uppercase}
.btn.primary:not(:disabled):hover{filter:brightness(1.04)}
.btn.primary:not(:disabled):active{transform:translateY(var(--button-depth));box-shadow:0 0 0 var(--color-primary-shadow)}
.btn:disabled,.btn.primary:disabled{background:var(--surface-disabled);color:var(--text-disabled);box-shadow:none;opacity:1}
.btn.ghost{background:var(--surface-card);border:2px solid var(--border-default);color:var(--text-heading);box-shadow:0 var(--button-depth) 0 var(--border-default)}
.btn.ghost:not(:disabled):active{transform:translateY(var(--button-depth));box-shadow:none}
.btn.ghost:disabled{border-color:var(--border-default);background:var(--surface-card);color:var(--text-disabled);box-shadow:none;opacity:.6}
.btn.wide{width:100%}
.iconbtn{width:48px;height:48px;flex:none;border-radius:12px;border:0;background:transparent;display:grid;place-items:center}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.iconbtn[aria-pressed="true"]{background:var(--cyan-50);color:var(--cyan-600)}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600}
.pill.ai{border-color:var(--berry);padding:4px 14px 4px 4px}
.av{width:30px;height:30px;display:inline-block;flex:none}.av svg{width:100%;height:100%}
.chip{border:2px solid var(--border-default);background:var(--surface-card);border-radius:var(--radius-pill);padding:8px 16px;font-weight:700;font-size:15px;min-height:48px;color:var(--text-heading)}
.chip:hover{border-color:var(--cyan-400)}
.chip.strong{border-color:var(--cyan-400);background:var(--ans-sel-bg);color:var(--cyan-600)}
.chip.ai{border-color:var(--berry);background:var(--berry-soft)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--leaf-soft);color:var(--leaf);white-space:nowrap}
.c-leaf{--pc:var(--leaf);--pcs:var(--leaf-soft)} .c-sky{--pc:var(--sky);--pcs:var(--sky-soft)} .c-cam{--pc:var(--cam);--pcs:var(--cam-soft)}

/* ---------- browse pages ---------- */
.page{min-height:100%;display:flex;flex-direction:column}
.hbar,.tbar{display:flex;align-items:center;gap:10px;padding:10px max(16px,3vw);background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.logo{width:34px;height:34px;display:inline-flex;align-items:center}.logo svg,.logo img{width:100%;height:auto}
.brand{font-family:var(--f-display);font-weight:800;font-size:24px;letter-spacing:-.01em;line-height:1}
.brand b{color:var(--cam)}
.brand-img{display:inline-flex;align-items:center;line-height:0}.brand-img img{display:block;height:34px;width:auto}
.tt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tt b{font-family:var(--f-display);font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hmain{width:100%;max-width:1120px;margin:0 auto;padding:28px 16px 48px;display:flex;flex-direction:column;gap:28px}
.hello{display:flex;gap:16px;align-items:center}
.hello .avatar{width:72px;height:72px;flex:none}.hello .avatar svg{width:100%;height:100%}
.hello h1{font-family:var(--f-display);font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0}
.hello p{margin:4px 0 0;color:var(--muted)}
.progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prog{text-align:left;border:2px solid transparent;background:var(--pcs);border-radius:24px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:8px;min-height:230px;position:relative;transition:transform .15s,border-color .15s}
.prog:hover{transform:translateY(-3px);border-color:var(--pc)}
.prog.last{border-color:var(--pc)}
.ptag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pc)}
.prog .pname{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,2.8vw,34px);line-height:1.05}
.paud{color:var(--ink);opacity:.8;font-size:14px;line-height:1.45}
.pfoot{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.pfoot span{background:var(--surface);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}
.pfoot .cont{background:var(--pc);color:var(--surface)}
.try h2{font-family:var(--f-display);font-size:22px;margin:0 0 10px}
.trys{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.trow{display:flex;gap:12px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.trow:hover{border-color:var(--pc)}
.trow b{display:block}.trow small{color:var(--muted)}
.tdot{width:14px;height:14px;border-radius:50%;background:var(--pc);flex:none}

.grades{display:flex;gap:8px;overflow-x:auto;padding:12px max(16px,3vw);background:var(--surface);border-bottom:1px solid var(--line);scrollbar-width:thin}
.grades button{flex:none;border:2px solid var(--line);background:var(--surface);border-radius:16px;padding:6px 14px;min-height:48px;display:flex;flex-direction:column;align-items:center;min-width:76px;line-height:1.1}
.grades button b{font-family:var(--f-display);font-size:24px}
.grades button small{font-size:11px;color:var(--muted);white-space:nowrap}
.grades button[aria-current="true"]{border-color:var(--pc);background:var(--pcs)}
.strands{width:100%;max-width:1200px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:26px}
.strand h2{font-family:var(--f-display);font-size:21px;margin:0 0 10px}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.mod{text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:4px;min-height:150px}
.mod:hover{border-color:var(--pc)}
.mod.play{border-color:var(--pc);box-shadow:var(--shadow)}
.mod .mid{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.mod b{font-family:var(--f-display);font-size:19px;line-height:1.2}
.mod small{color:var(--muted);font-size:13px;line-height:1.4}
.mfoot{margin-top:auto;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding-top:8px;align-items:center}

.mgrid{width:100%;max-width:1200px;margin:0 auto;padding:20px 16px 40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.mleft,.mright{display:flex;flex-direction:column;gap:14px;min-width:0}
.mblk{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.mblk.ex{background:var(--pcs);border-color:transparent}
.mblk p{margin:0}
.objs-l{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.path li{display:flex;gap:10px;align-items:flex-start}
.path span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--pcs);color:var(--pc);display:grid;place-items:center;font-family:var(--f-display);font-weight:800}
.methods{display:flex;flex-direction:column;gap:10px}
.meth{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 14px}
.meth[aria-checked="true"]{border-color:var(--cam);background:var(--cam-soft)}
.meth .mk{flex:none;min-width:44px;height:44px;padding:0 8px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px}
.meth.std .mk{font-size:14px}
.meth[aria-checked="true"] .mk{background:var(--cam);color:var(--cam-ink)}
.meth .mt{display:flex;flex-direction:column;min-width:0;gap:2px}
.meth b{font-family:var(--f-display);font-size:18px;line-height:1.2}
.meth small{color:var(--muted);font-size:12px}
.meth .mw{font-size:13px;line-height:1.45;color:var(--ink);opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lessons-l{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px;max-height:340px;overflow:auto}
.soon{background:var(--surface);border:2px dashed var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:4px}
.soon span{color:var(--muted);font-size:14px}

.lrow{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:8px;border-radius:12px}
.lrow:hover{background:var(--surface-2)}
.lrow.cur{box-shadow:0 0 0 2px var(--cam) inset}
.ldot{flex:none;min-width:34px;height:34px;padding:0 6px;border-radius:17px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:14px;border:2px solid var(--line);color:var(--muted)}
.ldot.mastered,.ldot.learning{background:var(--leaf);border-color:var(--leaf);color:var(--surface)}
.ldot.review_due{background:var(--sun);border-color:var(--sun);color:var(--cam-ink)}
.ltx{min-width:0;font-weight:600;font-size:15px;line-height:1.25}
.ltx small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.lst{margin-left:auto;color:var(--sun);font-size:13px;letter-spacing:1px}
.lgroup{margin-bottom:14px}
.lgroup h4{font-family:var(--f-display);font-size:15px;margin:0 4px}
.lgroup p{margin:0 4px 6px;font-size:13px;color:var(--muted)}

/* ================= PLAYER: một màn, không cuộn ================= */
[data-screen="lesson"]{overflow:hidden}
.player{height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,36vw,460px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar" "board panel";position:relative;overflow:hidden}
.pbar{grid-area:bar;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);min-width:0}
.ptitle{display:flex;align-items:center;gap:8px;border:0;background:none;padding:6px 8px;border-radius:12px;min-width:0;max-width:44vw;min-height:48px}
.ptitle:hover{background:var(--surface-2)}
.pcode{font-weight:800;color:var(--cyan-600);font-size:15px;white-space:nowrap}
.pname{font-weight:800;font-size:var(--kid-body);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round}
.pprog{display:flex;align-items:center;gap:10px;min-width:0}
.pdots{display:flex;gap:4px}
.pdots i{width:16px;height:7px;border-radius:4px;background:var(--line)}
.pdots i.on{background:var(--cyan-400);width:26px}
.pdots i.ok{background:var(--cyan-300)}
.ptxt{font-size:15px;font-weight:700;color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex:none}
.seg button{border:0;background:none;border-radius:9px;min-width:40px;height:36px;padding:0 10px;font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--muted)}
.seg button[aria-checked="true"]{background:var(--cam);color:var(--cam-ink)}

.pboard{grid-area:board;position:relative;overflow:hidden;display:grid;place-items:center;margin:12px 0 12px 12px;border-radius:var(--radius-2xl);background:var(--surface-card);border:1px solid var(--border-default);box-shadow:var(--shadow-soft);
  --strip:52px;padding:var(--strip) 0 0;min-height:0} /* dải trên cùng dành cho thanh chặng / nhãn chỉ dẫn: không bao giờ đè lên cảnh */
/* fitInto (dom.js) căn hình to hơn bảng vào giữa CẢ bảng (tính cả dải trên) bằng translate trong style.
   Bù lại nửa dải để hình nằm giữa phần dưới dải. Thuộc tính translate cộng thêm, không đè transform của JS. */
.pboard>.fit[style*="translate("]{translate:0 calc(var(--strip) / 2)}
.fit{transform-origin:center center;width:max-content;max-width:none;display:flex;justify-content:center;transition:transform .2s ease}

.ppanel{grid-area:panel;display:flex;flex-direction:column;gap:12px;padding:12px var(--screen-padding);min-height:0;overflow:hidden}
.coach{display:flex;gap:10px;align-items:flex-start}
.coach .avatar{width:52px;height:52px;flex:none}.coach .avatar svg{width:100%;height:100%;display:block}
.coach.talking .avatar svg{animation:bob .6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-3px) rotate(-2deg)}}
.bubble{position:relative;background:var(--surface-card);border:2px solid var(--border-default);border-radius:var(--radius-xl);padding:10px 14px;flex:1;min-width:0;font-size:var(--kid-body);font-weight:700;line-height:1.45;color:var(--text-primary)}
.bubble::before{content:"";position:absolute;left:-8px;top:18px;width:12px;height:12px;background:var(--surface-card);border-left:2px solid var(--border-default);border-bottom:2px solid var(--border-default);transform:rotate(45deg)}
.who{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--orange-500);font-size:13px;line-height:1;margin-bottom:4px}
.phase{font-size:11px;line-height:1;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-secondary)}
.say{margin:0}.say b{color:var(--cyan-600)}
/* phản hồi trong bóng thoại (golden §2 + LessonPlayer): đúng = xanh lá 8%, sai = đỏ nhạt 8%, tiêu đề màu -500 kèm icon; thân chữ giữ màu thường */
.coach[data-tone="ok"] .bubble{background:linear-gradient(var(--ans-ok-bg),var(--ans-ok-bg)),var(--surface-card);border-color:var(--green-400)}
.coach[data-tone="ok"] .bubble::before{background:var(--surface-card);border-color:var(--green-400)}
.coach[data-tone="no"] .bubble{background:var(--no-bg);border-color:var(--no-bd);border-style:dashed}
.coach[data-tone="no"] .bubble::before{background:var(--no-bg);border-color:var(--no-bd);border-style:dashed}
.coach[data-tone] .say b{color:inherit}
.fbt{display:flex;align-items:center;gap:8px;font-size:var(--kid-body);font-weight:800;line-height:1.25;margin-bottom:4px;color:var(--text-heading)}
.coach[data-tone="ok"] .say .fbt{color:var(--green-500)}
.coach[data-tone="no"] .say .fbt{color:var(--no-tx)}
.coach[data-tone] .fbt::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;background:currentColor}
.coach[data-tone="ok"] .fbt::before{--ico:var(--ico-check)}
.coach[data-tone="no"] .fbt::before{content:none;display:none}

/* cột điều khiển: đề + đáp án đứng ngay đầu cột (gần bảng hình), lời cô Cam ngay dưới, nút chính ghim đáy.
   Phần đáp án tự cuộn bên trong nếu thiếu chỗ, không bao giờ trượt xuống dưới nút chính. */
.pmain{order:1;display:flex;flex-direction:column;gap:12px;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.pmain:empty{display:none}
.ppanel>.coach{order:2;flex:none}
.ppanel>.pfb{order:3;flex:none}
.ppanel>.pact{order:4}
.q{font-weight:900;font-size:var(--kid-q);line-height:1.3;margin:0;color:var(--text-heading)}
.opts{display:grid;gap:10px}
.opts.n2,.opts.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.long{grid-template-columns:minmax(0,1fr)}
.opt{position:relative;min-height:64px;padding:10px 14px;border-radius:var(--radius-2xl);border:2px solid var(--border-default);background:var(--surface-card);color:var(--text-heading);font-weight:800;font-size:var(--kid-body);line-height:1.3;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast);box-shadow:var(--shadow-soft-sm)}
.opts.long .opt{justify-content:flex-start;text-align:left;padding-left:18px}
/* số 1/2/3 ở góc nút: bỏ (trùng với số đáp án, trẻ lẫn) */
.opt kbd{display:none!important}
.opt.num{font-weight:900;font-size:32px}
.opt:hover:not(:disabled){border-color:var(--cyan-300)}
.opt:active:not(:disabled){transform:scale(.98)}
/* sai (đảo chốt 15/10, đổi UX chính 20/10): viền nét đứt vàng nhạt, không đỏ, không ✗, không rung, không mờ */
.opt.wrong,.opt.wrong:disabled{border-color:var(--no-bd);border-style:dashed;background:var(--no-bg);color:var(--no-tx);box-shadow:none;opacity:1;animation:none}
.opt.right,.opt.right:disabled{border-color:var(--green-400);background:var(--ans-ok-bg);color:var(--green-500);box-shadow:none;opacity:1}
.opt:disabled:not(.right):not(.wrong){opacity:.55}
.opt.right::after{content:"";position:absolute;top:8px;right:8px;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.opt.right::after{--ico:var(--ico-check)}.opt.wrong::after{content:none;display:none}
.oshp{width:44px;height:44px;display:block}.oshp svg{width:100%;height:100%}

.numwrap{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.numout{position:relative;height:64px;border-radius:var(--radius-2xl);border:3px dashed var(--cyan-400);background:var(--cyan-50);display:grid;place-items:center;font-weight:900;font-size:36px;font-variant-numeric:tabular-nums;color:var(--text-heading)}
.numout.empty,.numout:empty{color:var(--cyan-500)}
.numout.right{border-style:solid;border-color:var(--green-400);background:var(--ans-ok-bg);color:var(--green-500)}
/* sai: viền nét đứt vàng nhạt, không icon, KHÔNG rung */
.numout.wrong{border-style:dashed;border-color:var(--no-bd);background:var(--no-bg);color:var(--no-tx);animation:none}
.numout.right::after{content:"";position:absolute;right:14px;top:50%;margin-top:-12px;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.numout.right::after{--ico:var(--ico-check)}.numout.wrong::after{content:none;display:none}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.keypad button{height:56px;border-radius:var(--radius-xl);border:2px solid var(--border-default);background:var(--surface-card);color:var(--text-heading);font-weight:900;font-size:26px;box-shadow:var(--shadow-soft-sm);transition:transform var(--motion-fast)}
.keypad button:active:not(:disabled){transform:scale(.96);border-color:var(--cyan-400);background:var(--ans-sel-bg)}
.keypad button.dim{color:var(--text-secondary);font-size:22px}
.keypad button:disabled{opacity:.4}

.stem{font-weight:800;font-size:20px;line-height:2.4;margin:0;color:var(--text-heading)}
.blank{display:inline-flex;gap:6px;vertical-align:middle;padding:4px;border-radius:var(--radius-lg);border:2px dashed var(--cyan-400);margin:0 4px;flex-wrap:wrap}
.blank button{border:2px solid var(--border-default);border-radius:var(--radius-md);padding:0 12px;min-width:48px;height:48px;background:var(--surface-card);color:var(--text-heading);font-weight:900;font-size:20px}
.blank button[aria-checked="true"]{border-color:var(--cyan-400);background:var(--ans-sel-bg);color:var(--cyan-600)}
.blank.right{border-style:solid;border-color:var(--green-400);background:var(--ans-ok-bg)}
.blank.wrong{border-style:dashed;border-color:var(--no-bd);background:var(--no-bg);animation:none}

.pfb:empty{display:none}
.fbx{display:flex;gap:8px;flex-wrap:wrap}
.meta{margin:0;font-size:13px;color:var(--text-secondary)}

/* hàng nút chính: chân cố định của cột, KHÔNG phủ lên bàn phím (trước đây sticky đè hàng phím 0) */
.ppanel>.nexthint{order:4;margin-top:auto!important;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:8px 12px;border-radius:var(--radius-xl);background:var(--surface-primary);color:var(--text-heading);font-size:15px;line-height:20px;font-weight:var(--font-extrabold);animation:hintIn .35s var(--ease-spring) both}
.ppanel>.nexthint[hidden]{display:none}
.ppanel>.nexthint:not([hidden])+.pact{margin-top:0}
.nexthint svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--cyan-600);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:hintBob .9s ease-in-out infinite}
.nexthint b{color:var(--cyan-600)}
.btn.primary.ready{animation:readyPulse 1.2s ease-in-out infinite}
@keyframes hintIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hintBob{50%{transform:translateY(4px)}}
/* nháy sáng, không dịch chuyển: nút đứng yên để bé bấm trúng */
@keyframes readyPulse{0%,100%{filter:none}50%{filter:brightness(1.12) saturate(1.15)}}
@media (prefers-reduced-motion:reduce){.btn.primary.ready,.nexthint,.nexthint svg{animation:none}}
.pact{flex:none;display:flex;gap:10px;padding:4px 0 calc(var(--button-depth) + var(--safe-area-bottom));margin-top:auto;background:none}
.pact .btn.primary{flex:1;min-height:60px}
.pact .btn.ghost{min-height:60px;padding:0 18px}

.palette{display:flex;gap:8px;flex-wrap:wrap}
.palette button{width:56px;height:56px;border-radius:14px;border:2px solid var(--line);background:var(--surface);padding:6px}
.brow{display:flex;gap:8px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;gap:8px}
.stepper label{font-weight:600;min-width:104px}
.stepper output{font-family:var(--f-display);font-weight:800;font-size:26px;min-width:48px;text-align:center}
.stepper button[data-a]{width:48px;height:48px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:20px}

.done{display:flex;flex-direction:column;gap:6px}
.done .st{font-size:44px;letter-spacing:6px;color:var(--yellow-400);line-height:1;text-shadow:0 2px 0 var(--yellow-500)}
.done .st .off{display:none}
/* "Số lần chọn chưa đúng" là số liệu cho người lớn: không hiện trên màn của trẻ */
.pmain.t-done ~ .pfb .meta{display:none}
.done h2{font-size:24px;font-weight:900;margin:0;line-height:1.2;color:var(--text-heading)}
.slogan{font-weight:800;font-size:20px;color:var(--cyan-600);margin:0;line-height:1.3}
.cap{margin:0;font-size:var(--kid-body)}.cap b{color:var(--cyan-600)}
.reward{display:flex;flex-direction:column;align-items:center;gap:16px;width:600px}
.bigkey{width:170px}.bigkey svg{width:100%;height:auto;display:block}
.pop{animation:pop .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{0%{transform:scale(.3) rotate(-35deg);opacity:0}100%{transform:none;opacity:1}}
.memart{width:100%;display:flex;justify-content:center;transition:filter .7s,opacity .7s}
.shut{filter:blur(16px);opacity:.08}

/* sheets */
.scrim{position:absolute;inset:0;background:var(--surface-overlay);z-index:30}
.sheet{position:absolute;z-index:31;background:var(--surface-card);display:flex;flex-direction:column;box-shadow:var(--shadow-modal)}
.sheet.side{top:0;bottom:0;left:0;width:min(420px,92vw);border-radius:0 24px 24px 0}
.sheet.chat{right:12px;bottom:12px;width:min(400px,calc(100% - 24px));height:min(560px,calc(100% - 24px));border-radius:22px;border:2px solid var(--berry)}
.sheet header{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.sheet header h3{font-size:20px;font-weight:800;margin:0;flex:1;line-height:1.2;color:var(--text-heading)}
.sheet header h3 small{display:block;font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:500}
.sheet header .av{width:40px;height:40px}
.sbody{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.sbody > p{margin:0 0 10px}
.msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.m{max-width:85%;padding:8px 12px;border-radius:14px;font-size:15px;white-space:pre-wrap}
.m.t{background:var(--berry-soft);align-self:flex-start;border-bottom-left-radius:4px}
.m.s{background:var(--cam-soft);align-self:flex-end;border-bottom-right-radius:4px}
.sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 8px}
.sugg .chip{min-height:48px;padding:4px 14px;font-size:15px}
.sheet form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.sheet input{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2);color:var(--ink);font:inherit}

/* ---------- framework ---------- */
.fw-tabs,.fw-tabs2{display:flex;gap:6px;flex-wrap:wrap}
.fw-tabs{padding:10px max(16px,3vw);background:var(--surface);border-bottom:1px solid var(--line)}
.fw-tabs button,.fw-tabs2 button{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:700}
.fw-tabs button[aria-current="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.fw-tabs2 button[aria-current="true"]{background:var(--pcs);border-color:var(--pc)}
.fw-main{width:100%;max-width:1320px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:14px}
.fw-std{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.fw-std b{font-family:var(--f-display);font-size:19px}
.fw-std p{margin:4px 0}
.flow{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:8px 0 0;list-style:none;counter-reset:f}
.flow li{counter-increment:f;font-size:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:4px 10px;max-width:420px}
.flow li::before{content:counter(f) ". ";font-weight:800;color:var(--cam)}
.fw-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fw-filters select,.fw-filters input{height:42px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);padding:0 10px;font:inherit;max-width:100%}
.fw-filters input{flex:1 1 200px;min-width:0}
.cnt{font-size:13px;font-weight:700;color:var(--muted)}
.tblwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px}
table.fw{border-collapse:collapse;width:100%;min-width:900px;font-size:14px}
.fw th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px}
.fw td{padding:10px;border-top:1px solid var(--line);vertical-align:top}
.fw tr.r{cursor:pointer}.fw tr.r:hover td{background:var(--surface-2)}
.fw tr.open td{background:var(--cam-soft)}
.fw .det td{background:var(--surface-2)}
.detg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.detg ul,.detg ol{margin:0 0 8px;padding-left:18px}
.detg p{margin:0 0 8px}
.clgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.cl{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px}
.cl h3{font-family:var(--f-display);font-size:19px;margin:0;line-height:1.2}
.cl p{margin:0}
.pick{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:4px}
.pick small{color:var(--muted)}
.pick details summary{cursor:pointer;font-weight:600;color:var(--sky);font-size:14px}
.pick details ul{padding-left:18px;margin:6px 0}
.pick a{color:var(--sky)}
.err{padding:40px 16px;align-items:flex-start;gap:12px}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .pdots{display:none} }
@media (max-width:900px){
  .progs{grid-template-columns:minmax(0,1fr)} .prog{min-height:0}
  .mgrid{grid-template-columns:minmax(0,1fr)}
  .detg{grid-template-columns:minmax(0,1fr)}
}
/* iPad dọc + điện thoại: bảng trên, điều khiển dưới */
@media (max-aspect-ratio:1/1), (max-width:760px){
  /* Luồng 7 (audit/14 C3): bảng hình co trước (tối thiểu 150-240px theo chiều cao), cột điều khiển KHÔNG bao giờ đẩy bàn phím / nút ra khỏi màn:
     bàn phím + nút chính giữ nguyên cỡ, lời cô cuộn trong bóng thoại riêng. Chiều cao tối thiểu thật sự ở 360x640. */
  .player{--board-min:clamp(150px,24dvh,240px);--bar-h:66px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(var(--board-min),1fr) auto;grid-template-areas:"bar" "board" "panel"}
  .pboard{margin:6px 2px 0;--strip:48px}
  .ppanel{max-height:calc(100vh - var(--bar-h) - var(--board-min) - 8px);max-height:calc(100dvh - var(--bar-h) - var(--board-min) - 8px);padding:10px var(--screen-padding) 6px;gap:8px}
  /* lời cô dài (nấc nhận hộ có lời giải) tự cuộn trong bóng thoại: phần đáp án luôn được ưu tiên chỗ */
  .ppanel>.coach{flex:1 20 auto;min-height:76px;align-items:stretch} /* co nhanh gấp 20 lần phần đáp án: đáp án chỉ cuộn khi lời cô đã xuống mức tối thiểu */
  .ppanel>.coach .avatar{align-self:flex-start}
  .ppanel>.coach .bubble{display:flex;flex-direction:column;min-height:0;overflow:visible}
  .ppanel>.coach .bubble .who{flex:none}
  .ppanel>.coach .bubble .say{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .ppanel>.pmain{flex-shrink:.01} /* gần như không co: thiếu chỗ thì lời cô co trước; phím và nút chính chỉ cuộn khi lời cô đã xuống mức tối thiểu */
  .ppanel>.pfb{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
  .ppanel>.pfb .pwait{margin:0;font-size:14px}
  .ppanel>.pfb .fbx .btn,.ppanel>.pfb .fbx .chip{min-height:48px}
  .ptitle{max-width:none;flex:1}
  .stagebar:not(.casebar){display:none} /* thanh "Đời thực - Hình - Phép tính" đè chip biểu thức trên cảnh; trẻ không cần */
  .pboard .bnote{left:12px;right:auto}
  .player.case .cdot{display:none} /* điện thoại: thanh phá án chỉ giữ nút Sổ thám tử, chừa chỗ cho nhãn chỉ dẫn */
  .player.case .pboard .bnote{left:auto;right:12px;max-width:calc(100% - 168px)}
  .player.case .pboard.pboard{--strip:58px}
  .opts{gap:8px}
  .coach .avatar{width:40px;height:40px}
  .phase{display:none}
  .q{font-size:20px}
  /* bàn phím 4 cột, 3 hàng: 1-9 bên trái, cột phải là xoá / 0 / dấu. Cả 12 phím luôn nằm trong vùng nhìn thấy */
  .keypad{grid-template-columns:repeat(4,minmax(0,1fr))}
  .keypad button:nth-child(-n+3){grid-row:1}
  .keypad button:nth-child(n+4):nth-child(-n+6){grid-row:2}
  .keypad button:nth-child(n+7):nth-child(-n+9){grid-row:3}
  .keypad button:nth-child(10){grid-row:1;grid-column:4}
  .keypad button:nth-child(11){grid-row:2;grid-column:4}
  .keypad button:nth-child(12){grid-row:3;grid-column:4}
  .keypad{gap:6px}
  .keypad button{height:clamp(48px,6.6dvh,52px)}
  /* đề và ô trả lời trên cùng một hàng: "46 + 38 = ?  [ ? ]" */
  .pmain.t-num{display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:center;column-gap:12px;row-gap:10px}
  .pmain.t-num .numwrap{display:contents}
  .pmain.t-num .q{grid-column:1}
  .pmain.t-num .numout{grid-column:2;grid-row:1;height:clamp(48px,7dvh,60px)}
  .pmain.t-num .keypad{grid-column:1/-1}
  .pmain.t-num:not(:has(.q)) .numout{grid-column:1/-1}
}
/* điện thoại thấp (360x640): bàn phím 2 hàng x 6 cột (1-6 / 7 8 9 0 xoá dấu) để phím vẫn >= 48px mà lời cô và nút "Cô làm cùng con" còn chỗ */
@media (max-aspect-ratio:1/1) and (max-height:720px), (max-width:760px) and (max-height:720px){
  .pmain .keypad{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pmain .keypad button:nth-child(-n+6){grid-row:1;grid-column:auto}
  .pmain .keypad button:nth-child(n+7):nth-child(-n+9){grid-row:2;grid-column:auto}
  .pmain .keypad button:nth-child(11){grid-row:2;grid-column:4}
  .pmain .keypad button:nth-child(10){grid-row:2;grid-column:5}
  .pmain .keypad button:nth-child(12){grid-row:2;grid-column:6}
  .pmain .keypad button{height:48px;font-size:24px}
}
@media (max-width:600px){
  .pprog,.pbar .pspace{display:none}
  .pcode{display:none}
  .pill.ai{padding:4px}.pill.ai{font-size:0;gap:0}
  .hello .avatar{width:56px;height:56px}
}
/* iPad ngang 1024×768: giữ cỡ chạm (trước đây thu nút đáp án còn 56, phím còn 46) */
@media (max-height:820px) and (min-aspect-ratio:1/1){
  .coach .avatar{width:44px;height:44px}
  .keypad button{height:52px}
  .numout{height:60px;font-size:34px}
  .opt{min-height:64px}
  .pact .btn{min-height:56px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Bảng: thanh cầu nối, ghi chú chỉ dẫn, pháo giấy ===== */
.stagebar{position:absolute;top:8px;left:12px;z-index:3;display:flex;align-items:center;gap:4px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:4px 6px}
.stg{font-size:13px;line-height:1;font-weight:700;padding:6px 10px;border-radius:var(--radius-pill);color:var(--text-secondary);white-space:nowrap}
.stg.past{color:var(--cyan-600)}
.stg.on{background:var(--cyan-400);color:var(--text-on-brand)}
.stg-a{width:10px;height:2px;background:var(--line);display:block}
/* nhãn chỉ dẫn trên bảng: nằm trong dải trên cùng (không đè cảnh), không chặn chạm (trước đây đè nút Gỡ trên điện thoại) */
.bnote{position:absolute;top:8px;right:12px;z-index:3;max-width:calc(100% - 24px);font-size:15px;line-height:1.2;font-weight:800;padding:8px 14px;border-radius:var(--radius-pill);background:var(--surface-card);color:var(--cyan-600);border:2px solid var(--cyan-400);box-shadow:var(--shadow-brand-sm);animation:popin .3s ease-out;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnote.lv2{color:var(--orange-500);border-color:var(--orange-400);box-shadow:var(--shadow-soft)}
.bnote.lv3{color:var(--cyan-600);border-color:var(--cyan-400)}
@keyframes popin{from{transform:scale(.6);opacity:0}}
/* pháo giấy: tắt (hồ sơ kiddy cấm phần thưởng bay kiểu pháo giấy) */
.fx{display:none!important}
.fx i{position:absolute;width:10px;height:14px;border-radius:3px;animation:conf 1.1s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 120px)) rotate(540deg);opacity:0}}
.fit.enter{animation:enter .45s ease-out}
.fit.flash{animation:flash .35s ease-out}
@keyframes enter{from{opacity:0;filter:blur(4px)}}
@keyframes flash{from{opacity:.4}}
.coach.yay .avatar svg{animation:yay .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes yay{40%{transform:translateY(-10px) rotate(-6deg) scale(1.08)}}
/* sau khi sai: chỉ chặn bấm (cooldown 1,5 s), KHÔNG làm mờ cả bảng đáp án */
.pmain.busy{pointer-events:none}
.opt.picked{border-color:var(--cyan-400);background:var(--ans-sel-bg);color:var(--cyan-600);box-shadow:var(--shadow-brand-sm)}
.tapcount{display:flex;align-items:center;gap:12px}
.tapcount .numout{width:110px;flex:none;border-style:solid}
.tapcount span{font-weight:800;font-size:20px;color:var(--text-heading)}
.say .why{display:block;margin-top:6px;font-size:var(--kid-body)}


.bridges{display:flex;flex-direction:column;gap:10px}
.brg{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.brg b{font-family:var(--f-display);font-size:16px}
.brg span{font-size:14px}
.brg small{font-size:12px;color:var(--muted)}
.fw-std p{margin:6px 0}
.act-tip{margin:0;font-size:var(--kid-body);color:var(--text-secondary)}
.cuts{display:flex;flex-wrap:wrap;gap:8px}
.cuts .chip[aria-checked="true"]{border-color:var(--cam);background:var(--cam);color:var(--cam-ink)}
.seg button{white-space:nowrap}
.meth.rme .mk{font-size:13px;background:var(--leaf-soft);color:var(--leaf)}
.meth.rme[aria-checked="true"] .mk{background:var(--leaf);color:#fff}
/* 2 cảnh đời thực (RME) của module */
.brg .sn{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:999px;background:var(--cam);color:#2A1605;font-size:12px;font-family:var(--f-body);font-weight:700;vertical-align:2px}
.brg small b{font-family:var(--f-body);font-size:12px;color:var(--ink)}
.rmedet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.rmedet ol{margin:0;padding-left:18px}
@media (max-width:820px){.rmedet{grid-template-columns:minmax(0,1fr)}}

/* ---------- Bản đồ phiêu lưu (lộ trình cho trẻ) ---------- */
.vtog{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.vtog button{display:flex;align-items:center;gap:6px;border:0;background:none;border-radius:999px;padding:7px 14px;font-weight:700;color:var(--muted);min-height:48px}
.vtog button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vtog button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
@media (max-width:640px){.vtog button span{display:none}}
.prog-page.mapview{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.grades.slim{padding:8px max(16px,3vw);justify-content:center}
.grades.slim button{min-width:52px;min-height:48px;padding:4px 10px}
.grades.slim button b{font-size:22px}
.rm-host{flex:1;min-height:0;container-type:size;display:grid;place-items:center;padding:10px 14px 14px}
.rmap{position:relative;width:min(100cqw,calc(100cqh * var(--ar)));max-width:1400px;user-select:none;-webkit-user-select:none}
.rmap-art{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 18px rgba(23,50,58,.10))}
.rm-cloud{animation:rmCloud var(--d,40s) linear infinite;animation-delay:var(--o,0s)}
@keyframes rmCloud{from{transform:translateX(-160px)}to{transform:translateX(1100px)}}
.rm-shine{animation:rmShine 1.8s ease-in-out infinite}
@keyframes rmShine{0%,100%{opacity:.2}50%{opacity:1}}
.rm-node{position:absolute;transform:translate(-50%,-50%);width:clamp(48px,7.2cqw,76px);aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;z-index:2}
.rm-stone{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:#fff;border:4px solid #C9B48F;box-shadow:0 5px 0 #B49C74,0 8px 14px rgba(0,0,0,.12);transition:transform .15s}
.rm-stone b{font-family:var(--f-display);font-size:clamp(18px,2.8cqw,30px);color:#5A4A33;line-height:1}
.rm-node:hover .rm-stone,.rm-node:focus-visible .rm-stone{transform:translateY(-3px)}
.rm-node:active .rm-stone{transform:translateY(2px);box-shadow:0 2px 0 #B49C74}
.rm-node.soon .rm-stone{background:#EFEBE3;border-color:#D8CFBF;box-shadow:0 4px 0 #CFC5B3}
.rm-node.soon .rm-stone b{color:#A99C86}
.rm-node.play .rm-stone{border-color:#EE8420;box-shadow:0 5px 0 #C76A12,0 8px 16px rgba(238,132,32,.3)}
.rm-node.play .rm-stone b{color:#C2600C}
.rm-node.play:not(.done)::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid #EE8420;opacity:.5;animation:rmPulse 1.6s ease-out infinite}
@keyframes rmPulse{from{transform:scale(.85);opacity:.7}to{transform:scale(1.3);opacity:0}}
.rm-node.done .rm-stone{background:#FFE9A8;border-color:#E9B820;box-shadow:0 5px 0 #C99A10}
.rm-node.done .rm-stone b{color:#7A5A06}
.rm-ring{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#24985F var(--deg),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 0)}
.rm-stars{position:absolute;left:50%;top:-14px;transform:translateX(-50%);color:#E9B820;font-size:clamp(12px,1.6cqw,18px);letter-spacing:-1px;text-shadow:0 1px 0 #fff,0 0 4px #fff;white-space:nowrap}
.rm-cam{position:absolute;width:clamp(48px,7cqw,74px);transform:translate(-50%,-128%);z-index:3;pointer-events:none;animation:rmBob 1.4s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.rm-cam svg{display:block;width:100%}
@keyframes rmBob{0%,100%{transform:translate(-50%,-128%)}50%{transform:translate(-50%,-140%)}}
.rm-pop{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 50px));background:var(--surface);color:var(--ink);border-radius:20px;padding:12px 14px 12px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;min-width:220px;max-width:min(360px,80cqw);border:2px solid var(--line);animation:rmPop .22s ease-out}
.rm-pop.below{transform:translate(-50%,50px)}
.rm-pop.left{transform:translate(-88%,calc(-100% - 50px))} .rm-pop.left.below{transform:translate(-88%,50px)}
.rm-pop.right{transform:translate(-12%,calc(-100% - 50px))} .rm-pop.right.below{transform:translate(-12%,50px)}
.rm-pop b{flex:1;font-family:var(--f-display);font-size:18px;line-height:1.2}
.rm-pop .btn{min-height:48px;padding:0 22px;font-size:18px}
.rm-soon{font-size:13px;color:var(--muted);white-space:nowrap}
.rm-more{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-weight:800;font-family:Georgia,serif;font-style:italic;flex:none}
@keyframes rmPop{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.rm-cloud,.rm-shine,.rm-cam,.rm-node.play::after{animation:none}}
.rm-pop{min-width:min(280px,86cqw)} .rm-pop b{min-width:120px}

/* ---------- Phá án: Sổ thám tử ---------- */
.stagebar.casebar{gap:6px;padding:4px 8px 4px 4px}
.cbook{display:flex;align-items:center;gap:6px;border:0;background:var(--purple-500);color:var(--white);border-radius:var(--radius-pill);padding:6px 14px 6px 10px;min-height:50px;font-weight:800;font-size:15px;cursor:pointer;animation:cbPulse 2.4s ease-in-out 1}
.cbook svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@keyframes cbPulse{0%,100%{transform:none}30%{transform:scale(1.08)}60%{transform:scale(.98)}}
.cdot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;font-weight:800;color:var(--text-secondary);border:2px solid var(--border-default);background:var(--surface-card)}
.cdot.on{border-color:var(--berry);color:var(--berry);box-shadow:0 0 0 3px var(--berry-soft)}
.cdot.ok{background:var(--cyan-400);border-color:var(--cyan-400);color:var(--white)}
.sheet h3 small{display:block;font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:500}
.cintro{font-size:var(--kid-body);margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--berry-soft)}
.cplan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cplan li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:14px;border:1px solid var(--line)}
.cplan li.on{border:2px solid var(--berry);background:var(--surface)}
.cplan li.lock{opacity:.55}
.cplan .cn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--surface-2);border:2px solid var(--line)}
.cplan li.ok .cn{background:var(--cyan-400);border-color:var(--cyan-400);color:var(--white)}
.cplan li.on .cn{background:var(--berry);border-color:var(--berry);color:#fff}
.cplan b{font-size:var(--kid-body);font-weight:800;color:var(--text-heading)}
.cplan p{margin:4px 0 0;font-size:15px}
.cfound{color:var(--cyan-600);font-weight:700}
.chow{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--surface-2)}
.chow .eyebrow{margin:0 0 4px}
.chow .hk{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--berry);color:#fff;font-size:11px;font-weight:800;margin-right:6px;vertical-align:1px}

/* ---------- Trạm luyện tập trên bản đồ ---------- */
.rm-sat{position:absolute;z-index:2;width:clamp(48px,4.6cqw,56px);aspect-ratio:1;border-radius:12px;border:3px solid #fff;display:grid;place-items:center;transform:translate(calc(-50% + var(--dx)),calc(-50% + clamp(40px,6cqw,62px))) rotate(45deg);cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.12),0 6px 12px rgba(0,0,0,.12);transition:transform .15s}
.rm-sat svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg)}
.rm-sat.case{background:var(--berry)} .rm-sat.drill{background:var(--sky)}
.rm-n{position:absolute;top:-9px;right:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#fff;color:var(--ink,#17323A);font:800 11px/18px system-ui;transform:rotate(-45deg);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.rm-pop.list{flex-direction:column;align-items:stretch;gap:8px} .rm-pop.list .btn.rm-game{width:100%;min-height:44px;font-size:16px;white-space:nowrap}
.rm-pop.early{flex-wrap:wrap} .rm-pop.early b{flex-basis:100%} .rm-pop.early .rm-soon{flex:1}
.rm-sat.done{box-shadow:0 0 0 3px #E9B820,0 6px 12px rgba(0,0,0,.12)}
.rm-sat:hover{transform:translate(calc(-50% + var(--dx)),calc(-50% + clamp(40px,6cqw,62px))) rotate(45deg) scale(1.1)}
.rm-pop b small{display:block;font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:700}

/* ---------- Game tư duy ---------- */
.ptitle.static{cursor:default}
.lvls{display:flex;gap:6px}
.lvls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid var(--border-default);background:var(--surface-card);border-radius:var(--radius-lg);padding:3px 12px;min-width:64px;min-height:48px;line-height:1.1;cursor:pointer}
.lvls button b{font-size:15px;font-weight:800}
.lvls .lst{font-size:13px;line-height:1;color:var(--yellow-400);letter-spacing:-1px}
.lvls .lst i{color:var(--line);font-style:normal}
.lvls .lst svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2}
.lvls button[aria-checked="true"]{border-color:var(--cyan-400);background:var(--ans-sel-bg);color:var(--cyan-600)}
.lvls button:disabled{opacity:.55;cursor:not-allowed}
.dtask{font-size:20px;font-weight:800;margin:2px 0 6px;line-height:1.3;color:var(--text-heading)}
.deq{font-size:32px;font-weight:900;margin:0;color:var(--text-heading);letter-spacing:.5px}
.pdots i.soso{background:var(--cyan-300)} /* câu có lần thử lại vẫn là câu đã xong: không đổi màu phạt */
.dresult{text-align:center;padding:30px 50px}
.dresult .dstars{font-size:64px;color:var(--yellow-400);letter-spacing:4px;animation:popin .5s ease-out;text-shadow:0 3px 0 var(--yellow-500)}
/* sao chỉ cộng: chỉ hiện sao đã có, không hiện sao xám, không hiện số lần chưa đúng */
.dresult .dstars i{display:none}
.dresult p.muted{display:none}
.dresult p{font-size:24px;font-weight:900;margin:6px 0;color:var(--text-heading)}
.dnext p{font-size:var(--kid-body)}
@media (max-width:700px){.lvls button{min-width:48px;padding:3px 8px}.lvls button b{font-size:13px}}
.prc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prc-b{text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.prc-b b{font-family:var(--f-display);font-size:16px}.prc-b span{font-size:13px;color:var(--muted)}
.prc-b.case{border-color:var(--berry)}.prc-b.case b{color:var(--berry)}.prc-b.drill{border-color:var(--sky)}.prc-b.drill b{color:var(--sky)}

/* Phá án: điều con biết thêm */
.clearn{margin:8px 0 2px;padding:10px 12px;border-radius:var(--radius-lg);background:var(--blue-50);border:1.5px solid var(--blue-100)}
.clearn.social{background:var(--orange-50);border-color:var(--orange-100)}
.clearn .lk{display:inline-block;font:700 11px/1 var(--font-family);letter-spacing:.6px;text-transform:uppercase;color:var(--blue-900);margin-bottom:6px}
.clearn.social .lk{color:var(--orange-500)}
.clearn p{margin:0;font-size:15px;line-height:1.45}
.clearns{text-align:left;margin:10px 0 4px;max-height:34vh;overflow:auto}
/* ---------- Sổ chiến lược (đố chiến lược) ---------- */
.snote{border:2px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-soft-sm)}
.snote-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.snote-h b{font-size:var(--kid-body);font-weight:800;color:var(--text-heading)}
.snote-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.snote-steps li{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--text-secondary);border:1.5px solid var(--border-default);border-radius:var(--radius-pill);padding:3px 12px 3px 3px;background:var(--surface-card)}
.snote-steps li .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--neutral-200);color:var(--text-heading);font-size:13px;line-height:1}
.snote-steps li.sd{color:var(--cyan-600);border-color:var(--cyan-300)}
.snote-steps li.sd .n{background:var(--cyan-400);color:var(--white)}
.snote-steps li.sc{color:var(--cyan-600);border-color:var(--cyan-400);background:var(--ans-sel-bg)}
.snote-steps li.sc .n{background:var(--cyan-400);color:var(--white)}
.snote-steps li.fixh{flex-basis:100%;border:none;background:none;padding:0;color:var(--orange-500);flex-wrap:wrap;gap:6px}
.snote-steps li.fixh ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.snote-q{border:2px solid var(--cyan-400);background:var(--surface-card);border-radius:var(--radius-lg);padding:12px 14px;box-shadow:var(--shadow-brand-sm)}
.snq-t{margin:0 0 10px;font-size:var(--kid-body);line-height:1.45;color:var(--text-heading)}
.snq-num{display:flex;align-items:center;gap:8px}
.snq-num input{width:96px;min-height:52px;font:900 22px var(--font-family);text-align:center;border:1.5px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);color:var(--text-heading)}
.snq-num input:focus{outline:none;border-color:var(--cyan-400);box-shadow:var(--focus-ring-shadow)}
.snq-num .u{font-weight:700}
.snq-pick{display:flex;flex-wrap:wrap;gap:8px}
/* phản hồi sai trong Sổ: đỏ nhạt mềm theo golden §2, không rung */
.snq-fb{margin:8px 0 0;font-size:15px;color:var(--text-primary);min-height:0}
.snq-fb:not(:empty){padding:8px 12px;border-radius:var(--radius-lg);background:var(--no-bg);border:2px dashed var(--no-bd)}
.snq-fb b{color:var(--no-tx)}
.snq-help{margin-top:10px}
.snote-log{list-style:none;margin:0;padding:0;max-height:168px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.4}
.snote-log li{padding:6px 10px;border-radius:var(--radius-sm);background:var(--neutral-50)}
.snote-log .k-ok{color:var(--text-heading);border-left:4px solid var(--cyan-400)}
.snote-log .k-help{border-left:4px solid var(--yellow-400)}
.snote-log .k-do{border-left:4px solid var(--cyan-300)}
.snote-log .k-try,.snote-log .k-undo{color:var(--muted)}
.snote-log .k-fixh{color:var(--orange-500);background:var(--orange-50)}
.snote-log .k-review{border-left:4px solid var(--sky);background:var(--sky-soft)}
.btn.sm{min-height:48px;padding:6px 16px;font-size:15px}
/* lựa chọn đã thử: viền nét đứt, vẫn đọc được, không gạch chữ */
.snq-pick .chip.no{border-style:dashed;border-color:var(--no-bd);background:var(--no-bg);color:var(--no-tx)}
/* không rung khi sai (hồ sơ kiddy) */
.snq-fb.shake{animation:none}

/* ---------- Khám phá (trang đầu): thanh chọn lớp + lưới thẻ có ảnh ---------- */
.xp{min-height:100dvh}
.xbar{display:flex;align-items:center;gap:12px;padding:10px max(16px,3vw);padding-right:calc(max(16px,3vw) + var(--util-w,0px));background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:20}
.xbar .logo{width:36px;height:36px;flex:none}.xbar .logo svg,.xbar .logo img{width:100%;height:auto}
.xbar .brand{font-family:var(--f-display);font-size:22px;font-weight:700;white-space:nowrap;flex:none}
.xgrades{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
/* căn giữa khi đủ chỗ, khi tràn thì cuộn được từ Lớp 1 (justify-content:center cắt mất các nút đầu ở mép trái) */
.xgrades{position:relative}.xgrades>:first-child{margin-left:auto}.xgrades>:last-child{margin-right:auto}
.xgrades::-webkit-scrollbar{display:none}
.xgrades button{flex:none;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 16px;font-weight:800;font-size:17px;min-height:48px;transition:transform .12s,background .12s}
.xgrades button:not(:disabled):hover{transform:translateY(-2px);border-color:var(--cam)}
.xgrades button[aria-selected="true"]{background:var(--cam);border-color:var(--cam);color:var(--cam-ink);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.xgrades button:disabled{opacity:.4;border-style:dashed}
.xnavbtn{flex:none;min-height:48px;min-width:48px}.xnavbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Cửa sổ "Chương trình học" = bảng trượt (explore.js openNav). Laptop: cao hết màn, sát cạnh phải, trượt từ phải vào.
   Điện thoại (<768px): rộng hết màn, trượt từ dưới lên, tối đa 90dvh. Không dùng 100vw (gồm cả thanh cuộn, từng làm bảng lệch 3px).
   Nền mờ (.xnav-bg) và bảng nằm trên thanh thu gọn (25) và nút Phụ huynh (26). Trạng thái mở: <html class="xnav-open"> (khoá cuộn). */
.xnav-bg{position:fixed;inset:0;z-index:40;background:rgba(27,32,48,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s ease}
html.xnav-open .xnav-bg{opacity:1}
html.xnav-open{overflow:hidden}
html:has(.xp){scrollbar-gutter:stable} /* khoá cuộn không làm mất chỗ thanh cuộn: thanh trên, nút Phụ huynh không xô ngang */
.xnav{position:fixed;z-index:41;top:0;right:0;bottom:0;width:min(460px,100%);display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);border-radius:28px 0 0 28px;box-shadow:-24px 0 60px -24px rgba(16,40,46,.45);
  transform:translateX(40px);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
html.xnav-open .xnav{transform:none;opacity:1}
.xnav-grab{display:none}
.xnav-h{flex:none;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 12px 22px}
.xnav-h b{flex:1;min-width:0;font-family:var(--f-display);font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xnav-h .xnav-fw{flex:none;min-height:44px;gap:6px;padding:0 12px;font-size:14px}.xnav-fw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.xnav-h .iconbtn{flex:none;width:48px;height:48px}
.xnav-b{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px)}
@media (max-width:767px){
  .xnav{top:auto;left:0;right:0;width:auto;max-height:90dvh;border-radius:28px 28px 0 0;transform:translateY(48px);box-shadow:0 -20px 50px -20px rgba(16,40,46,.45)}
  .xnav-grab{display:block;flex:none;width:40px;height:5px;border-radius:3px;background:rgba(27,32,48,.18);margin:8px auto 0}
  .xnav-h{padding:8px 10px 10px 18px}
  .xnav-h .xnav-fw{width:44px;padding:0;justify-content:center}.xnav-fw span{display:none}
}
@media (prefers-reduced-motion:reduce){.xnav,.xnav-bg{transition:none}}

/* nội dung bảng (screens.js panelHome) */
.xnav-fail{display:grid;justify-items:center;gap:16px;padding:48px 24px;text-align:center;color:var(--muted);font-weight:700}
.xp-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:6px 16px 28px} /* minmax(0,1fr): thẻ không bị nội dung đẩy rộng quá khung */
.pcs{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.pc{--kk-bg:var(--pcs);--kk-bd:var(--pc);--kk-tx:var(--pc);position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 14px 16px 16px;border:0;border-radius:22px;
  background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line),0 14px 26px -18px rgba(16,40,46,.45);cursor:pointer;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.pc:hover{transform:translateY(-2px)}.pc:active{transform:scale(.98)}
.pc-ic{flex:none;align-self:flex-start;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--kk-bg)}
.pc-ic svg{width:24px;height:24px;fill:none;stroke:var(--kk-tx);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pc-body{flex:1;min-width:0;display:grid;gap:4px}
.pc-top{display:flex;align-items:center;gap:8px;min-width:0}
.pc-tag{min-width:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kk-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-now{flex:none;margin-left:auto;font-size:12px;font-weight:800;line-height:1;color:#fff;background:var(--kk-tx);padding:5px 9px;border-radius:999px}
.pc-name{font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1.15}
.pc-aud{font-size:14px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pc-meta>span{font-size:12.5px;font-weight:700;line-height:1;padding:6px 9px;border-radius:999px;background:var(--surface-2,var(--bg));color:var(--ink)}
.pc-meta .pc-play{background:var(--kk-bg);color:var(--kk-tx)}
.pc-go{flex:none;display:flex;align-items:center;gap:2px;font-size:13px;font-weight:800;color:var(--cam)}
.pc-go svg,.plg>summary svg,.xp-panel .trow svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pc.cur{box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--kk-bd) 55%,transparent),0 14px 26px -18px rgba(16,40,46,.45)}
.pls h2{font-family:var(--f-display);font-size:19px;margin:0 4px 10px}
.plg{border-radius:20px;background:var(--surface);box-shadow:0 1px 0 var(--line),0 10px 22px -18px rgba(16,40,46,.45);margin-bottom:10px;overflow:hidden}
.plg>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 14px 0 16px;cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:17px}
.plg>summary::-webkit-details-marker{display:none}
.plg>summary::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pc);flex:none}
.plg-c{margin-left:auto;font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--muted)}
.plg>summary svg{color:var(--muted);transform:rotate(90deg);transition:transform .2s}
.plg[open]>summary svg{transform:rotate(-90deg)}
.plg>summary:focus-visible{outline-offset:-4px}
/* lớp trong một chương trình: gập / mở được, mở sẵn lớp bé đang học */
.plgg{margin:0 10px 8px;border-radius:14px}
.plgg>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 8px 0 8px;cursor:pointer;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plgg>summary::-webkit-details-marker{display:none}
.plgg>summary svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .2s}
.plgg[open]>summary svg{transform:rotate(-90deg)}
.plgg>summary .plg-c{text-transform:none;letter-spacing:0}
.plgg .plg-rows{padding:0 0 6px}
.plg-rows{display:grid;gap:6px;padding:0 10px 12px}
.xp-panel .trow{min-height:48px;padding:0 10px 0 14px;border:0;border-radius:14px;background:var(--bg);gap:10px;color:var(--ink)}
.xp-panel .trow:hover{background:var(--pcs)}
.xp-panel .trow .tdot{width:8px;height:8px}
.xp-panel .trow .tname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:15px}
.xp-panel .trow svg{color:var(--muted)}
@media (max-width:420px){.pc-go span{display:none}.pc{padding:14px 10px 14px 14px;gap:12px}.pc-name{font-size:19px}}
.xnav .page.home{min-height:0}.xnav .hbar{display:none}
.xnav .hmain{padding:14px!important;max-width:none!important}
.xnav .hello{display:none}
.xnav .progs{grid-template-columns:minmax(0,1fr)!important;gap:10px}
.xnav .prog{min-height:0!important;padding:14px 16px!important}
.xnav .prog .pname{font-size:24px!important}
.xnav .trys{grid-template-columns:minmax(0,1fr)!important}
.xmain{width:100%;max-width:1440px;margin:0 auto;padding:18px max(16px,3vw) 64px}
.xhero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.xhero h1{font-family:var(--f-display);font-size:clamp(28px,3.6vw,44px);line-height:1.05;margin:0 0 6px}
.xhero p{margin:0}
.xfilters{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.xfilters button{border:0;background:transparent;border-radius:var(--radius-pill);padding:8px 16px;font-weight:700;font-size:15px;min-height:48px}
.xfilters button[aria-checked="true"]{background:var(--ink);color:var(--surface)}
.xprog-h{display:flex;align-items:baseline;gap:10px;margin:30px 0 4px;font-family:var(--f-display);font-size:24px;color:var(--pc,var(--ink))}
.xprog-h small{font-family:var(--f-body);font-size:14px;color:var(--muted);font-weight:600}
.xm{margin:22px 0 30px;scroll-margin-top:80px}
.xmh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.xno{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:20px;background:var(--pcs,var(--cam-soft));color:var(--pc,var(--cam))}
.xmt{flex:1;min-width:0}.xmt h2{font-family:var(--f-display);font-size:clamp(20px,2.2vw,26px);line-height:1.1;margin:0}
.xmt small{color:var(--muted);font-size:13px;font-weight:600}
.xprog{flex:none;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.xprog i{width:64px;height:8px;border-radius:9px;background:var(--line);overflow:hidden;position:relative}
.xprog i::after{content:"";position:absolute;inset:0;width:calc(var(--p)*100%);background:var(--leaf);border-radius:9px}
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.xc{--kc:var(--cam);--ks:var(--cam-soft);--kt:var(--cam-ink);text-align:left;border:0;padding:0;background:var(--surface);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line),0 4px 14px rgba(16,40,46,.07);transition:transform .16s,box-shadow .16s;position:relative;outline-offset:3px}
.xc:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 0 0 3px var(--kc),0 14px 30px rgba(16,40,46,.16)}
.xc:active{transform:translateY(-1px) scale(.99)}
.xth{position:relative;display:block;aspect-ratio:760/440;background:var(--ks);overflow:hidden}
.xth img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.xc:hover .xth img{transform:scale(1.05)}
.xph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,var(--surface) 0,transparent 55%),var(--ks)}
.xph svg{width:34%;height:auto;fill:none;stroke:var(--kc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.xk{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;background:var(--kc);color:var(--kt);font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px 3px 7px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.xk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.xdone{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.xdone svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.xlast{position:absolute;left:8px;bottom:8px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px}
.xc.last{box-shadow:0 0 0 3px var(--ink),0 10px 24px rgba(16,40,46,.14)}
.xc.last .xt::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cam);margin-right:6px;vertical-align:middle}
.xt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:10px 12px 12px;font-weight:700;font-size:15px;line-height:1.3;min-height:calc(2*1.3em + 22px)}
.xc.k-leaf{--kc:var(--leaf);--ks:var(--leaf-soft);--kt:#fff}
.xc.k-sky{--kc:var(--sky);--ks:var(--sky-soft);--kt:#fff}
.xc.k-berry{--kc:var(--berry);--ks:var(--berry-soft);--kt:#fff}
.xc.k-ink{--kc:#4F6870;--ks:var(--surface-2);--kt:#fff}
.xc.k-case{--kc:#5B2E91;--ks:var(--berry-soft);--kt:#fff}
.xc.k-cam{--kc:var(--cam);--ks:var(--cam-soft);--kt:var(--cam-ink)}
.xc.k-sun{--kc:var(--sun);--ks:#FFF4C9;--kt:#3A2C00}
.xempty{color:var(--muted);text-align:center;padding:60px 0}
@media (max-width:760px){
  .xbar{flex-wrap:wrap;gap:8px}.xbar .brand{font-size:19px}
  .xgrades{order:3;flex-basis:100%;justify-content:flex-start}
  .xnavbtn{margin-left:auto}.xnavbtn span{display:none}
  .xgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .xt{font-size:14px;padding:8px 10px 10px}
  .xprog i{display:none}
  .xfilters{width:100%;justify-content:space-between}.xfilters button{padding:8px 10px;flex:1}
}
@media (prefers-reduced-motion:reduce){.xc,.xc:hover,.xth img{transition:none;transform:none}}
/* thanh chọn chương trình (hàng 2 của header) */
.xbar{flex-wrap:wrap;row-gap:6px}
.xprogs{flex-basis:100%;display:flex;gap:6px;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.xprogs::-webkit-scrollbar{display:none}
.xprogs button{flex:none;border:0;background:transparent;border-radius:12px;padding:6px 14px;font-weight:700;font-size:15px;color:var(--muted);min-height:48px;position:relative}
.xprogs button:not(:disabled):hover{color:var(--ink);background:var(--surface-2)}
.xprogs button[aria-selected="true"]{color:var(--pc);background:var(--pcs)}
.xprogs button[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;border-radius:3px;background:var(--pc)}
.xprogs button:disabled{opacity:.35}
@media (min-width:1100px){.xgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
/* ảnh xem trước động */
.xth .xf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.xth .xf.on{opacity:1;animation:xkb 1.6s ease-out both}
@keyframes xkb{from{transform:scale(1)}to{transform:scale(1.06)}}
.xc.playing .x0{opacity:0;transition:opacity .3s}
.xc.playing{box-shadow:0 0 0 3px var(--cam),0 14px 30px rgba(16,40,46,.18)}
.xc .xth::after{content:"";position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:rgba(23,50,58,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transition:opacity .2s}
.xc:hover .xth::after{opacity:1}.xc.playing .xth::after{opacity:0}
@media (max-width:760px){.xprogs{justify-content:flex-start}}
/* xem trước sống: cảnh World Engine chạy ngay trong thẻ */
.xth .xlive{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none}
.xth .xlive.on{opacity:1}
.xth .xlive canvas{width:100%!important;height:100%!important;display:block}
.xc.live .x0{opacity:0;transition:opacity .35s}

/* ---------- Giao diện Kẹo Kính (luôn bật qua html[data-skin="keokinh"], luôn sáng) ---------- */
/* :root:root[...] để thắng bộ màu tối (claude.ai tự gắn data-theme="dark" khi trang chủ đang tối, máy để chế độ tối) */
/* (bộ màu Kẹo Kính cũ đã thay bằng token PK ở đầu file) */
html[data-skin] .xc{box-shadow:0 2px 0 var(--line),0 8px 20px rgba(90,60,40,.08)}
html[data-skin] .xno{box-shadow:0 3px 0 rgba(0,0,0,.08)}
html[data-skin] .xhero h1{color:var(--ink)}

/* ======================= D. Kẹo Kính (theo design system Kẹo Kính) =======================
   Kính lỏng cho thanh điều hướng, thẻ trắng bo 22 như viên kẹo, 5 màu mức pastel (sun, peach, coral, mint, sky),
   chữ Baloo 2 + Nunito, bóng navy mềm, lò xo cubic-bezier(.3,1.6,.5,1). Chỉ một thứ sáng nhất: thẻ đang rê chuột. */
:root:root[data-skin~="keokinh"]{color-scheme:light;
  --ground:#e4e8f0;--ground-2:#d8dde8;--screen:#eef1f6;--panel:#f3f5f9;--card:#fff;--kk-ink:#1b2030;--kk-muted:#555c6f;--kk-line:#c6ccd9;
  --accent:#1aa7c9;--accent-ink:#0b6f8c;--primary:#0b6f8c;--on-primary:#fff;
  --sun-100:#f6e3a8;--sun-400:#dfb955;--sun-700:#8a5a12;--peach-100:#f7cdb0;--peach-400:#e3976a;--peach-700:#8c4119;
  --coral-100:#f2b9b2;--coral-400:#d77a71;--coral-700:#922f2b;--mint-100:#bfe6cf;--mint-400:#6dbd91;--mint-700:#1f6b45;
  --sky-100:#bfddf3;--sky-400:#68acdb;--sky-700:#1d5c8c;--star-ink:#8a5a12;
  --glass-tint:rgba(255,255,255,.14);--glass-tint-strong:rgba(255,255,255,.35);
  --shadow-cell:0 4px 10px -6px rgba(20,30,60,.45);--shadow-cell-current:0 10px 18px -8px rgba(20,30,60,.6);
  --shadow-rail:0 10px 30px -12px rgba(20,30,60,.45),0 1px 2px rgba(20,30,60,.12);
  --shadow-choice:0 5px 0 rgba(20,30,60,.10),0 14px 22px -14px rgba(20,30,60,.5);
  --shadow-glass-inner:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.95),inset -1px -1px 0 -.5px rgba(255,255,255,.6),inset 0 0 6px rgba(255,255,255,.55),inset 0 -8px 14px -10px rgba(40,60,110,.25);
  --spring:cubic-bezier(.3,1.6,.5,1);
  /* token của app ánh xạ sang Kẹo Kính (giống artifact Pika Math: Baloo 2 + Nunito, nút chính #0b6f8c) */
  --cam:var(--primary);--cam-ink:#fff;--cam-soft:var(--sky-100);--leaf:#3fb96b;--leaf-soft:#d9f3e3;
  --f-display:var(--font-baloo),"Baloo 2","Nunito",system-ui,sans-serif;--f-body:var(--font-nunito),"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-skin~="keokinh"] body{background:var(--ground);font-weight:500}
/* mảng màu phía trên: kính để lộ màu bên dưới */
/* absolute (không fixed): mảng màu nằm ở đầu trang và cuộn đi cùng nội dung; fixed thì khi cuộn nó bám mép trên trái thành dải đỏ cam cạnh thẻ */
html[data-skin~="keokinh"] .xp{position:relative}
html[data-skin~="keokinh"] .xp::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;z-index:0;pointer-events:none;
  background:radial-gradient(55% 90% at 6% 0%,#ff8f73 0%,#ffb59b 32%,transparent 62%),radial-gradient(50% 120% at 100% 0%,#9cc4e6 0%,#bfdcf1 40%,transparent 70%),linear-gradient(180deg,#ffd6c5 0%,#f5eef3 45%,var(--ground) 100%);
  -webkit-mask:linear-gradient(#000 45%,transparent);mask:linear-gradient(#000 45%,transparent)}
html[data-skin~="keokinh"] .xp>.xmain{position:relative;z-index:1} /* chỉ phần thân; thanh trên giữ sticky, cửa sổ Chương trình học giữ fixed */
/* header = kính lỏng nổi */
/* thẳng mép với cột thẻ bên dưới (.xmain), kể cả màn rất rộng */
html[data-skin~="keokinh"] .xbar{margin:10px auto 0;width:calc(100% - 2*max(16px,3vw));max-width:calc(1440px - 2*max(16px,3vw));border-radius:28px;border:0;background:var(--glass-tint);box-shadow:var(--shadow-rail),var(--shadow-glass-inner);
  -webkit-backdrop-filter:blur(8px) saturate(1.7);backdrop-filter:blur(8px) saturate(1.7)}
html[data-skin~="keokinh"] .xbar .brand{color:var(--kk-ink)} html[data-skin~="keokinh"] .xbar .brand b{color:var(--accent-ink)}
/* lớp = viên kẹo theo 5 màu mức */
html[data-skin~="keokinh"] .xgrades button{--kk-bg:var(--sun-100);--kk-bd:var(--sun-400);--kk-tx:var(--sun-700);border:1.5px solid var(--kk-bd);background:color-mix(in srgb,var(--kk-bg) 62%,transparent);color:var(--kk-tx);
  border-radius:16px;box-shadow:var(--shadow-cell),var(--shadow-glass-inner);transition:transform .35s var(--spring),box-shadow .2s}
html[data-skin~="keokinh"] .xgrades button:nth-child(5n+2){--kk-bg:var(--peach-100);--kk-bd:var(--peach-400);--kk-tx:var(--peach-700)}
html[data-skin~="keokinh"] .xgrades button:nth-child(5n+3){--kk-bg:var(--coral-100);--kk-bd:var(--coral-400);--kk-tx:var(--coral-700)}
html[data-skin~="keokinh"] .xgrades button:nth-child(5n+4){--kk-bg:var(--mint-100);--kk-bd:var(--mint-400);--kk-tx:var(--mint-700)}
html[data-skin~="keokinh"] .xgrades button:nth-child(5n+5){--kk-bg:var(--sky-100);--kk-bd:var(--sky-400);--kk-tx:var(--sky-700)}
html[data-skin~="keokinh"] .xgrades button:not(:disabled):hover{transform:translateY(-2px);border-color:var(--kk-bd)}
html[data-skin~="keokinh"] .xgrades button[aria-selected="true"]{background:var(--kk-bg);color:var(--kk-tx);border:2px solid #fff;transform:translateY(-3px) scale(1.1);box-shadow:var(--shadow-cell-current),0 0 0 4px color-mix(in srgb,var(--kk-bg) 70%,transparent);animation:kkbreathe 2.4s ease-in-out infinite}
@keyframes kkbreathe{0%,100%{transform:translateY(-3px) scale(1.08)}50%{transform:translateY(-3px) scale(1.12)}}
html[data-skin~="keokinh"] .xgrades button:disabled{opacity:1;--kk-bg:#e4e6ea;--kk-bd:#bfc4cc;--kk-tx:#7b8089;border-style:dashed;box-shadow:none}
/* chương trình = khay lõm (Segmented) */
html[data-skin~="keokinh"] .xprogs{flex-basis:auto;margin:0 auto;gap:2px;padding:3px;border-radius:14px;background:var(--ground-2)}
html[data-skin~="keokinh"] .xprogs button{font-family:var(--f-display);font-size:16px;color:var(--kk-muted);border-radius:11px;min-height:48px}
html[data-skin~="keokinh"] .xprogs button[aria-selected="true"]{background:var(--panel);color:var(--kk-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
html[data-skin~="keokinh"] .xprogs button[aria-selected="true"]::after{display:none}
html[data-skin~="keokinh"] .xnavbtn{background:var(--glass-tint-strong);border:0;box-shadow:var(--shadow-rail);font-family:var(--f-display);font-weight:700}
/* lọc = chip trắng */
html[data-skin~="keokinh"] .xfilters{background:transparent;border:0;padding:0;gap:8px}
html[data-skin~="keokinh"] .xfilters button{background:var(--card);box-shadow:0 8px 24px -16px rgba(20,30,60,.4);font-family:var(--f-display);font-size:16px;min-height:48px;padding:0 16px}
html[data-skin~="keokinh"] .xfilters button[aria-checked="true"]{background:var(--sky-100);color:var(--sky-700)}
/* lời chào + túi sao */
html[data-skin~="keokinh"] .xhero h1{font-size:clamp(28px,3.4vw,34px);font-weight:800;color:var(--kk-ink)}
html[data-skin~="keokinh"] .xhero .eyebrow{color:var(--accent-ink);letter-spacing:.1em}
.xpouch{display:none}
@keyframes kkbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
html[data-skin~="keokinh"] .xpouch{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 16px 0 8px;border-radius:999px;background:var(--glass-tint-strong);box-shadow:var(--shadow-rail),var(--shadow-glass-inner);-webkit-backdrop-filter:blur(8px) saturate(1.7);backdrop-filter:blur(8px) saturate(1.7)}
html[data-skin~="keokinh"] .xpouch i{width:40px;height:40px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJray10dWktc2giIGN4PSIuNSIgY3k9Ii41IiByPSIuNSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWIyMDMwIiBzdG9wLW9wYWNpdHk9Ii4zIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWIyMDMwIiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0ia2stdHVpLWJhZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2Q5YzdmZiIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiM5Yjc0ZjIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1YTMzYjgiLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0ia2stdHVpLXN0IiBjeD0iLjQiIGN5PSIuMzUiIHI9Ii43Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmY2YzQiLz48c3RvcCBvZmZzZXQ9Ii40IiBzdG9wLWNvbG9yPSIjZmZkMjNmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTM5MTAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGVsbGlwc2UgY3g9IjMyIiBjeT0iNTkiIHJ4PSIyMSIgcnk9IjMuNSIgZmlsbD0idXJsKCNray10dWktc2gpIi8+PHBhdGggZD0iTTIxIDI0QzEyIDMxIDkgNDEgMTEuNSA0OC41IDE0IDU1LjUgMjIgNTggMzIgNThzMTgtMi41IDIwLjUtOS41QzU1IDQxIDUyIDMxIDQzIDI0eiIgZmlsbD0iIzRhMmE5OSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxLjUpIi8+PHBhdGggZD0iTTIxIDI0QzEyIDMxIDkgNDEgMTEuNSA0OC41IDE0IDU1LjUgMjIgNTggMzIgNThzMTgtMi41IDIwLjUtOS41QzU1IDQxIDUyIDMxIDQzIDI0eiIgZmlsbD0idXJsKCNray10dWktYmFnKSIvPjxwYXRoIGQ9Ik0yMCAxN2w0LTkgNCA1LjVMMzIgNmw0IDcuNUw0MCA4bDQgOXoiIGZpbGw9IiNiODliZmYiLz48cmVjdCB4PSIxOSIgeT0iMTYuNSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSIjZmZiNTliIi8+PHJlY3QgeD0iMTkiIHk9IjE2LjUiIHdpZHRoPSIyNiIgaGVpZ2h0PSIzLjUiIHJ4PSIxLjc1IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuNDUiLz48cGF0aCBkPSJNMzIgMzAuNWwzLjMgNi43IDcuNCAxLjEtNS4zIDUuMiAxLjIgNy4zTDMyIDQ3LjNsLTYuNiAzLjUgMS4yLTcuMy01LjMtNS4yIDcuNC0xLjF6IiBmaWxsPSJ1cmwoI2trLXR1aS1zdCkiIHN0cm9rZT0iI2ZmZjZjNCIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTcgMzNjMS41LTMuNiAzLjYtNiA2LTcuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNTUiLz48L3N2Zz4=") center/contain no-repeat}
html[data-skin~="keokinh"] .xpouch b{font-family:var(--f-display);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--kk-ink)}
/* module: số trong viên kẹo theo màu mức */
html[data-skin~="keokinh"] .xm .xno{--kk-bg:var(--sun-100);--kk-bd:var(--sun-400);--kk-tx:var(--sun-700);background:color-mix(in srgb,var(--kk-bg) 80%,#fff);color:var(--kk-tx);border:1.5px solid var(--kk-bd);border-radius:13px;box-shadow:var(--shadow-cell),var(--shadow-glass-inner)}
html[data-skin~="keokinh"] .xm:nth-of-type(5n+2) .xno{--kk-bg:var(--peach-100);--kk-bd:var(--peach-400);--kk-tx:var(--peach-700)}
html[data-skin~="keokinh"] .xm:nth-of-type(5n+3) .xno{--kk-bg:var(--coral-100);--kk-bd:var(--coral-400);--kk-tx:var(--coral-700)}
html[data-skin~="keokinh"] .xm:nth-of-type(5n+4) .xno{--kk-bg:var(--mint-100);--kk-bd:var(--mint-400);--kk-tx:var(--mint-700)}
html[data-skin~="keokinh"] .xm:nth-of-type(5n+5) .xno{--kk-bg:var(--sky-100);--kk-bd:var(--sky-400);--kk-tx:var(--sky-700)}
html[data-skin~="keokinh"] .xmt h2{font-weight:700;color:var(--kk-ink)}
html[data-skin~="keokinh"] .xprog i::after{background:linear-gradient(90deg,#ffc857,#ff8a5b,#f0546b)}
html[data-skin~="keokinh"] .xprog-h{color:var(--accent-ink)}
/* thẻ = viên kẹo trắng (ChoiceTile): ảnh bo 16 nằm trong thẻ */
html[data-skin~="keokinh"] .xc{border-radius:22px;padding:8px 8px 0;background:var(--card);box-shadow:var(--shadow-choice);border:2px solid transparent;transition:transform .35s var(--spring),box-shadow .25s}
html[data-skin~="keokinh"] .xc .xth{border-radius:16px;background:var(--panel)}
html[data-skin~="keokinh"] .xc .xt{font-family:var(--f-display);font-weight:700;font-size:16px;padding:9px 6px 11px;color:var(--kk-ink)}
html[data-skin~="keokinh"] .xc:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 5px 0 rgba(20,30,60,.08),0 22px 30px -16px rgba(20,30,60,.55)}
html[data-skin~="keokinh"] .xc.playing{border-color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent),0 22px 30px -16px rgba(20,30,60,.55)}
html[data-skin~="keokinh"] .xc:active{transform:scale(.97)}
html[data-skin~="keokinh"] .xc.last{border-color:var(--sun-400)}
html[data-skin~="keokinh"] .xc.last .xt::before{background:var(--star)}
html[data-skin~="keokinh"] .xdone{width:30px;height:30px;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJray1kdW5nLXNoIiBjeD0iLjUiIGN5PSIuNSIgcj0iLjUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzFiMjAzMCIgc3RvcC1vcGFjaXR5PSIuMyIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFiMjAzMCIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImtrLWR1bmctZCIgY3g9Ii4zNSIgY3k9Ii4zIiByPSIuOCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYmZmMGNmIi8+PHN0b3Agb2Zmc2V0PSIuNDUiIHN0b3AtY29sb3I9IiMzY2JmNmEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZjhkNGEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48ZWxsaXBzZSBjeD0iMzIiIGN5PSI1OSIgcng9IjE5IiByeT0iMy40IiBmaWxsPSJ1cmwoI2trLWR1bmctc2gpIi8+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMyIgcj0iMjMiIGZpbGw9IiMxNzcwM2EiLz48Y2lyY2xlIGN4PSIzMiIgY3k9IjMwIiByPSIyMyIgZmlsbD0idXJsKCNray1kdW5nLWQpIi8+PHBhdGggZD0iTTIxIDMxbDcuNSA3LjVMNDQgMjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzE3NzAzYSIgc3Ryb2tlLXdpZHRoPSI3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMS44KSIgb3BhY2l0eT0iLjQ1Ii8+PHBhdGggZD0iTTIxIDMxbDcuNSA3LjVMNDQgMjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTUgMjNjMi40LTYgNy42LTEwIDE0LTExIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+") center/contain no-repeat;box-shadow:none}
html[data-skin~="keokinh"] .xdone svg{display:none}
html[data-skin~="keokinh"] .xc .xth::after{background-color:rgba(11,111,140,.75)}
html[data-skin~="keokinh"] .xph{background:radial-gradient(circle at 30% 30%,#fff 0,transparent 55%),var(--sky-100)}
html[data-skin~="keokinh"] .xph svg{stroke:var(--sky-700)}

/* bảng "Chương trình học" theo Kẹo Kính: nền xám kính, thẻ trắng viên kẹo, màu theo chương trình (bgd bạc hà, cambridge trời, khtn đào, timo nắng) */
html[data-skin~="keokinh"] .xnav{background:var(--ground)}
html[data-skin~="keokinh"] .xnav-h b{color:var(--kk-ink)}
html[data-skin~="keokinh"] .xnav-h .xnav-fw{border:0;background:var(--candy-gloss),rgba(255,255,255,.85);box-shadow:var(--candy-inner),0 6px 14px -8px rgba(20,30,60,.45);font-family:var(--f-display);font-weight:700;color:var(--kk-ink)}
html[data-skin~="keokinh"] .xnav-h .iconbtn{border:0;background:var(--glass-tint-strong);box-shadow:var(--shadow-cell),var(--candy-inner)}
html[data-skin~="keokinh"] .pc,html[data-skin~="keokinh"] .plg{--pc:var(--mint-400);--pcs:var(--mint-100);--kk-bg:var(--mint-100);--kk-bd:var(--mint-400);--kk-tx:var(--mint-700)}
html[data-skin~="keokinh"] [data-p="cambridge"].pc,html[data-skin~="keokinh"] [data-p="cambridge"].plg{--pc:var(--sky-400);--pcs:var(--sky-100);--kk-bg:var(--sky-100);--kk-bd:var(--sky-400);--kk-tx:var(--sky-700)}
html[data-skin~="keokinh"] [data-p="khtn"].pc,html[data-skin~="keokinh"] [data-p="khtn"].plg{--pc:var(--peach-400);--pcs:var(--peach-100);--kk-bg:var(--peach-100);--kk-bd:var(--peach-400);--kk-tx:var(--peach-700)}
html[data-skin~="keokinh"] [data-p="timo"].pc,html[data-skin~="keokinh"] [data-p="timo"].plg{--pc:var(--sun-400);--pcs:var(--sun-100);--kk-bg:var(--sun-100);--kk-bd:var(--sun-400);--kk-tx:var(--sun-700)}
html[data-skin~="keokinh"] .pc{background:var(--card);color:var(--kk-ink);box-shadow:var(--candy-inner),0 14px 26px -16px rgba(20,30,60,.45)}
html[data-skin~="keokinh"] .pc.cur{box-shadow:var(--candy-inner),0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--kk-bd) 55%,transparent),0 14px 26px -16px rgba(20,30,60,.45)}
html[data-skin~="keokinh"] .pc-ic{background:var(--candy-gloss),linear-gradient(180deg,var(--kk-bg),color-mix(in srgb,var(--kk-bd) 55%,var(--kk-bg)));box-shadow:var(--candy-inner),0 6px 12px -6px color-mix(in srgb,var(--kk-bd) 85%,#1b2030)}
html[data-skin~="keokinh"] .pc-aud,html[data-skin~="keokinh"] .plg-c,html[data-skin~="keokinh"] .plgg>summary{color:var(--kk-muted)}
html[data-skin~="keokinh"] .pc-meta>span{background:var(--panel);color:var(--kk-ink)}
html[data-skin~="keokinh"] .pc-meta .pc-play{background:color-mix(in srgb,var(--kk-bg) 75%,#fff);color:var(--kk-tx)}
html[data-skin~="keokinh"] .pc-go{color:var(--accent-ink);font-family:var(--f-display)}
html[data-skin~="keokinh"] .pls h2{color:var(--kk-ink)}
html[data-skin~="keokinh"] .plg{background:var(--card);box-shadow:var(--candy-inner),0 10px 22px -16px rgba(20,30,60,.4)}
html[data-skin~="keokinh"] .plg>summary{color:var(--kk-ink)}
html[data-skin~="keokinh"] .xp-panel .trow{background:var(--panel)}
html[data-skin~="keokinh"] .xp-panel .trow:hover{background:color-mix(in srgb,var(--pcs) 60%,#fff)}
@media (prefers-reduced-motion:reduce){html[data-skin~="keokinh"] .xgrades button[aria-selected="true"]{animation:none}}
.xhero-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* cột co giãn thuộc về hàng lớp (cuộn ngang được), nút "Chương trình học" chỉ rộng bằng nội dung: trước đây 1fr rơi vào nút menu,
   nên thanh tràn ngang ở iPad (lớp đang chọn bị che) và thanh thu gọn có một viên trống dài */
html[data-skin~="keokinh"] .xbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;padding:10px 14px;padding-right:calc(14px + var(--util-w,0px))}
html[data-skin~="keokinh"] .xbar .xprogs{grid-column:1/-1;justify-self:center;width:max-content;max-width:100%}
html[data-skin~="keokinh"] .xgrades{padding:6px 4px}
@media (max-width:760px){html[data-skin~="keokinh"] .xbar{grid-template-columns:auto 1fr auto}html[data-skin~="keokinh"] .xbar .xgrades{grid-column:1/-1;order:3}html[data-skin~="keokinh"] .xbar .xprogs{order:4;justify-self:stretch;width:auto}}
html[data-skin~="keokinh"] .xfilters button{white-space:nowrap}
@media (max-width:760px){html[data-skin~="keokinh"] .xfilters{width:100%;overflow-x:auto}html[data-skin~="keokinh"] .xfilters button{padding:0 12px;flex:none}}
/* màn bài học + màn game theo Kẹo Kính: bảng hình bo 26, nút chính xanh ngọc */
html[data-skin~="keokinh"] .btn.primary{background:var(--primary);color:#fff}
html[data-skin~="keokinh"] .pboard{border-radius:26px;border:0;box-shadow:var(--shadow-choice)}
html[data-skin~="keokinh"] .pact .btn.primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 #075168}


/* sao trên thẻ Khám phá: sao đạt vàng đậm có viền, sao chưa đạt xám rỗng */
.xstars{display:flex;justify-content:center;gap:4px;padding:0 6px 12px;margin-top:auto}
.xstars .xs{width:26px;height:26px;fill:#E6E9EF;stroke:#BFC5D0;stroke-width:1.6;stroke-linejoin:round}
.xstars .xs.on{fill:#FFC21A;stroke:#C98A00;filter:drop-shadow(0 1px 0 rgba(150,90,0,.35))}
.xstars.g{gap:10px}
.xstars .xlv{display:flex;flex-direction:column;align-items:center;gap:1px}
.xstars .xlv>span{display:flex;gap:1px}
.xstars.g .xs{width:20px;height:20px}
.xstars .xlv small{font-size:11px;font-weight:700;color:var(--muted);line-height:1}
.xpouch small{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--muted);margin-left:-4px}
@media (max-width:420px){.xstars .xs{width:22px;height:22px}.xstars.g{gap:6px}.xstars.g .xs{width:15px;height:15px}}
/* tên thẻ 3 dòng bị cắt ở dòng 2: bỏ đệm dưới (dòng thừa lộ ra trong đệm, đè lên hàng sao) */
html[data-skin] .xc .xt{flex:none;padding-bottom:0;margin-bottom:10px;min-height:2.6em}
/* cô Cam luôn là quả cam (avatar vẽ bằng --cam, Kẹo Kính đổi --cam sang xanh ngọc cho nút) */
.avatar{--cam:var(--orange-400);--leaf:var(--green-500)}
html[data-skin~="keokinh"] .avatar{--cam:#EE8420;--leaf:#24985F}
/* cửa sổ "Chương trình học": thanh Kẹo Kính cao hơn thanh cũ, nên cửa sổ nổi từ sát trên, đè lên thanh */


/* ======================= Kẹo Kính v25: trang chủ không viền (15/10/2026) =======================
   Luật: tách khối bằng màu nền + bóng mềm + vệt sáng kính phía trên, không dùng nét viền.
   Mỗi viên kẹo: nền gradient sáng trên - đậm dưới, vệt bóng trắng ở nửa trên, bóng màu cùng tông phía dưới. */
html[data-skin~="keokinh"]{
  --candy-gloss:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 48%,rgba(255,255,255,0) 52%);
  --candy-inner:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -3px 6px -2px rgba(30,40,80,.14);
  --glass-tint:rgba(255,255,255,.42);--glass-tint-strong:rgba(255,255,255,.55)}
/* thanh trên: kính mờ thật, không viền */
html[data-skin~="keokinh"] .xbar{background:var(--glass-tint);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--shadow-rail),var(--candy-inner)}
/* nút lớp: viên kẹo màu, không viền */
html[data-skin~="keokinh"] .xgrades{padding:8px 10px 10px;scroll-padding-inline:16px}
html[data-skin~="keokinh"] .xgrades button{border:0;background:var(--candy-gloss),linear-gradient(180deg,var(--kk-bg),color-mix(in srgb,var(--kk-bd) 55%,var(--kk-bg)));color:var(--kk-tx);
  box-shadow:var(--candy-inner),0 4px 10px -5px color-mix(in srgb,var(--kk-bd) 80%,#1b2030)}
html[data-skin~="keokinh"] .xgrades button:not(:disabled):hover{border:0;box-shadow:var(--candy-inner),0 8px 14px -6px color-mix(in srgb,var(--kk-bd) 85%,#1b2030)}
html[data-skin~="keokinh"] .xgrades button[aria-selected="true"]{border:0;background:var(--candy-gloss),linear-gradient(180deg,color-mix(in srgb,var(--kk-bd) 75%,#fff),color-mix(in srgb,var(--kk-tx) 15%,var(--kk-bd)));color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);
  transform:translateY(-2px) scale(1.06);box-shadow:var(--candy-inner),0 10px 18px -6px color-mix(in srgb,var(--kk-tx) 70%,transparent)}
html[data-skin~="keokinh"] .xgrades button:disabled{border:0;background:rgba(255,255,255,.35);color:#8a90a0;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
/* thanh chương trình + nút "Chương trình học": kính, không viền */
html[data-skin~="keokinh"] .xprogs{background:rgba(255,255,255,.35);box-shadow:inset 0 1px 3px rgba(30,40,80,.10)}
html[data-skin~="keokinh"] .xprogs button[aria-selected="true"]{background:var(--candy-gloss),#fff;box-shadow:var(--candy-inner),0 3px 8px -3px rgba(20,30,60,.35)}
html[data-skin~="keokinh"] .xnavbtn{border:0;background:var(--glass-tint-strong);box-shadow:var(--shadow-rail),var(--candy-inner)}
/* bộ lọc: viên kẹo trắng, đang chọn là kẹo xanh; chừa chỗ cho bóng, xếp sát trái */
html[data-skin~="keokinh"] .xfilters{justify-content:flex-start;padding:4px 6px 12px;margin:-4px -6px -12px}
html[data-skin~="keokinh"] .xfilters button{border:0;background:var(--candy-gloss),rgba(255,255,255,.8);box-shadow:var(--candy-inner),0 6px 14px -8px rgba(20,30,60,.45)}
html[data-skin~="keokinh"] .xfilters button[aria-checked="true"]{background:var(--candy-gloss),linear-gradient(180deg,#5cc3e0,var(--accent-ink));color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:var(--candy-inner),0 8px 16px -8px var(--accent-ink)}
/* ô số chủ đề: viên kẹo vuông, không viền */
html[data-skin~="keokinh"] .xm .xno{border:0;background:var(--candy-gloss),linear-gradient(180deg,var(--kk-bg),color-mix(in srgb,var(--kk-bd) 60%,var(--kk-bg)));
  box-shadow:var(--candy-inner),0 6px 12px -6px color-mix(in srgb,var(--kk-bd) 85%,#1b2030)}
html[data-skin~="keokinh"] .xprog i{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 2px rgba(30,40,80,.15)}
/* thẻ hoạt động: không viền; trạng thái đổi bằng vầng sáng */
html[data-skin~="keokinh"] .xc{border:0;box-shadow:var(--candy-inner),0 14px 26px -16px rgba(20,30,60,.45)}
html[data-skin~="keokinh"] .xc .xth{box-shadow:inset 0 1px 3px rgba(30,40,80,.08)}
html[data-skin~="keokinh"] .xc.playing{border:0;box-shadow:var(--candy-inner),0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent),0 22px 30px -16px rgba(20,30,60,.55)}
html[data-skin~="keokinh"] .xc.last{border:0;box-shadow:var(--candy-inner),0 0 0 4px color-mix(in srgb,var(--sun-400) 45%,transparent),0 14px 26px -16px rgba(20,30,60,.45)}
/* sao: sao chưa đạt là hạt kính mờ, sao đạt là kẹo vàng; không nét viền */
html[data-skin~="keokinh"] .xstars .xs{fill:#e3e7ef;stroke:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(30,40,80,.10))}
html[data-skin~="keokinh"] .xstars .xs.on{fill:#ffc21a;stroke:none;filter:drop-shadow(0 2px 2px rgba(180,110,0,.45))}

/* ======================= Thanh thu gọn (23/10/2026) =======================
   Thanh đầy đủ (.xbar) cuộn đi theo trang. Thanh thu gọn (#xmini: logo, các nút lớp, menu) cố định trên cùng, chỉ hiện khi kéo lên ở
   giữa trang (explore.js), trượt bằng transform + opacity. Đã khuất thì visibility:hidden + inert: phím Tab bỏ qua, trang không bị kéo. */
.xmini{position:fixed;z-index:25;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:6px max(16px,3vw);padding-right:calc(max(16px,3vw) + var(--util-w,0px));background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 8px 20px -12px rgba(16,40,46,.35);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s;will-change:transform}
/* .xhide, không phải .off: viz.css .off là lớp "đáp án sai" (viền đỏ 4px), từng làm thanh hiện viền đỏ lúc trượt đi */
.xmini.xhide{transform:translateY(calc(-100% - 24px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .24s cubic-bezier(.4,0,1,1),opacity .18s ease .06s,visibility 0s linear .24s}
.xmini .brand-img img{height:26px}
.xmini .xgrades{flex:1;min-width:0;padding:4px 2px;order:0;flex-basis:auto} /* không theo quy tắc điện thoại của thanh đầy đủ (.xgrades order:3, cả hàng) */
.xmini .xgrades button{min-height:44px;padding:0 12px;font-size:15px}
.xmini .xgrades button[aria-pressed="true"]{background:var(--cam);border-color:var(--cam);color:var(--cam-ink);box-shadow:0 4px 0 rgba(0,0,0,.12)}
.xmini .xnavbtn{position:relative;flex:none;min-height:44px;min-width:48px;padding:0 12px} /* relative: ::before (vùng chạm 48px) chỉ bọc nút, không phủ cả thanh */
.xmini .xnavbtn::before{content:"";position:absolute;inset:-2px 0}
html[data-skin~="keokinh"] .xmini{top:calc(env(safe-area-inset-top,0px) + 8px);left:max(16px,3vw);right:max(16px,3vw);margin:0 auto;max-width:calc(1440px - 2*max(16px,3vw));
  padding:4px 8px;padding-right:calc(10px + var(--util-w,0px));border:0;border-radius:22px;background:var(--glass-tint);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--shadow-rail),var(--candy-inner)}
html[data-skin~="keokinh"] .xmini .xgrades{padding:5px 4px 7px}
html[data-skin~="keokinh"] .xmini .xgrades button{border-radius:13px}
html[data-skin~="keokinh"] .xmini .xgrades button[aria-pressed="true"]{background:var(--candy-gloss),linear-gradient(180deg,color-mix(in srgb,var(--kk-bd) 75%,#fff),color-mix(in srgb,var(--kk-tx) 15%,var(--kk-bd)));
  color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);transform:translateY(-1px) scale(1.04);box-shadow:var(--candy-inner),0 8px 14px -6px color-mix(in srgb,var(--kk-tx) 70%,transparent)}
@media (max-width:480px){.xmini .brand-img{display:none}}

/* ======================= Lớp / chương trình đang chọn rõ ràng (23/10/2026) =======================
   - Lớp đang chọn: kẹo đậm chữ trắng + vòng trắng + quầng cùng màu, nhô lên; đứng yên (bỏ "thở"). Lớp khác nhạt bớt để nó nổi hẳn
     (màu kẹo lặp mỗi 5 lớp: Lớp 3 và Lớp 8 cùng tông, chỉ màu thì không đủ). Lớp chưa có bài: viền nét đứt.
   - Hàng lớp và khay chương trình là vùng cuộn ngang, cắt luôn phần tràn dọc: đệm đủ chỗ cho vòng + bóng (lề âm bù lại để thanh
     không cao thêm), bóng viên chương trình thu nhỏ vừa trong khay. */
html[data-skin~="keokinh"] .xgrades{padding:12px 12px 20px;margin:-4px -2px -10px}
html[data-skin~="keokinh"] .xmini .xgrades{padding:10px 12px 12px;margin:-5px -8px -7px} /* đệm trên / dưới cân nhau (thực còn 5 / 5): hàng lớp nằm giữa thanh */
/* khoảng thở: vòng + quầng của lớp đang chọn tràn ~9px mỗi bên, nên khe 16px; chữ 16 / đệm 14 để cả hàng không dài thêm nhiều */
html[data-skin~="keokinh"] .xgrades{gap:16px}
html[data-skin~="keokinh"] .xgrades button{font-size:16px;padding:0 14px;transition:transform .35s var(--spring),box-shadow .25s ease,filter .25s ease}
/* laptop ≤1366px: nút "Chương trình học" chỉ còn biểu tượng (có aria-label) để 9 nút lớp vẫn vừa một hàng với khe rộng */
@media (max-width:1366px){html[data-skin~="keokinh"] .xbar .xnavbtn span{display:none}html[data-skin~="keokinh"] .xbar .xnavbtn{min-width:48px;padding:0 12px;justify-content:center}}
html[data-skin~="keokinh"] .xmini .xgrades{gap:12px}
html[data-skin~="keokinh"] .xmini .xgrades button{font-size:15px;padding:0 12px}
/* viền focus bàn phím của nút lớp nằm bên trong viên kẹo: vẫn thấy rõ, không chồng lên vòng chọn và không lấn sang nút bên cạnh */
html[data-skin~="keokinh"] .xgrades button:focus-visible{outline:2.5px solid #fff;outline-offset:-6px}
html[data-skin~="keokinh"] .xgrades button:not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled){filter:saturate(.7) brightness(1.03)}
html[data-skin~="keokinh"] .xgrades button:not([aria-selected="true"]):not([aria-pressed="true"]):not(:disabled):hover{filter:none}
html[data-skin~="keokinh"] .xgrades button[aria-selected="true"],html[data-skin~="keokinh"] .xmini .xgrades button[aria-pressed="true"]{
  background:var(--candy-gloss),linear-gradient(180deg,color-mix(in srgb,var(--kk-bd) 78%,#fff),color-mix(in srgb,var(--kk-tx) 22%,var(--kk-bd)));color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.28);
  transform:translateY(-2px) scale(1.04);animation:none;
  box-shadow:var(--candy-inner),0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--kk-bd) 50%,transparent),0 10px 14px -8px color-mix(in srgb,var(--kk-tx) 70%,transparent)}
/* thanh thu gọn thấp: lớp đang chọn giữ vòng trắng + quầng nhưng mảnh hơn (2,5 + 5px, nằm gọn trong chiều cao thanh), không nhô / phóng,
   nên thẳng hàng với các lớp khác */
html[data-skin~="keokinh"] .xmini .xgrades button[aria-pressed="true"]{transform:none;box-shadow:var(--candy-inner),0 0 0 2.5px #fff,0 0 0 5px color-mix(in srgb,var(--kk-bd) 45%,transparent),0 6px 10px -6px color-mix(in srgb,var(--kk-tx) 70%,transparent)}
html[data-skin~="keokinh"] .xgrades button:disabled{outline:1.5px dashed rgba(27,32,48,.2);outline-offset:-5px;color:#9097a6}
/* khay chương trình: nền lõm xám nhẹ (nổi rõ trên mảng màu), viên chọn thấp 40px chừa khe 4px quanh nó để thấy khay;
   vùng bấm vẫn 48px nhờ ::before; bóng viên chọn nhỏ vừa trong khe 4px (khay là vùng cuộn ngang, cắt phần tràn) */
html[data-skin~="keokinh"] .xprogs{padding:4px;gap:4px;border-radius:16px;background:rgba(27,32,48,.07);box-shadow:inset 0 1px 2px rgba(30,40,80,.14),0 1px 0 rgba(255,255,255,.6)}
html[data-skin~="keokinh"] .xprogs button{position:relative;min-height:40px;padding:0 16px;border-radius:12px;transition:background .2s,color .2s}
html[data-skin~="keokinh"] .xprogs button::before{content:"";position:absolute;inset:-4px 0}
html[data-skin~="keokinh"] .xprogs button:not([aria-selected="true"]):not(:disabled):hover{background:rgba(255,255,255,.5);color:var(--kk-ink)}
html[data-skin~="keokinh"] .xprogs button[aria-selected="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(20,30,60,.16),0 2px 4px -2px rgba(20,30,60,.2)}
@media (prefers-reduced-motion:reduce){html[data-skin~="keokinh"] .xgrades button{transition:none}}
/* đổi lớp / chương trình / bộ lọc: nội dung mới hiện dần, không nháy trắng */
@keyframes xin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* --xin-t (explore.js) âm khi vẽ lại giữa chừng: hiệu ứng chạy tiếp từ chỗ đang dở */
.xmain.xin>.xhero,.xmain.xin>.xm,.xmain.xin>.xprog-h{animation:xin .36s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--xin-t,0ms)}
.xmain.xin>:nth-child(2){animation-delay:calc(var(--xin-t,0ms) + 40ms)}.xmain.xin>:nth-child(3){animation-delay:calc(var(--xin-t,0ms) + 80ms)}.xmain.xin>:nth-child(4){animation-delay:calc(var(--xin-t,0ms) + 120ms)}.xmain.xin>:nth-child(n+5){animation-delay:calc(var(--xin-t,0ms) + 160ms)}

/* ===== Luồng 6: nút dấu so sánh to, có chữ (acts.js gắn .sign + .sign-w) ===== */
.opt.sign{flex-direction:column;gap:2px;font-size:44px;line-height:1;padding-top:8px;padding-bottom:8px;min-height:84px}
.opt.sign .sign-w{font-size:15px;font-weight:800;line-height:1;color:var(--text-secondary);letter-spacing:0}
.opt.sign.right .sign-w,.opt.sign.wrong .sign-w,.opt.sign.picked .sign-w{color:inherit}
.player.case .pboard{--strip:64px} /* nút Sổ thám tử 48px cần dải trên cao hơn */
/* Nấc cuối của thang (lesson.js: data-level="reveal" khi cô làm cùng, data-tone="help" khi đã nhận hộ):
   đó là một bước dạy, không phải "sai" nữa -> tông cyan, không icon ✗ */
.coach[data-level="reveal"][data-tone="no"] .bubble,.coach[data-tone="help"] .bubble{background:linear-gradient(var(--ans-sel-bg),var(--ans-sel-bg)),var(--surface-card);border-color:var(--cyan-400)}
.coach[data-level="reveal"][data-tone="no"] .bubble::before,.coach[data-tone="help"] .bubble::before{background:var(--surface-card);border-color:var(--cyan-400)}
.coach[data-level="reveal"][data-tone="no"] .say .fbt,.coach[data-tone="help"] .say .fbt{color:var(--cyan-600)}
.coach[data-level="reveal"][data-tone="no"] .fbt::before,.coach[data-tone="help"] .fbt::before{display:none}
.numout.helped{border-style:solid;border-color:var(--cyan-400);background:var(--ans-sel-bg);color:var(--cyan-600)}
#acceptBtn{min-height:52px}

/* Biểu thức to đặt ngay trên hình (lesson.js setExpr): hàng riêng dưới dải nhãn, ô "?" theo số con gõ */
.pboard.has-expr{--strip:120px}
.bexpr{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:32px;line-height:1;font-weight:900;color:var(--text-heading);padding:6px 18px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-default);box-shadow:var(--shadow-soft);font-variant-numeric:tabular-nums}
.bexpr .bq{display:inline-grid;place-items:center;min-width:60px;height:48px;padding:0 10px;border:3px dashed var(--cyan-400);border-radius:var(--radius-lg);background:var(--cyan-50);color:var(--cyan-500)}
.bexpr .bq.typed{border-style:solid;color:var(--text-heading)}
.bexpr .bq.right{border-style:solid;border-color:var(--green-400);background:var(--ans-ok-bg);color:var(--green-500)}
.bexpr .bq.helped{border-style:solid;border-color:var(--cyan-400);background:var(--ans-sel-bg);color:var(--cyan-600)}
@media (max-aspect-ratio:1/1), (max-width:760px){
  .pboard.has-expr.has-expr{--strip:108px}
  .bexpr{top:56px;font-size:28px}
  .bexpr .bq{min-width:54px;height:44px}
}

/* nút điều khiển của cảnh canvas dựng thành DOM 56px trên điện thoại, ngay dưới bảng hình (world/dock.js, engine.js syncDock) */
.wdock{order:0;flex:none;display:flex;gap:10px;justify-content:center}
.wdock-b{flex:1 1 0;max-width:190px;min-height:56px;padding:0 12px;border:2px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-card);color:var(--text-heading);font-family:var(--f-display);font-weight:800;font-size:18px;box-shadow:var(--shadow-soft-sm)}
.wdock-b:disabled{opacity:.45}
.wdock-b.hl{border-color:var(--cam);outline:3px dashed var(--cam);outline-offset:2px}
.wdock-b:active:not(:disabled){transform:scale(.97);border-color:var(--cyan-400)}

/* "Cô làm cùng con": nút mời của cô (tông cyan, đầy chiều ngang), không phải thẻ lơ lửng */
.pfb .fbx:has(#acceptBtn){width:100%}
#acceptBtn{flex:1;min-height:48px;border-color:var(--cyan-400);color:var(--cyan-600);background:var(--ans-sel-bg)}

/* game / đố chiến lược trên điện thoại: cảnh là phần chơi chính nên bảng hình được ưu tiên chiều cao; cột phải (đề, sổ chiến lược) cuộn */
@media (max-aspect-ratio:1/1), (max-width:760px){
  .player.drill{--board-min:clamp(215px,31dvh,290px)}
  .player.drill .pboard{--strip:36px}
  .player.drill .ppanel>.pmain{flex-shrink:1}
}

/* ===== styles/exam.css (ghép khi đóng gói) ===== */
/* Khu Luyện đề (src/ui/exam.js) - dùng chung khung .player của màn học; chỉ thêm phần riêng của đề thi.
   Màu theo biến của giao diện (sáng / Kẹo Kính), không viền đen dày (Luật UX 16). */

/* đồng hồ cả đề: chip nhỏ cố định ở thanh trên (Luật UX 2) */
.xtimer{flex:none;font-family:var(--f-display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;padding:6px 12px;border-radius:999px;background:var(--sky-soft);color:var(--sky)}
.xtimer.warn{background:var(--bad-soft);color:var(--bad);animation:xpulse 1s ease-in-out infinite alternate}
@keyframes xpulse{to{transform:scale(1.06)}}
.pdots.x25{gap:3px}
.pdots.x25 i{width:9px}
.pdots.x25 i.on{width:18px}
.pdots i.no{background:var(--no-bg);box-shadow:inset 0 0 0 1.5px var(--no-bd)}

/* bản đồ 25 câu: 5 phân môn x 5 câu */
.xmap{display:flex;flex-direction:column;gap:8px}
.xmr{display:flex;align-items:center;gap:8px}
.xml{width:112px;flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.xmc{width:46px;height:46px;flex:none;border:0;border-radius:12px;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:18px;background:var(--surface-2);color:var(--muted)}
.xmc.on{color:var(--ink)}
.xmc.s0.on{background:var(--sun-100,#f6e3a8);color:var(--sun-700,#8a5a12)} .xmc.s1.on{background:var(--peach-100,#f7cdb0);color:var(--peach-700,#8c4119)} .xmc.s2.on{background:var(--coral-100,#f2b9b2);color:var(--coral-700,#922f2b)} .xmc.s3.on{background:var(--mint-100,#bfe6cf);color:var(--mint-700,#1f6b45)} .xmc.s4.on{background:var(--sky-100,#bfddf3);color:var(--sky-700,#1d5c8c)}
/* Kẹo Kính: ô câu là viên kẹo (vệt bóng, bóng đổ cùng tông), không viền (Luật UX 16) */
html[data-skin~="keokinh"] .xmc{box-shadow:var(--shadow-cell),var(--shadow-glass-inner);background:var(--panel)}
html[data-skin~="keokinh"] .xmc.cur{box-shadow:var(--shadow-cell-current),0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
html[data-skin~="keokinh"] .xmap.big .xmc.s0{color:var(--sun-700)} html[data-skin~="keokinh"] .xmap.big .xmc.s1{color:var(--peach-700)} html[data-skin~="keokinh"] .xmap.big .xmc.s2{color:var(--coral-700)} html[data-skin~="keokinh"] .xmap.big .xmc.s3{color:var(--mint-700)} html[data-skin~="keokinh"] .xmap.big .xmc.s4{color:var(--sky-700)}
html[data-skin~="keokinh"] .xmap.big .xmc.s0{background:color-mix(in srgb,var(--sun-100) 60%,#fff)} html[data-skin~="keokinh"] .xmap.big .xmc.s1{background:color-mix(in srgb,var(--peach-100) 60%,#fff)} html[data-skin~="keokinh"] .xmap.big .xmc.s2{background:color-mix(in srgb,var(--coral-100) 60%,#fff)} html[data-skin~="keokinh"] .xmap.big .xmc.s3{background:color-mix(in srgb,var(--mint-100) 60%,#fff)} html[data-skin~="keokinh"] .xmap.big .xmc.s4{background:color-mix(in srgb,var(--sky-100) 60%,#fff)}
html[data-skin~="keokinh"] .xask{background:color-mix(in srgb,var(--sky-100) 55%,#fff);box-shadow:var(--shadow-cell)}
html[data-skin~="keokinh"] .xclock{background:var(--sky-100);color:var(--sky-700);box-shadow:var(--shadow-cell),var(--shadow-glass-inner)}
html[data-skin~="keokinh"] .xtimer{background:var(--sky-100);color:var(--sky-700)}
html[data-skin~="keokinh"] .xbq i.ok{background:var(--mint-400)} html[data-skin~="keokinh"] .xbq i.no{background:var(--no-bg);border:2px dashed var(--sun-400)}
html[data-skin~="keokinh"] .xsum .ok{background:var(--mint-100);color:var(--mint-700)} html[data-skin~="keokinh"] .xsum .no{background:var(--no-bg);color:var(--sun-700);border:2px dashed var(--sun-400)}
html[data-skin~="keokinh"] .xtrap{background:var(--no-bg);color:var(--sun-700);border:2px dashed var(--sun-400)}
html[data-skin~="keokinh"] .xsteps li.on{background:var(--sun-100)}
html[data-skin~="keokinh"] .xscore b{color:var(--accent-ink)}
.xmc.cur{box-shadow:0 0 0 3px var(--cam)}
button.xmc{cursor:pointer}
.xmap.big{width:520px;gap:10px}
.xmap.big .xml{width:150px;font-size:16px}
.xmap.big .xmc{width:58px;height:58px;font-size:22px}
.xgoal{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.xclock{font-family:var(--f-display);font-weight:800;font-size:34px;padding:4px 16px;border-radius:16px;background:var(--sky-soft);color:var(--sky);font-variant-numeric:tabular-nums}
.xgs{display:flex;flex-direction:column;align-items:center;gap:2px}
.xgs b{font-size:13px;color:var(--muted)}
.xgs .xs,.xstars3 .xs{width:22px;height:22px}
.xtip{margin:0;font-size:15.5px;line-height:1.45;background:var(--surface-2);border-radius:14px;padding:10px 12px}

/* câu hỏi và ô trả lời */
.xq{font-family:var(--f-body);font-weight:600;font-size:16.5px;line-height:1.45;margin:0}
.xq.sm{font-size:14.5px;color:var(--muted);font-weight:500}
.xopts .opt{min-height:56px;font-size:18px}
.keypad.letters{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.keypad.letters button{height:46px;font-size:19px}
.xexpr{font-size:24px;line-height:2.3}
.xexpr b{font-family:var(--f-display);font-weight:800}

/* kết quả */
.xres{display:flex;flex-direction:column;align-items:center;gap:12px;width:560px}
.xscore{display:flex;align-items:baseline;gap:8px}
.xscore b{font-family:var(--f-display);font-weight:800;font-size:96px;line-height:1;color:var(--cam)}
.xscore small{font-size:20px;font-weight:700;color:var(--muted)}
.xstars3{display:flex;gap:10px}
.xstars3 span{display:block;animation:pop .6s cubic-bezier(.2,1.5,.4,1) both}
.xstars3 .xs{width:58px;height:58px}
.xmedal{margin:0;font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--ink)}
.xbars{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
.xbr{display:grid;grid-template-columns:150px 1fr 44px;align-items:center;gap:10px;font-size:15px;font-weight:700}
.xbr b{font-family:var(--f-display);font-size:18px;text-align:right}
.xbq{display:flex;gap:6px}
.xbq i{flex:1;height:22px;border-radius:7px;background:var(--surface-2)}
.xbq i.ok{background:var(--leaf)}
.xbq i.no{background:var(--no-bg);border:2px dashed var(--no-bd)}
.xsum{display:flex;flex-wrap:wrap;gap:8px}
.xsum span{font-weight:800;font-size:15px;padding:6px 12px;border-radius:999px;background:var(--surface-2)}
.xsum .ok{background:var(--leaf-soft);color:var(--leaf)}
.xsum .no{background:var(--no-bg);color:var(--no-tx);border:2px dashed var(--no-bd)}

/* chữa đề */
.seg.xseg{flex-direction:column;align-items:stretch}
.seg.xseg button{height:auto;min-height:44px;text-align:left;padding:8px 12px;font-size:15px;line-height:1.25}
.xsteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.4}
.xsteps li{padding:4px 8px;border-radius:10px}
.xsteps li.next{color:var(--muted);opacity:.55}
.xsteps li.on{background:var(--cam-soft);font-weight:700}
.xtrap{margin:0;font-size:14.5px;background:var(--no-bg);color:var(--no-tx);border:2px dashed var(--no-bd);border-radius:12px;padding:8px 12px}
.xtag{margin:0;font-size:13px;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--sky);background:var(--sky-soft)}

/* điện thoại / iPad dọc: bảng hình trên, khu trả lời dưới (khung .player đã đổi bố cục), thu nhỏ phần riêng */
@media (max-width:900px) and (orientation:portrait){
  .xmap.big{width:440px}.xmap.big .xmc{width:48px;height:48px;font-size:19px}.xmap.big .xml{width:120px;font-size:14px}
}

/* thẻ đề ở màn chính */
.xexam-th{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--sky-soft)}
.xexam-th .xph svg{width:56px;height:56px;fill:none;stroke:var(--sky);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xexam-n{font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--sky)}
.xexam-go{position:absolute;top:8px;left:8px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--cam);color:var(--cam-ink)}
.xexam-sub{font-size:13px;color:var(--muted);font-weight:600;padding:0 12px}
.xgr{display:flex;gap:2px}
.xgs .xs,.xstars3 .xs{fill:#E3E7EF;stroke:none}
.xgs .xs.on,.xstars3 .xs.on{fill:#FFC21A;filter:drop-shadow(0 2px 2px rgba(180,110,0,.4))}
/* bàn phím số gọn 2 hàng (1-9, 0, xoá) để vừa khung cả khi màn dọc */
.exam .keypad:not(.letters){grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.exam .keypad button{height:50px}
.exam .numout{height:56px;font-size:32px}
@media (orientation:portrait){.exam .xq{font-size:15px}.exam .bubble{font-size:15px}.exam .keypad button{height:46px}}
/* dãy dấu: mỗi ô dấu là hai nút xếp dọc (+ trên, − dưới) để cả dãy nằm một hàng */
.xexpr{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;line-height:1.2;font-size:24px}
.xexpr .blank{flex-direction:column;flex-wrap:nowrap;margin:0;gap:3px}
.xexpr .blank button{min-width:44px;height:40px;padding:0}
/* chữa đề: gọn để bước cuối (lời giải + lỗi hay gặp) vẫn vừa khung, không phải cuộn */
.t-review{gap:8px}
.t-review .xq.sm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seg.xseg{display:grid;grid-template-columns:1fr 1fr;flex-direction:row}
.seg.xseg button{font-size:13.5px;min-height:40px}
.t-review .xsteps{font-size:14.5px;gap:3px}
.t-review .xsteps li{padding:3px 7px}
.t-review .xtrap{font-size:13.5px;padding:6px 10px}
.t-review .xsum span{font-size:14px;padding:4px 10px}
.exam .pfb .chip{min-height:36px;padding:4px 12px;font-size:13px}
.xexam-th{position:relative}
.xexam-th .xexam-n{position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:1}
/* bảng đáp án cả đề */
.xkeys{gap:4px}
.xkeys .eyebrow{margin:10px 0 2px}
.xkey{display:flex;align-items:center;gap:10px;min-height:48px;border:0;border-radius:12px;background:var(--surface-2);padding:6px 12px;text-align:left;font-size:14px}
.xkey:hover{background:var(--cam-soft)}
.xkn{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--surface);font-family:var(--f-display);font-weight:800}
.xkt{flex:1;color:var(--muted);font-weight:600}
.xkey b{font-family:var(--f-display);font-size:17px;color:var(--leaf);white-space:nowrap}
.xpp{margin:0;font-size:13px;color:var(--muted);line-height:1.35}
.xpp b{color:var(--sky)}
/* giải cùng cô: thẻ câu hỏi nhỏ của từng bước */
.seg.xmode{display:grid;grid-template-columns:1fr 1fr}
.seg.xmode button{font-size:15px}
.xask{display:flex;flex-direction:column;gap:8px;background:var(--cam-soft);border-radius:16px;padding:10px 12px}
.xaskq{margin:0;font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.3}
.xaskq span{display:block;font-family:var(--f-body);font-size:12px;font-weight:800;color:var(--cam);text-transform:uppercase;letter-spacing:.05em}
.xask .opt{min-height:52px;font-size:17px}
.xask .numout{height:50px;font-size:28px}
.xask .keypad button{height:44px}

/* Làm bài = tờ đề thi: không bảng hình bên trái, một cột giữa màn (góp ý 18/10, Luật 10) */
.player.exam[data-mode="test"]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar" "panel"}
.player.exam[data-mode="test"] .pboard,.player.exam[data-mode="test"] .coach{display:none}
.player.exam[data-mode="test"] .ppanel{width:100%;max-width:760px;margin:0 auto;max-height:none;padding:18px 16px}
.xde{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(10px,1.8vh,18px) 20px}
.xde-q{margin:0;font-size:clamp(18px,2.2vw,22px);line-height:1.5;font-weight:600}
.xde-q b{color:var(--sky-700,#0c6b8a)}
.xde-h{margin-top:8px;display:grid;place-items:center}
.xde-h .vz{max-width:100%;max-height:clamp(140px,25vh,280px);width:auto;height:auto}

/* ===== Chữa đề - quy hoạch 18/10 (góp ý chị Alex): câu hỏi ở đầu bảng hình; bên phải 1 thẻ làm việc ===== */
.bq{position:absolute;top:12px;left:12px;right:12px;z-index:2;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:16px;padding:10px 16px;
  font-family:var(--f-body);font-weight:600;font-size:clamp(15px,1.5vw,18px);line-height:1.45;box-shadow:0 2px 8px rgba(30,40,70,.06)}
.bq b{color:var(--sky-700,#0c6b8a);font-family:var(--f-display);font-weight:800}
.exam .t-review{display:flex;flex-direction:column;gap:10px}
.xrbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.xrbar .xsum{flex-wrap:nowrap}
.xrbar .xsum{gap:6px}
.xrbar .xsum span{font-size:14px;padding:4px 10px}
.xsum .wait{background:var(--surface-2);color:var(--muted)}
.xrbar .seg.xmode{display:inline-flex;grid-template-columns:none;padding:3px;border-radius:12px}
.xrbar .seg.xmode button{height:30px;font-size:13px;padding:0 10px;border-radius:9px}
.xtabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xtabs button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;min-height:52px;padding:7px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);
  font-family:var(--f-display);font-weight:800;font-size:15px;line-height:1.2;color:var(--ink);cursor:pointer}
.xtabs button small{font-family:var(--f-body);font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.xtabs button[aria-selected="true"]{border-color:var(--sky);background:color-mix(in srgb,var(--sky-100,#dff3fb) 70%,#fff)}
.xtabs button[aria-selected="true"] small{color:var(--sky)}
.xwork{display:flex;flex-direction:column;gap:9px;background:color-mix(in srgb,var(--sky-100,#dff3fb) 45%,#fff);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow-cell,0 2px 6px rgba(0,0,0,.06))}
.xwtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.xwh{font-size:12.5px;font-weight:800;color:var(--sky);text-transform:uppercase;letter-spacing:.05em}
.xwh.ok{color:var(--mint-700,var(--leaf))}
.xdots{display:flex;gap:6px}
.xdots i{width:22px;height:8px;border-radius:99px;background:var(--line)}
.xdots i.done{background:var(--mint-400,var(--leaf))}
.xdots i.cur{background:var(--sun-400,var(--cam))}
.xwork .xaskq{font-size:18px}
.xwork .opt{min-height:50px;font-size:17px}
.xwork .numout{height:48px;font-size:28px}
.xwork .keypad button{height:42px}
.xsteps.mini{font-size:13px;opacity:.75;gap:1px}
.xsteps.mini li{padding:1px 6px}
.t-review .xsteps li.past{color:var(--ink)}
.t-review .xtag{font-size:12.5px;line-height:1.45}
.t-review .xtag b{color:var(--sky)}
.player.exam[data-mode="review"] .fbx,.player.exam[data-mode="retry"] .fbx{display:flex;gap:6px;flex-wrap:wrap}
@media (orientation:portrait){.bq{font-size:15px;padding:8px 12px}}
/* dải mỏng (góp ý 18/10: khu kết quả + tab "chiếm diện tích mà không cần nhìn liên tục"): Cách 1 | Cách 2 bên trái, Cùng cô | Xem nhanh bên phải */
.xrbar{flex-wrap:nowrap}
.xrbar .seg{display:inline-flex;padding:3px;border-radius:12px;gap:2px}
.xrbar .seg button{height:30px;font-size:13px;padding:0 11px;border-radius:9px;min-width:0}
.seg.xmeth button[aria-selected="true"]{background:var(--sky);color:#fff}
.xwname{font-family:var(--f-display);font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.2}
.xwsub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-4px}
.xans{font-size:13px;font-weight:700;color:var(--mint-700,var(--leaf))}
.xans b{font-size:15px}

/* thẻ vào khu Luyện đề (trang chương trình) */
.exam-entry{display:flex;align-items:center;gap:12px;margin:10px 16px 0;padding:12px 14px;border-radius:16px;background:var(--sky-soft);color:var(--ink);border:1px solid var(--line);cursor:pointer;text-align:left;font:inherit;min-height:56px}
.exam-entry b{font-family:var(--f-display);font-size:16px;display:block}
.exam-entry small{color:var(--muted);font-weight:600}
.exam-entry .xe-go{margin-left:auto;font-weight:800;color:var(--sky)}
.exam-entry:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* Báo cáo mạnh / yếu theo dạng đề (màn kết quả Luyện đề) */
.xrep{display:flex;flex-direction:column;gap:6px;width:min(1000px,100%);padding:4px}
.xrep h2{margin:0 0 4px;font-size:24px;line-height:32px}
.xrsum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.xrsum .s{font-weight:800;font-size:13px;line-height:1;padding:8px 12px;border-radius:999px;background:var(--neutral-150)}
.xrsum .s.strong{background:var(--green-50);color:var(--green-500)}.xrsum .s.mid{background:var(--yellow-50);color:var(--yellow-500)}.xrsum .s.weak{background:var(--red-50);color:var(--red-500)}
.xrep .eyebrow{margin:10px 0 2px}
.xrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface-card);border:1.5px solid var(--border-default)}
.xrow.weak{border-color:var(--red-400)}.xrow.mid{border-color:var(--yellow-400)}.xrow.strong{border-color:var(--green-400)}
.xrn{font-size:15px;line-height:20px;font-weight:800}
.xrd{display:flex;gap:4px}.xrd i{width:14px;height:14px;border-radius:5px;background:var(--neutral-200)}.xrd i.ok{background:var(--green-400)}.xrd i.no{background:var(--no-bg);box-sizing:border-box;border:2px dashed var(--no-bd)}
.xrl{font-size:13px;line-height:1;font-weight:800;min-width:92px;text-align:right;color:var(--text-secondary)}
.xrow.weak .xrl{color:var(--red-500)}.xrow.strong .xrl{color:var(--green-500)}.xrow.mid .xrl{color:var(--yellow-500)}
.xsug{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--border-default)}
.xsug b{font-size:15px;line-height:20px}

.xrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:820px){.xrows{grid-template-columns:1fr}}
.xrow{padding:8px 12px}
.xrl{min-width:70px}

/* W4a: sao bay vào túi + nhãn "Tiếp theo" trên thẻ trang chủ */
.xfly{position:fixed;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;pointer-events:none;z-index:60;will-change:transform,opacity}
.xfly .xs{width:32px;height:32px;fill:#ffc21a;stroke:none;filter:drop-shadow(0 2px 3px rgba(180,110,0,.5))}
.xnextb{position:absolute;left:8px;top:8px;padding:3px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;line-height:1.3;box-shadow:0 2px 6px rgba(16,40,46,.25)}
@media (prefers-reduced-motion:reduce){.xfly{display:none}}

/* ---------- W2 · viên "Tiếp" tự sang + vạch đếm ngược (Đổi UX chính HV2; audit/32 M9) ----------
   lesson.js autoNext(): hiện viên ngay khi bước xong, vạch .anbar i chạy scaleX 0 -> 1 bằng Web Animation đúng thời gian chờ.
   Cô còn nói (data-phase=noi): chỉ chạm viên mới sang; cô nói xong (data-phase=dem): chạm bất kỳ đâu trên màn học là sang ngay. Vạch chạy bằng JS nên giảm chuyển động không tắt được thời gian, chỉ là vạch tĩnh dần. */
.player .autonext{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:128px;min-height:48px;padding:9px 22px 8px;border-radius:999px;background:var(--color-primary);color:var(--text-on-brand,#fff);font-weight:800;font-size:var(--kid-body,18px);text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer;user-select:none;-webkit-user-select:none}
.player .autonext[hidden]{display:none}
.player .autonext .anbar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.player .autonext .anbar i{display:block;height:100%;background:currentColor;transform-origin:left center;transform:scaleX(0)}
html[data-skin~="keokinh"] .player .autonext{background:var(--primary);color:#fff;box-shadow:0 4px 0 #075168,0 8px 20px rgba(7,81,104,.22)}
/* pha 'noi' (cô Cam còn đang nói): vạch chưa đếm, chỉ thở nhẹ cho biết đang chờ cô; cô nói xong mới sang pha 'dem' (vạch chạy). */
.player .autonext[data-phase="noi"] .anbar{animation:anbreath 1.2s ease-in-out infinite alternate}
@keyframes anbreath{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.player .autonext[data-phase="noi"] .anbar{animation:none}}

/* ======================= Quà của bé: Phòng quà, Nhà, Thám hiểm, Vườn, khung hộp ở thẻ cuối (audit/37) =======================
   Token Kẹo Kính (sun, mint, sky, peach) có chuỗi lùi về token PK để cả giao diện Cổ điển vẫn đúng; 0 hex trần.
   Cấm: đỏ, nhấp nháy, rung, pháo. Mọi chuyển động ≤ 650 ms (rewards-*.js); giảm chuyển động: tắt hết (luật chung ở trên). */
:root{--rw-sun:var(--sun-400,var(--yellow-400));--rw-sun-bg:var(--sun-100,var(--yellow-100));--rw-sun2:var(--peach-400,var(--orange-400));
  --rw-sky:var(--sky-400,var(--blue-400));--rw-sky-bg:var(--sky-100,var(--blue-100));--rw-mint:var(--mint-400,var(--green-400));--rw-mint-bg:var(--mint-100,var(--green-100));
  --rw-peach:var(--peach-400,var(--orange-400));--rw-peach-bg:var(--peach-100,var(--orange-100));--rw-berry:var(--purple-400);--rw-berry-bg:var(--purple-100)}
.rwf-sun,.gf1{fill:var(--rw-sun)}.rwf-sun2,.gf2{fill:var(--rw-sun2)}.rwf-sky,.gf3{fill:var(--rw-sky)}.rwf-sky2{fill:var(--rw-sky-bg)}.rwf-mint{fill:var(--rw-mint)}.rwf-peach{fill:var(--rw-peach)}
.rwf-berry{fill:var(--rw-berry)}.rwf-grass{fill:var(--rw-mint-bg)}.rwf-wall{fill:var(--wall,var(--rw-sky-bg))}.rwf-floor{fill:var(--floor,var(--rw-peach-bg))}.rwf-win{fill:var(--surface-card)}
.rwcross{fill:none;stroke:var(--rw-sun2);stroke-width:1.4;vector-effect:non-scaling-stroke}
.rwl{fill:none;stroke:var(--text-secondary);stroke-width:3;stroke-linecap:round}
.rwsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* nút vào Phòng quà ở trang Khám phá, cạnh túi sao */
.xgift{position:relative;width:52px;height:52px;flex:none;border-radius:50%;border:0;background:var(--glass-tint-strong,var(--surface-card));box-shadow:var(--shadow-rail,var(--shadow-soft));display:grid;place-items:center;cursor:pointer}
.xgift svg{width:34px;height:34px}.xgdot,.rwdot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:var(--rw-sun);border:2px solid var(--white)}
/* khung hộp quà ở thẻ cuối: KHÔNG bấm được, cao cố định 72 px, nằm dưới hàng chip */
.gift{height:0;overflow:hidden;pointer-events:none}
.gift.on{height:72px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;border-radius:20px;background:var(--rw-sun-bg)}
.gbox{position:relative;width:56px;height:56px;flex:none}.gsvg{width:100%;height:100%;display:block;overflow:visible}.glid{transform-box:fill-box;transform-origin:left bottom}
.gift.open .glid{transform:translate(-1px,-5px) rotate(-12deg)}
.gglow{position:absolute;inset:-4px;border-radius:18px;box-shadow:0 0 0 5px color-mix(in srgb,var(--rw-sun) 55%,transparent);opacity:0}
.gitem{width:56px;height:56px;flex:none}.gitem svg,.gpiece svg{width:100%;height:100%}.gname{font:800 17px var(--f-display);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmini{display:flex;gap:4px}.gmini i{width:28px;height:28px}.gshard{width:28px;height:28px}.gpiece{width:56px;height:56px}
.gcells{display:flex;gap:4px}.gcells i{width:20px;height:20px;border-radius:6px;border:2px dashed var(--rw-sun2)}
/* khung màn */
.rw{background:var(--bg)}.rwbar{display:flex;align-items:center;gap:8px;padding:10px 12px 4px;position:sticky;top:0;z-index:5;background:var(--bg)}
.rwback{background:var(--surface-card);border-radius:50%}.rwback svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rwt{flex:1;margin:0;font:800 clamp(20px,3.6vw,26px)/1.2 var(--f-display);color:var(--ink)}
.rwhome{min-height:48px;padding:0 18px;border-radius:24px;border:2px solid var(--border-default);background:var(--surface-card);font:800 17px var(--f-display);color:var(--ink);cursor:pointer}
.rwmain{flex:1;display:flex;flex-direction:column;gap:12px;padding:8px 16px 28px;width:100%;max-width:960px;margin:0 auto}
.rwpika{display:flex;align-items:center;gap:10px}.rwav{width:52px;height:52px;flex:none}.rwav svg{width:100%;height:100%}
.rwsay{background:var(--surface-card);border-radius:18px;padding:8px 14px;font:700 17px/1.35 var(--f-body);color:var(--ink);box-shadow:var(--shadow-soft-sm)}
.rwpika.big .rwsay{font-size:20px}
.rwspin{width:20px;height:20px;border-radius:50%;border:3px solid var(--border-default);border-top-color:var(--rw-sky);animation:rwspin 1s linear infinite;flex:none}
@keyframes rwspin{to{transform:rotate(360deg)}}
@keyframes rwbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.rwcap{min-height:26px;margin:0;text-align:center;font:800 17px var(--f-display);color:var(--ink)}
.rwadult{margin:0;text-align:center;font-size:15px;color:var(--muted)}.rwbig{align-self:center;min-height:56px}
.rwconsent{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 8px}.rwcpic svg{width:170px;height:auto}
/* Phòng quà: ba ô cùng cỡ */
.rwtiles{display:grid;grid-auto-rows:1fr;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.rwtile{position:relative;display:flex;flex-direction:column;gap:6px}.rwtile .rwpin{position:static;order:-1;align-self:flex-end;flex:none}.rwenter{flex:1;min-width:0;width:100%;height:100%;min-height:150px;border-radius:24px;border:3px solid transparent;background:var(--surface-card);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;cursor:pointer;position:relative}
.rwtile.top .rwenter{border-color:var(--rw-sun);box-shadow:0 0 0 4px color-mix(in srgb,var(--rw-sun) 35%,transparent)}
.rwscene svg{width:clamp(84px,14vw,150px);height:clamp(84px,14vw,150px)}.rwtn{font:800 clamp(18px,2.2vw,24px)/1.2 var(--f-display);color:var(--ink);text-align:center}
.rwnr{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-width:0}
.rwmini{position:relative;flex:none;width:34px;height:34px;display:flex;align-items:center;gap:6px}.rwmini svg{width:34px;height:34px}.rwmini .rwdot{top:-2px;right:-4px}
@media (min-width:561px){.rwenter{min-height:clamp(220px,46vh,400px)}.rwtiles{align-content:start}}
/* điện thoại: ba ô xếp MỘT cột, cùng cỡ, mỗi ô nằm ngang (hình bên trái, tên giữa, ghim bên phải): không rớt 2+1 */
@media (max-width:560px){.rwtiles{grid-template-columns:minmax(0,1fr);gap:12px}.rwtile{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.rwtile .rwpin{order:0;align-self:center}.rwshard{position:static;transform:none;flex:1 0 100%;pointer-events:auto}.rwenter{flex-direction:row;justify-content:flex-start;gap:14px;min-height:100px;padding:10px 14px}
  .rwscene svg{width:72px;height:72px}.rwnr{flex:1;justify-content:flex-start}.rwtn{text-align:left}}
.rwpin{position:absolute;top:6px;right:6px;width:44px;height:44px;border-radius:50%;border:2px solid var(--border-default);background:var(--surface-card);display:grid;place-items:center;cursor:pointer;padding:0}
.rwpin svg{width:26px;height:26px;opacity:.35}.rwpin[aria-pressed="true"]{border-color:var(--rw-sun);background:var(--rw-sun-bg)}.rwpin[aria-pressed="true"] svg{opacity:1}
.rwshard{display:flex;gap:2px;justify-content:center;position:absolute;left:50%;bottom:10px;transform:translateX(-50%);pointer-events:none;padding:4px 8px;border-radius:10px;background:var(--surface-sunken)}.rwshard svg{width:16px;height:16px}
.rwfirst{display:flex;align-items:center;justify-content:center;gap:6px}.rwfirst span svg{width:34px;height:34px;opacity:.28;filter:grayscale(1)}.rwfirst i{width:28px;border-top:3px dashed var(--border-strong)}.rwfb svg{width:40px;height:40px;opacity:.5}
/* Nhà + Vườn: cảnh, ô đặt, kho */
.rwroom,.rwgarden{position:relative;display:flex;align-items:flex-end;justify-content:center;border-radius:26px;overflow:hidden;min-height:300px;padding:18px 14px 16px}
.rwroom[data-tint="sky"]{--wall:var(--rw-sky-bg);--floor:var(--rw-peach-bg)}.rwroom[data-tint="mint"]{--wall:var(--rw-mint-bg);--floor:var(--rw-sun-bg)}
.rwroom[data-tint="peach"]{--wall:var(--rw-peach-bg);--floor:var(--rw-sky-bg)}.rwroom[data-tint="sun"]{--wall:var(--rw-sun-bg);--floor:var(--rw-mint-bg)}
.rwgarden[data-tint="sky"]{--rw-sky-bg:var(--rw-berry-bg)}.rwgarden[data-tint="sun"]{--rw-sky-bg:var(--rw-sun-bg)}.rwgarden[data-tint="peach"]{--rw-sky-bg:var(--rw-peach-bg)}
.rwbg{position:absolute;inset:0;width:100%;height:100%}
.rwslots,.rwplots{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:center;width:100%}
.rwslot,.rwplot{border-radius:22px;border:3px dashed color-mix(in srgb,var(--ink) 28%,transparent);background:color-mix(in srgb,var(--surface-card) 55%,transparent);display:grid;place-items:center;padding:6px;cursor:pointer;aspect-ratio:1/1}
.rwslot svg,.rwplot svg{width:100%;height:100%;display:block;pointer-events:none}.rwslot.filled,.rwplot.has{border-style:solid;border-color:transparent;background:transparent;touch-action:none}.rwplot.has{touch-action:auto}
.sz-lon{width:clamp(112px,28%,168px)}.sz-vua{width:clamp(88px,22%,132px)}.sz-nho{width:clamp(64px,16%,96px)}
.rwplot{width:clamp(80px,22%,132px);border-radius:50% 50% 26px 26px;background:color-mix(in srgb,var(--rw-peach-bg) 70%,transparent)}.rwplot.deco{width:clamp(64px,16%,96px);border-radius:22px}
.rwslot.ok,.rwplot.ok{border-style:solid;border-color:var(--rw-sun);background:color-mix(in srgb,var(--rw-sun-bg) 70%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--rw-sun) 38%,transparent);animation:rwbreathe 2.4s ease-in-out infinite}
.rwslot.src{opacity:.45}.rwplot.st2.has{cursor:pointer}
.rwvis{position:absolute;right:12px;bottom:12px;width:76px;height:76px;z-index:2;border:0;background:transparent;padding:0;cursor:pointer}.rwvis svg{width:100%;height:100%}
.rwdoor{position:absolute;right:8px;top:12px;width:56px;height:70px;z-index:2;border:0;background:transparent;padding:0;cursor:pointer}.rwdoor svg{width:100%;height:100%}
.rwvase{position:absolute;left:12px;top:12px;z-index:3;width:64px;height:64px;border-radius:50%;border:0;background:var(--surface-card);box-shadow:var(--shadow-soft-sm);padding:6px;cursor:pointer}.rwvase svg{width:100%;height:100%}
.rwvaselist{position:absolute;left:12px;top:84px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;max-width:62%;padding:8px;border-radius:16px;background:var(--surface-card);box-shadow:var(--shadow-soft)}.rwvaselist span{width:48px;height:48px}
.rwdots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rwchip{width:44px;height:44px;border-radius:50%;border:2px dashed var(--border-strong);background:transparent;display:grid;place-items:center;opacity:.55;cursor:default;padding:0}.rwchip i{font:800 17px var(--f-display);font-style:normal;color:var(--ink)}
.rwchip.on{border-style:solid;border-color:var(--rw-sun);background:var(--rw-sun-bg);opacity:1;cursor:pointer}.rwchip.cur{box-shadow:0 0 0 4px color-mix(in srgb,var(--rw-sun) 38%,transparent)}
.rwkho{display:flex;align-items:center;gap:6px;background:var(--surface-card);border-radius:22px;padding:8px;box-shadow:var(--shadow-soft-sm)}.rwkho.deco{background:var(--rw-mint-bg)}
.rwkscroll{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start;min-height:84px;padding:6px 4px}
.rwitem,.rwgear{position:relative;flex:none;width:72px;height:72px;border-radius:18px;border:3px solid transparent;background:var(--surface-sunken);padding:4px;cursor:pointer;touch-action:none}
.rwgear{width:64px;height:64px;touch-action:auto}.rwitem svg,.rwgear svg{width:100%;height:100%;display:block;pointer-events:none}
.rwitem.sel{transform:scale(1.08);border-color:var(--rw-sun);background:var(--rw-sun-bg);box-shadow:var(--shadow-raised)}.rwitem.dim{opacity:.55}.rwitem.hint{border-color:var(--rw-sun);animation:rwbreathe 2.4s ease-in-out infinite}
.rwrm{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--surface-card)}.rwrm svg{width:100%;height:100%}
.rwarrow{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-sunken);display:grid;place-items:center;cursor:pointer;padding:0}.rwarrow.big{width:56px;height:56px}
.rwarrow svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.rwarrow[aria-disabled="true"]{opacity:.3}
.rwghost{flex:none;width:72px;height:72px;border-radius:18px;border:2px dashed var(--border-default);display:grid;place-items:center;opacity:.5}.rwghost svg{width:38px;height:38px;opacity:.5}
.rwghostdrag{position:fixed;left:0;top:0;width:72px;height:72px;z-index:70;pointer-events:none;opacity:.92}.rwghostdrag svg{width:100%;height:100%}
.rwflyflower{position:fixed;width:48px;height:48px;z-index:60;pointer-events:none}.rwflyflower svg{width:100%;height:100%}
/* Thám hiểm */
.rwexp{--tb:var(--rw-mint-bg);display:flex;flex-direction:column;gap:12px;border-radius:26px;padding:12px;background:var(--tb)}
.rwexp.t-dong-co{--tb:var(--rw-sun-bg)}.rwexp.t-bien,.rwexp.t-troi{--tb:var(--rw-sky-bg)}.rwexp.t-nui{--tb:var(--rw-peach-bg)}.rwexp.t-hang{--tb:var(--rw-berry-bg)}
.rwtop{display:flex;align-items:center;justify-content:space-between;gap:8px}.rwtop .rwarrow{flex:none}.rwpieces{display:flex;gap:6px;align-items:center;position:relative;min-width:0;flex:1 1 auto;justify-content:center}
.rwcell{width:38px;height:38px;border-radius:10px;border:2px dashed var(--border-strong);display:grid;place-items:center;background:color-mix(in srgb,var(--surface-card) 50%,transparent)}
.rwcell.on{border-style:solid;border-color:var(--rw-sun);background:var(--rw-sun-bg)}.rwcell svg{width:28px;height:28px}
.rwchestb{position:relative;flex:none;min-width:44px;min-height:44px;width:56px;height:56px;border-radius:50%;border:0;background:var(--surface-card);box-shadow:var(--shadow-soft-sm);padding:8px;cursor:pointer}.rwchestb svg{width:100%;height:100%}.rwchestb .rwdot{top:0;right:0}
.rwmap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:34px 6px;padding:40px 6px 16px;min-height:200px;justify-items:center;align-items:center}.rwmap.dim{opacity:.55}
.rwpath{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.rwroad{fill:none;stroke:var(--rw-sun);stroke-width:6;stroke-dasharray:2 12;stroke-linecap:round;stroke-linejoin:round}
.rwnode{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;border:3px solid var(--rw-sun);background:var(--surface-card);font:800 20px var(--f-display);color:var(--ink);cursor:pointer;padding:0}
.rwnode.dim{opacity:.5;border-style:dashed;cursor:default}.rwnode.done{background:var(--rw-mint-bg);border-color:var(--rw-mint)}.rwnode.next,.rwnode.sel{box-shadow:0 0 0 5px color-mix(in srgb,var(--rw-sun) 40%,transparent)}
.rwnode svg:not(.rwme svg){position:absolute;right:-8px;top:-12px;width:28px;height:28px}.rwme{position:absolute;top:-38px;left:50%;margin-left:-17px;width:34px;height:34px;pointer-events:none}.rwme svg{width:100%;height:100%}
.rwbubble{display:flex;align-items:center;gap:10px;background:var(--surface-card);border-radius:20px;padding:10px 14px;box-shadow:var(--shadow-soft)}.rwbg2{display:flex;gap:4px}.rwbg2 i{width:40px;height:40px}.rwbt{flex:1;font:800 17px/1.3 var(--f-display);color:var(--ink)}.rwgo{min-height:56px;min-width:84px}
.rwbag{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.rwbslot{width:64px;height:64px;border-radius:18px;border:3px dashed var(--border-strong);background:var(--surface-card);display:grid;place-items:center;padding:4px;cursor:pointer}.rwbslot svg{width:100%;height:100%}
.rwbslot:not(.filled) svg{width:34px;height:34px;opacity:.4}.rwbslot.filled{border-style:solid;border-color:var(--rw-sun)}.rwbslot.dupe{opacity:.6}.rwbslot.tgt{box-shadow:0 0 0 4px color-mix(in srgb,var(--rw-sun) 40%,transparent)}.rwbslot.hint{animation:rwbreathe 2.4s ease-in-out infinite}
.rwgonow{min-height:56px}.rwtray{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.rwgear.in{border-color:var(--rw-sun);background:var(--rw-sun-bg)}
.rwover{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--surface-overlay);padding:16px}.rwpanel{position:relative;background:var(--surface-card);border-radius:26px;padding:56px 20px 20px;max-width:100%}
.rwclose{position:absolute;top:4px;right:4px}.rwclose svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.rwpeds{display:grid;grid-template-columns:repeat(4,72px);gap:12px}.rwped{width:72px;height:72px;border-radius:50%;background:var(--surface-sunken);display:grid;place-items:center;opacity:.28;filter:grayscale(1);padding:6px}.rwped.on{opacity:1;filter:none}.rwped svg{width:100%;height:100%}
@media (max-width:440px){.rwtop{gap:6px}.rwtop .rwarrow.big{width:48px;height:48px}.rwcell{width:32px;height:32px;flex:none}.rwpieces{gap:4px}}
@media (max-width:380px){.rwpeds{grid-template-columns:repeat(4,64px)}.rwped{width:64px;height:64px}}

/* thẻ cuối trên điện thoại: bảng hình thu nhỏ (chìa đã có ở cột dưới), lời Cô Cam không bị cụt, nút "Về nhà" không đè lời */
.ppanel:has(.pmain.t-done) .who{font-size:14px}
@media (max-aspect-ratio:1/1),(max-width:760px){
  .player:has(.pmain.t-done){--board-min:56px}
  .ppanel:has(.pmain.t-done)>.coach{flex:0 0 auto}
  .ppanel:has(.pmain.t-done)>.pmain{flex-shrink:1}
  .pmain.t-done .done .bigkey{width:64px!important}
  .pmain.t-done .done .st{font-size:36px}
  .pmain.t-done .done h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.rwitem.hint,.rwbslot.hint,.rwdot,.rwfirst *{animation:none!important}.rwtile,.rwslot,.rwitem{transition:none}}