/* Say Piano – khung màn khổ ngang (đợt "Khu rừng", chủ dự án 2026-10-17): toàn app ngang, nền đêm, thanh điều hướng dọc bên trái,
 * chip số dư ở góc phải thanh trên. ui.js: screen() / navRail() / chipsTren(). Mockup: docs/thiet-ke/khu-rung/nguon/common.css.
 * Android cũ: không làm mờ nền (thay bằng nền --glass đặc hơn), không filter động, hiệu ứng chỉ transform/opacity.
 * Không giãn khoảng cách chữ. Nạp SAU student.css/game.css (ghi đè khung màn cũ). */

:root {
  --night: #081127;        /* đêm sâu – nền app */
  --night-2: #0D1B3A;      /* thẻ/khối trên nền đêm */
  --forest: #0F2E2B;
  --leaf: #3FBF6A; --leaf-d: #1F8F55;
  --glow: #FFE58A;
  --ink: #F4F7FF; --ink-2: #B9C7E6; --ink-3: #8193BC;
  --glass: rgba(9, 18, 44, .78); --glass-line: rgba(255, 255, 255, .12);
  --rail-w: 76px;
  /* nút CHÍNH (tên biến cũ "xanh" giữ cho mã cũ): từ 19/10 là Hồng Say Mê của bộ nhận diện Say Piano (thuong-hieu.css),
   * sậm hơn #FF5FAE để chữ trắng đạt ≥ 4.5 ở cả hai đầu dải (tools/sua-cuoi-khu-rung.test.mjs); dải sáng phía trên do bóng trong vẽ */
  --nut-xanh-1: #D92B83; --nut-xanh-2: #C2186F; --nut-xanh-bd: #8A0F50;
  --nut-xanh: linear-gradient(180deg, var(--nut-xanh-1), var(--nut-xanh-2));
  --top-h: 52px;
  --brand-progress: linear-gradient(90deg, #0F004E 0%, #3F2F7F 38%, #6A4FC0 72%, #4D6FD1 100%);
}

html { background: var(--night); }
body.po-app { background: var(--night); }
#app { background: var(--night); }

/* ---------- khung màn ---------- */
/* trang không cuộn: thanh dọc (trái) + khung (thanh trên · vùng chính · nút chính phải dưới) chiếm đúng một màn hình */
.scr.scr--ngang { display: flex; flex-direction: row; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  padding-left: 0; padding-right: 0; background: var(--night); }
.scr--ngang .scr__khung { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%;
  padding-left: var(--safe-l); padding-right: var(--safe-r); }
.scr--ngang.scr--rail .scr__khung { padding-left: 0; }
/* thanh chỉ báo Home (iPhone ngang) / thanh điều hướng dưới: khung chừa đáy – thẻ, nút không lấn vào (Xem bản nhạc tự chừa trong .scr__main) */
.scr--ngang:not(.scr--bn) .scr__khung { padding-bottom: var(--safe-b); }

.scr--ngang .scr__top { position: relative; top: auto; flex: none; display: flex; align-items: center; gap: 10px;
  min-height: var(--top-h); padding: calc(var(--safe-t) + 6px) 14px 4px 16px; background: transparent; }
.scr--ngang .scr__topr { min-height: 40px; }
.scr--ngang .scr__topr a, .scr--ngang .scr__topr button { min-height: 40px; color: var(--ink-2); }
.scr--ngang .scr__top .progress { height: 10px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 2px rgba(15, 0, 78, .25); }
.scr--ngang .scr__lui { width: 40px; height: 40px; background: var(--glass); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--glass-line); }

/* màn Khu rừng / Tác phẩm cũ (game.css .scr--cd): thanh trên trong suốt, tên hồ sơ đọc được trên nền đêm (Task 6 làm lại) */
.scr--ngang.scr--cd .scr__top { box-shadow: none; padding-top: calc(var(--safe-t) + 6px); }
.scr--ngang .cd-hs { color: var(--ink); }

/* vùng chính: "trang" cuộn dọc bên trong; "mot" không cuộn (nội dung phải vừa một màn hình) */
.scr--ngang .scr__main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 16px 12px; }
.scr--ngang.scr--trang .scr__main { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.scr--ngang.scr--mot .scr__main { overflow: hidden; }
.scr--ngang:not(:has(.scr__top)) .scr__main { padding-top: calc(var(--safe-t) + 14px); }

/* chữ đặt thẳng trên nền đêm (thẻ trắng cũ giữ chữ navy của chúng) */
.scr--ngang .scr__head { margin: 2px 0 14px; }
.scr--ngang .scr__title { font-size: 22px; line-height: 1.25; color: var(--ink); }
.scr--ngang .scr__sub { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.scr--ngang .scr__art { width: 72px; }
.scr--ngang .scr__art > img, .scr--ngang .scr__art > svg { width: 72px; }
.scr--ngang .welcome__foot { color: var(--ink-3); }

/* chữ của các màn cũ nằm thẳng trên nền đêm (tiêu đề mục, ghi chú, nhãn ô nhập, nút chữ, nút viền…): sáng lên.
 * Bên trong thẻ trắng / ô lựa chọn / hộp thoại: giữ màu navy cũ (khối sau, độ ưu tiên cao hơn). */
.scr--ngang .scr__main :is(.sec-head__title, .chap__title, .field-label, .rsec__title) { color: var(--ink); }
.scr--ngang .scr__main :is(.sec-head__sub, .note, .muted, .field-hint, .chap__sub, .qz-count, .login__note, .welcome__foot) { color: var(--ink-2); }
.scr--ngang .scr__main :is(.login__perks li, .login__perks .ico) { color: var(--ink); }
.scr--ngang .scr__main .btn-link:not(.btn-link--danger) { color: var(--ink-2); }
.scr--ngang .scr__main .btn-link:not(.btn-link--danger):hover { color: var(--ink); }
.scr--ngang .scr__main .btn-link--danger { color: #FF8A80; }
.scr--ngang .scr__main .btn--outline { background: var(--night-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--glass-line); }
.scr--ngang .scr__main .btn--ghost { background: rgba(255, 255, 255, .1); color: var(--ink); }
.scr--ngang .scr__main :is(.card, .opt, .qz-opt, .prof, .st, .hcard, .streak, .dlg) :is(.sec-head__title, .chap__title, .field-label, .rsec__title, .login__perks li, .login__perks .ico) { color: var(--navy); }
.scr--ngang .scr__main :is(.card, .opt, .qz-opt, .prof, .st, .hcard, .streak, .dlg) :is(.sec-head__sub, .note, .muted, .field-hint, .chap__sub, .qz-count, .login__note, .welcome__foot, .btn-link:not(.btn-link--danger)) { color: var(--navy-70); }
.scr--ngang .scr__main :is(.card, .opt, .qz-opt, .prof, .st, .hcard, .streak, .dlg) .btn-link--danger { color: var(--danger); }
.scr--ngang .scr__main :is(.card, .opt, .qz-opt, .prof, .st, .hcard, .streak, .dlg) .btn--outline { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.scr--ngang .scr__main :is(.card, .opt, .qz-opt, .prof, .st, .hcard, .streak, .dlg) .btn--ghost { background: var(--tint); color: var(--navy); }
/* chip ♪ cũ của Khu rừng (kinh-te.css .cd-chip--pv – Task 6 thay bằng chipsTren) */
.scr--ngang .cd-chip--pv { background: #fff; }

/* ---------- HỆ NÚT CHUNG (chủ dự án 2026-10-18: mọi nút chính / phụ cùng MỘT kiểu, theo nút "Bắt đầu" Hôm nay + nút khối trong bài) ----------
 * .po-nut          khung chung: cao 48 px, bo viên thuốc (24 px), chữ 16 px đậm 700, biểu tượng 20 px cách chữ 8 px, không xuống dòng,
 *                  mép nổi 3D 4 px phía dưới; bấm → lún 3 px (giảm chuyển động: không lún). Viền nhấn khi chọn bằng bàn phím: vàng.
 * .po-nut--chinh   nút CHÍNH: nền xanh lá (--nut-xanh), chữ trắng, mép --nut-xanh-bd, quầng xanh. Tắt (disabled): kính mờ, chữ nhạt.
 * .po-nut--phu     nút PHỤ: kính (nền trắng 8 %, viền trắng 22 %), chữ sáng, mép tối. Trên nền sáng (hộp thoại kem .dlg, thẻ trắng .card,
 *                  khung sáng khác – thêm lớp .po-nen-sang) → nền trắng, viền tím nhạt, chữ tím.
 * .po-nut--gon     cùng cao 48 px, lề ngang 12 px + chữ 15 px – cho hàng 2 nút trong cột hẹp (Xếp hạng, thẻ vé tác phẩm).
 * .po-nut--rong    chiếm hết bề ngang khung chứa.
 * JS: h("button.po-nut.po-nut--chinh", …, icon("play", 20), "Chữ"). screen() dùng sẵn cho next (chính) / secondary (phụ).
 * Biểu tượng "play" trong nút được tô đặc. */
.po-nut { --po-nut-bd: rgba(2, 8, 24, .55); position: relative; flex: none; min-width: 0; min-height: 48px; padding: 0 22px; border: 0; border-radius: 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--po-nut-bd); transform: translateY(0); transition: transform .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent; }
.po-nut .ico { flex: none; width: 20px; height: 20px; stroke-width: 2; }
.po-nut .ico[data-ico="play"] { fill: currentColor; stroke: none; }
.po-nut:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--po-nut-bd); }
.po-nut:focus-visible { outline: none; box-shadow: 0 4px 0 var(--po-nut-bd), 0 0 0 3px rgba(255, 229, 138, .85); }
.po-nut--chinh { --po-nut-bd: var(--nut-xanh-bd); background: var(--nut-xanh); color: #fff;
  box-shadow: 0 4px 0 var(--po-nut-bd); }
.po-nut--chinh:disabled { --po-nut-bd: rgba(0, 0, 0, .3); background: rgba(255, 255, 255, .08); color: var(--ink-3); cursor: default;
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 4px 0 var(--po-nut-bd); }
.po-nut--phu { background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 4px 0 var(--po-nut-bd); }
.po-nut--phu .ico { color: #FFE58A; }
.po-nut--phu:active:not(:disabled) { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 1px 0 var(--po-nut-bd); }
.po-nut--phu:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 4px 0 var(--po-nut-bd), 0 0 0 3px rgba(255, 229, 138, .85); }
:is(.dlg, .card, .po-nen-sang) .po-nut--phu { --po-nut-bd: #DCD3FF; background: #fff; color: #4B2FC2; box-shadow: inset 0 0 0 2px #DCD3FF, 0 4px 0 var(--po-nut-bd); }
:is(.dlg, .card, .po-nen-sang) .po-nut--phu .ico { color: currentColor; }
:is(.dlg, .card, .po-nen-sang) .po-nut--phu:active:not(:disabled) { box-shadow: inset 0 0 0 2px #DCD3FF, 0 1px 0 var(--po-nut-bd); }
:is(.dlg, .card, .po-nen-sang) .po-nut:focus-visible { box-shadow: 0 4px 0 var(--po-nut-bd), 0 0 0 3px rgba(98, 66, 214, .5); }
.po-nut--gon { padding: 0 12px; gap: 6px; font-size: 15px; }
.po-nut--gon .ico { width: 18px; height: 18px; }
.po-nut--rong { width: 100%; }
.po-nut[hidden] { display: none; }
html.po-giam .po-nut { transition: none; }
html.po-giam .po-nut:active:not(:disabled) { transform: none; }

/* ---------- chữ dài chạy qua lại (ui.js chuChay): chạy tới cuối, dừng, chạy về, dừng – chỉ khi tràn, chỉ transform ----------
 * Không tràn: đứng yên. Giảm chuyển động (html.po-giam): không chạy, cắt bằng "…" (phần tử có title). */
.po-chay { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.po-chay__in { white-space: nowrap; }
html:not(.po-giam) .po-chay.is-chay { text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); }
html:not(.po-giam) .po-chay.is-chay > .po-chay__in { display: inline-block; padding-right: 12px; will-change: transform;
  animation: po-chay var(--chay-t, 8s) ease-in-out infinite; }
@keyframes po-chay {
  0%, 18% { transform: translateX(0); }
  50%, 68% { transform: translateX(var(--chay-d, 0)); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .po-chay.is-chay > .po-chay__in { animation: none; } }

/* nút chính: phải dưới, không chiếm cả hàng */
.scr--ngang .scr__foot { position: relative; bottom: auto; flex: none; background: transparent; }
.scr--ngang .scr__bar { flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 6px 16px calc(var(--safe-b) + 10px); box-shadow: none; }
.scr--ngang .scr__bar .btn { min-width: 200px; min-height: 48px; }
.scr--ngang .scr__bar .po-nut--chinh { min-width: 200px; }
.scr--ngang .scr__bar .btn-link { color: var(--ink-2); }
.scr--ngang .scr__bar .btn-link:hover { color: var(--ink); }
.scr--ngang .scr__foot .welcome__foot { padding: 0 16px calc(var(--safe-b) + 8px); margin: 0; text-align: right; }

/* màn chào (hero): căn giữa trong vùng chính */
.scr--ngang.scr--hero .scr__main { justify-content: center; text-align: center; }
.scr--ngang.scr--hero .scr__bar { justify-content: center; }
.scr--ngang.scr--hero .scr__foot .welcome__foot { text-align: center; }

/* ---------- thanh điều hướng dọc bên trái ---------- */
.rail { position: relative; z-index: 20; flex: none; width: calc(var(--rail-w) + var(--safe-l)); height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: calc(var(--safe-t) + 10px) 0 calc(var(--safe-b) + 8px) var(--safe-l);
  background: linear-gradient(180deg, rgba(7, 14, 36, .97), rgba(7, 18, 32, .95));
  border-right: 1px solid rgba(255, 255, 255, .08); box-shadow: 8px 0 30px -12px rgba(0, 0, 0, .6); }
/* logo: ảnh 128 px có lề trong suốt ~18 % → hiện 52 px (chữ O ~38 px), giữa đúng bề ngang thanh (không tính lề an toàn trái);
 * vương miện nghiêng trái làm khối hình lệch trái ~1 px → bù 1 px sang phải cho cân mắt */
.rail__logo-o { flex: none; width: var(--rail-w); height: 52px; margin: -2px 0 4px; display: grid; place-items: center; }
.rail__logo { width: 52px; height: 52px; display: block; object-fit: contain; transform: translateX(1px); }
.rail__it { position: relative; flex: 1; max-height: 64px; min-height: 44px; width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; line-height: 1.1; text-decoration: none;
  -webkit-tap-highlight-color: transparent; }
.rail__ic { width: 50px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: transform .15s ease; }
.rail__ic svg { width: 24px; height: 24px; display: block; }
.rail__chu { max-width: 100%; padding: 0 2px; text-align: center; }
.rail__it.is-on { color: #fff; }
.rail__it.is-on .rail__ic { background: var(--nut-xanh);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.rail__it:active .rail__ic { transform: scale(.92); }
.rail__it:focus-visible { outline: none; box-shadow: none; }
.rail__it:focus-visible .rail__ic { box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
html.po-giam .rail__it:active .rail__ic { transform: none; }

/* ---------- chip số dư / trạng thái (góc phải thanh trên) ---------- */
.chips { flex: none; display: flex; gap: 8px; align-items: center; margin-left: auto; }
.chip { height: 40px; padding: 0 12px 0 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass); border: 1px solid var(--glass-line); font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  color: #fff; white-space: nowrap; }
.chip svg { width: 22px; height: 22px; flex: none; }
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip--lua:not(.is-on) svg { opacity: .55; }
button.chip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.chip:active { transform: scale(.96); }
button.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
html.po-giam button.chip:active { transform: none; }
.chip--midi { padding: 0 12px 0 10px; font-size: 13px; color: #CFF5DA; }
.chip--midi i { width: 8px; height: 8px; border-radius: 50%; background: #3FE07A; box-shadow: none; }
.chip[hidden] { display: none; }

/* màn thấp (≤ 360 px): thanh trên + chip gọn hơn */
@media (max-height: 360px) {
  :root { --top-h: 46px; }
  .chip { height: 40px; font-size: 14px; }   /* mục chạm ≥ 40 px (kiem-tra-man-app) */
  .chip svg { width: 20px; height: 20px; }
  .rail__it { font-size: 10.5px; }
  .rail__ic { height: 28px; }
  .rail__logo-o { height: 46px; margin: -2px 0 2px; }
  .rail__logo { width: 46px; height: 46px; }
}

/* ---------- web ở khổ dọc: nhắc xoay ngang (app Android đã khoá ngang) ---------- */
.xoay-ngang { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  html:not(.is-native) .xoay-ngang { display: grid; position: fixed; inset: 0; z-index: 9998; place-items: center; padding: 24px;
    background: var(--night); color: var(--ink); text-align: center; }
  html:not(.is-native) .xoay-ngang p { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
}