/* ===================================================================
   [chung] KHOI DAU TRANG - anh bia lon, tieu de, nut phat, thanh tua.

   Dung chung cho trang bai hat (A) va trang nghe si / album (B).
   Doi o day la ca hai ben doi theo.
   =================================================================== */

/* --------------- [A]+[B] trang bai hat (A) va trang nghe si/album (B) --------------- */
.hero{ display:flex; align-items:flex-end; gap:var(--s6); margin-bottom:var(--s6); flex-wrap:wrap; }
.hero .cover{ width:min(232px,24vw); aspect-ratio:1; border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(36px,4.6vw,64px);
  line-height:1.02; letter-spacing:-.04em; margin:0 0 14px; }
.acc{ text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--goldb); font-weight:700; }
.hero-meta{ display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13.5px; flex-wrap:wrap; }
.actions{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s8); flex-wrap:wrap; }
.play-btn{ width:46px; height:46px; border-radius:50%; border:0; background:var(--goldb); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(15,157,118,.34); }
.play-btn:hover{ background:var(--goldb-hi); }
.play-lg{ width:58px; height:58px; }
.ctrl{ background:none; border:0; color:var(--muted); padding:6px; display:grid; }
.ctrl:hover{ color:var(--ink); }
.ctrl.is-on{ color:var(--goldb); }
.seek{ flex:1; min-width:200px; max-width:520px; height:5px; background:rgba(20,23,26,.12);
  border-radius:4px; position:relative; }
.seek .bar{ height:100%; background:linear-gradient(90deg,var(--gold),var(--goldb)); border-radius:inherit; }
.seek .thumb{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:var(--goldb);
  transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(15,157,118,.5); }