/* Say Piano – Tác phẩm khổ ngang (đợt Khu rừng, Task 5): danh sách #/kho (hàng lọc + dải thẻ cuộn ngang, cuộn bắt thẻ)
 * và con đường nhỏ của một tác phẩm #/tac-pham/<mã> (thẻ vé trái + đường ngang). Mockup: docs/thiet-ke/khu-rung/tac-pham-ngang.png.
 * JS: student/screens/tac-pham.js. Thẻ kính, thanh, nút xanh dùng chung ở hom-nay.css. Nạp SAU tac-pham.css, khung-ngang.css, hom-nay.css.
 * Không làm mờ nền, không giãn khoảng cách chữ, hiệu ứng chỉ transform. */

/* ---------- #/kho: thanh trên (tiêu đề + hàng lọc) ---------- */
.scr--kho .tpk-dau { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.scr--kho .tpk-dau .scr__title { flex: none; margin: 0; font-size: 21px; line-height: 1.2; white-space: nowrap; }
.scr--kho .tpk-dau .scr__title:focus { outline: none; }
.tpk-loc { min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
.tpk-loc::-webkit-scrollbar { display: none; }
.tpk-loc__b { flex: none; min-height: 40px; padding: 0 14px; border-radius: 17px; display: inline-flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .07); color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tpk-loc__b.is-on { background: #fff; color: #0F004E; border-color: #fff; }
.tpk-loc__b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 229, 138, .7); }

/* ---------- #/kho: dải thẻ cuộn ngang ---------- */
.scr--kho .scr__main { padding: 6px 0 12px 16px; }
.scr--kho .scr__body { flex: 1; min-height: 0; display: flex; }
.tpk-ke { flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-padding-left: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 4px; }
.tpk-ke::-webkit-scrollbar { display: none; }
.tpk-ke::after { content: ""; flex: none; width: 4px; scroll-snap-align: end; }   /* + gap 12 = 16px cuối dải, bằng lề đầu: thẻ cuối cuộn trọn vào khung */
.tpk-the { position: relative; flex: none; width: 180px; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, rgba(52, 22, 140, .94), rgba(36, 12, 104, .96)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: none; }
.tpk-the.is-chon { width: 262px; border-color: rgba(255, 229, 138, .5); box-shadow: 0 0 0 1px rgba(255, 229, 138, .25); }
html.po-giam .tpk-the { transition: none; }
.tpk-the__art { position: relative; flex: 1; min-height: 0; width: 100%; padding: 0; border: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, var(--tone), var(--tone-d)); -webkit-tap-highlight-color: transparent; }
.tpk-the__art:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255, 229, 138, .9); }
.tpk-the__deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.tpk-the__kho { position: absolute; z-index: 1; left: 10px; top: 10px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center;
  background: rgba(8, 16, 40, .6); color: #fff; font-size: 11.5px; font-weight: 700; }
.tpk-the__nv { position: absolute; left: 50%; bottom: 4px; height: 66%; max-height: 160px; aspect-ratio: 1; transform: translateX(-50%); }
.tpk-the__nv > svg, .tpk-the__nv > img, .tpk-the__nv > .nv3d, .tpk-the__nv > .nv3d > img { width: 100%; height: 100%; display: block; }
.tpk-the__b { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px 11px; }
.tpk-the__txt { flex: 1; min-width: 0; }
.tpk-the__txt > b { display: block; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpk-the__tt { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tpk-the__sao .cd-sao { position: static; transform: none; padding: 0; background: none; gap: 1px; }
.tpk-the__sao .cd-sao__i { width: 17px; height: 17px; }
.tpk-the__sao .cd-sao__i:nth-child(2) { margin-top: 0; }
.tpk-the__sao .cd-sao__i path { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); }
.tpk-the__sao .cd-sao__i.is-co path { fill: #FFC93C; stroke: #E8A70C; }
.tpk-tap { flex: none; margin-top: 0; height: 40px; padding: 0 16px 0 12px; font-size: 14px; }
/* thẻ Kho bản nhạc (trang kho cũ) */
.tpk-the--kho .tpk-the__art { display: grid; place-items: center; background: linear-gradient(180deg, #24346A, #16234A); color: #CFE0FF; }
.tpk-kho__ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.tpk-trong { flex: none; align-self: center; max-width: 320px; margin: 0 16px; font-size: 14px; color: var(--ink-2); }

/* ---------- #/tac-pham/<mã>: thẻ vé trái + đường ngang ---------- */
.scr--tp .scr__top { gap: 10px; }
.scr--tp .tp-top { max-width: 34vw; color: var(--ink); font-size: 16px; }
.scr--tp .scr__main { padding: 6px 14px 12px 16px; }
.scr--tp .scr__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tp-man { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(196px, 248px) minmax(0, 1fr); gap: 12px; }

.scr--tp .tp-ve { margin: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; 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); }
.scr--tp .tp-ve__dau { display: flex; align-items: center; gap: 10px; min-width: 0; }
.scr--tp .tp-ve__cuong { flex: none; width: 64px; height: 64px; border: 0; border-radius: 18px; overflow: hidden; display: grid; place-items: end center;
  background: linear-gradient(180deg, var(--tone), var(--tone-d)); line-height: 0; }
.scr--tp .tp-ve__cuong :is(svg, .nv3d img) { width: 64px; height: 64px; margin-bottom: -6px; }
.scr--tp .tp-ve__ten { flex: 1; min-width: 0; }
.scr--tp .tp-ve__t { margin: 0; font-size: 18px; line-height: 1.25; color: var(--ink); }   /* tên dài: chạy qua lại (ui.js chuChay) */
.scr--tp .tp-ve__by { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.scr--tp .tp-ve__chips { margin: 0; gap: 6px; }
.scr--tp .tp-chip { min-height: 24px; padding: 0 9px; font-size: 12px; background: rgba(255, 255, 255, .1); color: var(--ink); }
.scr--tp .tp-chip--kho { background: rgba(255, 217, 102, .16); color: #FFE58A; }
.scr--tp .tp-ve__duoi { margin: 0; }
.scr--tp .tp-ve__sao .cd-sao__i path { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); }
.scr--tp .tp-ve__sao .cd-sao__i.is-co path { fill: #FFC93C; stroke: #E8A70C; }
.scr--tp .tp-ve__tien { font-size: 13px; color: var(--ink-2); }
.tp-ve__nuts { margin-top: auto; padding-bottom: 4px; display: flex; flex-direction: column; gap: 6px; }   /* nút theo hệ nút chung .po-nut (khung-ngang.css); chừa mép nổi 4 px */

.tp-duong-k { position: relative; min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 20px;
  background: linear-gradient(180deg, rgba(15, 46, 43, .55), rgba(15, 46, 43, .25)); border: 1px solid rgba(160, 255, 190, .10); }
.tp-duong-k::-webkit-scrollbar { display: none; }
.scr--tp .tp-duong { position: relative; margin: 0; overflow: visible; }
.tp-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.scr--tp .cd-doan { stroke: rgba(255, 255, 255, .32); }
.scr--tp .cd-doan.is-di { stroke: var(--tone); stroke-opacity: .85; }
.scr--tp .cd-sao { background: var(--night-2); }
.scr--tp .cd-sao__i path { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); }
.scr--tp .cd-sao__i.is-co path { fill: #FFC93C; stroke: #E8A70C; }
.scr--tp .cd-nut.is-khoa { --b: #3A2785; --bd: #24165E; color: #C9BEF0; }
.scr--tp .tp-o.is-ca-bai .cd-nut.is-khoa { --b: #FFC93C; --bd: #E8A70C; color: #7A5600; }

@media (max-height: 400px) {
  .tpk-the { width: 168px; }
  .tpk-the.is-chon { width: 262px; }
  .tpk-the__b { padding: 7px 10px 9px; }
  .scr--tp .tp-ve { padding: 10px 12px; gap: 4px; }
  .scr--tp .tp-ve__cuong, .scr--tp .tp-ve__cuong :is(svg, .nv3d img) { width: 56px; height: 56px; }
  /* 360 px (Galaxy S26 ngang, 740/780×360): nút "Xem bản nhạc" bị lẹm 6 px ở đáy thẻ vé → khối điểm và nút gọn lại */
  .scr--tp .tp-ve .tp-diem { gap: 3px; padding: 6px 10px; }
  .scr--tp .tp-ve__nuts .po-nut { min-height: 44px; }
}
@media (max-width: 860px) {
  .scr--kho .tpk-dau { gap: 10px; }
  .scr--kho .tpk-dau .scr__title { font-size: 19px; }
  .tpk-loc { gap: 6px; }
  .tpk-loc__b { min-height: 40px; padding: 0 10px; font-size: 12.5px; }
}
/* khổ hẹp: hàng lọc không đủ chỗ cạnh tiêu đề → tiêu đề chỉ còn cho trình đọc màn hình (mục "Tác phẩm" của thanh dọc đang sáng) */
@media (max-width: 780px) {
  .scr--kho .tpk-dau .scr__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tp-man { grid-template-columns: minmax(184px, 210px) minmax(0, 1fr); }
}
/* thanh chỉ báo Home (--safe-b): thẻ vé co lề dưới, nút "Xem bản nhạc" không lẹm */
@media (max-height: 400px) {
  .scr--tp .tp-ve { padding-top: max(6px, calc(10px - var(--safe-b) / 4)); padding-bottom: max(4px, calc(10px - var(--safe-b) / 3)); }
  .scr--tp .scr__main { padding-bottom: max(2px, calc(12px - var(--safe-b))); }
  .scr--tp .tp-ve { gap: max(2px, calc(4px - var(--safe-b) / 10)); }
}