/* Say Piano – "Hôm nay" khổ ngang (đợt Khu rừng, Task 5): một màn hình, lưới 2 cột trên nền đêm.
 * Mockup: docs/thiet-ke/khu-rung/trang-chu-ngang.png (nguồn nguon/trang-chu-ngang.html). JS: student/screens/home.js.
 * Nền đêm dùng chung (nen-dem.js, lớp .scr--dem) cũng ở đây. Không làm mờ nền, không giãn khoảng cách chữ, hiệu ứng chỉ transform.
 * Nạp SAU khung-ngang.css. */

/* ---------- nền đêm Khu rừng (Hôm nay, Tác phẩm, Cửa hàng) ---------- */
.scr--ngang.scr--dem { position: relative; }
.scr--dem > .nen-dem { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.scr--dem > .rail { z-index: 20; }
.scr--dem > .scr__khung { position: relative; z-index: 1; min-width: 0; }

/* thẻ kính tối dùng chung trên nền đêm */
.hn-the { border-radius: 20px; color: var(--ink);
  background: linear-gradient(180deg, rgba(52, 22, 140, .92), rgba(36, 12, 104, .94)); border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); }
button.hn-the, a.hn-the { font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(button, a).hn-the:active { transform: scale(.985); }
:is(button, a).hn-the:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
html.po-giam :is(button, a).hn-the:active { transform: none; }
.hn-the__t { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); }

/* thanh tiến độ (nền trắng, phần đã đi = --brand-progress) */
.hn-thanh { display: block; height: 7px; border-radius: 6px; background: rgba(255, 255, 255, .92); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 0, 78, .25); }
.hn-thanh > span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--brand-progress); }
.hn-thanh--lon { height: 9px; }

/* ---------- thanh trên: lời chào cùng hàng với chip ---------- */
.scr--home .hn-chao { flex: 1; min-width: 0; }
.scr--home .hn-chao .scr__title { margin: 0; font-size: 21px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr--home .hn-chao .scr__title:focus { outline: none; }
.scr--home .hn-chao .scr__sub { margin: 1px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr--home .scr__main { padding: 6px 14px 12px 16px; }
.scr--home .scr__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- lưới 2 cột ---------- */
.hn-luoi { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 12px; }
.hn-cot { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ---------- thẻ lớn "Học tiếp" ---------- */
.hn-hero { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 22px; padding: 14px 18px;
  display: flex; flex-direction: column; justify-content: center; color: #fff;
  background: radial-gradient(120% 140% at 85% 30%, #2C7A55 0%, #18493E 45%, #0F2C33 100%); border: 1px solid rgba(160, 255, 190, .18);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); }
.hn-hero__deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hn-hero__nv { position: absolute; right: 10px; bottom: 6px; width: min(36%, 190px); aspect-ratio: 1; max-height: 76%; display: grid; place-items: end center; pointer-events: none; }
.hn-hero__nv > svg, .hn-hero__nv > img { width: 100%; height: 100%; }
.hn-hero__nv > .nv3d { width: 100%; height: 100%; }
.hn-hero__nv > .nv3d > img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.hn-hero__in { position: relative; max-width: 62%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hn-hero__tag { display: block; max-width: 100%; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 12px;   /* tên vùng dài: chạy qua lại (chuChay) */
  font-size: 12px; font-weight: 700; color: #3A1800; background: linear-gradient(180deg, #FFC27A, #FF9A2E);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-hero__t { margin: 8px 0 0; max-width: 100%; font-size: 21px; font-weight: 700; line-height: 1.2; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-hero__muc { margin: 3px 0 0; max-width: 100%; font-size: 13px; line-height: 1.3; color: #CFE9DA;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hn-hero__tien { width: min(220px, 100%); margin-top: 10px; }
.hn-hero__tien-t { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #CFE9DA; }
.hn-hero__nut { margin-top: 12px; }   /* nút "Bắt đầu / Học tiếp" theo hệ nút chung .po-nut (khung-ngang.css) */
.hn-nut { margin-top: 12px; height: 44px; padding: 0 22px 0 18px; border: 0; border-radius: 22px; display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; cursor: pointer;
  background: var(--nut-xanh); box-shadow: 0 4px 0 var(--nut-xanh-bd);
  -webkit-tap-highlight-color: transparent; }
.hn-nut .ico { fill: currentColor; stroke: none; }
.hn-nut:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--nut-xanh-bd); }
.hn-nut:focus-visible { outline: none; box-shadow: 0 4px 0 var(--nut-xanh-bd), 0 0 0 3px rgba(255, 229, 138, .8); }
html.po-giam .hn-nut:active { transform: none; }

/* ---------- hàng thẻ nhỏ (tác phẩm, Hộp nhạc / Hạng mùa) ---------- */
.hn-hang { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.hn-hang.is-mot { grid-template-columns: minmax(0, 1fr); }
.hn-mini { min-width: 0; min-height: 70px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; border-radius: 18px; }
.hn-mini__art { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.hn-mini__art.is-tp { background: linear-gradient(180deg, #7A6BFF, #4B3FD0); }
.hn-mini__art.is-hop { background: linear-gradient(180deg, #FFE7A0, #F5B640); }
.hn-mini__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hn-mini__txt > b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hn-mini__sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 0; font-size: 12px; line-height: 1.3; color: var(--ink-2); overflow: hidden; }
.hn-sao { display: inline-flex; gap: 1px; }
.hn-sao .ico { width: 15px; height: 15px; color: rgba(255, 255, 255, .35); }
.hn-sao .is-co .ico { color: #FFD23F; fill: #FFD23F; }

/* ---------- Mục tiêu hôm nay ---------- */
.hn-mt { flex: none; padding: 12px 14px; display: flex; gap: 14px; align-items: center; }
.hn-vong { position: relative; flex: none; width: 70px; height: 70px; }
.hn-vong > svg { width: 100%; height: 100%; display: block; }
.hn-vong__v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hn-vong__v b { font-size: 17px; font-weight: 700; color: #fff; }
.hn-vong__v small { margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.hn-mt__txt { flex: 1; min-width: 0; }
.hn-mt__sub { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-tuan { list-style: none; margin: 7px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 214px; }
.hn-tuan__d { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.hn-tuan__o { width: 100%; max-width: 26px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1.5px dashed rgba(255, 255, 255, .2); }
.hn-tuan__l { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.hn-tuan__d.is-done .hn-tuan__o { background: linear-gradient(180deg, #FFB13B, #FF6A2E); border: 0; }
.hn-tuan__d.is-done .ico { stroke-width: 3; }
.hn-tuan__d.is-today .hn-tuan__o { border: 2px solid #FFE58A; background: rgba(255, 229, 138, .12); }
.hn-tuan__d.is-today .hn-tuan__l { color: #FFE58A; }
.hn-tuan__d:is(.is-rest, .is-frozen) .hn-tuan__o { border: 0; background: #2F4C8A; color: #CFE0FF; }
.hn-tuan__d.is-miss .hn-tuan__o { border-style: solid; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }

/* ---------- Nhiệm vụ ---------- */
.hn-nv { flex: 1; min-height: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.hn-nv__dau { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hn-nv__gio { font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.hn-nv__ds { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.hn-nv__i { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: center; gap: 10px;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.hn-nv__i:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }
.hn-nv__ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: var(--nut-xanh); }
.hn-nv__i.is-review .hn-nv__ic { background: linear-gradient(180deg, #FFB13B, #FF7A2E); }
.hn-nv__i.is-kho .hn-nv__ic { background: linear-gradient(180deg, #5BA8FF, #2F6BFF); }
.hn-nv__i.is-continue:not(.is-xong) .hn-nv__ic .ico { fill: currentColor; stroke: none; }
.hn-nv__i.is-xong .hn-nv__ic .ico { stroke-width: 2.6; }
.hn-nv__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hn-nv__b > b { font-size: 13.5px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hn-nv__i.is-xong .hn-nv__b > b { color: var(--ink-2); }
.hn-nv__r { flex: none; min-width: 46px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px;
  font-size: 13px; font-weight: 700; color: #FFE58A; }
.hn-nv__r svg { width: 16px; height: 16px; }
.hn-nv__i.is-xong .hn-nv__r { opacity: .55; }
.hn-nv__xong { font-size: 12px; font-weight: 700; color: #7FE3A4; line-height: 1.2; }
.hn-nv__trong { margin: 0; font-size: 13px; color: var(--ink-2); }
.hn-nv__lai { align-self: flex-start; }

/* ---------- khổ thấp / hẹp ---------- */
@media (max-height: 400px) {
  .hn-luoi, .hn-cot, .hn-hang { gap: 10px; }
  .hn-hero { padding: 12px 16px; }
  .hn-hero__t { margin-top: 6px; font-size: 19px; }
  .hn-hero__tien { margin-top: 8px; }
  .hn-nut { margin-top: 10px; height: 40px; font-size: 15px; }
  .hn-hero__nut { margin-top: 10px; }
  .hn-mini { min-height: 62px; padding: 7px 10px; }
  .hn-mini__art { width: 44px; height: 44px; border-radius: 12px; }
  .hn-mt { padding: 10px 12px; gap: 12px; }
  .hn-vong { width: 62px; height: 62px; }
  .hn-nv { padding: 10px 12px; gap: 6px; }
  .hn-nv__ic { width: 30px; height: 30px; }
}
@media (max-height: 360px) {
  .scr--home .hn-chao .scr__title { font-size: 19px; }
  .scr--home .hn-chao .scr__sub { font-size: 12px; }
  .hn-hero__muc { -webkit-line-clamp: 1; }
}
@media (max-width: 780px) {
  .hn-mini { gap: 8px; padding-inline: 8px; }
  .hn-mini__txt > b { font-size: 13px; }
  .hn-mini__sub { font-size: 11px; }
  .hn-mini__sub .hn-sao .ico { width: 12px; height: 12px; }
  .hn-mt { gap: 10px; }
  .hn-vong { width: 58px; height: 58px; }
  .hn-vong__v b { font-size: 15px; }
}

/* thanh chỉ báo Home (iPhone ngang, --safe-b > 0 – khung-ngang.css chừa đáy): khoảng trống trong thẻ co lại đúng phần bị lấy, không lẹm nút.
 * --safe-b = 0 (Android, máy tính) → giữ nguyên số đo cũ */
@media (max-height: 400px) {
  .scr--home .scr__main { padding-bottom: max(2px, calc(12px - var(--safe-b))); }
  .hn-luoi, .hn-cot, .hn-hang { gap: max(6px, calc(10px - var(--safe-b) / 4)); }
  .hn-hero { padding-top: max(8px, calc(12px - var(--safe-b) / 4)); padding-bottom: max(4px, calc(12px - var(--safe-b) / 2)); }
  .hn-hero__muc { -webkit-line-clamp: 1; }
  .hn-hero__tien-t { margin-top: max(2px, calc(4px - var(--safe-b) / 10)); }
  .hn-hero__t { margin-top: max(3px, calc(6px - var(--safe-b) / 6)); }
  .hn-hero__tien { margin-top: max(4px, calc(8px - var(--safe-b) / 5)); }
  .hn-hero__nut { margin-top: max(4px, calc(10px - var(--safe-b) / 3)); }
  .hn-mini { min-height: max(52px, calc(62px - var(--safe-b) / 2)); }
}