/* ===================================================================
   [A] TRINH PHAT - loi bai hat chay theo giay, the thong tin phu,
       dia than o cot phai, va thanh phat duoi cung.
   =================================================================== */

.split{ display:flex; gap:var(--s6); align-items:flex-start; flex-wrap:wrap; }
.lyrics-box{ flex:1; min-width:300px; padding:var(--s6); }
.lyrics-mask{ height:378px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent); }
.lyrics-wrap{ transition:transform .5s cubic-bezier(.4,0,.2,1); }
.ly{ height:54px; padding:9px 6px; font-size:19px; line-height:1.15; color:var(--faint);
  background:none; border:0; display:block; width:100%; text-align:left; transition:all .3s; }
.ly.near{ color:var(--muted); }
.ly.on{ font-size:25px; color:var(--ink); font-weight:700; }
.side-cards{ width:262px; display:flex; flex-direction:column; gap:var(--s4); }
.info-card{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.kv{ display:flex; justify-content:space-between; gap:var(--s2); font-size:12.5px; color:var(--muted); }

/* Nhom nut canh ten bai hat o cot phai. */
.np-acts{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.np-acts .icon-btn{ opacity:1; }

/* --------------- [A] dia than --------------- */
.rail{ width:344px; flex-shrink:0; display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s4) var(--s4) var(--s4); overflow:hidden;
  background:var(--chrome); border-left:1px solid var(--line); }
/* phan tren (dia than, thong tin) dung yen - chi hang cho cuon */
.rail-queue{ flex:1; min-height:96px; overflow-y:auto; overflow-x:hidden;
  margin:0 calc(-1 * var(--s2)); padding:0 var(--s2) var(--s2); }
.track-queue{ display:none; }   /* chi hien khi panel phai bi an */
.rail-head{ display:flex; align-items:center; gap:var(--s3); }
.deck{ position:relative; padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, #fbfaf8, #eceae5); }
.deck-track{ width:min(300px,32vw); flex-shrink:0; box-shadow:var(--shadow-md); }
.disc{ position:relative; width:100%; aspect-ratio:1; }
.disc-glow{ position:absolute; inset:-9%; border-radius:50%; filter:blur(26px);
  animation:glowpulse 3.6s ease-in-out infinite; transition:opacity .5s; }
.disc-shadow{ position:absolute; inset:0; border-radius:50%; box-shadow:0 14px 34px rgba(20,23,26,.32); }
.disc-clip{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
.vinyl{ position:absolute; inset:0; border-radius:50%; will-change:transform; backface-visibility:hidden;
  animation:vinylspin var(--spin) linear infinite; animation-play-state:paused; }
.vinyl.spin{ animation-play-state:running; }
/* dia than van la dia den - do la mau that cua dia */
.grooves{ position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle at center, #111 0 2px, #222 2px 3.5px); }
.groove-ring{ position:absolute; inset:6%; border-radius:50%; border:1px solid rgba(255,255,255,.06); }
.label{ position:absolute; inset:31%; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
  background-size:cover; background-position:center; }
.label-t{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:#fff; text-align:center;
  line-height:1.12; padding:0 11px; margin-bottom:3px; max-width:100%; overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,.4); }
.label-a{ font-size:9.5px; color:rgba(255,255,255,.82); padding:0 11px; max-width:100%;
  text-shadow:0 1px 2px rgba(0,0,0,.35); }
.sheen{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 28%, transparent 62%, rgba(255,255,255,.08) 82%, transparent 100%); }
.disc-rim{ position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(20,23,26,.2); }
.rpm{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:var(--s3);
  text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:var(--faint); }
.rpm-dot{ width:6px; height:6px; border-radius:50%; background:rgba(20,23,26,.25); }
.rpm-dot.on{ background:var(--goldb); box-shadow:0 0 8px rgba(15,157,118,.6); }
.queue-item{ display:flex; align-items:center; gap:11px; padding:8px; background:none; border:0;
  border-radius:var(--r-md); text-align:left; width:100%; color:var(--ink); }
.queue-item:hover{ background:var(--panel2); }

/* --------------- [A] thanh phat duoi cung --------------- */
.mini{ flex-shrink:0; position:relative; z-index:6; border-top:1px solid var(--line); background:var(--chrome);
  box-shadow:0 -6px 24px rgba(20,23,26,.06); }
.mini-seek{ height:3px; background:rgba(20,23,26,.10); cursor:pointer; }
.mini-seek .bar{ height:100%; background:linear-gradient(90deg,var(--gold),var(--goldb)); width:0; }
.mini-row{ display:flex; align-items:center; gap:var(--s4); padding:12px var(--s6); }
.mini-now{ display:flex; align-items:center; gap:14px; min-width:0; width:318px; cursor:pointer;
  border-radius:var(--r-md); padding:4px; margin:-4px; }
.mini-now:hover{ background:var(--panel2); }
.mini-ctrl{ flex:1; display:flex; align-items:center; justify-content:center; gap:var(--s4); }
.mini-right{ width:318px; display:flex; align-items:center; justify-content:flex-end; gap:14px; }
/* Trai tim + nut "+" ngay canh ten bai dang phat: hien san, khong doi ro chuot. */
.mini-acts{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.mini-acts .icon-btn{ opacity:1; }
.vol{ width:90px; height:4px; background:rgba(20,23,26,.14); border-radius:3px; cursor:pointer; }
.vol .bar{ height:100%; background:var(--goldb); border-radius:3px; }