/* Say Piano – màn "Xem bản nhạc" của một tác phẩm (#/ban-nhac/<mã>, student/screens/ban-nhac.js). Khổ ngang, toàn màn, vừa MỘT màn
 * hình (844×390, 915×412, 740×360): thanh trên (quay lại · tên · Tay · thu phóng), giấy kem cuộn NGANG (chỉ vùng bản nhạc cuộn),
 * thanh dưới (Nghe mẫu · tốc độ · Ban nhạc · đàn MIDI). Nút theo hệ .po-nut (khung-ngang.css). Không giãn khoảng cách chữ,
 * hiệu ứng chỉ transform/opacity; giảm chuyển động (html.po-giam) tắt chuyển tiếp. Nạp SAU khung-ngang.css, hom-nay.css. */

/* ---------- khung màn ---------- */
.scr--bn .scr__top { gap: 10px; }
.scr--bn .scr__topr { flex: 1; min-width: 0; }
.scr--bn .scr__main { padding: 4px 14px calc(var(--safe-b, 0px) + 8px) 16px; }
.scr--bn .scr__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bn-man { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

/* thanh trên */
.bn-tren { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.bn-ten { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; color: var(--ink); }
.bn-ten:focus { outline: none; }

/* nhóm nút chọn một: .po-nut kính, nút đang chọn nền trắng */
.bn-nhom { flex: none; display: flex; align-items: center; gap: 6px; }
.bn-chon.is-on { --po-nut-bd: #B9A8F5; background: #fff; color: #0F004E; box-shadow: 0 4px 0 var(--po-nut-bd); }
.bn-chon.is-on:active:not(:disabled) { box-shadow: 0 1px 0 var(--po-nut-bd); }
.bn-z { width: 48px; padding: 0; justify-content: center; }
.bn-z:disabled { opacity: .4; cursor: default; }
.bn-z .ico { width: 20px; height: 20px; }

/* ---------- giấy kem + dải cuộn ngang ---------- */
.bn-khung { position: relative; flex: 1; min-height: 0; display: flex; border-radius: 22px; background: #FFFDF6; overflow: hidden;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8), inset 0 -4px 0 rgba(15, 0, 78, .08); }
.bn-khung.is-phat { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8), 0 0 0 3px #FFE58A; }
/* vệt mờ hai mép khi còn bản nhạc phía trước / phía sau */
.bn-khung::before, .bn-khung::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 28px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.bn-khung::before { left: 0; background: linear-gradient(90deg, #FFFDF6, rgba(255, 253, 246, 0)); }
.bn-khung::after { right: 0; background: linear-gradient(270deg, #FFFDF6, rgba(255, 253, 246, 0)); }
.bn-khung.co-truoc::before, .bn-khung.co-sau::after { opacity: 1; }
.bn-cuon { flex: 1; min-width: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; padding: 0 10px; cursor: grab; }
.bn-cuon::-webkit-scrollbar { display: none; }
.bn-cuon.is-keo { cursor: grabbing; user-select: none; }
.bn-cuon:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(98, 66, 214, .45); border-radius: 22px; }
.bn-giay { flex: none; line-height: 0; margin: 0 auto; }
.bn-svg { display: block; }

/* tay không chọn mờ đi */
.bn-svg [data-k] { transition: opacity .2s; }
.bn-svg.is-tay-rh [data-k="1"], .bn-svg.is-tay-lh [data-k="0"] { opacity: .2; }

/* số ô, tên hợp âm */
.bn-so-o { font-size: 12px; font-weight: 700; fill: #8A7FB0; }
.bn-hop { font-size: 17px; font-weight: 800; fill: #4B2FC2; }

/* vạch đang vang + vòng sáng đầu nốt */
.bn-vach { fill: rgba(255, 201, 60, .22); stroke: rgba(229, 168, 0, .5); stroke-width: 1.5; opacity: 0; transition: transform .12s linear, opacity .2s; }
.bn-vach.is-hien { opacity: 1; }
.bn-con circle { fill: transparent; transition: fill .12s; }
.bn-con circle.is-qua { fill: rgba(98, 66, 214, .1); }
.bn-con circle.is-on { fill: rgba(255, 196, 0, .6); stroke: #E5A800; stroke-width: 2; }
.bn-con circle.is-dan { fill: rgba(54, 194, 107, .55); stroke: #1F8F55; stroke-width: 2.5; }

/* đầu khuông dính bên trái khi đã cuộn qua đầu bài (cùng cỡ, cùng hàng với bản nhạc – dải cuộn có lề 10 px) */
.bn-dau-dinh { position: absolute; z-index: 2; left: 0; top: 50%; transform: translateY(-50%); padding-left: 10px; box-sizing: content-box;
  background: linear-gradient(90deg, #FFFDF6 82%, rgba(255, 253, 246, 0)); padding-right: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.bn-khung.co-dau .bn-dau-dinh { opacity: 1; }
.bn-khung.co-dau::before { opacity: 0; }

/* số đếm vào: góc phải trên của giấy (không che nốt đang đọc) */
.bn-dem { position: absolute; z-index: 3; right: 14px; top: 10px; min-width: 56px; height: 56px; border-radius: 28px;
  display: grid; place-items: center; background: rgba(15, 0, 78, .86); color: #FFE58A; font-size: 32px; font-weight: 800; line-height: 1;
  pointer-events: none; }
.bn-dem:empty { display: none; }

/* ---------- thanh dưới ---------- */
.bn-duoi { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 4px; }
.bn-gian { flex: 1; min-width: 0; }
.bn-nghe { min-width: 132px; justify-content: center; }
.bn-nghe .ico[data-ico="stop"], .bn-nghe .ico[data-ico="play"] { fill: currentColor; stroke: none; }
.bn-ban.is-on { --po-nut-bd: #B9A8F5; background: #fff; color: #0F004E; box-shadow: 0 4px 0 var(--po-nut-bd); }
.bn-ban.is-on .ico { color: #1B874A; }
.bn-dan { position: relative; }
.bn-dan__chu { white-space: nowrap; }
.bn-den { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .25); flex: none; }
.bn-dan.is-noi .bn-den { background: #3FBF6A; }
.bn-den.is-nhay { background: #FFE58A; transform: scale(1.5); }

/* khổ thấp / hẹp */
@media (max-height: 380px) {
  .bn-man { gap: 8px; }
  .bn-ten { font-size: 16.5px; }
}
@media (max-width: 800px) {
  .bn-tren, .bn-duoi { gap: 8px; }
  .bn-nhom { gap: 5px; }
  .bn-nghe { min-width: 118px; }
}

html.po-giam .bn-vach, html.po-giam .bn-dau-dinh, html.po-giam .bn-con circle, html.po-giam .bn-svg [data-k], html.po-giam .bn-khung::before, html.po-giam .bn-khung::after { transition: none; }
html.po-giam .bn-den.is-nhay { transform: none; }

/* thanh trên của khung màn đặt màu chữ chung cho nút (khung-ngang.css .scr__topr button) – giữ màu của hệ .po-nut */
.scr--bn .scr__topr .po-nut--phu { color: var(--ink); }
.scr--bn .scr__topr .bn-chon.is-on { color: #0F004E; }