/* Lớp component kiểu Gameboy phiêu lưu (người dùng 21/10/2026: "UI phong cách claude tối giản như hiện tại, component phong cách
   gameboy phiêu lưu"; khởi đầu từ nút "Đã đọc"). Khung trang (thanh bên, thanh trên, chữ bài) vẫn là site-kit + theme.css; tệp này
   chỉ đổi component: khung Mục tiêu, mục Khi đi thi / Tóm tắt, câu hỏi, đáp án, trang trước/sau, khối code, nút.
   Nạp SAU theme.css ở mọi wiki, và trong ứng dụng /app/ (scripts/app.mjs chèn link) nên chỉ dựa vào biến của site-kit.
   Ô pixel --P = 2px. Khung: lớp ::before ghép nhiều dải màu (linear-gradient) thành hình chữ nhật bo bậc thang (lớn 4-2-1-1 ô,
   nhỏ 2-1 ô như nút "Đã đọc"), viền --px-b, nền --px-f; bóng pixel lệch --px-d bằng drop-shadow nên ôm đúng bậc thang.
   Nút nhỏ: viền 4 box-shadow (góc khía một ô). Chuyển động dùng steps() cho nhịp máy chơi game; --motion 0 thì đứng yên. */
:root {
  --P: 2px;
  --gb-bg: oklch(.89 .085 124); --gb-ink: oklch(.36 .075 140); --gb-hi: oklch(.78 .14 82);
  --gb-gold: oklch(.80 .135 84); --gb-gold-hi: oklch(.95 .07 96); --gb-gold-lo: oklch(.60 .12 68);
  --bad: oklch(.62 .135 33); --bad-ink: oklch(.53 .14 33);
  --px-ink: var(--text);
  --px-soft: color-mix(in oklab, var(--text) 28%, var(--bg));
  --px-shade: color-mix(in oklab, var(--text) 18%, var(--bg));
}
:root[data-theme="dark"] {
  --gb-bg: oklch(.40 .065 138); --gb-ink: oklch(.90 .09 122); --gb-hi: oklch(.84 .13 85);
  --bad: oklch(.70 .11 35); --bad-ink: oklch(.77 .10 38);
  --px-ink: color-mix(in oklab, var(--text) 82%, var(--bg));
  --px-soft: color-mix(in oklab, var(--text) 30%, var(--bg));
  --px-shade: color-mix(in oklab, #000 42%, var(--bg));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --gb-bg: oklch(.40 .065 138); --gb-ink: oklch(.90 .09 122); --gb-hi: oklch(.84 .13 85);
  --bad: oklch(.70 .11 35); --bad-ink: oklch(.77 .10 38);
  --px-ink: color-mix(in oklab, var(--text) 82%, var(--bg));
  --px-soft: color-mix(in oklab, var(--text) 30%, var(--bg));
  --px-shade: color-mix(in oklab, #000 42%, var(--bg));
} }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0 !important; } }

/* ---------- hình minh hoạ: một họ chữ ---------- */
/* Trong hình chỉ dùng Inter cho mọi chữ và số, số đều cột (người dùng 21/10/2026: "nhiều font chữ trong hình minh hoạ đang hơi lạc quẻ").
   Trước đó một hình trộn ba họ: nhãn Inter, số JetBrains Mono, gốc svg Lora. Chú thích dưới hình là lời bài nên vẫn Lora như chữ chính.
   Ghi đè thuộc tính font-family của từng <text> nên cần !important; hình động (anim) và hình tương tác CP cũng là svg trong .fig. */
.fig svg, .fig svg :is(text, tspan) { font-family: var(--sans) !important; font-variant-numeric: tabular-nums; }

/* ---------- khung pixel ---------- */
/* :where() giữ độ ưu tiên 0 để luật riêng của từng component (màu viền, nền, bóng) luôn thắng phần chung này. */
:where(.callout, .quiz, .theory .t-sec.is-example, .theory .t-sec.is-exam, .theory .t-sec.is-summary, .theory .hook, .pager-link, .qz-sub, .quiz-opt) {
  --px-b: var(--px-ink); --px-f: var(--surface); --px-s: var(--px-shade); --px-d: var(--P);
  position: relative; isolation: isolate; border-color: transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
:where(.callout, .quiz, .theory .t-sec.is-example, .theory .t-sec.is-exam, .theory .t-sec.is-summary, .theory .hook, .pager-link, .qz-sub)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--px-f) 0 0) calc(var(--P) * 4) var(--P) / calc(100% - var(--P) * 8) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-f) 0 0) calc(var(--P) * 2) calc(var(--P) * 2) / calc(100% - var(--P) * 4) calc(100% - var(--P) * 4),
    linear-gradient(var(--px-f) 0 0) var(--P) calc(var(--P) * 4) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 8),
    linear-gradient(var(--px-b) 0 0) calc(var(--P) * 4) 0 / calc(100% - var(--P) * 8) 100%,
    linear-gradient(var(--px-b) 0 0) calc(var(--P) * 2) var(--P) / calc(100% - var(--P) * 4) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-b) 0 0) var(--P) calc(var(--P) * 2) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 4),
    linear-gradient(var(--px-b) 0 0) 0 calc(var(--P) * 4) / 100% calc(100% - var(--P) * 8);
  background-repeat: no-repeat;
  filter: drop-shadow(var(--px-d) var(--px-d) 0 var(--px-s));
  transition: filter calc(90ms * var(--motion, 1)) steps(2);
}
.quiz-opt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--px-f) 0 0) calc(var(--P) * 2) var(--P) / calc(100% - var(--P) * 4) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-f) 0 0) var(--P) calc(var(--P) * 2) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 4),
    linear-gradient(var(--px-b) 0 0) calc(var(--P) * 2) 0 / calc(100% - var(--P) * 4) 100%,
    linear-gradient(var(--px-b) 0 0) var(--P) var(--P) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-b) 0 0) 0 calc(var(--P) * 2) / 100% calc(100% - var(--P) * 4);
  background-repeat: no-repeat;
  filter: drop-shadow(var(--px-d) var(--px-d) 0 var(--px-s));
  transition: filter calc(90ms * var(--motion, 1)) steps(2);
}

/* Nhãn kiểu hộp thoại game: chữ mono in hoa thưa, mũi tên pixel ▶ phía trước. */
.callout-title, .quiz-label {
  display: flex; align-items: center; gap: 9px;
  font: 700 11.5px/1.3 var(--mono) !important; letter-spacing: .12em !important; text-transform: uppercase;
}
.callout-title::before, .quiz-label::before {
  content: ""; flex: none; width: 6px; height: 10px; background: currentColor;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
}
/* Đường kẻ trong khung: chấm pixel 2px. */
.quiz-why, .quiz-src {
  border-top: 0 !important;
  background: repeating-linear-gradient(90deg, var(--px-soft) 0 var(--P), transparent var(--P) calc(var(--P) * 3)) 0 0 / 100% var(--P) no-repeat;
}

/* ---------- khung Mục tiêu, ghi chú ---------- */
.callout { padding: 18px 22px 8px; }
.callout-goal { --px-f: color-mix(in oklab, var(--accent) 7%, var(--surface)); --px-s: var(--accent); }
.callout-goal .callout-title { color: var(--accent-ink); }
.callout-trap { --px-f: color-mix(in oklab, var(--accent) 12%, var(--surface)); --px-b: var(--accent-ink); }
.callout-tip, .callout-note { --px-b: var(--px-soft); --px-d: 0px; }
:root[data-theme="dark"] .callout-goal { --px-s: color-mix(in oklab, var(--accent) 55%, #000); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout-goal { --px-s: color-mix(in oklab, var(--accent) 55%, #000); } }

/* ---------- đoạn mở đầu bài: hộp thoại game thay cho vạch trái (người dùng 21/10/2026, làm trước ở CP), ▼ nhấp nháy như chờ bấm A ---------- */
.theory .hook { margin: 0 var(--P) 1.8em 0; padding: 18px 24px 22px !important; border: 0 !important; font-style: normal; color: var(--text); }
.theory .hook::after { content: ""; position: absolute; right: 16px; bottom: 10px; width: 10px; height: 6px; background: var(--accent-ink);
  clip-path: polygon(0 0, 10px 0, 10px 2px, 8px 2px, 8px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 4px, 2px 4px, 2px 2px, 0 2px);
  animation: px-blink calc(1.2s * var(--motion, 1)) steps(1) infinite; }
@media (max-width: 640px) { .theory .hook { padding: 16px 18px 20px !important; } }

/* ---------- mục Ví dụ, Khi đi thi, Tóm tắt: bảng nền ngả, viền nhạt, không bóng ---------- */
.theory .t-sec:is(.is-example, .is-exam, .is-summary) { --px-b: var(--px-soft); --px-f: var(--bg-side); --px-d: 0px; padding: 6px 26px 4px; }

/* ---------- câu hỏi ---------- */
.quiz { padding: 20px 22px; }
.quiz-label { color: var(--accent-ink); }
/* Đáp án: khung nhỏ nét nhạt; rê chuột: nét đậm, nhấc lên, hiện bóng; bấm: lún xuống như phím. */
.quiz-opt { --px-b: var(--px-soft); --px-f: var(--bg); --px-d: 0px; padding: 10px 14px; align-items: center !important; transition: transform calc(90ms * var(--motion, 1)) steps(2), opacity calc(150ms * var(--motion, 1)); }
@media (hover: hover) { .quiz:not(.is-answered) .quiz-opt:hover { --px-b: var(--px-ink); --px-d: var(--P); transform: translateY(calc(-1 * var(--P))); } }
.quiz:not(.is-answered) .quiz-opt:active { --px-b: var(--px-ink); --px-d: 0px; transform: translate(var(--P), var(--P)); }
.quiz-opt:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* Phím chữ cái: ô vuông khía góc như nút máy chơi game. */
.quiz-key {
  display: inline-grid; place-items: center; align-self: center; flex: none; width: 22px; height: 22px; min-width: 0; margin: 0 2px; position: relative;
  font: 700 11px/1 var(--mono) !important; color: var(--text-2) !important; background: var(--surface);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft);
}
/* Đúng: màn xanh Gameboy, nảy lên; sai: cam đỏ dịu, rung hai nhịp. */
.quiz-opt.is-right { --px-b: var(--gb-ink); --px-f: var(--gb-bg); --px-s: color-mix(in oklab, var(--gb-ink) 40%, var(--bg)); --px-d: var(--P); color: var(--gb-ink); opacity: 1 !important; }
.quiz-opt.is-right .quiz-key { background: var(--gb-ink); color: var(--gb-bg) !important; box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--gb-ink), 0 var(--P) 0 0 var(--gb-ink), calc(-1 * var(--P)) 0 0 0 var(--gb-ink), var(--P) 0 0 0 var(--gb-ink); }
.quiz-opt.is-wrong { --px-b: var(--bad-ink); --px-f: color-mix(in oklab, var(--bad) 13%, var(--bg)); color: var(--text); opacity: 1 !important; }
.quiz-opt.is-wrong .quiz-key { background: var(--bad-ink); color: var(--bg) !important; box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--bad-ink), 0 var(--P) 0 0 var(--bad-ink), calc(-1 * var(--P)) 0 0 0 var(--bad-ink), var(--P) 0 0 0 var(--bad-ink); }
.quiz-opt.is-right.is-chosen { animation: px-pop calc(320ms * var(--motion, 1)) steps(4); }
.quiz-opt.is-wrong { animation: px-shake calc(300ms * var(--motion, 1)) steps(6); }
@keyframes px-pop { 0%, 100% { transform: none; } 40% { transform: translateY(-4px); } 70% { transform: translateY(1px); } }
@keyframes px-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
/* Trả lời đúng: tung sao (người dùng 21/10/2026: "tung hoa, toả sao… nhanh chóng nhẹ nhàng thôi, nhưng cũng là động lực"). Dưới 1 giây, chỉ CSS
   nên chạy cả ở trang bài lẫn ứng dụng Trắc nghiệm: 16 hạt pixel 4 và 6px (vàng, màu nhấn, xanh Gameboy) bung từ phím chữ cái bằng box-shadow chạy từ tâm ra,
   một ngôi sao vàng pixel nhảy lên trên phím rồi tắt; nhịp steps() như game. --motion 0 (giảm chuyển động) thì không có. */
.quiz-opt.is-right.is-chosen::after { content: ""; position: absolute; left: 27px; top: 50%; z-index: 3; width: 4px; height: 4px; margin: -2px 0 0 -2px; pointer-events: none; opacity: 0;
  animation: px-confetti calc(700ms * var(--motion, 1)) steps(7) forwards; }
@keyframes px-confetti { 0% { opacity: 1; box-shadow: 0 0 0 1px var(--gb-gold), 0 0 0 0px var(--accent), 0 0 0 0px var(--gb-ink), 0 0 0 1px var(--gb-gold-hi), 0 0 0 0px var(--gb-gold), 0 0 0 0px var(--accent), 0 0 0 1px var(--gb-ink), 0 0 0 0px var(--gb-gold-hi), 0 0 0 0px var(--gb-gold), 0 0 0 1px var(--accent), 0 0 0 0px var(--gb-ink), 0 0 0 0px var(--gb-gold-hi), 0 0 0 1px var(--gb-gold), 0 0 0 0px var(--accent), 0 0 0 0px var(--gb-ink), 0 0 0 1px var(--gb-gold-hi); } 75% { opacity: 1; } 100% { opacity: 0; box-shadow: 40px -4px 0 1px var(--gb-gold), 45px -21px 0 0px var(--accent), 20px -22px 0 0px var(--gb-ink), 12px -36px 0 1px var(--gb-gold-hi), -6px -32px 0 0px var(--gb-gold), -26px -36px 0 0px var(--accent), -27px -16px 0 1px var(--gb-ink), -45px -9px 0 0px var(--gb-gold-hi), -40px 4px 0 0px var(--gb-gold), -45px 21px 0 1px var(--accent), -20px 22px 0 0px var(--gb-ink), -12px 36px 0 0px var(--gb-gold-hi), 6px 32px 0 1px var(--gb-gold), 26px 36px 0 0px var(--accent), 27px 16px 0 0px var(--gb-ink), 45px 9px 0 1px var(--gb-gold-hi); } }
.quiz-opt.is-right.is-chosen .quiz-key::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 14px; height: 14px; margin-left: -7px; pointer-events: none; opacity: 0;
  background: var(--gb-gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM0 2h7v1H0zM1 3h5v1H1zM2 4h3v1H2zM1 5h2v1H1zM4 5h2v1H4zM0 6h2v1H0zM5 6h2v1H5z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM0 2h7v1H0zM1 3h5v1H1zM2 4h3v1H2zM1 5h2v1H1zM4 5h2v1H4zM0 6h2v1H0zM5 6h2v1H5z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  filter: drop-shadow(1px 1px 0 var(--gb-ink)); animation: px-star calc(820ms * var(--motion, 1)) steps(8) forwards; }
@keyframes px-star { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 20% { opacity: 1; transform: translateY(-2px) scale(1); } 75% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-12px); } }
.quiz-why, .quiz-src { padding-top: 14px; }
.quiz:has(.quiz-opt.is-chosen.is-right) .quiz-verdict { color: var(--gb-ink); }
.quiz:has(.quiz-opt.is-chosen.is-wrong) .quiz-verdict { color: var(--bad-ink); }

/* ---------- trang trước / sau ---------- */
.pager-link { --px-b: var(--px-soft); --px-d: 0px; padding: 16px 18px; transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .pager-link:hover { --px-b: var(--px-ink); --px-d: var(--P); transform: translateY(calc(-1 * var(--P))); } }
.pager-link:active { --px-b: var(--px-ink); --px-d: 0px; transform: translate(var(--P), var(--P)); }

/* ---------- khối code: viền pixel nhạt (góc khía), nút vuông ---------- */
.code, .theory .t-code { border: 0 !important; border-radius: 0 !important; margin-left: var(--P); margin-right: var(--P);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.theory pre.out { border: 0 !important; border-radius: 0 !important; margin-left: var(--P); margin-right: var(--P);
  box-shadow: 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.theory .t-code.has-out { margin-bottom: var(--P); }
.tool, .run-btn { border-radius: 0 !important; }
/* Nút Chạy luôn ở bên phải nút sao chép, ngắt dòng (người dùng 21/10/2026); order cho cả khối code CP tự dựng. */
:is(.code-tools, .io-tools) > .run-btn { order: 9; margin-inline-start: 6px; }
.run-btn { height: 26px; margin: 0 var(--P); padding: 0 10px 0 8px; font: 700 12px/1 var(--mono); letter-spacing: .04em;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 currentColor, 0 var(--P) 0 0 currentColor, calc(-1 * var(--P)) 0 0 0 currentColor, var(--P) 0 0 0 currentColor;
  transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .run-btn:hover { background: color-mix(in oklab, currentColor 12%, transparent); } }
.run-btn:active { transform: translate(var(--P), var(--P)); }

/* ---------- nút chung (ứng dụng, thanh trên) ---------- */
.btn, .anim-play { margin: var(--P); }
.btn, .acct, .anim-play {
  border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-b, var(--px-ink)), 0 var(--P) 0 0 var(--px-b, var(--px-ink)), calc(-1 * var(--P)) 0 0 0 var(--px-b, var(--px-ink)), var(--P) 0 0 0 var(--px-b, var(--px-ink)),
    var(--P) calc(var(--P) * 2) 0 0 var(--px-shade);
  transition: transform calc(90ms * var(--motion, 1)) steps(2);
}
/* Ảnh đại diện trên nút tài khoản: ô vuông khía góc như logo nhà tài trợ, không tròn. */
.acct-av { border-radius: 0 !important; clip-path: var(--px-notch); }
.acct { --px-b: var(--px-soft); box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-b), 0 var(--P) 0 0 var(--px-b), calc(-1 * var(--P)) 0 0 0 var(--px-b), var(--P) 0 0 0 var(--px-b); }
@media (hover: hover) { .btn:not(:disabled):hover, .anim-play:hover { transform: translateY(calc(-1 * var(--P))); } .acct:hover { --px-b: var(--px-ink); } }
.btn:not(:disabled):active, .anim-play:active { transform: translate(var(--P), var(--P)); box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink); }
.btn.is-primary { --px-b: var(--px-ink); }
.search-box { border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft) !important; }
.search-box:focus-within { box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink) !important; }
.tab.is-active::after { height: 4px; border-radius: 0; bottom: 0; }

/* ---------- biểu tượng pixel (shared/lib/px-icons.mjs, 8 × 8 ô): luôn 16px để mỗi ô đúng 2px, nét căng ---------- */
.i { width: 16px !important; height: 16px !important; }
.run-btn .i { width: 8px !important; height: 8px !important; }
/* Chữ số pixel Silkscreen (chỉ có 0 tới 9, # % + , . nên chữ cái rơi về phông mono); chỉ nét ở cỡ bội 8px.
   ?v= đổi khi sửa glyph: tệp giữ tên mà trình duyệt được giữ /ui/* 4 giờ (21/10/2026: vẽ lại số 4, ở cả theme.css). */
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-digits.woff2?v=2") format("woff2"); font-weight: 700; unicode-range: U+23, U+25, U+2B-2C, U+2E, U+30-39, U+A0; font-display: swap; }
/* Góc khía một ô cho nền của dòng, nút biểu tượng (cắt góc nền, chữ không bị ảnh hưởng). */
:root { --px-notch: polygon(var(--P) 0, calc(100% - var(--P)) 0, calc(100% - var(--P)) var(--P), 100% var(--P), 100% calc(100% - var(--P)), calc(100% - var(--P)) calc(100% - var(--P)), calc(100% - var(--P)) 100%, var(--P) 100%, var(--P) calc(100% - var(--P)), 0 calc(100% - var(--P)), 0 var(--P), var(--P) var(--P)); }
.side-link, .side-phase, .side-lesson, .hit, .icon-btn, .tool, .lang-pop a { border-radius: 0 !important; clip-path: var(--px-notch); }
.icon-btn:active, .tool:active { transform: translate(1px, 1px); }

/* ---------- thanh bên kiểu menu game: đường bài là chấm pixel, bài đang đọc có con trỏ ▶ trên đường đó ---------- */
.side-lessons-inner { border-left: 0 !important; background: repeating-linear-gradient(var(--px-soft) 0 var(--P), transparent var(--P) calc(var(--P) * 2)) 0 0 / var(--P) 100% no-repeat; }
.side-lesson { position: relative; clip-path: none; }
.side-lesson:hover:not(.is-active) { clip-path: var(--px-notch); }
.side-lesson.is-active::before { content: ""; position: absolute; top: 50%; left: -9px; width: 6px; height: 10px; margin-top: -5px; background: var(--accent);
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); }
.side-lesson.is-active { overflow: visible; }
.side-lesson-done { color: var(--gb-ink); }

/* ---------- tab bài học: tab đang mở có con trỏ ▶ như ô chọn của menu game ---------- */
.tab.is-active::before { content: ""; position: absolute; top: 50%; left: 2px; width: 6px; height: 10px; margin-top: -6px; background: var(--accent);
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); }
.tab.is-active::after { left: 12px; right: 12px; }

/* ---------- mục lục: bỏ đường kẻ, mục đang đọc có con trỏ ▶ ---------- */
.toc a { position: relative; border-left: 0 !important; padding-left: 14px !important; }
.toc a.is-active::before { content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 10px; margin-top: -5px; background: var(--accent);
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); }
.toc-box > summary { border-left: 0 !important; padding-left: 0 !important; font: 700 11.5px/1.3 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- khung kết quả tìm: bảng pixel viền mực, bóng lệch ---------- */
.search-pop { border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), calc(var(--P) * 2) calc(var(--P) * 3) 0 0 var(--px-shade) !important; }
.hit-group { font: 700 11px/1.3 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; }
.hit-group:not(:first-child) { border-top: 0 !important; background: repeating-linear-gradient(90deg, var(--px-soft) 0 var(--P), transparent var(--P) calc(var(--P) * 3)) 0 0 / 100% var(--P) no-repeat; }

/* ---------- menu ngôn ngữ (trang chính): bảng pixel như khung kết quả tìm, thứ tiếng đang dùng có ▶ ---------- */
.lang-pop { border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), calc(var(--P) * 2) calc(var(--P) * 3) 0 0 var(--px-shade) !important; }
.lang-pop a { position: relative; padding-inline-start: 22px !important; }
.lang-pop a[aria-current]::before { content: ""; position: absolute; top: 50%; inset-inline-start: 8px; width: 6px; height: 10px; margin-top: -5px; background: var(--accent);
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); }
[dir="rtl"] .lang-pop a[aria-current]::before { transform: scaleX(-1); }

/* ---------- thanh tiến độ kiểu thanh máu: ô đặc chia đốt, viền pixel ---------- */
.meter { height: 6px !important; border-radius: 0 !important; margin: var(--P); overflow: visible !important; background: color-mix(in oklab, var(--accent) 10%, var(--surface)) !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.meter i { border-radius: 0 !important; background: repeating-linear-gradient(90deg, var(--accent) 0 4px, color-mix(in oklab, var(--accent) 65%, #000) 4px 6px) !important; }

/* ---------- thông báo: hộp thoại Gameboy, viền mực, mũi tên ▼ nhấp nháy ở góc ---------- */
.toast { border-radius: 0 !important; background: var(--surface) !important; color: var(--text) !important; padding: 11px 30px 11px 16px !important; font-weight: 600;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), calc(var(--P) * 2) calc(var(--P) * 3) 0 0 var(--px-shade) !important; }
.toast::after { content: ""; position: absolute; right: 12px; bottom: 10px; width: 6px; height: 4px; background: var(--accent);
  clip-path: polygon(0 0, 6px 0, 6px 2px, 4px 2px, 4px 4px, 2px 4px, 2px 2px, 0 2px); animation: px-blink 1s steps(2) infinite; }
@keyframes px-blink { 50% { opacity: 0; } }

/* ---------- liên kết phụ của bài (Trắc nghiệm, Thực hành): nút pixel nhỏ ---------- */
.lesson-links { gap: 10px 14px !important; }
.lesson-links a { padding: 5px 10px 5px 8px; margin: var(--P); background: var(--surface);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft);
  transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .lesson-links a:hover { transform: translateY(calc(-1 * var(--P)));
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), var(--P) calc(var(--P) * 2) 0 0 var(--px-shade); } }
.lesson-links b { font: 700 16px/1 "Silkscreen", var(--mono) !important; color: var(--accent-ink) !important; }
@media (max-width: 360px) { .lesson-links { column-gap: 8px !important; } .lesson-links a { gap: 5px; padding: 5px 7px 5px 6px; } }

/* ---------- số thứ tự trong danh sách (Lộ trình, chương, mục trắc nghiệm): chữ số pixel ---------- */
.phases .phase-num { font: 700 24px/1 "Silkscreen", var(--mono) !important; letter-spacing: 0; }
.page-home .phases .phase-num, .row-id { font: 700 16px/1 "Silkscreen", var(--mono) !important; letter-spacing: 0; }
.page-home .phases .phase-num { color: var(--accent-ink); }
.row-id { color: var(--faint); padding-top: 3px; }
/* Cột số bài đủ cho "3.10" bằng chữ số pixel (đo 48px ở 16px); điện thoại trước chỉ 40px nên số dính vào tên (người dùng 21/10/2026). */
:root .row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; }
/* Tên Việt và tên Anh của bài (wiki CP: .row-vi rồi .row-title): mỗi tên một dòng, cùng lề trái; trước để một trái một phải trông lệch. */
:root .row-body:has(.row-vi) { display: grid; justify-content: start; row-gap: 3px; }
:root .row-body:has(.row-vi) .row-vi { font-size: 16px; font-weight: 500; color: var(--text); }
:root .row-body:has(.row-vi) .row-title { margin-inline-start: 0; text-align: start; font-size: 13.5px; font-weight: 400; color: var(--muted); }
@media (hover: hover) { .row:hover .row-id { color: var(--accent-ink); } }

/* ---------- danh sách kiểu menu game: rê chuột vào dòng thì hiện con trỏ pixel ▶ bên trái ---------- */
:is(.phases .phase, .qz-level-head, .row) { position: relative; border-radius: 0 !important; }
:is(.phases .phase, .qz-level-head, .row)::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: -16px; width: 6px; height: 10px; margin-top: -5px; background: var(--accent); opacity: 0;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
}
@media (hover: hover) { :is(.phases .phase, .qz-level-head, .row):hover::before { opacity: 1; animation: px-nudge calc(600ms * var(--motion, 1)) steps(1) infinite; } }
:is(.phases .phase, .qz-level-head, .row):focus-visible::before { opacity: 1; }
@keyframes px-nudge { 50% { transform: translateX(2px); } }
[dir="rtl"] :is(.phases .phase, .qz-level-head, .row)::before { transform: scaleX(-1); animation: none; }

/* ---------- bài tập CP: ô đánh dấu pixel (vuông rỗng / vuông có dấu tích) ---------- */
.pr-check > svg { display: none; }
.pr-check::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.pr.is-done .pr-check { color: var(--gb-ink); }
.pr.is-done .pr-check::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8zM1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8zM1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E"); }

/* ---------- hình mô phỏng CP: nút, ô nhập, nhãn nguồn vuông viền pixel ---------- */
.vz-btn, .vz-f input[type=text], .vz-f input[type=number], .theory .ref-src {
  border: 0 !important; border-radius: 0 !important; margin: var(--P);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.vz-btn { font: 700 12px/1 var(--mono); transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .vz-btn:hover { box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink); transform: translateY(calc(-1 * var(--P))); } }
.vz-btn:active { transform: translate(var(--P), var(--P)); }
.vz-btn.is-on { box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--accent), 0 var(--P) 0 0 var(--accent), calc(-1 * var(--P)) 0 0 0 var(--accent), var(--P) 0 0 0 var(--accent); }
.vz-f input:focus-visible { outline: 0; box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--accent), 0 var(--P) 0 0 var(--accent), calc(-1 * var(--P)) 0 0 0 var(--accent), var(--P) 0 0 0 var(--accent); }

/* ---------- trắc nghiệm trong ứng dụng (/app/#/quiz) ---------- */
.qz-sub { --px-b: var(--px-soft); --px-d: 0px; transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .qz-sub:hover { --px-b: var(--px-ink); --px-d: var(--P); transform: translateY(calc(-1 * var(--P))); } }
.qz-bar { height: 10px; border-radius: 0; margin-left: var(--P); margin-right: var(--P); background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink); }
.qz-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, color-mix(in oklab, var(--accent) 65%, #000) 6px 8px); transition: width calc(200ms * var(--motion, 1)) steps(4); }
.qz-cell { border: 0 !important; border-radius: 0 !important; margin: var(--P); background: var(--surface);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); font-family: var(--mono); }
.qz-cell.is-done { background: var(--active); }
.qz-cell.is-right { background: var(--gb-bg) !important; color: var(--gb-ink) !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--gb-ink), 0 var(--P) 0 0 var(--gb-ink), calc(-1 * var(--P)) 0 0 0 var(--gb-ink), var(--P) 0 0 0 var(--gb-ink); }
.qz-cell.is-wrong { background: color-mix(in oklab, var(--bad) 13%, var(--bg)) !important; color: var(--text) !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--bad-ink), 0 var(--P) 0 0 var(--bad-ink), calc(-1 * var(--P)) 0 0 0 var(--bad-ink), var(--P) 0 0 0 var(--bad-ink); }
.qz-cell.is-current { outline: 0 !important; color: var(--text);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), var(--P) calc(var(--P) * 2) 0 0 var(--accent); }
.qz-code { border-radius: 0; }
.quiz-learn-kind { border: 0 !important; border-radius: 0 !important; margin: var(--P); font-family: var(--mono) !important; letter-spacing: .1em !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }

/* ---------- đầu bài: độ khó (đầu lâu) và độ hữu dụng (sao), shared/lib/meters.mjs ---------- */
/* Hai thanh 5 ô xếp chồng, cách nút "Đã đọc" một khoảng rõ (người dùng 21/10/2026: "cách nhau ra một chút, trông dính dính");
   rê chuột hoặc chạm vào thanh thì hiện hộp thoại nhỏ "Độ khó 3/5" (thanh sao: hộp ở dưới để khỏi đè thanh đầu lâu).
   :root đứng trước để thắng luật cũ cùng tên trong sites/cp/styles/code.css. */
:root .lesson-head .lesson-act { grid-column: 2; justify-self: end; align-self: start; display: flex; align-items: center; gap: 32px; margin-top: 4px; }
:root .lesson-head .lesson-act .mark { margin: 0; }
:root .lesson-meters { display: grid; gap: 8px; }
:root .lm { position: relative; display: flex; gap: 3px; line-height: 0; cursor: help; outline: 0; }
:root .lm i { display: block; width: 14px; height: 14px; color: var(--px-soft); opacity: .55; }
:root .lm svg { display: block; width: 14px; height: 14px; fill: currentColor; shape-rendering: crispEdges; }
:root .lm i.on { opacity: 1; }
/* Nửa ô: hình tắt bên dưới, hình sáng chồng lên cắt còn 4 trong 7 cột pixel bên trái (8px của 14px). */
:root .lm i.half { position: relative; opacity: 1; }
:root .lm i.half svg { opacity: .55; }
:root .lm i.half svg.h { position: absolute; inset: 0; opacity: 1; clip-path: inset(0 6px 0 0); }
:root .lm-hard i.on, :root .lm-hard i.half svg.h { color: var(--bad-ink); }
:root .lm-use i.on, :root .lm-use i.half svg.h { color: var(--gb-gold-lo); }
:root[data-theme="dark"] .lm-use :is(i.on, i.half svg.h) { color: var(--gb-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lm-use :is(i.on, i.half svg.h) { color: var(--gb-gold); } }
.lm[data-tip]::after {
  content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 10px); z-index: 25; padding: 6px 10px; white-space: nowrap; pointer-events: none;
  font: 700 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: var(--surface);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), var(--P) calc(var(--P) * 2) 0 0 var(--px-shade);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: transform calc(90ms * var(--motion, 1)) steps(2), visibility 0s calc(90ms * var(--motion, 1)), opacity 0s calc(90ms * var(--motion, 1));
}
.lm-use[data-tip]::after { bottom: auto; top: calc(100% + 10px); transform: translateY(-4px); }
.lm[data-tip]:is(:hover, :focus)::after { opacity: 1; visibility: visible; transform: none; transition: transform calc(90ms * var(--motion, 1)) steps(2); }
.lm:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
@media (max-width: 640px) {
  :root .lesson-head .lesson-act { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 18px; gap: 24px; }
  :root .lesson-head .lesson-act .mark { order: -1; }
  .lm[data-tip]::after { right: auto; left: -6px; }
}

/* ---------- thanh tải (shared/components/Loader.astro) ---------- */
/* Vạch màu nhấn sát mép trên trang, chạy từng nấc tới 90% trong lúc chờ trang mới, có trang mới thì tắt (người dùng 21/10/2026: bỏ
   màn hình chờ Gameboy vì nặng, "để chớp cái thôi"). Không ảnh, không che nội dung, không nhận chuột. */
.cnk-loader { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 3px; pointer-events: none; visibility: hidden; }
.cnk-loader i { display: block; width: 0; height: 100%; background: var(--accent); }
.is-loading .cnk-loader { visibility: visible; }
.is-loading .cnk-loader i { animation: ld-go calc(1.6s * var(--motion, 1)) steps(16) forwards; }
@keyframes ld-go { 30% { width: 50%; } 100% { width: 90%; } }
/* Chữ không phải Latin (Ả Rập, Ba Tư viết liền nét; Thái, CJK không có trong phông mono): mọi nhãn mono in hoa giãn chữ của lớp này
   (nhãn khung, nhãn câu hỏi, mục lục, nhóm kết quả tìm, nút…) về phông thường, không giãn chữ. */
:root:is(:lang(ar), :lang(fa), :lang(th), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant)) :is(.callout-title, .quiz-label, .toc-box > summary, .hit-group, .quiz-learn-kind, .run-btn, .vz-btn, .lm[data-tip])
  { font-family: var(--sans) !important; letter-spacing: 0 !important; }
:root:is(:lang(ar), :lang(fa), :lang(th), :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant)) .lm[data-tip]::after { font-family: var(--sans); letter-spacing: 0; }

/* ---------- nút "Đã đọc" ---------- */
/* Khung pixel bo bậc thang 2-1 ô (viền vẽ bằng drop-shadow trên lớp .mark-frame, nền cắt theo --mk-clip), bấm thì lún như phím
   máy chơi game; đã đọc thì nền xanh màn Gameboy, dấu tích pixel. Lúc đánh dấu (achieve() trong site.js): nút nảy, cúp vàng pixel
   bật lên thẳng cột giữa phía trên nút, hạt pixel bung từ cúp (người dùng 21/10/2026: chỉ cần cúp, không chữ, đặt giữa trên nút). */
.mark {
  --mk-b: var(--px-ink); --mk-bg: var(--surface); --mk-ink: var(--text-2); --mk-s: var(--px-shade);
  --mk-clip: polygon(0 calc(var(--P) * 2), var(--P) calc(var(--P) * 2), var(--P) var(--P), calc(var(--P) * 2) var(--P), calc(var(--P) * 2) 0,
    calc(100% - var(--P) * 2) 0, calc(100% - var(--P) * 2) var(--P), calc(100% - var(--P)) var(--P), calc(100% - var(--P)) calc(var(--P) * 2),
    100% calc(var(--P) * 2), 100% calc(100% - var(--P) * 2), calc(100% - var(--P)) calc(100% - var(--P) * 2), calc(100% - var(--P)) calc(100% - var(--P)),
    calc(100% - var(--P) * 2) calc(100% - var(--P)), calc(100% - var(--P) * 2) 100%, calc(var(--P) * 2) 100%, calc(var(--P) * 2) calc(100% - var(--P)),
    var(--P) calc(100% - var(--P)), var(--P) calc(100% - var(--P) * 2), 0 calc(100% - var(--P) * 2));
  position: relative; isolation: isolate; gap: 8px; height: 32px; padding: 0 14px 0 12px; border: 0; border-radius: 0; background: none;
  color: var(--mk-ink); font-weight: 600; letter-spacing: .01em;
  transition: transform calc(90ms * var(--motion, 1)) steps(2), color calc(90ms * var(--motion, 1)) steps(2);
}
.mark .mark-frame { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: drop-shadow(var(--P) 0 0 var(--mk-b)) drop-shadow(calc(-1 * var(--P)) 0 0 var(--mk-b)) drop-shadow(0 var(--P) 0 var(--mk-b))
    drop-shadow(0 calc(-1 * var(--P)) 0 var(--mk-b)) drop-shadow(var(--P) var(--P) 0 var(--mk-s)); }
.mark .mark-frame::before { content: ''; position: absolute; inset: 0; background: var(--mk-bg); clip-path: var(--mk-clip); }
.mark .px { width: 14px; height: 14px; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.mark:hover { background: none; transform: translateY(calc(-1 * var(--P))); }
.mark:active { transform: translate(var(--P), var(--P)); }
.mark:active .mark-frame { filter: drop-shadow(var(--P) 0 0 var(--mk-b)) drop-shadow(calc(-1 * var(--P)) 0 0 var(--mk-b))
  drop-shadow(0 var(--P) 0 var(--mk-b)) drop-shadow(0 calc(-1 * var(--P)) 0 var(--mk-b)); }
.mark.is-done { --mk-b: var(--gb-ink); --mk-bg: var(--gb-bg); --mk-ink: var(--gb-ink); --mk-s: color-mix(in oklab, var(--gb-ink) 40%, var(--bg));
  color: var(--gb-ink); border-color: transparent; background: none; }
.mark.is-pop { animation: mk-pop calc(360ms * var(--motion, 1)) steps(4); }
@keyframes mk-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
/* Cúp 16 × 13 ô, mỗi ô 2px: tâm cúp và tâm nút nằm trên cùng một cột dọc. Cúp nằm sau mặt nút (z-index -2 trong nút) nên trồi lên
   từ sau nút như vật phẩm bật ra khỏi khối "?", nảy, lơ lửng, rồi nhấp nháy tắt như vật phẩm trong game. */
.mark-cup { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: -2; width: 32px; height: 26px; margin-left: -16px; pointer-events: none;
  animation: mk-cup calc(1.9s * var(--motion, 1)) forwards, mk-blink calc(1.9s * var(--motion, 1)) step-end forwards; }
.mark-cup svg { display: block; width: 32px; height: 26px; shape-rendering: crispEdges; }
.mark-cup .c-i { fill: var(--gb-ink); }
.mark-cup .c-y { fill: var(--gb-gold); }
.mark-cup .c-h { fill: var(--gb-gold-hi); }
.mark-cup .c-s { fill: var(--gb-gold-lo); }
@keyframes mk-cup {
  0% { transform: translateY(34px); animation-timing-function: steps(4); }
  14% { transform: translateY(-6px); animation-timing-function: steps(1); }
  20% { transform: translateY(0); animation-timing-function: steps(1); }
  38% { transform: translateY(-2px); animation-timing-function: steps(1); }
  54% { transform: translateY(0); animation-timing-function: steps(1); }
  70% { transform: translateY(-2px); animation-timing-function: steps(1); }
  100% { transform: translateY(-2px); }
}
@keyframes mk-blink { 0%, 74% { opacity: 1; } 76%, 84%, 92%, 100% { opacity: 0; } 80%, 88% { opacity: 1; } }
.mark-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.mark-burst i { position: absolute; width: 4px; height: 4px; margin: -2px; background: var(--gb-ink); opacity: 0;
  animation: mk-burst calc(560ms * var(--motion, 1)) calc(270ms * var(--motion, 1)) steps(6) forwards; }
.mark-burst i:nth-child(2n) { background: var(--gb-gold); }
@keyframes mk-burst { from { transform: rotate(var(--a)) translateX(16px); opacity: 1; } to { transform: rotate(var(--a)) translateX(40px); opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }