/* Bàn nhạc nền — bố cục chung (cộng với một "da" riêng mỗi trang). Góc dưới phải, nằm trên nội dung nhưng dưới hộp thoại/menu.
   Biến da: --bn-bg --bn-ink --bn-ink2 --bn-line --bn-accent --bn-accent-ink --bn-track --bn-fill --bn-font --bn-font-title --bn-radius --bn-shadow
   Vị trí: --bn-r / --bn-b (máy tính), --bn-r-m / --bn-b-m (điện thoại ≤700px). */
#bn{position:fixed;right:var(--bn-r,16px);bottom:var(--bn-b,16px);z-index:var(--bn-z,58);display:flex;align-items:flex-end;gap:10px;
  font-family:var(--bn-font,system-ui,sans-serif);color:var(--bn-ink,#222);-webkit-tap-highlight-color:transparent}
#bn *{box-sizing:border-box}
#bn .bn-panel{display:flex;align-items:center;gap:12px;width:318px;padding:var(--bn-pad,12px);
  background:var(--bn-bg);border-radius:var(--bn-radius,10px);box-shadow:var(--bn-shadow);
  transform-origin:100% 100%;transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s}
#bn[data-open="0"] .bn-panel{opacity:0;transform:translateX(14px) scale(.96);pointer-events:none;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
#bn .bn-cover{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:50%;overflow:hidden;background:var(--bn-cover-bg,rgba(0,0,0,.12));
  box-shadow:var(--bn-cover-ring,none)}
#bn .bn-cover img{display:none;width:100%;height:100%;object-fit:cover}
#bn .bn-cover.has img{display:block}
#bn .bn-cover.is-default img{object-fit:contain;padding:9px}
#bn[data-playing="1"] .bn-cover{animation:bn-spin 14s linear infinite}
#bn .bn-main{flex:1 1 auto;min-width:0}
#bn .bn-head{display:flex;align-items:baseline;gap:6px;min-height:20px;padding-right:26px;position:relative}
#bn .bn-t{font-family:var(--bn-font-title,inherit);font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
#bn .bn-a{font-size:12px;line-height:20px;color:var(--bn-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0}
#bn .bn-a:empty{display:none}
#bn .bn-x{position:absolute;right:-6px;top:-6px;width:28px;height:28px;border-radius:50%;color:var(--bn-ink2)}
#bn .bn-x svg{width:18px;height:18px}
#bn .bn-bar{position:relative;height:16px;margin:4px 0 2px;cursor:pointer;touch-action:none;border-radius:8px}
#bn .bn-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--bn-track)}
#bn .bn-bar i{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--bn-fill);width:0;pointer-events:none}
#bn .bn-bar i::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--bn-fill-knob,var(--bn-accent));box-shadow:0 0 0 2px var(--bn-ring,#fff)}
#bn .bn-row{display:flex;align-items:center;gap:2px}
#bn .bn-b{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;flex:0 0 auto;transition:background-color .15s,transform .15s,color .15s}
#bn .bn-b svg{width:20px;height:20px}
#bn .bn-b:hover:not(:disabled){background:var(--bn-hover,rgba(0,0,0,.08))}
#bn .bn-b:disabled{opacity:.35;cursor:default}
#bn .bn-play{width:38px;height:38px;margin:0 2px;background:var(--bn-accent);color:var(--bn-accent-ink,#fff);box-shadow:var(--bn-play-shadow,none)}
#bn .bn-play:hover:not(:disabled){background:var(--bn-accent);filter:brightness(1.08);transform:scale(1.05)}
#bn .bn-play svg{width:22px;height:22px}
#bn .bn-time{margin-left:auto;padding:0 6px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--bn-ink2);white-space:nowrap}
#bn .bn-vol{flex:0 0 52px;width:52px;height:16px;margin:0 4px 0 2px;accent-color:var(--bn-accent-solid,#1f6fb2);cursor:pointer;background:none}
#bn .bn-disc{flex:0 0 auto;display:grid;place-items:center;width:var(--bn-disc,48px);height:var(--bn-disc,48px);padding:0;border-radius:50%;cursor:pointer;
  background:var(--bn-disc-bg,var(--bn-bg));color:var(--bn-disc-ink,var(--bn-ink));border:var(--bn-disc-border,0);box-shadow:var(--bn-shadow);transition:transform .15s,filter .15s}
#bn .bn-disc:hover{transform:translateY(-2px);filter:brightness(1.06)}
#bn .bn-disc svg{width:24px;height:24px}
#bn[data-playing="1"] .bn-disc svg{animation:bn-bob 1.6s ease-in-out infinite}
#bn[data-playing="1"] .bn-disc{box-shadow:var(--bn-shadow),0 0 0 3px var(--bn-live,rgba(255,255,255,.0))}
#bn button:focus-visible,#bn .bn-bar:focus-visible,#bn .bn-vol:focus-visible{outline:2px solid var(--bn-focus,currentColor);outline-offset:2px}
@keyframes bn-spin{to{transform:rotate(360deg)}}
@keyframes bn-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){
  #bn[data-playing="1"] .bn-cover,#bn[data-playing="1"] .bn-disc svg{animation:none}
  #bn .bn-panel,#bn .bn-disc,#bn .bn-b{transition:none}
}
/* điện thoại: gọn, đĩa 44px ở góc, bảng mở ra phía trên đĩa, bỏ thanh âm lượng, giờ và (mặc định) ảnh đĩa */
@media (max-width:700px){
  #bn{right:var(--bn-r-m,10px);bottom:var(--bn-b-m,10px);flex-direction:column;align-items:flex-end;gap:8px}
  #bn .bn-panel{width:var(--bn-panel-w-m,min(196px,calc(100vw - 192px)));gap:9px;padding:9px}
  #bn .bn-cover{display:var(--bn-cover-m,none);width:44px;height:44px}
  #bn .bn-cover.is-default img{padding:6px}
  #bn .bn-t{font-size:14px}
  #bn .bn-a{display:none}
  #bn .bn-vol,#bn .bn-time{display:none}
  #bn .bn-row{justify-content:space-between}
  #bn .bn-b{width:36px;height:36px}
  #bn .bn-play{width:40px;height:40px}
  #bn .bn-disc{width:var(--bn-disc-m,44px);height:var(--bn-disc-m,44px)}
  #bn .bn-disc svg{width:22px;height:22px}
  #bn[data-open="0"] .bn-panel{transform:translateY(10px) scale(.96)}
}
@media print{#bn{display:none}}

/* Da Tiên Ma Vô Giới (mẫu C Cổ Điển): sơn mài nâu đỏ, viền đồng, nút son đỏ, chữ Philosopher + Arsenal.
   Nút hiệu ứng (.fx-nut) nằm góc TRÁI dưới (14px, 46px) → bàn nhạc ở góc phải dưới; menu mở (drawer z 60) và hộp thoại (z 120) phủ lên bàn nhạc. */
#bn{
  --bn-font:var(--f-body,"Arsenal","Segoe UI",system-ui,sans-serif);
  --bn-font-title:var(--f-display,"Philosopher",Georgia,serif);
  --bn-bg:linear-gradient(180deg,rgba(36,19,11,.97),rgba(22,12,7,.97));
  --bn-ink:var(--cream,#f3e6c8);
  --bn-ink2:var(--sand,#cdb68c);
  --bn-track:rgba(205,182,140,.25);
  --bn-fill:linear-gradient(90deg,#a77a36,#e6c98a);
  --bn-fill-knob:#e6c98a;
  --bn-accent:radial-gradient(circle at 40% 30%,#c4452b,#8a2412 70%);
  --bn-accent-ink:#fff4dc;
  --bn-hover:rgba(230,201,138,.14);
  --bn-focus:#e6c98a;
  --bn-radius:4px;
  --bn-shadow:0 14px 30px -12px rgba(0,0,0,.85),0 0 0 1px #a77a36,inset 0 0 0 3px #160c07,inset 0 0 0 4px rgba(167,122,54,.55);
  --bn-cover-bg:radial-gradient(circle at 40% 35%,#4c321a,#1a0f07);
  --bn-cover-ring:0 0 0 1.5px #a77a36,0 0 0 4px #160c07,0 0 0 5px rgba(167,122,54,.6);
  --bn-play-shadow:0 0 0 1.5px #e6c98a,0 4px 12px -4px rgba(0,0,0,.8);
  --bn-disc-bg:radial-gradient(circle at 40% 35%,#4c321a,#1a0f07);
  --bn-disc-ink:#e6c98a;
  --bn-disc-border:1px solid #a77a36;
  --bn-live:rgba(168,48,27,.7);
  --bn-ring:#1d0f08;
  --bn-accent-solid:#a8301b;
  --bn-pad:14px 16px;
  --bn-r:16px;--bn-b:16px;
  --bn-r-m:12px;--bn-b-m:14px;
  --bn-panel-w-m:min(268px,calc(100vw - 24px));--bn-cover-m:block;
  --bn-z:55;
}
#bn .bn-panel{padding:var(--bn-pad)}
#bn .bn-disc{box-shadow:0 6px 16px -6px rgba(0,0,0,.8),inset 0 1px 0 rgba(246,226,166,.25)}
#bn[data-playing="1"] .bn-disc{box-shadow:0 6px 16px -6px rgba(0,0,0,.8),0 0 0 3px var(--bn-live),inset 0 1px 0 rgba(246,226,166,.25)}
#bn .bn-disc:hover{border-color:#e6c98a}
#bn .bn-t{letter-spacing:.01em}
@media (max-width:700px){
  #bn .bn-panel{padding:10px 11px}
}