/* Say Piano – BÀI HỌC SÁNG (chủ dự án 2026-10-20: "thiết kế lại giao diện học theo bộ nhận diện mới nhìn cho nó sáng sủa").
 * Áp cho trình chơi bài (.gm: câu hỏi, đàn, thử thách, nhảy cóc), kết bài (.gm-end), màn xin quyền trong bài (.xq).
 * Bản đồ Khu rừng, Hôm nay… giữ nền đêm/ngày/Giáng sinh đã duyệt (nen-khu-rung-v3) – không đổi ở đây.
 * Nạp SAU CÙNG trong app.html (sau may-tinh-bang.css).
 *
 * Bố cục kiểu trang bài học sạch:
 *  - nền trắng, vệt hồng / tím Say Mê rất nhạt ở hai góc (không blur, không ảnh – máy cũ nhẹ);
 *  - cột giữa có lề rộng: thanh trên, vùng màn và chân cùng canh trong khung tối đa 1080 px (--le);
 *  - thanh trên: ✕ nhạt | thanh tiến độ dày bo tròn (hồng → vàng, dải sáng) | chip ♪;
 *  - nhãn bài viết hoa (hồng Say Mê) + câu hỏi chữ to đậm trong bóng thoại trắng viền tím nhạt, nhân vật 3D đứng trên bóng đổ mềm;
 *  - ô đáp án / thẻ nội dung (không còn dây lá hoa): khối trắng bo 18–22 px, viền tím nhạt 2.5 px + mép dưới 3D; chọn = Vàng Piano, đúng = xanh lá, sai = cam;
 *  - chân: thanh ngang trọn bề rộng có đường kẻ trên – "Bỏ qua" (nút phụ viền) bên trái, nút chính bên phải (hệ nút game thuong-hieu.css).
 * Luật: không quầng sáng / blur quanh nút, không icon sparkle, không giãn khoảng cách chữ; chữ dài cân dòng (text-wrap: balance). */

.gm, .xq {
  --night: #FFFFFF;
  --ink: #2A0A7E; --ink-2: #4E3E8C; --ink-3: #8478B0;
  --glass: #F7F3FF; --glass-line: #E6DDF7;
  --sang-vien: #E3D9F6;      /* viền thẻ / ô trên nền sáng */
  --sang-day: #CDBFEC;       /* mép 3D dưới thẻ */
  --sang-ranh: #EFE9FA;      /* rãnh thanh tiến độ, nền ô trống */
  --le: max(20px, calc((100vw - 1080px) / 2));  /* lề hai bên: cột giữa tối đa 1080 px (theo khung nhìn – .gm luôn trọn bề ngang) */
  background:
    radial-gradient(60% 55% at 100% 0%, rgba(255, 95, 174, .07) 0%, rgba(255, 95, 174, 0) 70%),
    radial-gradient(55% 60% at 0% 100%, rgba(91, 43, 196, .07) 0%, rgba(91, 43, 196, 0) 70%),
    #FFFFFF;
  color: var(--ink);
}
body.po-app:has(.gm), body.po-app:has(.gm-end), #app:has(> .gm), html:has(body.po-app .gm) { background: #FFFFFF; }
.gm > .nen-dem, .xq > .nen-dem { display: none; }
.xq::backdrop { background: #FFFFFF; }

/* ---------- thanh trên ---------- */
/* thanh trên bị phóng (zoom: --bang, may-tinh-bang.css) → chia lại để mép thẳng hàng với vùng màn và chân */
.gm-top { padding-left: calc((var(--le) + var(--safe-l, 0px)) / var(--bang, 1)); padding-right: calc((var(--le) + var(--safe-r, 0px)) / var(--bang, 1)); }
.gm-x { color: #A396C9; background: transparent; box-shadow: none; font-weight: 700; }
.gm-x:hover { background: var(--sang-ranh); }
.gm-x:active { background: var(--sang-vien); color: var(--sm-khoi); transform: none; box-shadow: none; }
.gm-progress { height: 16px; background: var(--sang-ranh); box-shadow: none; }
.gm-progress__bar { box-shadow: inset 0 4px 0 rgba(255, 255, 255, .38); }
@media (max-height: 412px) { .gm-progress { height: 14px; } }
.gm .chip { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 2px var(--sang-vien), 0 3px 0 var(--sang-vien); }
.gm .gm-notes { color: var(--ink); }
.gm-combo { color: #E9741A; }
.gm-again { background: #FFEEDD; color: #B8530A; }
.gm-dt__diem-o small { color: var(--ink-3); }

/* ---------- vùng màn: cột giữa ---------- */
.gm__main { padding-left: calc(var(--le) + var(--safe-l, 0px)); padding-right: calc(var(--le) + var(--safe-r, 0px)); }

/* bóng thoại: nhãn bài viết hoa + câu hỏi to đậm; khối trắng viền tím nhạt, đuôi có viền (hai lớp) */
.gm-ask__bong, .gm-meet__say, .gm-dt__loi-bong, .xq__bong, .nc__bong {
  background: #FFFFFF; color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--sang-vien), 0 4px 0 var(--sang-vien); }
.gm-ask__bong::after { border-top-color: #FFFFFF; bottom: -7px; }
.gm-ask__bong::before { content: ""; position: absolute; left: 51px; bottom: -14px; border: 13px solid transparent; border-top-color: var(--sang-vien); border-bottom: 0; }
.gm-man--kb-rong > .gm-ask > .gm-ask__bong::after { border-right-color: #FFFFFF; left: -7px; }
.gm-man--kb-rong > .gm-ask > .gm-ask__bong::before { left: -13px; top: 19px; bottom: auto; border: 13px solid transparent; border-right-color: var(--sang-vien); border-left: 0; }
.gm-ask__bai { color: #D8337F; font-weight: 800; text-transform: uppercase; font-size: 12px; }
.gm-ask .gm-ask__q { color: var(--ink); font-weight: 800; text-wrap: balance; }
.xq__bong::before { background: #FFFFFF; box-shadow: -2.5px 2.5px 0 var(--sang-vien); }

/* màn rộng (máy tính, máy bảng lớn): cột nhân vật cố định, nhân vật không cao quá bề ngang cột (không lấn sang ô đáp án) */
@media (min-width: 1100px) {
  .gm { --trai: 330px; }
  .gm-ask > .gm-ask__duoi { max-height: min(52vh, 320px); }
}
/* máy tính cao (web): màn câu hỏi gọn trong khối ≤ 620 px ở giữa chiều cao – không dồn lên trên, để trống phía dưới */
@media (min-width: 1100px) and (min-height: 760px) {
  .gm:not(.tu-cham) > .gm__main:has(> .gm-screen > .gm-man > .gm-ask, > .gm-screen > .gm-meet) { flex: 0 1 620px; margin-block: auto; }
}

/* nhân vật đứng trên bóng đổ mềm (không còn rừng đêm làm nền) */
.gm-ask > .gm-ask__duoi > .gm-ask__ch, .gm-meet__ch, .gm-end__cast, .nc__nv {
  background: radial-gradient(closest-side, rgba(42, 10, 126, .13), rgba(42, 10, 126, 0)) 50% calc(100% - 2px) / 70% 18px no-repeat; }

/* ---------- ô đáp án: khối trắng, viền tím nhạt, mép 3D ---------- */
.gm-card, .gm-pair__card, .gm-order__card, .gm-hl__btn, .gm-tl__nut, .gm-dien__nut {
  background: #FFFFFF; color: var(--ink); text-shadow: none;
  box-shadow: inset 0 0 0 2.5px var(--sang-vien), 0 4px 0 var(--sang-day); }
.gm-card:hover:not(:disabled) { background: #FBF9FF; }
.gm-card:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 0 0 2.5px var(--sang-vien), 0 1px 0 var(--sang-day); }
.gm-card.is-on, .gm-dien__nut.is-on, .gm-tl__nut.is-on {
  background: #FFF7D6; color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--sm-vang), 0 4px 0 #E2A600; }
.gm-card.is-right, .is-locked .gm-card.is-right, .gm-pair__card.is-done {
  background: #E6F9EC; color: #146B37; box-shadow: inset 0 0 0 3px #36C26B, 0 4px 0 #20A052; }
.gm-card.is-wrong, .gm-pair__card.is-miss {
  background: #FFEFE2; color: #9A4306; box-shadow: inset 0 0 0 3px #FF9A2E, 0 4px 0 #E9741A; }
.gm-card__cham { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--sang-vien); }
.gm-card > .gm-hinh > svg, .gm-card > .gm-hinh > img, .gm-card > svg, .gm-card > img { background: transparent; }

/* ---------- thẻ nội dung (khuông, mẫu tiết tấu, ô nhịp, hình): trắng viền tím nhạt ---------- */
.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,
.xq-noi__o, .nc__the {
  background: #FFFFFF; box-shadow: inset 0 0 0 2.5px var(--sang-vien), 0 4px 0 var(--sang-vien); }
.gm-dt__khuong.is-dan { box-shadow: inset 0 0 0 3px var(--sm-vang), 0 4px 0 #E2A600; }

/* phần còn lại từng đặt trên nền đêm */
.gm-dien__xoa { border-color: var(--sang-vien); background: #FFFFFF; color: var(--ink-2); }
.gm-order__slots { background: #F8F5FF; box-shadow: inset 0 0 0 2px var(--sang-vien); }
.gm-order__slot { border-color: var(--sang-day); }
.gm-order__slot::before { background: var(--sm-vang); color: var(--ink); }
.gm-pad { background: #F3EEFF; color: var(--sm-khoi); box-shadow: inset 0 0 0 2.5px var(--sang-day), 0 6px 0 var(--sang-day); }
.gm-pad:disabled { background: #F8F6FC; color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--sang-vien), 0 6px 0 var(--sang-vien); }
.gm-pad.is-on { background: #6242D6; color: #fff; box-shadow: inset 0 0 0 2.5px #4528A8, 0 6px 0 #4528A8; }
.gm-td__cham > i { background: var(--sang-ranh); box-shadow: inset 0 0 0 2px var(--sang-vien); }
.gm-td__cham > i.is-dang { background: var(--sm-hong); }
.gm-td__cham.is-lien { background: var(--sang-ranh); box-shadow: none; }
.gm-dt__go:disabled { background: var(--sang-ranh); color: var(--ink-3); box-shadow: inset 0 0 0 2.5px var(--sang-vien), 0 4px 0 var(--sang-vien); }
.gm-dt.is-mau .gm-dt__go-chu { color: #136FC0; }
.gm-soon .gm-ask__q, .gm-soon__sub { color: var(--ink); }

/* ---------- chân: thanh ngang trọn bề rộng – "Bỏ qua" trái, nút chính phải ---------- */
.gm-foot { justify-content: space-between; border-top: 2px solid var(--sang-ranh); background: rgba(255, 255, 255, .92);
  padding: 10px calc(var(--le) + var(--safe-r, 0px)) calc(var(--safe-b) + 10px) calc(var(--le) + var(--safe-l, 0px)); }
.gm-foot:has(> .gm-bo-qua[hidden]) { justify-content: flex-end; }
@media (max-height: 412px) { .gm-foot { padding-top: 6px; padding-bottom: calc(var(--safe-b) + 6px); } }
/* "Bỏ qua": nút phụ kiểu viền (cùng hệ nút game – mặt trắng, viền tím đêm, mép tím nhạt) */
.gm .gm-foot .gm-bo-qua { flex: none; width: auto; min-width: 160px; min-height: 48px; padding: 0 22px;
  --nut-1: #FFFFFF; --nut-2: var(--sm-oai); --nut-bd: #B9A6F0; color: var(--sm-khoi); text-shadow: none; }
@media (max-height: 360px) { .gm .gm-foot .gm-bo-qua { min-height: 44px; min-width: 132px; } }
/* nút chính đang tắt trên nền sáng: khối tím rất nhạt, không còn khối tím đêm */
.gm .gm-btn:disabled, .gm .gm-btn--block:disabled {
  background: #EEE9F7; color: #A79BCB; text-shadow: none;
  box-shadow: inset 0 0 0 2.5px #DDD3F1, 0 4px 0 #DDD3F1; }

/* ---------- thanh phản hồi: dải sáng màu kết quả ---------- */
.gm-sheet { box-shadow: none; border-radius: 0; padding-left: calc(var(--le) + var(--safe-l, 0px)); padding-right: calc(var(--le) + var(--safe-r, 0px)); }
.gm-sheet.is-right { background: #E3F8EA; color: #1E5C36; border-top: 2px solid #BDEBCD; }
.gm-sheet.is-wrong { background: #FFEEDF; color: #7A3A0A; border-top: 2px solid #FFD2AE; }
.gm-sheet.is-right .gm-sheet__title { color: #15803D; }
.gm-sheet.is-wrong .gm-sheet__title { color: #C2410C; }
.gm-sheet.is-right .gm-sheet__ico { color: #15803D; box-shadow: inset 0 0 0 2.5px #9FDDB5; }
.gm-sheet.is-wrong .gm-sheet__ico { color: #C2410C; box-shadow: inset 0 0 0 2.5px #FFC28F; }
.gm-sheet__combo { color: #C2410C; }

/* ---------- kết bài ---------- */
.gm-end { background:
    radial-gradient(60% 55% at 100% 0%, rgba(255, 201, 40, .12) 0%, rgba(255, 201, 40, 0) 70%),
    radial-gradient(55% 60% at 0% 100%, rgba(255, 95, 174, .08) 0%, rgba(255, 95, 174, 0) 70%), #FFFFFF; color: var(--ink);
  --ink: #2A0A7E; --ink-2: #4E3E8C; --ink-3: #8478B0; --glass: #F7F3FF; --glass-line: #E6DDF7; }
.gm-end__main { padding-left: max(28px, calc((100vw - 1080px) / 2)); padding-right: max(28px, calc((100vw - 1080px) / 2)); }
.gm-end__title { color: var(--ink); }
.gm-end__sub { color: var(--ink-2); }
.gm-end__s { color: #E3D9F6; }
.gm-end .gm-pv { background: #FFF7D6; color: var(--ink); box-shadow: inset 0 0 0 2px #FFE08A, 0 3px 0 #FFE08A; }
.gm-end .gm-pv__so { color: var(--ink); }
.gm-end .gm-pv-them__l { color: var(--ink-2); }

/* ---------- màn xin quyền trong bài, giới thiệu nhảy cóc ---------- */
.xq { color: var(--ink); }
.xq__bar { background: var(--sang-ranh); }
.xq__tran-an, .xq__phu { color: var(--ink-2); }
.gm :is(.nc__bong, .nc__the) { color: var(--ink); }

/* ---------- lớp hướng dẫn vuốt: nền tím trong suốt vẫn hợp trên nền sáng ---------- */
.gm-tip { background: rgba(42, 10, 126, .82); }

/* ---------- "Chưa có đàn lúc này" (game/an-dan.js): nút viền tím nhạt dưới ▶ / dưới bàn phím đàn theo đèn ---------- */
.gm .gm-dt__sau { border: 2px solid var(--sang-day); background: #FFFFFF; color: var(--sm-khoi); font-weight: 700;
  box-shadow: 0 3px 0 var(--sang-day); text-wrap: balance; }
.gm-td__sau { align-self: center; }

/* ---------- thanh hổ phách (không chấm đúng / sai): "Tạm ẩn các bài đàn." / "Cần đàn để qua thử thách này" ---------- */
.gm-sheet.is-an { background: #FFF5D9; color: #8A5300; border-top: 2px solid #FFE3A0; }
.gm-sheet.is-an .gm-sheet__title { color: #A35F00; }
.gm-sheet.is-an .gm-sheet__ico { color: #C27A00; background: #FFFFFF; box-shadow: inset 0 0 0 2.5px #FFD978; }
.gm-sheet.is-an .gm-btn { --nut-1: var(--nut-vang-1); --nut-2: var(--nut-vang-2); --nut-bd: var(--nut-vang-bd); --nut-chu: var(--sm-dem); text-shadow: none; }

/* ---------- báo nhanh dưới thanh phản hồi: "Quá dễ · Quá khó · Báo lỗi" (game/bao-nhanh.js) ---------- */
.gm-bn { order: 2; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 0 0 -8px; }
.gm-bn__nut { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 12px;
  background: none; color: inherit; opacity: .78; font: 800 13px/1 "Quicksand", system-ui, sans-serif; text-transform: uppercase; cursor: pointer; }
.gm-bn__nut:hover { opacity: 1; background: rgba(42, 10, 126, .06); }
.gm-bn__nut:active:not(:disabled) { transform: translateY(1px); }
.gm-bn__nut.is-da { opacity: 1; cursor: default; }
.gm-bn__nut svg { flex: none; }
@media (max-height: 412px) { .gm-bn { margin-top: -6px; } .gm-bn__nut { min-height: 40px; font-size: 12px; } }

/* tấm "Báo lỗi": lý do dạng viên chọn một, ghi chú ngắn */
.gm-bn__dlg { width: min(460px, calc(100vw - 32px)); }
.gm-bn__ly-do { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.gm-bn__chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #FFFFFF; color: var(--sm-dem);
  font: 700 15px/1 "Quicksand", system-ui, sans-serif; cursor: pointer;
  box-shadow: inset 0 0 0 2px #DCD2F2, 0 3px 0 #DCD2F2; }
.gm-bn__chip[aria-checked="true"] { background: #FFF7D6; box-shadow: inset 0 0 0 2.5px var(--sm-vang), 0 3px 0 #E2A600; }
.gm-bn__ghi { width: 100%; min-height: 64px; resize: none; font: 600 15px/1.4 "Quicksand", system-ui, sans-serif; padding: 10px 12px; }
@media (max-height: 412px) { .gm-bn__ly-do { margin: 6px 0 8px; } .gm-bn__chip { min-height: 40px; } .gm-bn__ghi { min-height: 44px; } }

/* đàn theo đèn có bản nhạc phía trên (nhất là khuông đôi hai tay): bàn phím thấp lại cho vừa một màn ở điện thoại 732–844 px
 * (thuong-hieu.css đặt 56cqh cho màn chỉ có bàn phím – lỗi tràn cũ của dem-20-10) */
.gm-td:has(> .gm-td__ban) .gm-bp__keys { height: clamp(68px, 24cqh, 190px); }
@media (max-height: 412px) { .gm-td:has(> .gm-td__ban) .gm-td__san { gap: 6px; } }

/* ---------- sao 3D (game/sao-3d.js): sao trống bên dưới, sao vàng bật lên lần lượt; giảm chuyển động → hiện ngay ---------- */
.sao3d { position: relative; display: block; line-height: 0; }
.sao3d .sao3d__svg { display: block; width: 100%; height: 100%; }
.sao3d__on { position: absolute; inset: 0; }
.sao3d.is-co .sao3d__on { animation: sao3d-bat .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.35s + var(--i, 0) * .28s); }
.sao3d.is-co .sao3d__on::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); opacity: 0;
  animation: sao3d-loe .6s ease-out both; animation-delay: calc(.55s + var(--i, 0) * .28s); pointer-events: none; }
@keyframes sao3d-bat { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes sao3d-loe { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
html.po-giam .sao3d.is-co .sao3d__on, html.po-giam .sao3d.is-co .sao3d__on::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .sao3d.is-co .sao3d__on, .sao3d.is-co .sao3d__on::after { animation: none; } }
/* kết bài: sao 3D to hơn, không còn sao viền mờ */
.gm-end__s.sao3d { width: clamp(38px, 11vh, 56px); height: clamp(38px, 11vh, 56px); color: inherit; }
.gm-end__s.sao3d .gm-end__s-on { animation: none; }
.gm-end__s.sao3d.is-co .gm-end__s-on { animation: sao3d-bat .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.45s + var(--i) * .3s); }
html.po-giam .gm-end__s.sao3d.is-co .gm-end__s-on { animation: none; }
.gm-end__sao { gap: 10px; }

/* ---------- KẾT QUẢ KHỞI ĐỘNG (o-roi, data-tt="kq"): sáng, nhân vật ăn mừng cạnh điểm, không nằm dưới thanh phản hồi ---------- */
/* chừa chỗ thanh phản hồi (o-roi.css đặt padding cụ thể hơn – mất chỗ chừa, nhân vật bị thanh che) */
.gm.co-sheet:has(.gm-man.or) .gm__main { padding-bottom: calc(var(--sheet-h, 120px) - var(--foot-h, 0px) + 6px); }
.gm-screen > .gm-man.or[data-tt="kq"] { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); column-gap: clamp(8px, 3cqw, 36px); }
.or[data-tt="kq"] .or__nv { align-self: center; height: min(74cqh, 100%); }
.gm.co-sheet .or[data-tt="kq"] .or__nv { height: min(70cqh, 100%); }
.or[data-tt="kq"] .or__lan { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.or[data-tt="kq"] :is(.or-canvas, .or-phim, .or__bang, .or__combo, .or__dem) { display: none; }
.or[data-tt="kq"] .or__vung { display: grid; place-items: center; min-height: 0; }
.or[data-tt="kq"] .or-the--kq { position: static; transform: none; width: min(520px, 100%); max-height: 100%; gap: clamp(2px, 1.4cqh, 10px);
  padding: clamp(10px, 3.4cqh, 24px) clamp(14px, 3cqw, 28px); border-radius: 24px; background: #FFFFFF; color: var(--ink);
  box-shadow: inset 0 0 0 2.5px var(--sang-vien), 0 5px 0 var(--sang-vien); }
.or[data-tt="kq"] .or-kq__sao { gap: clamp(6px, 2cqw, 14px); }
.or[data-tt="kq"] .or-kq__s { width: clamp(36px, 13cqh, 64px); height: clamp(36px, 13cqh, 64px); color: inherit; animation: none; }
.or[data-tt="kq"] .or-kq__nho { font-weight: 800; font-size: 12px; text-transform: uppercase; color: var(--ink-3); }
.or[data-tt="kq"] .or-kq__diem { font-family: var(--sm-tieu-de); font-weight: 400; font-size: clamp(34px, 15cqh, 64px); line-height: 1.2; color: var(--sm-dem); }
.or[data-tt="kq"] .or-kq__ky-luc { color: #A35F00; }
.or[data-tt="kq"] .or-kq__ky-luc.is-moi { color: #3A1A00; box-shadow: 0 3px 0 #D97A00; }
.or-kq__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.or-kq__chip { padding: 4px 12px; border-radius: 999px; background: #F3EEFF; color: var(--sm-khoi); font-weight: 800; font-size: 13px; line-height: 1.3;
  box-shadow: inset 0 0 0 1.5px var(--sang-vien); white-space: nowrap; }
.or[data-tt="kq"] .or-kq__dong { color: var(--ink-2); }
.or[data-tt="kq"] .or-kq__xh { background: #EAF5FF; box-shadow: inset 0 0 0 1.5px #B8DCFF; color: #135C9E; }
/* thanh phản hồi đang mở: thẻ gọn (bỏ nhãn "Điểm", dòng "Vượt N vòng") */
.gm.co-sheet .or[data-tt="kq"] :is(.or-kq__nho, .or-kq__dong) { display: none; }
@container gm (max-height: 200px) {
  .or[data-tt="kq"] .or-kq__xh { display: none; }
  .or[data-tt="kq"] .or-kq__s { width: 32px; height: 32px; }
}
/* Khởi động cũng nằm trong cột giữa (o-roi.css đặt lề 10 px cụ thể hơn – trả lại lề cột giữa của bài học sáng) */
.gm:has(.gm-man.or) .gm__main { padding-left: calc(var(--le) + var(--safe-l, 0px)); padding-right: calc(var(--le) + var(--safe-r, 0px)); }
@media (min-width: 1000px) and (min-height: 600px) {
  .or[data-tt="kq"] .or-the--kq { width: min(600px, 100%); }
  .or-kq__chip { font-size: 16px; padding: 6px 14px; }
  .or[data-tt="kq"] :is(.or-kq__xh, .or-kq__ky-luc, .or-kq__dong) { font-size: 16px; }
  .or[data-tt="kq"] .or-kq__nho { font-size: 14px; }
}
/* kết bài trên nền sáng: dòng xếp hạng chữ tím đêm, cúp / "vượt" vàng đậm; điện thoại thấp: sao nhỏ lại để nút "Tiếp tục" không lẹm */
.gm-end .gm-end__xh { color: var(--ink-2); }
.gm-end .gm-end__xh .ico, .gm-end .gm-end__vuot { color: #C27A00; }
@media (max-height: 380px) { .gm-end__s.sao3d { width: 32px; height: 32px; } .gm-end__sao { gap: 6px; margin-bottom: 4px; } }
/* kết bài trên máy tính bảng / máy tính: phóng cả cụm (nhân vật + tiêu đề + sao + thẻ số + nút) cho cân màn lớn, không lọt thỏm giữa khoảng trắng */
@media (min-width: 1000px) and (min-height: 600px) { .gm-end__main { zoom: 1.3; padding-left: 3vw; padding-right: 3vw; } }
@media (min-width: 1200px) and (min-height: 760px) { .gm-end__main { zoom: 1.5; } }
@media (min-width: 1600px) and (min-height: 1000px) { .gm-end__main { zoom: 1.6; } }