/* Trình chơi bài game (app học viên): toàn màn hình, nút khối nổi, thẻ lựa chọn lớn, thanh phản hồi kiểu Duolingo,
 * màn "Tràng pháo tay". Màu Gia đình Nốt Nhạc qua --tone/--tone-d/--tone-l/--tone-i (ui.tone()).
 * Mobile-first; chạm ≥ 48px; không giãn khoảng cách chữ; theo "giảm chuyển động" của máy. */

.gm { --ok: #36C26B; --ok-d: #20A052; --ok-l: #DBF6E5; --ok-i: #17763C;
  --bad: #FF9A2E; --bad-d: #E57A0E; --bad-l: #FFEBD4; --bad-i: #A34800;
  position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--bg);
  padding-left: var(--safe-l); padding-right: var(--safe-r); color: var(--navy); overflow-x: clip; }
/* overflow-x: clip (không phải hidden): hidden biến .gm thành khung cuộn → thanh trên và nút "Kiểm tra" (sticky) trôi mất khi màn dài hơn máy */

/* ---------- thanh trên ---------- */
.gm-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 12px) 16px 8px; background: var(--bg); }
.gm-x { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: var(--navy-50);
  font: 700 24px/1 "Quicksand", system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
.gm-x:active { background: var(--tint); }
.gm-progress { flex: 1; height: 16px; border-radius: 999px; background: #EFE7D8; overflow: hidden; }
.gm-progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--brand-progress);
  clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0 round 999px); transition: clip-path .5s cubic-bezier(.2, .7, .2, 1);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), inset 0 4px 0 rgba(255, 255, 255, .35); }
.gm-notes { flex: none; min-width: 52px; text-align: right; font-weight: 700; font-size: 17px; color: #7A5600; }
.gm-combo { flex: none; font-weight: 700; font-size: 16px; color: #E57A0E; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.gm-combo.is-on { opacity: 1; transform: none; }
.gm-combo:empty { display: none; }
.gm[data-che-do="nhay-coc"] .gm-notes { display: none; }   /* bài kiểm tra nhảy cóc không cộng ♪ */

/* ---------- vùng màn ---------- */
.gm__main { flex: 1; display: flex; flex-direction: column; padding: 8px 16px 24px; }
.gm-screen { flex: 1; display: flex; flex-direction: column; animation: gm-in .3s ease-out both; }
@keyframes gm-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.gm-again { flex: none; margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--bad-l); color: var(--bad-i); font-weight: 700; font-size: 14px; white-space: nowrap; }
.gm-again[hidden] { display: none; }
.gm-man { display: flex; flex-direction: column; gap: 20px; }
.gm-center { display: flex; justify-content: center; }

/* câu hỏi: nhân vật + bóng thoại */
.gm-ask { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
.gm-ask__ch { flex: none; line-height: 0; }
.gm-ask__q { position: relative; flex: 1; margin: 0 0 18px; padding: 12px 16px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--tone-l, var(--tint)); font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.gm-ask__q::before { content: ""; position: absolute; left: -7px; bottom: 14px; width: 14px; height: 14px; background: #fff;
  box-shadow: -2px 2px 0 0 var(--tone-l, var(--tint)); transform: rotate(45deg); }
.gm-ask__q:focus { outline: none; }
/* lời nhân vật có giọng đọc: nút loa nhỏ trong bong bóng (không tự đọc trừ khi bật Cài đặt › Tự đọc lời nhân vật) */
.gm-ask--loa .gm-ask__q { display: flex; align-items: flex-start; gap: 8px; }
.gm-ask__t { flex: 1; min-width: 0; margin: 0; font: inherit; color: inherit; }
.gm-ask__t:focus { outline: none; }
.gm-ask__q .gm-play--sm { flex: none; background: var(--tone, #2F9BFF); color: var(--tone-on, #fff); box-shadow: 0 4px 0 var(--tone-d, #1278DB); }

/* ---------- nút khối nổi ---------- */
.gm-foot { position: sticky; bottom: 0; z-index: 4; padding: 12px 16px calc(var(--safe-b) + 16px); background: var(--bg);
  border-top: 2px solid #EFE7D8; }
.gm-foot.is-hidden { visibility: hidden; }
.gm-btn { --b: var(--ok); --bd: var(--ok-d); display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px;
  border: 0; border-radius: 16px; background: var(--b); color: #fff; font: 700 18px/1.2 "Quicksand", system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 5px 0 var(--bd); transform: translateY(0); transition: transform .08s, box-shadow .08s; }
.gm-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--bd); }
.gm-btn:disabled { background: #E7E1D6; color: #8C8577; box-shadow: 0 5px 0 #D3CBBC; cursor: default; }
.gm-btn:focus-visible { box-shadow: 0 5px 0 var(--bd), 0 0 0 4px rgba(98, 66, 214, .4); }
.gm-btn--block { width: 100%; }

/* ---------- thẻ ---------- */
.gm-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 64px; padding: 12px 14px; border: 2px solid #E6DFD2; border-radius: 18px; background: #fff; color: var(--navy);
  font: 700 18px/1.3 "Quicksand", system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 0 #E6DFD2; transition: transform .08s, box-shadow .08s, background .15s, border-color .15s; }
.gm-card:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #E6DFD2; }
.gm-card.is-on { border-color: var(--tone); background: var(--tone-l); color: var(--tone-i); box-shadow: 0 4px 0 var(--tone); }
.gm-card.is-right, .is-locked .gm-card.is-right { border-color: var(--ok); background: var(--ok-l); color: var(--ok-i); box-shadow: 0 4px 0 var(--ok); }
.gm-card.is-wrong { border-color: var(--bad); background: var(--bad-l); color: var(--bad-i); box-shadow: 0 4px 0 var(--bad); }
.is-locked .gm-card { cursor: default; }
.gm-card__chu { display: block; text-align: center; }
.gm-opts { display: flex; flex-direction: column; gap: 12px; }
.gm-opts--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-opts--grid .gm-card { min-height: 140px; }

/* hình trong thẻ */
.gm-hinh { display: flex; justify-content: center; width: 100%; line-height: 0; }
.gm-hinh img { max-width: 100%; max-height: 200px; object-fit: contain; }
.gm-hinh svg { display: block; max-width: 100%; height: auto; }
.gm-hinh--kb svg { width: 100%; max-width: 220px; max-height: 110px; }
.gm-hinh--staff svg { width: 100%; max-width: 220px; }
.gm-hinh--rhythm svg { width: 100%; max-width: 220px; }
.gm-hinh--rhythm svg.dur { width: 48px; height: 60px; }

/* nút nghe */
.gm-play { display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 26px; border: 0; border-radius: 20px;
  background: #2F9BFF; color: #fff; font: 700 18px/1 "Quicksand", system-ui, sans-serif; cursor: pointer; box-shadow: 0 5px 0 #1278DB; }
.gm-play:active { transform: translateY(4px); box-shadow: 0 1px 0 #1278DB; }
.gm-play--sm { min-height: 48px; min-width: 48px; justify-content: center; padding: 0 12px; border-radius: 14px; }
.gm-play__ico { display: inline-flex; }
.gm-play.is-playing .gm-play__ico { animation: gm-beat .5s ease-in-out infinite; }
@keyframes gm-beat { 50% { transform: scale(.82); } }

/* ---------- gặp bạn mới ---------- */
.gm-meet { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.gm-meet__say { position: relative; display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 16px 16px 16px 18px;
  border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 2px var(--tone-l, var(--tint)), 0 8px 24px -18px rgba(15, 3, 78, .5); }
.gm-meet__say::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: #fff;
  box-shadow: 2px 2px 0 0 var(--tone-l, var(--tint)); transform: rotate(45deg); }
.gm-meet__bubble { flex: 1; margin: 0; font-size: 21px; line-height: 1.45; font-weight: 700; color: var(--navy); }
.gm-meet__bubble:focus { outline: none; }
.gm-meet__say .gm-play--sm { background: var(--tone, #2F9BFF); color: var(--tone-on, #fff); box-shadow: 0 4px 0 var(--tone-d, #1278DB); }
.gm-meet__ch { line-height: 0; animation: nf-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.gm-meet.is-co-vu .gm-meet__ch { animation: nf-pop .55s cubic-bezier(.3, 1.4, .5, 1) both, nf-jump .7s .6s ease-in-out 2; }
.gm-meet.is-ngac-nhien .gm-meet__ch :is(svg, .nv3d img) { animation: gm-tilt 1.2s .5s ease-in-out both; }
@keyframes gm-tilt { 30% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } 100% { transform: none; } }
.gm-meet .gm-hinh { padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 #EFE7D8; }

/* ---------- cao – thấp ---------- */
.gm-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gm-hl__btn { min-height: 110px; font-size: 16px; }
.gm-hl__ico { font-size: 34px; line-height: 1; color: var(--tone-d); }

/* ---------- ghép cặp ---------- */
.gm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--hang, 3), minmax(96px, 1fr)); grid-auto-flow: column; gap: 12px; }
.gm-pair__card { min-height: 0; height: 100%; }
.gm-pair__card.is-done { border-color: var(--ok); background: var(--ok-l); color: var(--ok-i); box-shadow: 0 2px 0 var(--ok); opacity: .55; cursor: default; }
.gm-pair__card.is-miss { border-color: var(--bad); background: var(--bad-l); animation: gm-shake .4s; }
@keyframes gm-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- xếp thứ tự ---------- */
.gm-order { display: flex; flex-direction: column; gap: 22px; }
.gm-order__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin: 0; padding: 12px;
  list-style: none; border-radius: 18px; background: #F3ECDF; counter-reset: o; }
.gm-order__slot { position: relative; min-height: 96px; border: 2px dashed #D9CFBD; border-radius: 16px; display: flex; }
.gm-order__slot.is-full { border: 0; }
.gm-order__slot > .gm-card { flex: 1; }
.gm-order__slot::before { counter-increment: o; content: counter(o); position: absolute; top: -9px; left: -6px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.gm-order__slot.is-right > .gm-card { border-color: var(--ok); background: var(--ok-l); box-shadow: 0 4px 0 var(--ok); }
.gm-order__slot.is-wrong > .gm-card { border-color: var(--bad); background: var(--bad-l); box-shadow: 0 4px 0 var(--bad); }
.gm-order__pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.gm-order__card { min-height: 96px; padding: 8px; }
.gm-order__card.is-used { visibility: hidden; }

/* ---------- nhảy cóc: màn giới thiệu bài kiểm tra (student/screens/nhay-coc.js) ---------- */
.nc__main { justify-content: center; gap: clamp(10px, 2.5cqh, 24px); }
.nc__noi { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.5cqh, 14px); min-height: 0; }
.nc__bong { position: relative; margin: 0; padding: 14px 18px; border-radius: 22px; background: #fff; text-align: center;
  box-shadow: inset 0 0 0 2px var(--tone-l), 0 8px 24px -18px rgba(15, 3, 78, .5); font-size: clamp(17px, 3.8cqh, 22px); line-height: 1.4; font-weight: 700; }
.nc__bong::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: #fff;
  box-shadow: 2px 2px 0 0 var(--tone-l); transform: rotate(45deg); }
.nc__bong:focus { outline: none; }
.nc__nv { line-height: 0; min-height: 0; }
.nc__nv :is(svg, .nv3d img) { width: auto; height: clamp(64px, 22cqh, 140px); animation: nf-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.nc__the { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: clamp(10px, 2.4cqh, 14px) 16px; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--tone), 0 5px 0 var(--tone); }
.nc__ico { width: 52px; height: 52px; border-radius: 50%; background: var(--tone); color: var(--tone-on, #fff); display: grid; place-items: center; }
.nc__ico .ico { stroke-width: 3; }
.nc__k { margin: 0; font-size: 14px; font-weight: 700; color: var(--tone-i); }
.nc__t { margin: 2px 0 0; font-size: clamp(19px, 4.4cqh, 24px); line-height: 1.2; font-weight: 700; }
.nc__ds { grid-column: 1 / -1; display: flex; flex-direction: column; gap: clamp(3px, 1cqh, 6px); margin: 0; padding: 0; list-style: none; font-size: clamp(14px, 3cqh, 15px); font-weight: 600; color: var(--navy-70); }
.nc__ds li { display: flex; align-items: flex-start; gap: 8px; }
.nc__ds .ico { flex: none; color: var(--tone-i); margin-top: 1px; }
.nc__foot { display: flex; flex-direction: column; gap: 2px; padding-bottom: calc(var(--safe-b) + 6px); }
.nc-sau { color: var(--navy-70); }
html.po-giam .nc__nv :is(svg, .nv3d img) { animation: none; }

/* ---------- màn tạm ---------- */
.gm-soon { align-items: center; text-align: center; padding-top: 32px; }
.gm-soon .gm-ask__q { margin: 0; background: none; box-shadow: none; }
.gm-soon .gm-ask__q::before { display: none; }
.gm-soon__sub { margin: 0; color: var(--muted); font-weight: 600; }

/* ---------- thanh phản hồi ---------- */
.gm-sheet { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; margin-inline: auto; max-width: var(--app-w);
  padding: 18px 16px calc(var(--safe-b) + 16px); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; gap: 8px; transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 599px) { .gm-sheet { max-width: none; } }
.gm-sheet.is-in { transform: none; }
.gm.co-sheet .gm__main { padding-bottom: calc(var(--sheet-h, 200px) + 12px); }
.gm-sheet.is-right { background: var(--ok-l); color: var(--ok-i); }
.gm-sheet.is-wrong { background: var(--bad-l); color: var(--bad-i); }
.gm-sheet.is-wrong .gm-btn { --b: var(--bad); --bd: var(--bad-d); }
.gm-sheet__head { display: flex; align-items: center; gap: 12px; }
.gm-sheet__ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 700; font-size: 20px; }
.gm-sheet__title { flex: 1; margin: 0; font-size: 23px; font-weight: 700; }
.gm-sheet__not { flex: none; padding: 4px 12px; border-radius: 999px; background: #FFF4CF; color: #7A5600; font-weight: 700; animation: gm-up .5s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes gm-up { from { opacity: 0; transform: translateY(12px) scale(.6); } to { opacity: 1; transform: none; } }
.gm-sheet__combo { margin: 0; font-weight: 700; color: #E57A0E; }
.gm-sheet__ans, .gm-sheet__note { margin: 0; font-size: 16px; font-weight: 600; }
.gm-sheet .gm-btn { margin-top: 8px; }

/* ---------- Tràng pháo tay ---------- */
.gm-end { overflow: clip; }
.gm-end__main { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--safe-t) + 40px) 20px 24px; }
.gm-end__cast { display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 140px; }
.gm-end__ch { line-height: 0; transform-origin: 50% 100%; animation: nf-pop .5s calc(var(--i) * .12s) cubic-bezier(.3, 1.4, .5, 1) both, gm-bow 1.1s calc(.7s + var(--i) * .12s) ease-in-out 2; }
@keyframes gm-bow { 40% { transform: rotate(0) translateY(0); } 55% { transform: perspective(200px) rotateX(28deg) translateY(6px); } 80% { transform: none; } }
.gm-end__title { margin: 16px 0 4px; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--navy); }
.gm-end__title:focus { outline: none; }
.gm-end__sub { margin: 0 0 24px; color: var(--muted); font-weight: 600; font-size: 17px; }
.gm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; perspective: 600px; }
.gm-stat { border-radius: 18px; background: var(--tone); padding: 3px; box-shadow: 0 5px 0 var(--tone-d);
  animation: gm-flip .55s calc(1s + var(--i) * .35s) cubic-bezier(.3, 1.3, .5, 1) both; transform-origin: 50% 50%; }
.gm-stat__in { display: flex; flex-direction: column; gap: 6px; padding: 10px 6px 12px; border-radius: 15px; background: #fff; }
.gm-stat__k { font-size: 14px; font-weight: 700; color: var(--tone-i); }
.gm-stat__v { font-size: 24px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
@keyframes gm-flip { from { transform: rotateY(90deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* ---------- bàn phím ảo (game/ban-phim.js) ---------- */
/* Luôn hiện TRỌN phạm vi màn cần, phím chia đều bề ngang (--ww do ban-phim.js đo, game/phim.js boTriBanPhim) – không cuộn,
 * không mũi tên. Phím trắng < 28 px → .is-2hang: hai hàng (hàng cao ở trên, hàng trầm ở dưới), mỗi hàng nửa chiều cao.
 * Trạng thái: .is-down (đang bấm – chạm hoặc đàn MIDI): đổ đầy màu bạn nốt + quầng sáng; .is-ke (gợi ý nốt kế tiếp / mẫu đang vang):
 * tô nhạt + chấm màu – khác hẳn phím đang bấm; .is-nhay-dung / .is-nhay-sai: chớp xanh / đỏ sau mỗi lần chấm. */
.gm-bp { --ww: 40px; --chu: 12px; --k-ink: #1B1236; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; min-width: 0; overflow: hidden; touch-action: none; padding: 2px 0 6px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.gm-bp__keys { position: relative; display: flex; flex: none; width: calc(var(--n) * var(--ww)); height: 176px;
  border-radius: 4px 4px 12px 12px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .65); }
.gm-bp__k { -webkit-tap-highlight-color: transparent; padding: 0; font: inherit; cursor: pointer; touch-action: none; }
.gm-bp__k--w { position: relative; flex: none; width: var(--ww); height: 100%; border: 1.5px solid var(--k-ink); border-left-width: 0;
  border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #F3EFE6 0%, #FFFFFF 22%, #FFFFFF 100%); box-shadow: inset 0 -6px 0 #E6DFD0;
  transition: background-color .08s, box-shadow .08s, transform .08s; }
.gm-bp__k--w:first-child { border-left-width: 1.5px; border-radius: 0 0 10px 12px; }
.gm-bp__k--w:last-child { border-radius: 0 0 12px 10px; }
.gm-bp__k--b { position: absolute; z-index: 2; top: 0; left: calc(var(--i) * var(--ww) - var(--ww) * .31); width: calc(var(--ww) * .62); height: 60%;
  border: 1.5px solid var(--k-ink); border-top: 0; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #2B2246 0%, #3C3160 78%, #4A3E73 100%);
  box-shadow: inset 0 -5px 0 #16102C, 0 3px 4px rgba(0, 0, 0, .35); transition: background-color .08s, box-shadow .08s, transform .08s; }
/* tên nốt: viên nhãn màu bạn nốt ở chân phím, cỡ chữ co theo phím (--chu) */
.gm-bp__ten { position: absolute; left: 50%; bottom: max(8px, calc(var(--ww) * .16)); transform: translateX(-50%); max-width: calc(100% - 4px);
  padding: 1px 4px; border-radius: 999px; background: var(--tone-l); color: var(--tone-i); font-size: var(--chu); line-height: 1.3; font-weight: 800;
  white-space: nowrap; overflow: hidden; pointer-events: none; }
.gm-bp__k.is-giua .gm-bp__ten { box-shadow: 0 0 0 2px var(--tone); }
.gm-bp.is-chu-an .gm-bp__ten { display: none; }
/* chấm gợi ý (ẩn khi không gợi ý) */
.gm-bp__cham { position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--tone);
  box-shadow: 0 0 0 2px #fff; opacity: 0; pointer-events: none; }
.gm-bp__k--w .gm-bp__cham { top: 30%; }
.gm-bp__k--b .gm-bp__cham { bottom: 9px; }
/* phím được phép / gợi ý cố định */
.gm-bp__k.is-sang.gm-bp__k--w { background: linear-gradient(180deg, var(--tone-l) 0%, #fff 100%); box-shadow: inset 0 -7px 0 var(--tone); }
.gm-bp__k.is-sang.gm-bp__k--b { background: var(--tone-d); }
/* gợi ý nốt kế tiếp / mẫu đang vang: tô nhạt + chấm – KHÔNG đổ đầy như phím đang bấm */
.gm-bp__k.is-ke .gm-bp__cham { opacity: 1; }
.gm-bp__k.is-ke.gm-bp__k--w { background: linear-gradient(180deg, #fff 50%, var(--tone-l) 100%); box-shadow: inset 0 0 0 2px var(--tone), inset 0 -6px 0 var(--tone); }
.gm-bp__k.is-ke.gm-bp__k--b { box-shadow: inset 0 0 0 3px var(--tone), inset 0 -5px 0 #16102C; }
/* đáp án (màn chọn phím) */
.gm-bp__k.is-chon.gm-bp__k--w { background: #E7E0FF; box-shadow: inset 0 0 0 3px #6242D6, inset 0 -7px 0 #6242D6; }
.gm-bp__k.is-chon.gm-bp__k--b { background: #6242D6; box-shadow: inset 0 -5px 0 #4528A8; }
.gm-bp__k.is-dung.gm-bp__k--w { background: var(--ok-l, #DBF6E5); box-shadow: inset 0 0 0 3px var(--ok, #36C26B), inset 0 -7px 0 var(--ok, #36C26B); }
.gm-bp__k.is-dung.gm-bp__k--b { background: var(--ok-d, #20A052); }
.gm-bp__k.is-sai.gm-bp__k--w { background: var(--bad-l, #FFEBD4); box-shadow: inset 0 0 0 3px var(--bad, #FF9A2E), inset 0 -7px 0 var(--bad, #FF9A2E); }
.gm-bp__k.is-sai.gm-bp__k--b { background: var(--bad-d, #E57A0E); }
.gm-bp__k.is-thieu.gm-bp__k--w { background: repeating-linear-gradient(135deg, #fff 0 8px, var(--ok-l, #DBF6E5) 8px 16px); box-shadow: inset 0 0 0 3px var(--ok, #36C26B); }
.gm-bp__k.is-thieu.gm-bp__k--b { background: var(--ok-i, #17763C); outline: 3px dashed var(--ok, #36C26B); outline-offset: -3px; }
/* ĐANG BẤM (chạm / đàn MIDI): đổ đầy màu bạn nốt + quầng sáng, phím lún nhẹ */
.gm-bp__k.is-down { z-index: 3; }
.gm-bp__k.is-down.gm-bp__k--b { z-index: 4; }
.gm-bp__k.is-down.gm-bp__k--w { background: linear-gradient(180deg, var(--tone) 0%, var(--tone-l) 100%);
  box-shadow: inset 0 -3px 0 var(--tone-d), 0 0 18px 3px var(--tone); transform: translateY(2px); }
.gm-bp__k.is-down.gm-bp__k--b { background: linear-gradient(180deg, var(--tone-d) 0%, var(--tone) 100%);
  box-shadow: inset 0 -2px 0 var(--tone-d), 0 0 16px 3px var(--tone); transform: translateY(2px); }
.gm-bp__k.is-down .gm-bp__ten { background: #fff; }
/* chớp sau mỗi lần chấm: xanh đúng / đỏ sai (đè lên màu đang bấm) */
.gm-bp__k.is-nhay-dung { z-index: 4; box-shadow: inset 0 0 0 4px #36C26B, 0 0 20px 4px #36C26B !important; }
.gm-bp__k.is-nhay-sai { z-index: 4; box-shadow: inset 0 0 0 4px #FF4B4B, 0 0 20px 4px #FF4B4B !important; }
.gm-bp__k.is-nhay-sai.gm-bp__k--w { background: #FFE1E1; }
.gm-bp__k.is-nhay-dung.gm-bp__k--w:not(.is-down) { background: #DBF6E5; }
html.po-giam .gm-bp__k { transition: none; }
html.po-giam .gm-bp__k.is-down { transform: none; }
@media (prefers-reduced-motion: reduce) { .gm-bp__k { transition: none; } .gm-bp__k.is-down { transform: none; } }
.gm-bp__k:focus-visible { outline: 3px solid #6242D6; outline-offset: -5px; }
.gm-bp.is-locked .gm-bp__k { cursor: default; }
.gm-bp-dem { margin: -8px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; }
.gm-man--kb { flex: 1; gap: 16px; }
.gm-man--kb > .gm-bp { margin-block: auto; }

/* đọc nốt */
.gm-docnot__staff { padding: 8px 12px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 #EFE7D8; }
.gm-docnot__staff svg { max-width: 300px; }
.gm-names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gm-names .gm-card { min-height: 56px; padding: 8px 4px; font-size: 18px; }

/* gõ tiết tấu */
.gm-tt { gap: 14px; }
.gm-tt__mau { flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 #EFE7D8; }
.gm-tt__mau svg { max-width: 100%; max-height: 110px; }
.gm-tt .mark { transform-box: fill-box; transform-origin: center; animation: nf-pop .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.gm-tt__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gm-tt__go { min-height: 64px; border-radius: 20px; }
.gm-tt__msg { margin: 0; text-align: center; font-weight: 600; color: var(--muted); min-height: 1.4em; }
.gm-pad { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 22px; background: #E7E0FF; color: #4528A8; font: 700 20px/1.2 "Quicksand", system-ui, sans-serif;
  box-shadow: 0 6px 0 #C8BBF5; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.gm-pad:disabled { background: #EFEBE3; color: #A49D90; box-shadow: 0 6px 0 #DDD5C6; cursor: default; }
.gm-pad.is-on { background: #6242D6; color: #fff; box-shadow: 0 6px 0 #4528A8; }
.gm-pad.is-hit { animation: gm-hit .14s ease-out; }
@keyframes gm-hit { 40% { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 #4528A8; } }
/* gõ trúng (19/10): loé vàng + sóng tròn + hạt toé (span ngắn hạn do go-tiet-tau.js tạo) */
.gm-pad.is-trung { animation: gm-trung .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gm-trung { 0% { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 #4528A8, 0 0 0 0 rgba(255, 229, 138, .9); }
  60% { transform: scale(1.03); box-shadow: 0 6px 0 #4528A8; } 100% { transform: none; } }
.gm-pad { overflow: visible; }
.gm-pad__song { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 4px solid rgba(255, 243, 196, .95); pointer-events: none; animation: gm-song .5s ease-out forwards; }
@keyframes gm-song { from { transform: scale(.4); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
.gm-pad__hat { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; pointer-events: none;
  animation: gm-hat .55s cubic-bezier(.2, .8, .4, 1) forwards; }
@keyframes gm-hat { from { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(160deg); opacity: 0; } }
html.po-giam .gm-pad.is-trung { animation: none !important; }
/* gõ lệch: vùng gõ rung ngang nhẹ (chỉ transform) */
.gm-pad.is-lech { animation: gm-lech .2s ease-out; }
@keyframes gm-lech { 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
/* hàng đèn phách: số đếm lớn khi đếm vào + chấm có số cho mỗi phách (chỉ transform/opacity khi chạy) */
.gm-tt__den { display: flex; align-items: center; justify-content: center; min-height: 40px; }
/* số đếm lớn đứng ngay trước hàng chấm (định vị tuyệt đối – hàng chấm luôn căn giữa, không xô lệch khi số hiện/ẩn) */
.gm-tt__dem-so { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  font: 700 40px/1 "Quicksand", system-ui, sans-serif; color: #FFE58A; }
.gm-tt__chams { position: relative; display: flex; align-items: center; gap: 8px; }
.gm-tt__phach { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 13px/1 "Quicksand", system-ui, sans-serif;
  background: rgba(255, 255, 255, .1); color: var(--ink-3, #A49D90); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
  transition: transform .12s ease-out, opacity .12s; }
.gm-tt__den.is-dem .gm-tt__phach:not(.is-dem) { opacity: .45; }
.gm-tt__phach.is-dem { transform: scale(1.35); background: #FFE58A; color: #0F004E; box-shadow: 0 0 0 3px rgba(255, 229, 138, .3); }
.gm-tt__phach.is-nhip { transform: scale(1.18); background: #8C74FF; color: #fff; box-shadow: none; }

/* điền ô nhịp */
.gm-dien__o { padding: 8px 10px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 #EFE7D8; }
.gm-dien__o svg { max-width: 360px; }
.gm-dien__o .is-bo { cursor: pointer; }
.gm-dien__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gm-dien__dem { margin: 0; font-weight: 700; }
.gm-dien__xoa { min-height: 44px; min-width: 64px; padding: 0 14px; border: 2px solid #E6DFD2; border-radius: 14px; background: #fff;
  color: var(--navy); font: 700 16px/1 "Quicksand", system-ui, sans-serif; cursor: pointer; }
.gm-dien__xoa:disabled { opacity: .45; cursor: default; }
.gm-dien__ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.gm-dien__ds:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gm-dien__nut { min-height: 112px; gap: 4px; }
.gm-dien__nut svg { width: 40px; height: 72px; }
.gm-dien__nut:disabled { opacity: .4; cursor: default; }
.gm-dien__ten { font-size: 15px; }

/* tìm lỗi */
.gm-tl__khuong { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 #EFE7D8; }
.gm-tl__dong { line-height: 0; }
.gm-tl__dong svg { display: block; max-width: 100%; height: auto; }
.gm-tl__khuong rect.o { cursor: pointer; transition: fill .15s; }
.gm-tl__khuong rect.o.is-on { fill: rgba(98, 66, 214, .16); stroke: #6242D6; stroke-width: 2; }
.gm-tl__khuong rect.o.is-right { fill: rgba(54, 194, 107, .18); stroke: #20A052; stroke-width: 2; }
.gm-tl__khuong rect.o.is-wrong { fill: rgba(255, 154, 46, .2); stroke: #E57A0E; stroke-width: 2; }
.gm-tl__nuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; }
.gm-tl__nut { min-height: 56px; --tone: #6242D6; --tone-l: #E7E0FF; --tone-i: #4528A8; }
.is-locked .gm-tl__nut { cursor: default; }


/* màn chờ dùng chung (game/cho.js) – thanh "ô kẹo" Say Piano: rãnh tím viền dày, 8 ô hồng/vàng/kem sáng dần rồi lặp,
 * biểu tượng O vương miện đè đầu phải thanh, xoay như đồng xu. Không quầng mờ: chiều sâu bằng viền + mép cứng dưới + dải sáng trên ô. */
.gm-cho { --o: 46px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gm-cho--nho { --o: 22px; gap: 8px; }
.gm-cho__thanh { position: relative; display: flex; align-items: center; margin-right: 40px; }
.gm-cho--nho .gm-cho__thanh { margin-right: 20px; }
.gm-cho__ranh { display: flex; gap: calc(var(--o) * .17); padding: calc(var(--o) * .2) calc(var(--o) * 1.8) calc(var(--o) * .2) calc(var(--o) * .22);
  border-radius: 999px; background: #1A0552; border: calc(var(--o) * .09) solid #2A0A7E; box-shadow: inset 0 0 0 calc(var(--o) * .065) #6A3AD6, 0 calc(var(--o) * .11) 0 #16043F; }
.gm-cho__o { position: relative; flex: none; width: var(--o); height: var(--o); border-radius: calc(var(--o) * .3); background: #4A2A8A;
  box-shadow: inset 0 calc(var(--o) * -.09) 0 rgba(0, 0, 0, .22); animation: gm-cho-o 3.2s linear infinite; animation-delay: calc(var(--n) * .32s); }
.gm-cho__o::after { content: ""; position: absolute; left: 15%; right: 15%; top: 12%; height: 20%; border-radius: 99px; background: #fff; opacity: 0;
  animation: gm-cho-bong 3.2s linear infinite; animation-delay: inherit; }
.gm-cho__o--hong { --mat: linear-gradient(180deg, #FF9FD0, #FF5FAE 60%, #E93C92); --mep: #B8226E; }
.gm-cho__o--vang { --mat: linear-gradient(180deg, #FFF07A, #FFCB2A 60%, #FFA313); --mep: #D07A00; }
.gm-cho__o--kem  { --mat: linear-gradient(180deg, #FFFBF6, #FFE9E3 60%, #F7CDD3); --mep: #D89AA8; }
@keyframes gm-cho-o {
  0% { background: #4A2A8A; box-shadow: inset 0 calc(var(--o) * -.09) 0 rgba(0, 0, 0, .22); transform: scale(1); }
  2% { background: var(--mat); box-shadow: inset 0 calc(var(--o) * -.11) 0 var(--mep); transform: scale(1.08); } 6% { transform: scale(1); }
  88% { background: var(--mat); box-shadow: inset 0 calc(var(--o) * -.11) 0 var(--mep); }
  90%, 100% { background: #4A2A8A; box-shadow: inset 0 calc(var(--o) * -.09) 0 rgba(0, 0, 0, .22); } }
@keyframes gm-cho-bong { 0% { opacity: 0; } 2%, 88% { opacity: .55; } 90%, 100% { opacity: 0; } }
.gm-cho__bt { display: block; width: calc(var(--o) * 2.85); height: calc(var(--o) * 3.4); perspective: 400px; flex: none; line-height: 0; }
.gm-cho__thanh .gm-cho__bt { position: absolute; right: calc(var(--o) * -.87); top: 50%; margin-top: calc(var(--o) * -1.95); }
.gm-cho__bt img { width: 100%; height: 100%; object-fit: contain; animation: gm-cho-xu 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes gm-cho-xu { 0%, 55% { transform: rotateY(0) translateY(0); } 70% { transform: rotateY(180deg) translateY(-6%); } 85%, 100% { transform: rotateY(360deg) translateY(0); } }
.gm-cho--gon { --o: 16px; }
.gm-cho__chu { margin: 0; font-weight: 700; color: var(--ink-2, #DCD2FF); }

/* ---------- hiệu ứng (game/hieu-ung.js): pháo giấy canvas, ♪ bay, bùng nổ mốc nhịp, thanh tiến độ loé ---------- */
.gm-bay svg { display: block; }
.gm-phao { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; }
.gm-bay { position: fixed; z-index: 41; pointer-events: none; font: 700 30px/1 "Quicksand", system-ui, sans-serif; color: #E8A70C;
  text-shadow: 0 2px 0 #fff; will-change: transform, opacity; }
.gm-notes, .gm-combo { transform-origin: 50% 50%; }
.gm-progress { position: relative; transform-origin: 50% 50%; }
.gm-progress__bar { position: relative; overflow: hidden; }
.gm-progress__sang { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%); }
.gm-no { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding-bottom: 26vh; }
.gm-no__dau { position: relative; display: grid; place-items: center; width: 200px; height: 130px; }
.gm-no__vong { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%;
  border: 10px solid #FFC93C; box-shadow: 0 0 0 6px rgba(255, 154, 46, .35); opacity: 0; }
.gm-no__so { position: relative; font: 700 84px/1 "Quicksand", system-ui, sans-serif; color: #FF9A2E;
  text-shadow: 0 3px 0 #fff, 0 7px 0 #E57A0E; opacity: 0; }
.gm-no__hang { display: flex; align-items: flex-end; gap: 6px; }
.gm-no__ch { line-height: 0; opacity: 0; }

/* ---------- giảm chuyển động ----------
 * Lớp html.po-giam do game/cai-dat.js đặt: theo "giảm chuyển động" của máy, hoặc theo Tài khoản › Cài đặt khi học viên tự chọn
 * (tắt trong Cài đặt thì chuyển động của bài game chạy lại dù máy đang giảm chuyển động). */
html.po-giam .gm-cho__o, html.po-giam .gm-cho__o::after, html.po-giam .gm-cho__bt img { animation: none; }
html.po-giam .gm-cho__o:nth-child(-n+4) { background: var(--mat); box-shadow: inset 0 calc(var(--o) * -.11) 0 var(--mep); }
html.po-giam .gm-cho__o:nth-child(-n+4)::after { opacity: .55; }
html.po-giam .gm-screen, html.po-giam .gm-meet__ch, html.po-giam .gm-meet__ch :is(svg, .nv3d img), html.po-giam .gm-end__ch, html.po-giam .gm-stat,
html.po-giam .gm-sheet__not, html.po-giam .gm-play.is-playing .gm-play__ico, html.po-giam .gm-pair__card.is-miss,
html.po-giam .gm-pad.is-hit, html.po-giam .gm-pad.is-lech, html.po-giam .gm-tt .mark { animation: none !important; }
html.po-giam .gm-tt__phach { transition: none; }
html.po-giam .gm-tl__khuong rect.o, html.po-giam .gm-dt__con circle, html.po-giam .gm-dt__bar, html.po-giam .gm-dt__khuong { transition: none; }
html.po-giam .gm-sheet, html.po-giam .gm-progress__bar, html.po-giam .gm-combo, html.po-giam .gm-btn, html.po-giam .gm-card { transition: none; }
html.po-giam .gm-btn:active:not(:disabled), html.po-giam .gm-card:active:not(:disabled) { transform: none; }

/* ---------- MỘT MÀN HÌNH: mọi màn bài game nằm gọn trong khung, không cuộn (khổ thử 360×640 … 412×915) ----------
 * .gm cao đúng bằng màn; thanh trên + chân (nút "Kiểm tra" / thanh phản hồi) cố định; .gm__main co giãn (flex 1, min-height 0) và là
 * khung đo (container "gm", kiểu size) – hình, khuông, bàn phím, nhân vật, thẻ và cỡ chữ co theo chiều cao còn lại bằng đơn vị cqh
 * (dòng px đứng trước là dự phòng cho WebView cũ không hiểu cqh). Khi thiếu chỗ: lựa chọn chữ (≥ 4) xếp lưới 2 cột.
 * Kiểm tra tự động: tools/kiem-tra-mot-man-hinh.mjs. */
/* Khoá chiều cao CHỈ khi WebView hiểu container query (Chrome 105+): WebView cũ giữ bố cục cũ – trang dài ra, cuộn được,
 * thanh trên/chân dính (sticky) vẫn đúng chỗ – thay vì nội dung tràn đè lên nút "Kiểm tra". */
.gm-top, .gm-foot { flex: none; }
.gm__main { padding: 4px 16px 10px; }
.gm.tu-cham .gm-foot { display: none; }                 /* màn tự chấm (đàn thật): không có nút "Kiểm tra" – nhường chỗ cho màn */
@supports (container-type: size) {
  .gm { height: 100vh; height: 100dvh; min-height: 0; }
  .gm__main { flex: 1 1 0; min-height: 0; container: gm / size; }
  .gm-screen { min-height: 0; }
  .gm-screen > .gm-man, .gm-screen > .gm-meet { flex: 1 1 auto; min-height: 0; }
  .gm.co-sheet .gm__main { padding-bottom: calc(var(--sheet-h, 200px) - var(--foot-h, 0px) + 8px); }
}
@media (max-height: 760px) {
  .gm-top { padding-top: calc(var(--safe-t) + 6px); padding-bottom: 2px; }
  .gm-foot { padding-top: 8px; padding-bottom: calc(var(--safe-b) + 10px); }
  .gm-foot .gm-btn, .gm-sheet .gm-btn { min-height: 50px; }
  .gm-sheet { padding-top: 14px; padding-bottom: calc(var(--safe-b) + 10px); gap: 4px; }
  .gm-sheet__title { font-size: 20px; }
  .gm-sheet__ans, .gm-sheet__note { font-size: 15px; }
}
.gm-man { gap: 12px; gap: clamp(8px, 2.4cqh, 20px); }

/* câu hỏi */
.gm-ask { margin-top: 0; }
.gm-ask__ch :is(svg, .nv3d img) { width: auto; height: 56px; height: clamp(40px, 11cqh, 64px); }
.gm-ask__q { font-size: 19px; font-size: clamp(16px, 4cqh, 21px); padding: 10px 14px; padding: clamp(7px, 1.8cqh, 12px) 14px;
  margin-bottom: 12px; margin-bottom: clamp(6px, 3cqh, 18px); }

/* thẻ lựa chọn */
.gm-card { min-height: 56px; min-height: clamp(44px, 9.5cqh, 64px); padding: 8px 12px; padding: clamp(5px, 1.6cqh, 12px) 12px;
  font-size: clamp(16px, 3.6cqh, 18px); gap: clamp(4px, 1cqh, 8px); }
.gm-opts { gap: 10px; gap: clamp(8px, 1.8cqh, 12px); }
.gm-opts--grid .gm-card { min-height: 0; }
.gm-hinh img { max-height: 200px; max-height: clamp(60px, 30cqh, 200px); }
.gm-opts--grid .gm-hinh img, .gm-opts--grid .gm-hinh svg { max-height: 140px; max-height: clamp(56px, 24cqh, 160px); }
.gm-opts--grid:has(> :nth-child(3)) .gm-hinh img, .gm-opts--grid:has(> :nth-child(3)) .gm-hinh svg { max-height: clamp(44px, 12cqh, 120px); }
.gm-hinh--kb svg { max-height: clamp(56px, 16cqh, 110px); }
.gm-hinh--staff svg, .gm-hinh--rhythm svg { max-height: clamp(56px, 20cqh, 140px); }
@container gm (max-height: 480px) {
  .gm-opts:not(.gm-opts--grid):has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gm-play { min-height: 56px; min-height: clamp(48px, 10cqh, 64px); }
.gm-play--sm { min-height: 48px; }

/* gặp bạn mới */
.gm-meet { gap: 12px; gap: clamp(8px, 2cqh, 16px); padding-top: 4px; }
.gm-meet__say { padding: clamp(10px, 2.2cqh, 16px) 14px clamp(10px, 2.2cqh, 16px) 16px; }
.gm-meet__bubble { font-size: 19px; font-size: clamp(16px, 3.9cqh, 21px); line-height: 1.4; }
.gm-meet__ch { flex: 0 1 auto; min-height: 0; }
.gm-meet__ch :is(svg, .nv3d img) { width: auto; height: 120px; height: clamp(60px, 26cqh, 150px); }
.gm-meet:has(> .gm-hinh) .gm-meet__ch :is(svg, .nv3d img) { height: 80px; height: clamp(44px, 14cqh, 120px); }
.gm-meet .gm-hinh { flex: 0 1 auto; min-height: 0; padding: clamp(6px, 1.5cqh, 12px); }
.gm-meet .gm-hinh img, .gm-meet .gm-hinh svg { max-height: 150px; max-height: clamp(64px, 28cqh, 200px); width: auto; max-width: 100%; }

/* cao – thấp */
.gm-hl__btn { min-height: 90px; min-height: clamp(62px, 16cqh, 110px); }
.gm-hl__ico { font-size: clamp(24px, 6cqh, 34px); }

/* ghép cặp: hàng chia đều phần còn lại dưới câu hỏi */
.gm-pair { gap: 10px; gap: clamp(8px, 1.8cqh, 12px);
  grid-template-rows: repeat(var(--hang, 3), clamp(46px, calc((100cqh - 112px) / var(--hang, 3) - 12px), 96px)); }
.gm-pair__card { padding-block: 4px; overflow: hidden; }
.gm-pair__card svg, .gm-pair__card img { width: auto; max-width: 100%; height: auto;
  max-height: clamp(30px, calc((100cqh - 112px) / var(--hang, 3) - 32px), 72px); }

/* xếp thứ tự */
.gm-order { gap: 14px; gap: clamp(8px, 2.6cqh, 22px); }
.gm-order__slots, .gm-order__pool { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; }
.gm-order__slots { padding: clamp(8px, 1.8cqh, 12px); }
.gm-order__slot, .gm-order__card { min-height: 64px; min-height: clamp(48px, 12cqh, 96px); }
.gm-order__card { padding: 4px; }
.gm-order__card svg, .gm-order__card img { max-height: clamp(36px, 10cqh, 80px); width: auto; max-width: 100%; }

/* bàn phím ảo: cao theo chỗ còn lại (bề ngang: trọn phạm vi, chia đều – ban-phim.js; không cuộn) */
.gm-bp__keys { height: 150px; height: clamp(108px, 34cqh, 176px); }
.gm-man--kb:has(.gm-docnot__staff) .gm-bp__keys { height: clamp(100px, 27cqh, 160px); }

/* đọc nốt */
.gm-docnot__staff { padding: clamp(4px, 1cqh, 8px) 12px; }
.gm-docnot__staff svg { max-height: 120px; max-height: clamp(60px, 22cqh, 160px); }
.gm-man--kb:has(.gm-docnot__staff) .gm-docnot__staff svg { max-height: clamp(52px, 17cqh, 130px); }
.gm-names { gap: clamp(6px, 1.4cqh, 8px); }
.gm-names .gm-card { min-height: 48px; min-height: clamp(42px, 9cqh, 56px); }

/* gõ tiết tấu */
.gm-tt { gap: clamp(6px, 1.8cqh, 14px); }
.gm-tt__mau svg { max-height: 80px; max-height: clamp(44px, 16cqh, 110px); }
.gm-tt__mau:has(> svg:nth-child(2)) svg { max-height: clamp(36px, 12cqh, 96px); }   /* mẫu nhiều ô nhịp: mỗi ô một dòng */
.gm-tt__mau:has(> svg:nth-child(3)) svg { max-height: clamp(30px, 8.5cqh, 80px); }
.gm-tt__mau:has(> svg:nth-child(4)) svg { max-height: clamp(26px, 6.5cqh, 64px); }
@container gm (max-height: 520px) { .gm-tt { gap: 6px; } .gm-tt__mau { padding-block: 4px; } }
.gm-tt__go { min-height: 52px; min-height: clamp(46px, 9cqh, 64px); }
.gm-pad { flex: none; min-height: 100px; }   /* dự phòng khi không có đơn vị cq (bai-ngang.css đặt cỡ theo khung) */
.gm-tt__msg, .gm-dt__msg { flex: none; }

/* điền ô nhịp */
.gm-dien__o svg { max-height: 110px; max-height: clamp(52px, 18cqh, 140px); }
.gm-dien__ds { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.gm-dien__nut { min-height: 90px; min-height: clamp(60px, 15cqh, 112px); }
.gm-dien__nut svg { width: 40px; height: 60px; height: clamp(34px, 9cqh, 72px); }

/* tìm lỗi */
.gm-tl__dong svg { width: auto; max-width: 100%; margin-inline: auto; max-height: 100px; max-height: clamp(44px, 15cqh, 120px); }
.gm-tl__nut { min-height: 48px; min-height: clamp(42px, 9cqh, 56px); }


/* màn kết bài (không có khung đo – co theo chiều cao màn) */
.gm-end__main { min-height: 0; justify-content: center; padding: calc(var(--safe-t) + 16px) 20px 12px; }
.gm-end__cast { min-height: 0; }
.gm-end__ch :is(svg, .nv3d img) { width: auto; height: clamp(54px, 13vh, 100px); }
.gm-end__ch + .gm-end__ch :is(svg, .nv3d img) { height: clamp(42px, 9.5vh, 72px); }
.gm-end__title { margin-top: clamp(8px, 2vh, 16px); font-size: clamp(25px, 4.6vh, 32px); }
.gm-end__sub { margin-bottom: clamp(12px, 3vh, 24px); }

/* ---------- Con đường học (student/screens/con-duong.js) ----------
 * Toạ độ nút do game/duong-hoc.js tính trong khung 400px (giữa = 200); .cd-o đặt tâm nút tại (50% + lệch, y).
 * Hiệu ứng chỉ transform/opacity; html.po-giam → tắt (cuối khối). */
.cd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.scr--cd .scr__top { gap: 8px; padding-top: calc(var(--safe-t) + 10px); padding-bottom: 8px; box-shadow: 0 2px 0 #EFE7D8; }
.scr--cd .scr__scroll { padding-top: 4px; padding-bottom: 48px; }
.scr--cd .scr__body { gap: 0; }
.cd-hs { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  color: var(--navy); font: 700 16px/1.2 "Quicksand", system-ui, sans-serif; text-align: left; cursor: pointer; }
.cd-hs .avatar { width: 36px; height: 36px; }
.cd-hs__ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-tren { display: flex; gap: 8px; }
.cd-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 2px #EFE7D8; font-weight: 700; font-size: 17px; color: var(--navy); }
.cd-chip--lua .ico { color: #B8AFA0; }
.cd-chip--lua.is-on .ico { color: #E8590C; fill: #FFC93C; }
.cd-chip--lua.is-on b { color: #A34800; }
.cd-chip--not b { color: #7A5600; }
.cd-chip__not { line-height: 0; color: #E8A70C; }
.cd-ghichu { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: 16px; background: var(--tint);
  color: var(--navy-70); font-size: 15px; font-weight: 600; }

/* biển tên vùng – dính dưới thanh trên khi cuộn trong vùng */
.cd-vung { position: relative; margin-top: 16px; }
.cd-bang { position: sticky; top: calc(var(--cd-top, 62px) + 8px); z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 20px; background: var(--tone-l); color: var(--tone-i);
  box-shadow: inset 0 0 0 2px var(--tone), 0 4px 0 var(--tone); }
.cd-bang__ch { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.cd-bang__ch svg { margin-top: 10px; }
.cd-bang__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-bang__k { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.cd-bang__t { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--navy); }
.cd-bang__n { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 15px; }
.cd-trong { margin: 16px 4px 8px; color: var(--navy-70); font-weight: 600; }

/* nhảy cóc: nút "Nhảy tới đây?" dưới biển tên của vùng chưa mở */
.cd-nhay { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 14px 0 4px;
  padding: 10px 14px; border: 2px dashed var(--tone); border-radius: 18px; background: #fff; color: var(--navy);
  font: 700 17px/1.2 "Quicksand", system-ui, sans-serif; text-align: left; cursor: pointer; box-shadow: 0 4px 0 var(--tone-l); }
.cd-nhay:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tone-l); }
.cd-nhay:focus-visible { box-shadow: 0 4px 0 var(--tone-l), 0 0 0 4px rgba(98, 66, 214, .45); }
.cd-nhay__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tone); color: var(--tone-on, #fff); display: grid; place-items: center; }
.cd-nhay__ico .ico { stroke-width: 3; }
.cd-nhay__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-nhay__t small { font-size: 14px; font-weight: 600; color: var(--navy-70); }
.cd-the__nhay { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--tone-l);
  color: var(--tone-i); font-weight: 600; font-size: 15px; }
html.po-giam .cd-nhay:active { transform: none; }

/* đường + cảnh nền */
.cd-duong { position: relative; margin-inline: calc(-1 * var(--pad)); overflow: hidden; }
.cd-svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); overflow: visible; }
.cd-doan { fill: none; stroke: #E3DACB; stroke-width: 9; stroke-linecap: round; stroke-dasharray: .1 19; }
.cd-doan.is-di { stroke: var(--tone); stroke-opacity: .6; }
/* cảnh vật: phần tô đặc, nhạt bằng opacity của cả nhóm (không chồng hình bán trong suốt) */
.cd-canh > g { opacity: .4; }
.cd-canh > .cd-canh__doi { opacity: .9; }
.cd-canh > .cd-canh__may { opacity: 1; }
.cd-canh .l { fill: var(--tone-l); }
.cd-canh .t { fill: var(--tone); }
.cd-canh .g { fill: #B08A5E; }
.cd-canh .s { fill: var(--tone-d); }
.cd-canh .w { fill: #fff; }
.cd-canh .v { fill: #FFC93C; }

/* nút cửa: .cd-o là ô 112×112 có tâm tại vị trí nút */
.cd-o { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; display: grid; place-items: center; }
.cd-nut { --b: var(--tone); --bd: var(--tone-d); position: relative; z-index: 1; width: 72px; height: 68px; margin-top: -8px; padding: 0;
  border: 0; border-radius: 50%; background: var(--b); color: var(--tone-on, #fff); box-shadow: 0 7px 0 var(--bd); display: grid; place-items: center;
  cursor: pointer; transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent; }
.cd-nut::after { content: ""; position: absolute; top: 9px; left: 15px; width: 22px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .38); transform: rotate(-24deg); }
.cd-nut:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--bd); }
.cd-nut:focus-visible { box-shadow: 0 7px 0 var(--bd), 0 0 0 4px rgba(98, 66, 214, .45); }
.cd-nut .ico { stroke-width: 2.6; }
.cd-nut.is-qua { --b: #FFC93C; --bd: #E8A70C; color: #7A5600; }
.cd-nut.is-khoa { --b: #E7E1D6; --bd: #D3CBBC; color: #6F6757; }   /* biểu tượng khoá ≥ 3:1 trên nền xám */
.cd-nut.is-khoa::after { display: none; }
.cd-nut.is-dang-hoc { width: 80px; height: 76px; }
.cd-nut__so { font-size: 26px; text-shadow: 0 2px 0 var(--bd); }
.cd-vong { position: absolute; left: 0; top: -4px; pointer-events: none; }
.cd-vong__n, .cd-vong__p { fill: none; stroke-width: 8; }
.cd-vong__n { stroke: #EFE7D8; }
.cd-vong__p { stroke: var(--tone); stroke-linecap: round; }
.cd-bong { position: absolute; z-index: 2; top: -32px; left: 50%; padding: 8px 14px; border-radius: 14px; background: #fff; color: var(--tone-i);
  font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap; box-shadow: inset 0 0 0 2px #EFE7D8, 0 4px 0 #EFE7D8;
  transform: translateX(-50%); animation: cd-bong 1.8s ease-in-out infinite; pointer-events: none; }
.cd-bong::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: #fff;
  box-shadow: 2px 2px 0 #EFE7D8; transform: rotate(45deg); }
@keyframes cd-bong { 50% { transform: translate(-50%, -6px); } }
.cd-nv { position: absolute; top: 14px; pointer-events: none; line-height: 0; }
.cd-nv.is-trai { right: 100%; margin-right: -18px; }
.cd-nv.is-phai { left: 100%; margin-left: -18px; }
.cd-nv svg { display: block; animation: cd-nhay 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes cd-nhay { 0%, 100% { transform: none; } 40% { transform: translateY(-9px) scaleY(1.03); } 60% { transform: translateY(0) scaleY(.96); } }
/* sao dưới nút cửa: hẳn bên dưới bóng nút, trên nền kem riêng – không đè lên nút hay các chấm đường đi */
.cd-sao { position: absolute; z-index: 2; bottom: -14px; left: 50%; display: flex; align-items: flex-start; gap: 0; padding: 1px 6px 3px; border-radius: 999px;
  background: var(--bg); transform: translateX(-50%); pointer-events: none; }
.cd-sao__i { display: block; }
.cd-sao__i:nth-child(2) { margin-top: 5px; }
.cd-sao__i path { fill: #fff; stroke: #8E8169; stroke-width: 1.6; stroke-linejoin: round; }   /* sao chưa có: viền ≥ 3:1 trên nền kem */
.cd-sao__i.is-co path { fill: #FFC93C; stroke: #E8A70C; }
.cd-sao__i.is-moi { opacity: 0; }
.cd-them { position: absolute; z-index: 3; bottom: -10px; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: #36C26B; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; pointer-events: none; animation: cd-them 2.2s ease-out both; }
@keyframes cd-them { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -18px); } 100% { opacity: 0; transform: translate(-50%, -26px); } }

/* Hộp nhạc */
.cd-hop { padding: 4px; border: 0; border-radius: 24px; background: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cd-hop:focus-visible { box-shadow: var(--focus); }
.cd-hop__than { fill: var(--tone); }
.cd-hop__dai, .cd-hop__nap path { fill: var(--tone-d); }
.cd-hop__vien, .cd-hop__khoa { fill: #FFC93C; }
.cd-hop__khoa2 { stroke: var(--tone-d); stroke-width: 3; stroke-linecap: round; }
.cd-hop__not { fill: var(--tone-i); opacity: 0; }
.cd-hop__svg { overflow: visible; }
.cd-hop__nap { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.cd-hop.is-khoa svg { filter: grayscale(1) brightness(1.12); }
.cd-hop.is-cho svg { animation: cd-lac 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes cd-lac { 0%, 68%, 100% { transform: none; } 74% { transform: rotate(-8deg); } 82% { transform: rotate(7deg); } 90% { transform: rotate(-3deg); } }
.cd-hop.is-mo .cd-hop__nap { transform: rotate(-26deg); }
.cd-hop.is-mo .cd-hop__not { opacity: 1; }
.cd-hopmo { width: min(100% - 32px, 360px); padding: 24px; border: 0; border-radius: 28px; background: var(--cream); color: var(--navy); text-align: center;
  box-shadow: 0 30px 80px -30px rgba(15, 3, 78, .6); }
.cd-hopmo::backdrop { background: rgba(15, 3, 78, .5); }
.cd-hopmo__hop { display: flex; justify-content: center; margin-top: 28px; }
.cd-hopmo__hop.is-mo .cd-hop__nap { transform: rotate(-24deg); transition-delay: .25s; }
.cd-hopmo__hop .cd-hop__not { opacity: 1; }
.cd-hopmo__hop .cd-hop__not path { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cd-hopmo__hop.is-mo .cd-hop__not path { animation: cd-not-bay 1.8s ease-out .55s both; }
.cd-hopmo__hop.is-mo .cd-hop__not g:nth-child(2) path { animation-delay: .8s; }
@keyframes cd-not-bay { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 30% { opacity: 1; transform: translateY(-14px) scale(1.2); }
  100% { opacity: 1; transform: translateY(-26px) scale(1.1); } }
.cd-hopmo__t { margin: 8px 0 0; font-size: 24px; font-weight: 700; }
.cd-hopmo__p { margin: 6px 0 18px; color: var(--navy-70); font-weight: 600; }

/* thẻ Cửa: hộp thoại đáy màn */
.cd-the { position: fixed; inset: auto 0 0 0; width: min(100%, 440px); max-width: 100%; max-height: 88vh; max-height: 88dvh; margin: 0 auto; padding: 0;
  border: 0; border-radius: 28px 28px 0 0; background: var(--cream); color: var(--navy); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 -20px 60px -30px rgba(15, 3, 78, .6); animation: cd-len .28s cubic-bezier(.2, .8, .2, 1) both; }
.cd-the::backdrop { background: rgba(15, 3, 78, .42); }
@keyframes cd-len { from { transform: translateY(100%); } to { transform: none; } }
.cd-the__in { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px calc(var(--safe-b) + 20px); border-top: 8px solid var(--tone); }
.cd-the__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--navy-70);
  display: grid; place-items: center; cursor: pointer; }
.cd-the__x:active { background: var(--tint); }
.cd-the__dau { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.cd-the__nv { flex: none; line-height: 0; }
.cd-the__txt { flex: 1; min-width: 0; }
.cd-the__k { margin: 0; font-size: 14px; font-weight: 700; color: var(--tone-i); }
.cd-the__t { margin: 2px 0 4px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.cd-the__tien { margin: 0; color: var(--navy-70); font-weight: 600; font-size: 15px; }
.cd-the .cd-sao { position: static; transform: none; }
.cd-bais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cd-bai { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 2px #EFE7D8; color: var(--navy); font: 600 16px/1.3 "Quicksand", system-ui, sans-serif; text-align: left; }
button.cd-bai { cursor: pointer; }
button.cd-bai:active { transform: scale(.99); }
.cd-bai.is-ke { box-shadow: inset 0 0 0 2px var(--tone), 0 3px 0 var(--tone-l); }
.cd-bai__so { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tone-l); color: var(--tone-i); display: grid; place-items: center; font-weight: 700; }
.cd-bai.is-xong .cd-bai__so { background: #36C26B; color: #fff; }
.cd-bai--tt .cd-bai__so { background: #FFF4CF; color: #7A5600; }
.cd-bai--tt.is-xong .cd-bai__so { background: #FFC93C; color: #7A5600; }
.cd-bai__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-bai__phu { font-size: 14px; font-weight: 600; color: var(--navy-70); }
.cd-bai.is-khoa { background: #F6F2EA; }
.cd-bai.is-khoa .cd-bai__so { background: #E7E1D6; color: #6F6757; }
.cd-bai__end { flex: none; color: var(--navy-50); line-height: 0; }
.cd-bai.is-ke .cd-bai__end { color: var(--tone-i); }
.cd-the__goiy { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #FFF4CF; color: #7A5600; font-weight: 600; font-size: 15px; }
.cd-the__goiy-i { flex: none; line-height: 0; margin-top: 1px; }
.cd-the__goiy-i .ico { fill: #FFC93C; }
.cd-the__goiy-t { flex: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.cd-the__noi { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; color: #7A5600; font-size: 15px; font-weight: 700; padding: 0 4px; }
.cd-the__khoa { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--tint); color: var(--navy-70); font-weight: 600; }
.cd-the, .cd-hopmo { --ok: #36C26B; --ok-d: #20A052; }
.cd-the .gm-btn, .cd-hopmo .gm-btn { gap: 8px; }

/* dẫn dắt: câu hỏi cổng USB/Bluetooth khi chọn Piano điện */
.onb-midi { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.onb-midi .sec-head { margin: 0; }
.onb-midi__goiy { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; background: #DBF6E5; color: #17763C; font-weight: 600; font-size: 15px; }
.onb-midi__goiy .ico { flex: none; margin-top: 1px; }
.onb-midi[hidden], .onb-midi__goiy[hidden] { display: none; }

html.po-giam .cd-bong, html.po-giam .cd-nv svg, html.po-giam .cd-hop.is-cho svg, html.po-giam .cd-the, html.po-giam .cd-them,
html.po-giam .cd-hopmo__hop .cd-hop__not path { animation: none !important; }
html.po-giam .cd-hopmo__hop.is-mo .cd-hop__not path { opacity: 1; }
html.po-giam .cd-nut, html.po-giam .cd-hop__nap { transition: none; }
html.po-giam .cd-nut:active { transform: none; }

/* ======================================================================================================================
 * MÀN ĐÀN (ngày 3, chủ dự án 2026-10-17): khổ ngang – "premium, sang, thanh thoát". Thanh trên mảnh (nguồn đàn + điểm),
 * một dòng lời nhân vật, bản nhạc chiếm phần lớn, MỘT nút tròn lớn ▶/■ + "Nghe mẫu" nhỏ, bàn phím ảo trải hết bề ngang ở đáy
 * (ẩn khi có đàn MIDI). game/man/tu-dan.js. Toàn app khổ ngang (web dọc: lớp phủ "Xoay ngang" của app.html).
 * ==================================================================================================================== */
.gm-top__them { flex: none; display: flex; align-items: center; }
.gm-top__them:empty { display: none; }
.gm-dt__top { display: flex; align-items: center; gap: 10px; }
.gm-dt__src { position: relative; flex: none; width: 42px; height: 42px; border: 0; border-radius: 14px; background: #fff; color: #6242D6;
  box-shadow: 0 2px 10px rgba(15, 0, 78, .08); display: grid; place-items: center; cursor: pointer; }
.gm-dt__src.is-midi { color: #17763C; background: #E9F8EF; }
.gm-dt__den { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #CFC8DD;
  transition: background .12s, box-shadow .12s; }
.gm-dt__src.is-midi .gm-dt__den { background: #36C26B; }
.gm-dt__den.is-nhay { background: #FFC400 !important; box-shadow: 0 0 0 4px rgba(255, 196, 0, .35); }
.gm-dt__diem-o { display: flex; align-items: baseline; gap: 3px; min-width: 58px; justify-content: flex-end; color: #4528A8; }
.gm-dt__diem { font-size: 21px; font-weight: 700; }
.gm-dt__diem-o small { font-size: 12px; font-weight: 700; color: var(--muted); }

.gm-dt { gap: 10px; }
.gm-screen > .gm-dt { min-height: 0; }
/* lời nhân vật: một dòng cạnh nhân vật nhỏ – bấm để xem đủ lời / nghe */
.gm-dt__loi { flex: none; display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.gm-dt__loi-ch { flex: none; line-height: 0; }
.gm-dt__loi-ch svg { width: auto; height: 44px; }
.gm-dt__loi-bong { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 12px rgba(15, 0, 78, .06), inset 0 0 0 1.5px var(--tone-l, #EAE3FF); }
.gm-dt__loi-chu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; line-height: 1.3; }
.gm-dt__loi[aria-expanded="true"] .gm-dt__loi-chu { white-space: normal; }
.gm-dt__loi[aria-expanded="true"] .gm-dt__loi-bong { border-radius: 18px; }
.gm-dt__loi-loa { flex: none; display: grid; color: var(--tone, #6242D6); }
.gm-dt__loi-loa svg { width: 20px; height: 20px; }

/* sân khấu: bản nhạc (co giãn) + cột nút */
.gm-dt__san { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.gm-dt__khuong { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 10px 18px; border-radius: 26px; background: #fff; box-shadow: 0 8px 28px rgba(15, 0, 78, .07), 0 1px 0 #EFE7D8; transition: box-shadow .25s; }
.gm-dt__khuong.is-dan { box-shadow: 0 8px 28px rgba(98, 66, 214, .14), 0 0 0 2px #DCD3FF; }
.gm-dt__dongs { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.gm-dt__dong { flex: 1 1 0; min-height: 0; line-height: 0; display: flex; flex-direction: column; justify-content: center; }
.gm-dt__dong[hidden] { display: none; }
.gm-dt__dong svg { display: block; width: auto; height: 100%; max-width: var(--rong, 100%); max-height: 280px; margin-inline: auto; }
.gm-dt__dongs--phach .gm-dt__dong svg { height: auto; width: 100%; max-height: 100%; }
.gm-dt__dongs.is-trang { position: relative; }
.gm-dt__trang { position: absolute; top: -4px; right: 0; padding: 0 10px; border-radius: 999px; background: #F3ECDF; color: var(--muted);
  font-size: 12px; font-weight: 700; line-height: 20px; }
.gm-dt__trang:empty { display: none; }
.gm-dt__con circle { fill: transparent; transition: fill .15s; }
.gm-dt__con circle.is-qua { fill: rgba(98, 66, 214, .12); }
.gm-dt__con circle.is-on { fill: rgba(255, 196, 0, .55); stroke: #E5A800; stroke-width: 2; }
.gm-dt__hp-ke { stroke: #EFE7D8; stroke-width: 4; stroke-linecap: round; }
.gm-dt__hp-tay { font-size: 13px; font-weight: 700; fill: var(--muted); }
.gm-dt__hp-cham circle { fill: #fff; stroke: var(--c); stroke-width: 3; transition: fill .15s; }
.gm-dt__hp-cham text { font-size: 12px; font-weight: 800; fill: var(--ci); pointer-events: none; }
.gm-dt__hp-cham.is-qua circle { fill: var(--cl); }
.gm-dt__hp-cham.is-on circle { fill: var(--c); stroke: #E5A800; stroke-width: 4; }
.gm-dt__hp-cham.is-on text { fill: #fff; }

/* lớp phủ trên bản nhạc: số đếm vào, một dòng nhắc, vòng chờ, điểm, ô "Thử đàn" */
.gm-dt__dem { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: rgba(255, 255, 255, .74);
  font-size: 104px; font-weight: 700; line-height: 1; color: #6242D6; text-shadow: 0 6px 22px rgba(98, 66, 214, .25); pointer-events: none; }
.gm-dt__dem:empty { display: none; }
.gm-dt__msg { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); max-width: calc(100% - 24px); margin: 0; padding: 4px 14px;
  border-radius: 999px; background: #F3EEFF; color: #4528A8; font-size: 13px; font-weight: 700; line-height: 1.35; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gm-dt__msg:empty { display: none; }
.gm-dt__khuong > .gm-cho { position: absolute; right: 12px; top: 10px; }
.gm-dt__khuong > .gm-cho[hidden] { display: none; }
.gm-dt__khuong > .gm-cho { --o: 11px; }
.gm-dt__kq { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 20px; border-radius: 22px; background: var(--bad-l); box-shadow: 0 10px 28px rgba(15, 0, 78, .12); }
.gm-dt__kq[hidden] { display: none; }
.gm-dt__kq.is-dat { background: var(--ok-l); }
.gm-dt__kq-so { display: flex; align-items: baseline; gap: 4px; }
.gm-dt__kq-so small { font-weight: 700; color: var(--muted); }
.gm-dt__so { font-size: 46px; line-height: 1.2; color: var(--bad-i); }
.gm-dt__kq.is-dat .gm-dt__so { color: var(--ok-i); }
.gm-dt__kq-note { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.gm-dt__thu { position: absolute; inset: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 22px; background: rgba(255, 255, 255, .97); text-align: center; }
.gm-dt__thu[hidden] { display: none; }
.gm-dt__thu strong { font-size: 18px; }
.gm-dt__thu p { margin: 0; color: var(--muted); font-weight: 600; font-size: 14px; }
.gm-dt__thu-ten { font-size: 30px; line-height: 1.2; color: #6242D6; }
.gm-dt__thu-hang { display: flex; gap: 10px; margin-top: 2px; }
/* nút cũ – trong app các nút này mang thêm .po-nut (hệ nút chung, khung-ngang.css); kiểu dưới chỉ còn cho trang không nạp khung-ngang.css */
.gm-dt__thu-nut:not(.po-nut) { min-height: 44px; padding: 0 20px; border: 2px solid #DCD3FF; border-radius: 999px; background: #fff; color: #6242D6;
  font: 700 15px/1 "Quicksand", system-ui, sans-serif; cursor: pointer; }
.gm-dt__thu-nut.is-chinh:not(.po-nut) { background: #6242D6; border-color: #6242D6; color: #fff; box-shadow: none; }

/* cột nút: MỘT nút tròn lớn ▶/■ (nghe mẫu → đàn; dừng) + chữ nhỏ cho biết đang làm gì */
.gm-dt__cot { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 96px; }
.gm-dt__go-chu { font-size: 14px; font-weight: 700; line-height: 1.25; color: #4528A8; text-align: center; white-space: nowrap; }
.gm-dt.is-mau .gm-dt__go-chu { color: #2F7FE0; }
.gm-dt.is-mau .gm-dt__go { background: linear-gradient(150deg, #5FA8FF 0%, #2F7FE0 100%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
/* điểm hiện trên bản nhạc: chừa chỗ bên phải để ô điểm không che cuối bản nhạc */
.gm-dt__khuong.co-kq .gm-dt__dongs { margin-right: 150px; }
.gm-dt__go { width: 80px; height: 80px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: linear-gradient(150deg, #8063F5 0%, #5534C9 100%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14);
  transition: transform .12s, box-shadow .2s, background .2s; }
.gm-dt__go svg { width: 40px; height: 40px; }
.gm-dt__go:not(.is-stop) svg { margin-left: 4px; }
.gm-dt__go:active:not(:disabled) { transform: scale(.95); }
.gm-dt__go:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(98, 66, 214, .35); }
.gm-dt__go.is-stop { background: linear-gradient(150deg, #FFB75E 0%, #F2871A 100%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gm-dt__go:disabled { background: #E7E1D6; color: #A39C8F; box-shadow: none; cursor: default; }

/* bàn phím ảo: trải hết bề ngang, phím to; ẩn khi có đàn MIDI */
.gm-dt__phim { flex: none; padding-bottom: var(--safe-b); }   /* phím không lấn thanh chỉ báo Home (iPhone) / thanh điều hướng */
.gm-dt__phim[hidden] { display: none; }
.gm-dt__phim .gm-bp__keys { height: 130px; height: clamp(96px, 30cqh, 180px); }
/* thanh phản hồi đang mở (sau một lượt): bàn phím + cột nút nhường chỗ cho bản nhạc và điểm */
.gm.co-sheet .gm-dt__phim, .gm.co-sheet .gm-dt__cot { display: none; }

html.po-giam .gm-dt__go, html.po-giam .gm-dt__den, html.po-giam .gm-dt__khuong { transition: none; }
/* Khổ ngang của trình chơi bài (toàn app ngang – chủ dự án 2026-10-17): assets/css/bai-ngang.css (nạp sau game.css). */

/* ---------- nhân vật 3D (Task 12): span.nv3d > img vuông, kích thước theo thuộc tính width/height của img ---------- */
.nv3d { display: inline-block; flex: none; line-height: 0; vertical-align: bottom; transform-origin: 50% 100%; }
.nv3d > img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* nhân vật "sống" (chủ dự án 2026-10-20: "cho nó cử động tí cho đẹp"): mọi nhân vật 3D thở nhẹ – nhún, nghiêng, co giãn chút xíu,
 * neo ở chân. Hoạt cảnh nằm trên ẢNH (img) nên cộng được với phản ứng vui / buồn / cổ vũ trên khung .nv3d. Nhịp lệch nhau giữa các bạn
 * đứng cạnh nhau. Bản đồ Khu rừng có nhịp nhảy riêng (.kr-nv). Chỉ transform – máy cũ nhẹ; giảm chuyển động → đứng yên. */
.nv3d > img { animation: nv-song 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
:nth-child(3n+2) > .nv3d > img, .nv3d:nth-child(3n+2) > img { animation-duration: 3.8s; animation-delay: -1.2s; }
:nth-child(3n) > .nv3d > img, .nv3d:nth-child(3n) > img { animation-duration: 3.1s; animation-delay: -2.1s; }
.kr-nv .nv3d > img { animation: none; }
@keyframes nv-song {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  18% { transform: translateY(0) rotate(0) scale(1.018, .982); }
  45% { transform: translateY(-3%) rotate(-1.6deg) scale(.99, 1.012); }
  72% { transform: translateY(-1%) rotate(1.3deg) scale(1, 1); }
}
html.po-giam .nv3d > img { animation: none; }
@media (prefers-reduced-motion: reduce) { .nv3d > img { animation: none; } }
.nv3d.is-laugh, .nv3d.is-cheer { animation: nv3d-nay .6s ease-in-out 2; }
.nv3d.is-surprised { animation: nv3d-phong .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.nv3d.is-sad { animation: nv3d-buon 1.1s ease-in-out both; }
.nv3d.is-wink { animation: nv3d-lac .9s ease-in-out both; }
.nv3d.is-vui { animation: nv3d-nay .56s ease-out; }
.nv3d.is-co-vu { animation: nv3d-nay .56s ease-out 2; }
.nv3d.is-buon { animation: nv3d-buon 1.1s ease-in-out both; }
@keyframes nv3d-nay { 0%, 100% { transform: none; } 15% { transform: scale(1.06, .94); } 45% { transform: translateY(-14px) scale(.97, 1.04); } 80% { transform: scale(1.04, .96); } }
@keyframes nv3d-phong { from { transform: scale(.9); } to { transform: none; } }
@keyframes nv3d-buon { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-8deg) translateY(2px); } }
@keyframes nv3d-lac { 0%, 100% { transform: none; } 30% { transform: rotate(-5deg); } 65% { transform: rotate(4deg); } }
html.po-giam .nv3d { animation: none !important; }

/* thẻ một nút tác phẩm (giữ lâu): sao tốt nhất + điểm cao nhất (spec 2026-10-18-on-lai-vuot-man) */
.cd-the__diem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-the__pct { color: var(--navy-70); font-weight: 700; font-size: 15px; }
/* chạm / giữ lâu nút bài: không bật menu chép chữ / kính lúp của máy */
.cd-nut, .kr-nut, .kr-tt { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* tip "Chạm bài để học ngay · Giữ lâu…" (một lần cho mỗi hồ sơ) – không chặn chạm */
.po-tip-cham { position: absolute; z-index: 7; right: 12px; bottom: calc(var(--safe-b, 0px) + 10px); display: flex; align-items: center; gap: 8px;
  max-width: min(440px, calc(100% - 24px)); padding: 9px 14px 9px 10px; border-radius: 16px; background: #FFFDF6; color: #2B1A6B;
  font-weight: 700; font-size: 14px; line-height: 1.3; box-shadow: 0 6px 18px rgba(10, 4, 40, .35); pointer-events: none;
  animation: po-tip-cham .3s cubic-bezier(.2, .8, .25, 1) both; }
.po-tip-cham__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFE58A; line-height: 0; }
.po-tip-cham__ic .ico { fill: #B07A00; stroke: #B07A00; }
@keyframes po-tip-cham { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.po-giam .po-tip-cham { animation: none; }

/* Màn "theo-den" (đàn theo đèn): phím đang chờ nhấp nháy nhẹ; phím bấm sai đỏ thoáng qua */
/* khung bản nhạc: hộp flex có chiều cao – dòng khuông (.gm-dt__dong, flex 1 1 0) cần chỗ để giãn, không thì cao 0 (khuông biến mất) */
.gm-td__ban { flex: 1 1 0; min-height: 96px; display: flex; flex-direction: column; justify-content: center; margin: 4px 0; }
.gm-td__dk { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 4px 0 8px; }
.gm-td__mau { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--tint, #EEE8FF); color: var(--navy, #2A2560); font: inherit; font-weight: 700; cursor: pointer; }
.gm-td__tt { margin: 0; font-weight: 700; color: var(--navy, #2A2560); text-wrap: balance; }
.gm-bp__k.is-den { animation: gm-den 1s ease-in-out infinite; }
@keyframes gm-den { 50% { filter: brightness(1.12); transform: translateY(2px); } }
.gm-bp__k.is-sai.gm-bp__k--w { background: #FFD9D4; }
.gm-bp__k.is-sai.gm-bp__k--b { background: #B5473B; }
html.po-giam .gm-bp__k.is-den { animation: none; }

/* nốt MIDI ngoài đoạn phím đang hiện (ban-phim.js – vẫn được chấm): mũi tên ‹ / › ở mép bàn phím sáng lên khi đang giữ */
.gm-bp__mep { position: absolute; z-index: 4; top: 50%; width: 22px; height: 44px; margin-top: -22px; display: grid; place-items: center;
  border-radius: 10px; background: #FF5FAE; color: #fff; font: 800 26px/1 "Quicksand", system-ui, sans-serif; opacity: 0;
  transition: opacity .12s ease; pointer-events: none; }
.gm-bp__mep--trai { left: -4px; }
.gm-bp__mep--phai { right: -4px; }
.gm-bp__mep.is-sang { opacity: 1; }
html.po-giam .gm-bp__mep { transition: none; }