/* Say Piano – trình chơi bài + kết bài khổ ngang (đợt "Khu rừng", mockup docs/thiet-ke/khu-rung/bai-hoc-ngang.png).
 * Nạp SAU game.css và khung-ngang.css (dùng --night, --ink…, .chip). Toàn app luôn ngang – không còn nhánh dọc.
 * - Nền: rừng đêm tĩnh (student/nen-dem.js) dưới mọi màn bài học; nội dung nổi trên nền.
 * - Thanh trên: ✕ | tiến độ (gradient thương hiệu) | chip ♪ | chip ♪.
 * - Thân: cột trái bóng thoại trắng ("Bài N · tên" + câu hỏi) + nhân vật TO (cao theo chỗ còn lại) + nút loa tròn xanh;
 *   cột phải: thẻ nội dung nền kem + hàng đáp án (thẻ tối cao cấp, chấm màu nốt khi là tên nốt).
 * - Chân: nút "Kiểm tra" xanh bên phải (tắt: kính tối, không be nhạt); màn đàn thật tự chấm không có chân.
 * Android cũ: không làm mờ nền, không bộ lọc ảnh; hiệu ứng chỉ transform/opacity. Không giãn khoảng cách chữ.
 * Kiểm tra: tools/kiem-tra-mot-man-hinh.mjs --ngang. */

.gm { --trai: clamp(210px, 33%, 330px); background: var(--night); color: var(--ink); isolation: isolate; }
.gm > .nen-dem { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
#app:has(> .gm) { max-width: none; box-shadow: none; }
body.po-app:has(.gm) { background: var(--night); }

/* ---------- thanh trên ---------- */
.gm-top { gap: 14px; padding: calc(var(--safe-t) + 6px) 20px 2px; background: transparent; }
.gm-x { width: 40px; height: 40px; font-size: 20px; color: var(--ink); background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.gm-x:active { background: rgba(255, 255, 255, .2); }
.gm-progress { height: 12px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 2px rgba(15, 0, 78, .3); }
.gm-chips { flex: none; display: flex; align-items: center; gap: 8px; }
.gm-notes { min-width: 0; text-align: left; color: #fff; font-size: 15px; }
.gm-combo { color: #FFC27A; }
.gm-again { background: rgba(255, 154, 46, .2); color: #FFD3A3; }
.gm-dt__diem-o { color: var(--ink); }
.gm-dt__diem-o small { color: var(--ink-3); }
@media (max-height: 360px) { .gm-x { width: 36px; height: 36px; } .gm-top { gap: 10px; } }

/* ---------- vùng màn ---------- */
.gm__main { padding: 10px 20px 6px; }
.gm-man { position: relative; }

/* câu hỏi: cột trái cố định (định vị tuyệt đối – cao trọn vùng màn), phần làm bên phải căn giữa theo chiều dọc */
.gm-screen > .gm-man:has(> .gm-ask) { display: flex; flex-direction: column; justify-content: safe center;
  padding-left: calc(var(--trai) + 22px); gap: clamp(8px, 2.6cqh, 14px); }
.gm-man > .gm-ask { position: absolute; left: 0; top: 0; bottom: 0; width: var(--trai); margin: 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; }
.gm-ask__bong { position: relative; flex: none; padding: 8px 14px 10px; border-radius: 20px; background: #FFFDF6; color: #0F004E;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); }
.gm-ask__bong::after { content: ""; position: absolute; left: 54px; bottom: -10px; border: 10px solid transparent; border-top-color: #FFFDF6; border-bottom: 0; }
.gm-ask__bai { display: block; margin-bottom: 2px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: #6A5F94;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-ask .gm-ask__q { margin: 0; padding: 0; background: none; box-shadow: none; font-size: clamp(15px, 6cqh, 20px); line-height: 1.25;
  font-weight: 700; color: #0F004E; }
.gm-ask .gm-ask__q::before { display: none; }
/* nhân vật TO: chiếm phần còn lại của cột (≈ 40–50% chiều cao màn), đứng trên nền rừng; dựng theo CHIỀU CAO (ảnh 3D Task 12 cùng chữ ký).
 * Chỉ áp cho nhân vật lớn của câu hỏi – nhân vật nhỏ 38 px ở màn đàn (tu-dan.js, cũng mang lớp gm-ask__ch) không bị ảnh hưởng. */
.gm-ask > .gm-ask__duoi { flex: 1 1 0; min-height: 0; max-height: 52vh; display: flex; align-items: flex-end; gap: 6px; padding-left: 4px; }
.gm-ask > .gm-ask__duoi > .gm-ask__ch { flex: none; height: 100%; display: flex; align-items: flex-end; line-height: 0; }
.gm-ask > .gm-ask__duoi > .gm-ask__ch > .nv3d { height: 100%; }
.gm-ask > .gm-ask__duoi > .gm-ask__ch > .nv3d > img { display: block; width: auto; height: 100%; max-width: none; aspect-ratio: 1; }
.gm-ask > .gm-ask__duoi > .gm-ask__ch > svg { display: block; width: auto; height: 100%; max-width: none; }
/* 2D (SVG) có lề trống trong khung vẽ (trên đầu, bóng dưới chân) → phóng nhẹ từ chân; ảnh 3D (img, Task 12) không cần */
.gm-ask > .gm-ask__duoi > .gm-ask__ch > svg { transform: scale(1.12); transform-origin: 50% 100%; }
/* nút loa tròn xanh cạnh nhân vật */
.gm-play--tron { flex: none; width: 48px; min-width: 48px; height: 48px; min-height: 48px; margin-bottom: 8px; padding: 0; border-radius: 50%;
  background: linear-gradient(180deg, #7FB6FF, #2F6BFF); color: #fff; box-shadow: 0 4px 0 #1B47B8; }
.gm-play--tron:active { box-shadow: 0 1px 0 #1B47B8; }

/* ---------- thẻ nội dung: nền kem nổi trên nền (dây lá hoa ở mép trên đã bỏ – chủ dự án 2026-10-20) ---------- */
.gm-man > :is(.gm-docnot__staff, .gm-tt__mau, .gm-dien__o, .gm-tl__khuong), .gm-tt__trai > .gm-tt__mau, .gm-meet > .gm-hinh, .gm-dt__khuong {
  position: relative; background: #FFFDF6; border-radius: 22px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8), inset 0 -4px 0 rgba(15, 0, 78, .08); }

/* ---------- thẻ đáp án: thẻ tối cao cấp ---------- */
.gm-card { border: 2px solid rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(30, 47, 96, .96), rgba(19, 31, 68, .96)); color: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .38); font-size: clamp(16px, 6cqh, 21px); }
.gm-card:active:not(:disabled) { box-shadow: 0 1px 0 rgba(0, 0, 0, .38); }
.gm-card.is-on { border-color: #FFE58A; background: linear-gradient(180deg, rgba(255, 229, 138, .2), rgba(255, 229, 138, .1)); color: #fff;
  box-shadow: 0 4px 0 #B87A0C; }
.gm-card.is-right, .is-locked .gm-card.is-right { border-color: #3FE07A; background: linear-gradient(180deg, rgba(63, 224, 122, .24), rgba(63, 224, 122, .12));
  color: #E2FBEA; box-shadow: 0 4px 0 #1F8F55; }
.gm-card.is-wrong { border-color: #FFB25E; background: linear-gradient(180deg, rgba(255, 154, 46, .24), rgba(255, 154, 46, .12)); color: #FFE7CC;
  box-shadow: 0 4px 0 #B85F0C; }
.gm-card:has(> .gm-card__cham) { flex-direction: row; gap: 10px; }
.gm-card__cham { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); }
/* hình trong thẻ tối (khuông, bàn phím, hình nốt): đặt trên mảnh kem cho rõ */
.gm-card > .gm-hinh > svg, .gm-card > .gm-hinh > img, .gm-card > svg, .gm-card > img { box-sizing: border-box; padding: 3px 6px; border-radius: 10px; background: #FFFDF6; }
.gm-hl__ico { color: var(--tone, #FFE58A); }
.gm-pair__card.is-done { border-color: #3FE07A; background: rgba(63, 224, 122, .18); color: #E2FBEA; box-shadow: 0 2px 0 #1F8F55; }
.gm-pair__card.is-miss { border-color: #FFB25E; background: rgba(255, 154, 46, .2); }
.gm-tl__nut { --tone: #FFE58A; }
.gm-man > .gm-opts:not(.gm-opts--grid):has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 4 lựa chọn: luôn 2 hàng × 2 ô (chuẩn câu hỏi, chủ dự án 2026-10-18) */
.gm-man > .gm-opts:not(.gm-opts--grid):has(> :nth-child(3)):not(:has(> :nth-child(5))):has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-man > .gm-opts:not(.gm-opts--grid):has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-man > .gm-opts:not(.gm-opts--grid):has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm-opts:not(.gm-opts--grid) .gm-card { min-height: clamp(40px, 20cqh, 62px); border-radius: 18px; }

/* chữ đặt thẳng trên nền đêm */
.gm-bp-dem, .gm-tt__msg, .gm-cho__chu { color: var(--ink-2); }
.gm-dien__dem { color: var(--ink); }
.gm-dien__xoa { border-color: var(--glass-line); background: rgba(255, 255, 255, .08); color: var(--ink); }
.gm-order__slots { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--glass-line); }
.gm-order__slot { border-color: rgba(255, 255, 255, .28); }
.gm-order__slot::before { background: #FFE58A; color: #0F004E; }
.gm-pad { background: rgba(98, 66, 214, .3); color: #E7E0FF; box-shadow: inset 0 0 0 2px rgba(180, 160, 255, .45), 0 6px 0 rgba(0, 0, 0, .35); }
.gm-pad:disabled { background: rgba(255, 255, 255, .06); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--glass-line), 0 6px 0 rgba(0, 0, 0, .3); }
.gm-pad.is-on { background: #6242D6; color: #fff; box-shadow: 0 6px 0 #4528A8; }
.gm-soon .gm-ask__q, .gm-soon__sub { color: var(--ink); }

/* ---------- từng dạng màn ---------- */
.gm-man > .gm-opts--grid .gm-card { min-height: 0; }
/* thẻ hình còn 3 lựa chọn (học liệu cũ): một hàng 3 ô, không để một ô lẻ ở hàng dưới */
.gm-man > .gm-opts--grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* khuông đọc nốt trải hết bề ngang thẻ kem (viewBox dài 480 – doc-not.js), cao bị chặn theo chỗ còn lại */
.gm-docnot__staff svg { width: 100%; max-width: 100%; height: auto; max-height: clamp(46px, 41cqh, 170px); }
.gm.co-sheet .gm-docnot__staff svg { max-height: clamp(40px, 30cqh, 130px); }   /* thanh phản hồi mở: nhường chỗ (740×360) */
.gm-man--kb:has(.gm-docnot__staff) .gm-docnot__staff svg { max-height: clamp(52px, 26cqh, 130px); }
.gm-man--kb > .gm-bp { margin-block: 0; margin-inline: 0; padding-inline: 0; }
/* bàn phím dài (≥ 16 phím trắng – ban-phim.js lopBanPhim, vd. "phím trầm nhất" Đô2–Đô6): bàn phím xuống đáy, trải HẾT bề ngang vùng màn
 * (không nhồi vào cột phải rồi tách hai hàng); phía trên: nhân vật bên trái, lời hỏi bên phải */
.gm-man--kb-rong { --bp-h: clamp(84px, 34cqh, 150px); --bp-2hang: .72; }
.gm-man--kb-rong:has(.gm-bp.is-2hang) > .gm-ask { bottom: calc(var(--bp-h) * 1.44 + 16px); }
.gm-screen > .gm-man--kb-rong:has(> .gm-ask) { justify-content: flex-end; padding-left: 0; }
.gm-man--kb-rong > :not(.gm-ask):not(.gm-bp) { margin-left: calc(var(--trai) + 22px); }
.gm-man--kb-rong > .gm-ask { right: 0; bottom: calc(var(--bp-h) + 16px); width: auto; flex-direction: row; align-items: flex-start; gap: 18px; }
.gm-man--kb-rong > .gm-ask > .gm-ask__duoi { order: -1; flex: none; height: 100%; max-height: none; }
.gm-man--kb-rong > .gm-ask > .gm-ask__bong { flex: 0 1 auto; max-width: min(520px, 62%); margin-top: 6px; }
.gm-man--kb-rong > .gm-ask > .gm-ask__bong::after { left: -10px; top: 22px; bottom: auto; border: 10px solid transparent; border-right-color: #FFFDF6; border-left: 0; }
.gm-man--kb-rong .gm-bp__keys, .gm-man--kb-rong:has(.gm-docnot__staff) .gm-bp__keys { height: var(--bp-h); }
.gm-man--kb-rong > .gm-bp-dem { align-self: flex-end; }
.gm-bp__keys { height: clamp(100px, 52cqh, 180px); }
.gm-man--kb:has(.gm-docnot__staff) .gm-bp__keys { height: clamp(92px, 40cqh, 150px); }
.gm-hl__btn { min-height: clamp(60px, 30cqh, 110px); }
/* ghép cặp: không còn câu hỏi phía trên – hàng chia đều cả chiều cao */
.gm-pair { grid-template-rows: repeat(var(--hang, 3), clamp(44px, calc((100cqh - 16px) / var(--hang, 3) - 10px), 110px)); }
.gm-pair__card svg, .gm-pair__card img { max-height: clamp(28px, calc((100cqh - 16px) / var(--hang, 3) - 26px), 96px); }
/* khuông trong thẻ ghép cặp / xếp thứ tự: trải bề ngang thẻ (viewBox dài – ghep-cap.js, xep-thu-tu.js), cao theo hàng */
:is(.gm-pair__card, .gm-order__card) > .gm-hinh--staff { flex: 1 1 auto; min-width: 0; }
:is(.gm-pair__card, .gm-order__card) > .gm-hinh--staff svg { width: 100%; max-width: 100%; height: auto; }
.gm-order__slot, .gm-order__card { min-height: clamp(48px, 24cqh, 90px); }
.gm-order__card svg, .gm-order__card img { max-height: clamp(34px, 22cqh, 96px); }
.gm-dien__o svg { max-height: clamp(48px, 25cqh, 130px); }
.gm-dien__nut { min-height: clamp(58px, 26cqh, 104px); }
.gm-dien__nut svg { height: clamp(32px, 15cqh, 64px); }
.gm-tl__dong svg { max-height: clamp(44px, 24cqh, 110px); }
.gm-tl__nut { min-height: clamp(42px, 16cqh, 56px); }

/* gõ tiết tấu (gọn MỘT màn hình): hai cột – trái khuông tiết tấu + hàng 2 nút + dòng nhắc; phải hàng đèn phách + vùng gõ VỪA PHẢI
 * (không trải hết cột). Các phần cùng căn giữa theo chiều dọc. */
.gm-screen > .gm-tt:has(> .gm-ask) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  align-items: center; column-gap: clamp(12px, 2.6cqw, 22px); }
.gm-tt__trai { display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 2.4cqh, 12px); min-width: 0; min-height: 0; }
.gm-tt__phai { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 3cqh, 14px); min-width: 0; min-height: 0; }
.gm-tt__trai > .gm-tt__mau { gap: 0; padding-block: 6px; }
.gm-tt__trai > .gm-tt__msg { font-size: 14px; line-height: 1.3; }
.gm-tt__phai > .gm-pad { width: 180px; width: clamp(140px, 30cqw, 220px); max-width: 86%; height: 110px; height: clamp(84px, 30cqh, 128px); min-height: 0; border-radius: 22px;
  align-self: center; font-size: 17px; }
.gm-tt__trai > .gm-tt__row { flex-wrap: nowrap; gap: 8px; }
.gm-tt__row .gm-play, .gm-tt__row .gm-tt__go { min-height: 44px; padding: 0 12px; border-radius: 14px; font-size: 16px; white-space: nowrap; }
.gm-tt__row .gm-play { gap: 6px; }
.gm-tt__row .gm-play__ico svg { width: 22px; height: 22px; }
.gm-tt__mau svg { max-height: clamp(48px, 30cqh, 116px); }
.gm-tt__mau:has(> svg:nth-child(2)) svg { max-height: clamp(30px, 17cqh, 84px); }
.gm-tt__mau:has(> svg:nth-child(3)) svg { max-height: clamp(24px, 15cqh, 64px); }
.gm-tt__mau:has(> svg:nth-child(4)) svg { max-height: clamp(20px, 11cqh, 56px); }
@container gm (max-height: 300px) {
  .gm-tt__phai { gap: 8px; }
  .gm-tt__trai > .gm-tt__msg { font-size: 13px; }
  .gm-tt__dem-so { font-size: 34px; }
  .gm-tt__phach { width: 24px; height: 24px; }
}

/* gặp bạn mới: nhân vật TO bên trái, lời + hình bên phải */
.gm-screen > .gm-meet { display: grid; grid-template-columns: var(--trai) minmax(0, 1fr); grid-auto-rows: auto; align-content: safe center;
  column-gap: 22px; row-gap: 14px; padding-top: 0; }
.gm-screen > .gm-meet > .gm-meet__ch { grid-column: 1; grid-row: 1 / span 6; align-self: center; justify-self: center; }
.gm-screen > .gm-meet > :not(.gm-meet__ch) { grid-column: 2; }
.gm-meet__ch :is(svg, .nv3d img) { height: clamp(110px, 90cqh, 250px); }
.gm-meet:has(> .gm-hinh) .gm-meet__ch :is(svg, .nv3d img) { height: clamp(100px, 88cqh, 240px); }
.gm-meet__say { background: #FFFDF6; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); }
.gm-meet__say::after { display: none; }
.gm-meet .gm-hinh { margin-top: 8px; padding: clamp(6px, 2cqh, 12px); }
.gm-meet .gm-hinh img, .gm-meet .gm-hinh svg { max-height: clamp(56px, 40cqh, 170px); }

/* ---------- chân: dòng trạng thái đàn | nút "Kiểm tra" ---------- */
.gm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 4px 20px calc(var(--safe-b) + 8px);
  border-top: 0; background: transparent; }
.gm-foot .gm-btn--block { flex: none; width: auto; min-width: 240px; min-height: 48px; }
.gm .gm-btn { --b: var(--nut-xanh); --bd: var(--nut-xanh-bd); }
.gm-btn:disabled { background: rgba(255, 255, 255, .08); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--glass-line), 0 5px 0 rgba(0, 0, 0, .3); }
@media (max-height: 360px) { .gm-foot .gm-btn--block { min-height: 44px; } }

/* ---------- thanh phản hồi: đáy, tối, viền màu kết quả ---------- */
.gm-sheet { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 18px; row-gap: 2px;
  padding: 10px calc(var(--safe-r) + 24px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 24px); border-radius: 22px 22px 0 0; box-shadow: 0 -16px 40px -16px rgba(0, 0, 0, .8); }
.gm.co-sheet .gm__main { padding-bottom: calc(var(--sheet-h, 120px) - var(--foot-h, 0px) + 6px); }
.gm-sheet.is-right { background: #0F3A2C; color: #CFF5DA; border-top: 2px solid #3FE07A; }
.gm-sheet.is-wrong { background: #3A2614; color: #FFE1C2; border-top: 2px solid #FFB25E; }
.gm-sheet.is-right .gm-sheet__title { color: #7CF0A6; }
.gm-sheet.is-wrong .gm-sheet__title { color: #FFC27A; }
.gm-sheet.is-right .gm-sheet__ico { color: #17763C; }
.gm-sheet.is-wrong .gm-sheet__ico { color: #A34800; }
.gm-sheet .gm-btn { --b: var(--nut-xanh); --bd: var(--nut-xanh-bd); }
.gm-sheet.is-wrong .gm-btn { --b: linear-gradient(180deg, #FFB75E, #F2871A); --bd: #B85F0C; }
.gm-sheet__head { flex: 1 1 200px; }
.gm-sheet__title { font-size: 20px; }
.gm-sheet__combo { color: #FFC27A; }
.gm-sheet__combo, .gm-sheet__ans, .gm-sheet__note { flex: 1 1 100%; order: 2; font-size: 14px; }
.gm-sheet .gm-btn { flex: none; width: auto; min-width: 220px; min-height: 46px; margin-top: 0; }
.gm-sheet .gm-btn.gm-sheet__lai { min-width: 160px; }

/* ---------- màn đàn: giữ bố cục ngang (bản nhạc to + MỘT nút ▶/■), đổi màu sang nền đêm ---------- */
.gm-dt { gap: 8px; }
.gm-dt__loi { min-height: 38px; color: #0F004E; }
.gm-dt__loi-ch svg { height: 38px; }
.gm-dt__loi-bong { padding: 7px 14px; background: #FFFDF6; }
.gm-dt__loi-chu { font-size: 15px; }
.gm-dt__san { gap: 14px; margin-top: 4px; }
.gm-dt__khuong { padding: 10px 14px 8px; }
.gm-dt__khuong.is-dan { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8), 0 0 0 3px #FFE58A; }
.gm-dt__phim .gm-bp__keys { height: clamp(88px, 34cqh, 150px); }
.gm-dt.is-midi .gm-dt__go { width: 88px; height: 88px; }
.gm-dt__go-chu { color: var(--ink-2); }
.gm-dt.is-mau .gm-dt__go-chu { color: #9CC8FF; }
.gm-dt__go:disabled { background: rgba(255, 255, 255, .1); color: var(--ink-3); }
@media (max-height: 380px) {
  .gm-dt__go { width: 68px; height: 68px; }
  .gm-dt__go svg { width: 34px; height: 34px; }
  .gm-dt__cot { gap: 8px; min-width: 88px; }
  .gm-dt__go-chu { font-size: 13px; }
  .gm-dt__dem { font-size: 84px; }
}

/* ---------- kết bài: trái cụm nhân vật cúi chào, phải tiêu đề + sao + 3 thẻ số + ♪ + "Tiếp tục" ---------- */
.gm-end { height: 100vh; height: 100dvh; min-height: 0; }
.gm-end__main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 1fr); align-items: center; column-gap: 20px;
  padding: calc(var(--safe-t) + 12px) 28px calc(var(--safe-b) + 14px); text-align: left; }
/* cụm nhân vật co theo bề ngang cột (bạn dẫn bài to ở giữa) – không tràn mép trái */
.gm-end__cast { justify-content: center; align-items: flex-end; align-self: center; gap: 0; min-height: 0; width: 100%; }
.gm-end__ch { flex: none; width: 17.3%; }
.gm-end__ch:first-child { order: 2; width: 48%; }
.gm-end__ch:nth-child(2) { order: 1; }
.gm-end__ch:nth-child(n+3) { order: 3; }
.gm-end__ch :is(svg, .nv3d img), .gm-end__ch + .gm-end__ch :is(svg, .nv3d img) { display: block; width: 100%; height: auto; max-height: 66vh; }
/* cột phải chừa chỗ cho chip ♪ góc trên phải (kinh-te.css .gm-pv); cột nhân vật dùng trọn chiều cao */
.gm-end__phai { min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding-top: 34px; }
.gm-end__title { margin: 0 0 2px; font-size: clamp(24px, 7.6vh, 32px); color: var(--ink); }
.gm-end__sub { margin: 0 0 clamp(8px, 3vh, 16px); font-size: 15px; color: var(--ink-2); }
.gm-end__sao { display: flex; gap: 8px; margin-bottom: 10px; }
.gm-end__sao:empty { display: none; }
/* sao chưa đạt: viền mờ; sao đạt: lớp vàng đặc bật lên lần lượt sau tiêu đề (chỉ transform/opacity) */
.gm-end__s { position: relative; display: block; width: 34px; height: 34px; color: rgba(255, 255, 255, .28); }
.gm-end__s .ico { display: block; width: 100%; height: 100%; }
.gm-end__s-on { position: absolute; inset: 0; color: #FFD23F; }
.gm-end__s-on .ico { fill: #FFD23F; }
.gm-end__s.is-co .gm-end__s-on { animation: gm-sao-bat .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.45s + var(--i) * .3s); }
@keyframes gm-sao-bat { from { transform: scale(.2) rotate(-35deg); opacity: 0; } to { transform: none; opacity: 1; } }
html.po-giam .gm-end__s.is-co .gm-end__s-on { animation: none; }
@media (max-height: 380px) { .gm-end__s { width: 28px; height: 28px; } .gm-end__sao { margin-bottom: 6px; } }
.gm-stats { gap: 10px; }
.gm-stat { padding: 2px; }
.gm-stat__in { gap: 2px; padding: 8px 6px 9px; background: #FFFDF6; text-align: center; }
.gm-stat__v { font-size: clamp(20px, 6vh, 24px); }
.gm-end .gm-pv-them { margin-top: 10px; align-items: flex-start; }
@media (max-height: 370px) { .gm-end .gm-pv-them { margin-top: 6px; } }   /* 740×360: kết bài có dòng "+N ♪" vừa khít (kiem-tra-kinh-te) */
/* lý do thưởng: một dòng (nhiều lý do + khổ hẹp/tai thỏ từng đẩy nút "Tiếp tục" ra ngoài màn), đủ chữ ở title */
.gm-end .gm-pv-them__l { max-width: 100%; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-end__nut { display: flex; justify-content: flex-end; margin-top: clamp(10px, 4vh, 20px); }
.gm-end__nut .gm-btn { width: auto; min-width: 240px; min-height: 48px; }
.gm-end .gm-pv { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }
.gm-end .gm-pv__so { color: #fff; }

/* màn giới thiệu nhảy cóc (student/screens/nhay-coc.js, .gm): chữ trong bóng thoại / thẻ trắng giữ màu navy */
.gm :is(.nc__bong, .nc__the) { color: #0F004E; }
.gm.nc .nc__nv :is(svg, .nv3d img) { height: clamp(80px, 64cqh, 230px); }

/* ---------- màn xin quyền trước (student/xin-quyen.js): cùng nền rừng đêm – lời mời nối đàn hiện ngay trong bài ---------- */
.xq { background: var(--night); color: var(--ink); isolation: isolate; }
.xq::backdrop { background: var(--night); }
.xq > .nen-dem { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.xq__bar { background: rgba(255, 255, 255, .9); }
.xq__bong { background: #FFFDF6; color: #0F004E; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); }
.xq__bong::before { background: #FFFDF6; box-shadow: none; }
.xq__tran-an, .xq__phu { color: var(--ink-2); }
.xq-noi__o { background: #FFFDF6; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8); }

html.po-giam .gm-sheet { transition: none; }

/* ---------- ôn lại trong bài: vuốt giữa các màn (spec 2026-10-18-on-lai-vuot-man) ---------- */
/* chấm nhỏ trên thanh tiến độ = vị trí màn đang xem lại (không thêm nút) */
.gm-progress__xem { position: absolute; z-index: 2; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #FF9A2E; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.gm-progress__xem[hidden] { display: none; }
.gm-screen.is-vuot { animation: none; }
.gm__main.is-truot { overflow-x: clip; }
/* lớp hướng dẫn vuốt (lần đầu tới màn thứ 2 của một bài, mỗi hồ sơ một lần) – chạm bất kỳ đâu để tắt */
.gm-tip { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 16px 24px;
  background: rgba(10, 4, 40, .84); color: #fff; cursor: pointer; animation: gm-tip-hien .25s ease-out both; }
.gm-tip:focus { outline: none; }
.gm-tip__o { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(560px, 100%); text-align: center; }
.gm-tip__hinh { position: relative; width: 220px; height: 92px; }
.gm-tip__vet { position: absolute; left: 24px; right: 24px; top: 22px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85)); }
.gm-tip__vet::after { content: ""; position: absolute; right: -6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-top: 5px solid #fff; border-right: 5px solid #fff; border-radius: 2px; transform: rotate(45deg); }
.gm-tip__tay { position: absolute; left: 0; top: 10px; width: 64px; height: 76px; animation: gm-tip-tay 1.6s cubic-bezier(.45, 0, .3, 1) infinite; }
.gm-tip__tay svg { display: block; width: 64px; height: 76px; filter: none; }
.gm-tip__chu { margin: 0; font: 700 22px/1.3 "Quicksand", system-ui, sans-serif; text-wrap: balance; }
.gm-tip__phu { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .72); }
@keyframes gm-tip-hien { from { opacity: 0; } to { opacity: 1; } }
@keyframes gm-tip-tay { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 70% { transform: translateX(150px); opacity: 1; } 100% { transform: translateX(150px); opacity: 0; } }
html.po-giam .gm-tip, html.po-giam .gm-tip__tay { animation: none; }
html.po-giam .gm-tip__tay { transform: translateX(76px); }
@media (max-height: 380px) { .gm-tip__chu { font-size: 19px; } .gm-tip__hinh { height: 84px; } }