/* Say Piano – màn phụ khổ ngang (đợt Khu rừng, Task 6): Tôi + Cài đặt, Hồ sơ, Thành tích, Báo cáo phụ huynh, Kết nối đàn,
 * màn chào / dẫn dắt / xếp lớp / đăng nhập, hộp thoại và tấm phủ (cổng phụ huynh, chúc mừng, xin quyền, nhảy cóc, Kết nối đàn trong bài).
 * Danh sách dài cuộn dọc BÊN TRONG vùng chính (hoặc từng cột), trang không cuộn. Hộp thoại vừa chiều cao 360 px.
 * Không làm mờ nền, không giãn khoảng cách chữ, hiệu ứng chỉ transform/opacity. Nạp SAU khung-ngang.css + hom-nay.css. */

/* ---------- tiêu đề trên thanh trên (screen({titleTop})) ---------- */
.scr--ngang .scr__ttop { flex: 1; min-width: 0; }
.scr--ngang .scr__ttop .scr__title { margin: 0; font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr--ngang .scr__ttop .scr__title:focus { outline: none; }
.scr--ngang .scr__ttop .scr__sub { margin: 1px 0 0; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- khung "Tôi": trái thẻ hồ sơ + danh sách mục, phải nội dung mục đang chọn ---------- */
.scr--toi .scr__main { overflow: hidden; padding: 4px 14px 10px 16px; }
.scr--toi .scr__main { padding-bottom: max(0px, calc(10px - var(--safe-b))); }   /* khung đã chừa thanh chỉ báo Home (khung-ngang.css) */
.scr--toi .scr__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.toi { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 14px; }
.toi__trai, .toi__phai { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
.toi__phai { padding-right: 2px; }
.toi__dau { flex: none; }
.toi__dau .scr__title { margin: 0; font-size: 20px; line-height: 1.2; color: var(--ink); }
.toi__dau .scr__title:focus { outline: none; }
.toi__dau .scr__sub { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }

/* thẻ hồ sơ */
.toi-hs { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.toi-hs__anh { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.toi-hs__anh img { display: block; width: 100%; height: 100%; }
.toi-hs__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toi-hs__ten { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toi-hs__cap { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--glow); }
.toi-hs__thanh { margin-top: 3px; }
.toi-hs__phu { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

/* danh sách mục */
.toi-ds { flex: none; display: flex; flex-direction: column; gap: 4px; }
.toi-ds__it { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 10px 4px 6px; border-radius: 14px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 700; line-height: 1.2; background: rgba(255, 255, 255, .04);
  border: 1px solid transparent; -webkit-tap-highlight-color: transparent; }
.toi-ds__it:active { transform: scale(.985); }
.toi-ds__it:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
.toi-ds__it.is-on { background: rgba(63, 191, 106, .16); border-color: rgba(79, 210, 122, .55); }
.toi-ds__ico { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: var(--tone); color: var(--tone-on, #fff); }
.toi-ds__chu { flex: 1; min-width: 0; }
.toi-ds__chev { flex: none; color: var(--ink-3); display: grid; place-items: center; }
.toi-ds__it.is-on .toi-ds__chev { color: #8FE6AE; }
html.po-giam .toi-ds__it:active { transform: none; }

/* khối nội dung (kính tối) */
.toi-khoi { flex: none; margin: 0; padding: 4px 14px; }
.toi-muc { flex: none; margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.toi-ghi { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }

/* dòng cài đặt (công tắc) */
.toi-cd { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--glass-line); }
.toi-cd:last-child { border-bottom: 0; }
.toi-cd__ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--tone); color: var(--tone-on, #fff); }
.toi-cd__chu { flex: 1; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: pointer; }   /* nhãn = vùng chạm của công tắc (≥ 40 px) */
.toi-cd__ten { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.toi-cd__phu { font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--ink-2); }
.toi-cd .switch { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.toi-cd .switch:checked { background: var(--leaf-d); box-shadow: inset 0 0 0 1.5px #4FD27A; }
.toi-cd .switch:focus-visible { box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
.toi-vol .toi-cd__chu { flex: none; }
.toi-vol__range { flex: 1; min-width: 80px; height: 40px; margin: 0; accent-color: #4FD27A; }
.toi-vol__v { flex: none; min-width: 44px; text-align: right; font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* email, thiết bị */
.toi-mail { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.toi-mail__v { overflow-wrap: anywhere; }
.toi-tbs { list-style: none; }
.toi-tb { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--glass-line); }
.toi-tb:last-child { border-bottom: 0; }
.toi-tb__ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--ink); }
.toi-tb__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toi-tb__ten { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.toi-tb__phu { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.toi-nhan { flex: none; height: 28px; padding: 0 10px; border-radius: 14px; display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700; color: #CFF5DA; background: rgba(63, 191, 106, .18); border: 1px solid rgba(79, 210, 122, .45); white-space: nowrap; }

/* nút trên nền đêm */
.toi-nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 23px;
  border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .1); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.toi-nut:active { transform: scale(.97); }
.toi-nut:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
.toi-nut--nho { min-height: 40px; padding: 0 14px; font-size: 14px; }
.toi-nut--xoa { background: transparent; border-color: rgba(255, 156, 147, .6); color: #FF9C93; }
.toi-nut--them { align-self: flex-start; }
html.po-giam .toi-nut:active { transform: none; }
.toi-hanh { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
/* Gói học, Nhập mã, Mời bạn, Góp ý (account.js): dòng bấm được trong khối kính tối */
.toi-dong { width: 100%; border: 0; border-bottom: 1px solid var(--glass-line); background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toi-dong:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); border-radius: 12px; }
.toi-dong:active { opacity: .85; }
.toi-dong .toi-tb__ico, .toi-tb__ico.is-mau { background: var(--tone); color: var(--tone-on, #fff); }
.toi-dong .toi-ds__chev { flex: none; }
/* hộp thoại (nền kem) */
.toi-moi__ma { justify-content: center; align-self: center; }
.toi-moi__ma span { width: 38px; height: 46px; font-size: 26px; }
.toi-moi__so { margin: 0; font-size: 15px; font-weight: 700; text-align: center; color: var(--navy); }
.toi-gy-dlg .dlg__form { gap: 10px; }
.toi-gy__loai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.toi-gy__chip { min-height: 40px; border-radius: 20px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: 14.5px;
  font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toi-gy__chip.is-on { border-color: transparent; background: var(--nut-xanh); color: #fff; box-shadow: 0 3px 0 var(--nut-xanh-bd); }
.toi-gy__dong { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toi-gy__nhan { font-size: 14px; font-weight: 700; color: var(--navy-70); }
.toi-gy__sao { display: flex; gap: 2px; }
.toi-gy__s { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: rgba(15, 0, 78, .22);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toi-gy__s.is-on { color: #F5B400; }
.toi-gy__s.is-on svg { fill: currentColor; }
.toi-gy__chip:focus-visible, .toi-gy__s:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 107, 255, .45); }
.toi-gy__o { min-height: 84px; padding: 10px 14px; resize: none; font-family: inherit; font-size: 16px; line-height: 1.45; }
/* hộp thư (hop-thu.js) */
.ht-dlg__noi { white-space: pre-line; font-weight: 500; }
.toi-phien-ban { flex: none; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: right; cursor: default;
  -webkit-user-select: none; user-select: none; }

/* hồ sơ học viên */
.toi-pfs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.toi-pfs__dong { display: flex; align-items: stretch; gap: 8px; }
.toi-pf { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px 8px 8px; border-radius: 18px;
  border: 1px solid var(--glass-line); background: linear-gradient(180deg, rgba(52, 22, 140, .92), rgba(36, 12, 104, .94)); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toi-pf.is-on { border-color: rgba(79, 210, 122, .7); box-shadow: inset 0 0 0 1px rgba(79, 210, 122, .5); }
.toi-pf img { flex: none; border-radius: 50%; background: #fff; pointer-events: none; }
.toi-pf:focus-visible, .toi-pf__dat:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
.toi-pf__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toi-pf__ten { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toi-pf__phu { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.toi-pf__dat { flex: none; width: 56px; border-radius: 18px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .08); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; }

/* Thành tích trong cột phải: huy hiệu 3–4 cột */
.scr--toi .bdgs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.scr--toi .bdg { padding: 12px 8px 10px; }
.scr--toi .cert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scr--toi .remind { flex: none; }

/* khổ thấp (≤ 400 px): cột trái (thẻ hồ sơ + 5 mục) vừa khít, không phải cuộn */
@media (max-height: 400px) {
  .toi-hs { padding: 7px 10px; }
  .toi-ds { gap: 2px; }
}
/* màn thấp (≤ 360 px) */
@media (max-height: 360px) {
  .toi-hs { padding: 7px 10px; }
  .toi-hs__anh { width: 40px; height: 40px; }
  .toi-hs__phu { display: none; }
  .toi-ds__it { min-height: 40px; }
  .toi-ds__ico { width: 30px; height: 30px; }
}
@media (max-width: 780px) {
  .toi { grid-template-columns: minmax(0, 214px) minmax(0, 1fr); gap: 12px; }
  .toi-ds__it { font-size: 13.5px; gap: 8px; }
  .toi-ds__chev { display: none; }
}

/* ---------- Thêm hồ sơ (form dài): cuộn bên trong, lựa chọn 2 cột ---------- */
.scr--pn .opts:not(.opts--3) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scr--pn .av-pick { flex-wrap: wrap; }

/* ---------- Giấy chứng nhận: giấy bên trái, nút bên phải ---------- */
.pcert-ngang { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pcert-ngang__phai { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.pcert-ngang__phai .btn { min-height: 52px; }

/* ---------- Báo cáo phụ huynh: thanh trên chọn hồ sơ/tuần, nội dung 3 cột (người lớn 2 cột) ---------- */
.scr--report .scr__topr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scr--report .scr__topr .wseg { flex: none; width: 210px; padding: 3px; background: rgba(255, 255, 255, .12); }
.scr--report .scr__topr .wseg__b { min-height: 40px; font-size: 14px; color: var(--ink-2); }
.scr--report .scr__topr .wseg__b[aria-pressed="true"] { background: #fff; color: var(--navy); }
.scr--report .scr__topr .rprofs { flex: 0 1 auto; min-width: 0; }
.scr--report .scr__topr .rprof { min-height: 38px; padding: 2px 12px 2px 2px; background: rgba(255, 255, 255, .12); color: var(--ink); font-size: 14px; font-weight: 700; }
.scr--report .scr__topr .rprof[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: none; }
.scr--report .scr__ttop { flex: 0 1 auto; }
.scr--report .scr__main { padding-top: 6px; }
.scr--report .rbody { gap: 12px; }
.bc-luoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.bc-luoi--2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.bc-cot { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bc-luoi .bc-phan { padding: 14px; }
.bc-luoi .bc-phan__tieu { font-size: 16px; margin-bottom: 10px; }
.bc-luoi .bc-the__tieu { font-size: 21px; }
.bc-luoi .bc-the__muc b { font-size: 20px; }
.bc-luoi .bc-ngays { gap: 2px; }
.bc-luoi .bc-ngay__o { width: 100%; max-width: 30px; height: auto; aspect-ratio: 1; }
.bc-luoi .bc-the { padding: 14px 14px 0; gap: 10px; }
.bc-luoi .bc-the__muc { gap: 6px; }
.bc-luoi .bc-the__muc li { column-gap: 8px; padding: 8px; }
.bc-luoi .bc-the__ico { width: 30px; height: 30px; border-radius: 10px; }
.bc-luoi .bc-the__ico svg { width: 18px; height: 18px; }
.bc-luoi .bc-the__muc span:last-child { font-size: 12px; }
.bc-luoi .bc-the__cast svg { width: 44px; height: auto; }
.bc-luoi .bc-ngay__o .ico { width: 16px; height: 16px; }
.bc-luoi .bc-kn li { grid-template-columns: minmax(0, 80px) 1fr 38px; }
.bc-luoi .bc-goiy__tieu { color: var(--ink); }
.bc-luoi .bc-ten { color: var(--ink-2); }
.bc-luoi .bc-chia .btn--ghost { background: rgba(255, 255, 255, .1); color: var(--ink); }
.bc-luoi--2 .rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 800px) {
  .bc-luoi:not(.bc-luoi--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-luoi:not(.bc-luoi--2) .bc-cot--phai { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .scr--report .scr__topr .wseg { width: 180px; }
}

/* ---------- Kết nối đàn: trái kết nối, phải Thử đàn (màn + tấm phủ trong bài) ---------- */
.knd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.knd__trai, .knd__phai { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.knd__phai { position: sticky; top: 0; }
.knd .sec-head { margin: 4px 0 0; }
.scr--ngang .knd-goi-y { margin: 0; }
.knd-tam { max-width: none; }
.knd-tam__dau { padding: calc(8px + var(--safe-t)) calc(16px + var(--safe-r)) 8px calc(16px + var(--safe-l)); }
.knd-tam__tieu { font-size: 20px; }
.knd-tam__than { padding: 12px calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }

/* ---------- màn chào (bộ nhận diện Say Piano): nền tím sâu, trái cụm cả nhà Nốt Nhạc + Mèo nhún nhảy, phải logo + nút ---------- */
.scr.scr--ngang.scr--chao { background: radial-gradient(70% 95% at 26% 62%, #7A4DF0 0%, #43179F 46%, #1C0659 100%); }
.scr--chao .scr__main { padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 32px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 12px); }
.scr--chao .scr__body { flex: 1; min-height: 0; display: flex; }
.chao { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.chao__trai { position: relative; min-width: 0; height: 100%; }
.chao__phai { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.chao__logo { display: block; width: min(100%, 360px); height: auto; margin-bottom: 6px; }   /* logo Say Piano một dòng */
.scr--ngang .chao__tieu { margin: 0; font-family: "Quicksand", sans-serif; font-size: 15px; line-height: 1.4; font-weight: 600; color: #D9CCFF; text-wrap: balance; }
.chao__tieu:focus { outline: none; }
.chao__nut { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: min(100%, 290px); margin-top: 4px; }
.chao__bat-dau { min-height: 54px; }   /* dùng nút chính chung (thuong-hieu.css): Hồng Say Mê, mép cứng, không quầng */
.scr--ngang .chao__tk { min-height: 44px; color: #fff; opacity: .88; }
.chao__dev { margin: 0; font-size: 12px; color: #B9A6F2; }
/* cụm cả nhà Nốt Nhạc + Mèo (giống trang chủ saypiano.com): ô vuông lớn nhất vừa cột trái, các bạn đặt theo % */
.chao-sk { position: absolute; inset: 0; display: grid; place-items: center; }
.chao__trai { container-type: size; }
.chao-sk__cum { position: relative; width: min(100cqw, 98cqh * 1.05, 620px); aspect-ratio: 1.05; }
.chao-sk__cum::before { content: ""; position: absolute; inset: 6% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 130, 255, .45), rgba(170, 130, 255, 0)); }
.chao-sk__nv { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 1); line-height: 0; transform-origin: 50% 100%;
  animation: chao-nhun 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.chao-sk__nv .nv3d, .chao-sk__nv img { width: 100%; height: auto; display: block; }
.chao-sk__nv img { filter: drop-shadow(0 8px 10px rgba(10, 0, 40, .3)); }
@keyframes chao-nhun { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-5%) rotate(-3deg) scale(.98, 1.03); } 55% { transform: translateY(-5%) rotate(3deg); } 80% { transform: translateY(0) scale(1.03, .97); } }
html.po-giam .chao-sk__nv { animation: none; }
@media (prefers-reduced-motion: reduce) { .chao-sk__nv { animation: none; } }
@media (max-height: 370px) {
  .chao__logo { width: min(100%, 290px); }
}

/* ---------- dẫn dắt / xếp lớp / kết quả / kế hoạch / đăng nhập: câu hỏi trái, lựa chọn phải ---------- */
/* Bộ nhận diện Say Piano (2026-10-20): hai cột căn giữa theo chiều dọc (không khoảng trống lớn dưới đáy); trái = câu hỏi + nhân vật TO đứng
 * cạnh bóng thoại; phải = thẻ lựa chọn kiểu game (thuong-hieu.css: viền tím đêm, mép cứng, chọn → vàng Piano). */
.scr--dan .scr__main { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 24px; align-items: center; padding-top: 2px; }
.scr--dan .scr__head { grid-column: 1; grid-row: 1; margin: 0; }
.scr--dan .scr__body { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.scr--dan .scr__head--guide { gap: 6px; }
.scr--dan .scr__title { font-size: 25px; line-height: 1.15; text-wrap: balance; }
.scr--dan .say { flex-direction: row; align-items: center; gap: 4px; }
.scr--dan .mascot { flex: none; }
.scr--dan .mascot :is(.ch, .nv3d, .nv3d img) { display: block; width: clamp(124px, 19vw, 180px); height: auto; }
.scr--dan .say__bubble { flex: 1; min-width: 140px; margin: 0 0 0 10px; }
.scr--dan .say__bubble::before { left: -7px; top: 50%; bottom: auto; margin-top: -7px; }
.scr--dan .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scr--dan .opts--3 { grid-template-columns: repeat(3, 1fr); }
.scr--dan .opts--4 { grid-template-columns: repeat(4, 1fr); }
.scr--dan .opts:not(.opts--3):not(.opts--4) > .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scr--ngang .scr__top .qz-count { color: var(--ink-2); }
.scr--dan .opt { min-height: 62px; padding: 10px 12px; gap: 10px; }
.scr--dan .opts--4 .opt { min-height: 54px; padding: 8px 10px; }
.scr--dan .opt__ico { width: 40px; height: 40px; border-radius: 12px; }
.scr--dan .opt__ico .ico { width: 22px; height: 22px; }
.scr--ngang .scr__main .login__perks .ico { color: #6EE39A; }
.scr--dan .sec-head { margin: 2px 0 0; }
.scr--dan .field-wrap { margin: 0; }
/* xếp lớp: câu hỏi + khuông/nút Nghe trái, đáp án phải */
.scr--quiz.scr--dan .scr__head { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.scr--quiz.scr--dan .scr__titles { flex: 1; min-width: 0; }
.scr--quiz.scr--dan .qz-card { flex-basis: 100%; }
.scr--quiz.scr--dan .qz-staff svg { max-height: 150px; }
.scr--quiz.scr--dan .scr__art { width: 56px; }
.scr--quiz.scr--dan .scr__art svg { width: 56px; height: auto; }
.scr--quiz.scr--dan .scr__title { font-size: 19px; }
.scr--quiz.scr--dan .qz-listen { padding: 12px; gap: 8px; }
.scr--quiz.scr--dan .scr__body { align-self: center; }
/* kết quả: điểm xuất phát (thẻ + nhân vật) bên trái dưới tiêu đề, lời nhắn + nút bên phải */
.scr--result.scr--dan .scr__head { flex-direction: column; align-items: stretch; gap: 8px; }
.scr--result.scr--dan .scr__body { align-self: center; }
.scr--result.scr--dan .result__hero .ch { width: 96px; height: auto; }
.scr--result.scr--dan .result-card { padding: 34px 16px 16px; }
.scr--result.scr--dan .result-card__big { font-size: 36px; }
/* đăng nhập: điều được lợi trên, thẻ nút Google dưới cùng bên phải */
.scr--login .scr__body { min-height: 100%; justify-content: flex-end; }
.scr--login .login__card { padding: 16px; }

/* màn chờ/hết quyền (hero): nhân vật nhỏ lại cho vừa chiều cao */
.scr--ngang.scr--hero .soon__cast .ch { max-height: 96px; width: auto; }

/* ---------- hộp thoại: vừa chiều cao 360 px ---------- */
.dlg { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; }
.dlg__actions { margin-top: 4px; }
/* cổng phụ huynh: trái biểu tượng + lời, phải phép tính + ô nhập; nút dưới cùng */
.dlg:has(.gate) { width: min(100% - 32px, 560px); }
.gate.dlg__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; align-items: center; }
.gate__trai { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gate__trai .dlg__title { margin: 0; font-size: 19px; }
.gate__trai .dlg__text { font-size: 15px; text-align: center; color: var(--navy-70); font-weight: 500; }
.gate__phai { display: flex; flex-direction: column; gap: 8px; }
.gate__phai .gate__q { margin: 0; font-size: 30px; }
.gate__phai .gate__input { min-height: 48px; }
.gate .dlg__actions { grid-column: 1 / -1; margin-top: 0; }
/* chúc mừng huy hiệu / giấy chứng nhận: nhân vật trái, chữ + nút phải */
.dlg.party { width: min(100% - 32px, 600px); max-height: calc(100dvh - 24px); }
.party__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 4px 18px; padding: 18px 20px; text-align: left; }
.party__glow { left: 25%; top: -60px; }
.party__cast { margin: 0; }
.party__chu { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.party__title { margin-top: 8px; font-size: 22px; }
.party__desc { font-size: 15px; }
.party__acts { margin-top: 12px; }
.party__acts .btn { min-height: 48px; }

/* ---------- xin quyền trước: minh hoạ trái, nhân vật + lời + nút phải ---------- */
.xq { padding: calc(var(--safe-t, 0px) + 10px) calc(var(--safe-r, 0px) + 20px) calc(var(--safe-b, 0px) + 10px) calc(var(--safe-l, 0px) + 20px);
  overflow: hidden; max-width: none; }
.xq__than { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 10px 0 0; }
.xq__minh-hoa { min-height: 0; align-items: center; }
.xq-he { padding: 16px 16px 14px; gap: 8px; }
.xq-he__ico { width: 36px; height: 36px; }
.xq-he__nut { padding: 8px 12px; }
.xq-noi__o { padding: 8px 8px 6px; }
.xq-noi__o svg { max-height: calc(100dvh - 150px); }
.xq__phai { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.xq__noi .xq__nv :is(svg, .nv3d img) { width: auto; height: 64px; }
.xq__bong { margin-bottom: 10px; font-size: 17px; }
.xq__tran-an { text-align: left; font-size: 14px; }
.xq__chan { margin-top: 2px; }
.xq__chan .gm-btn { min-height: 50px; }
.xq__phu { min-height: 40px; }

/* ---------- nhảy cóc – giới thiệu: nhân vật + lời trái, thẻ Vùng + nút phải ---------- */
.nc__main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 20px; padding-top: 0; }
.nc__phai { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.nc__foot { padding-bottom: 0; }
.nc__foot .gm-btn { min-height: 50px; }
.nc-sau { min-height: 40px; }
.nc__nv :is(svg, .nv3d img) { height: clamp(64px, 46cqh, 150px); }
.nc__ds { font-size: 14px; }

/* kế hoạch: các dòng tóm tắt xếp 2 cột cho gọn chiều cao */
.scr--dan .sum { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 4px 14px; }
.scr--dan .sum__row { min-height: 0; padding: 8px 0; }
.scr--dan .sum__row:last-child { grid-column: 1 / -1; }
.scr--dan .today { padding: 12px 14px; }
/* nút "Tiếp tục" / "Kết nối đàn" của màn xin quyền: cùng dải xanh đậm chữ trắng ≥ 4.5 (khung-ngang.css --nut-xanh) */
.xq .gm-btn { --b: var(--nut-xanh); --bd: var(--nut-xanh-bd); }
/* thanh chỉ báo Home (--safe-b): cột trái "Tôi" co khoảng cách thay vì cuộn */
.toi__trai { gap: max(3px, calc(10px - var(--safe-b) / 3)); }
.toi__trai { padding-bottom: max(0px, calc(6px - var(--safe-b))); }