/* ===================================================================
   [chung] HANG BAI HAT - trackRows() nam trong js/core.js nen bang nay
       dung chung cho trang chu (B), nghe si/album (B) va playlist (C).

   Nut trai tim (.like-btn) va cac tab (.tabs/.tab) thuoc mang [C],
   de o day vi di lien voi hang bai hat.
   =================================================================== */

/* [chung] danh sach bai hat - trackRows() nam trong core.js */
.list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--panel); box-shadow:var(--shadow-sm); }
.list-head, .track-row{ display:grid; grid-template-columns:34px 1fr 150px 92px 108px; gap:var(--s4);
  padding:11px var(--s4); align-items:center; border-bottom:1px solid var(--line); }
.list-head{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); background:var(--panel2); }
.track-row{ background:none; border-left:0; border-right:0; border-top:0; color:var(--ink); text-align:left; width:100%; }
.track-row:last-child{ border-bottom:0; }
.track-row:hover{ background:var(--panel2); }
.track-row.is-cur{ background:var(--acc-row); }
.track-row.is-cur .t-title{ color:var(--goldb); }
.t-main{ display:flex; align-items:center; gap:13px; min-width:0; }
.t-title{ font-size:17px; }
.t-sub{ color:var(--muted); font-size:13px; }
.row-actions{ display:flex; align-items:center; justify-content:flex-end; gap:2px; }
.row-actions .icon-btn{ opacity:0; }
.track-row:hover .icon-btn, .icon-btn.on, .icon-btn.liked{ opacity:1; }
/* [C] trai tim: xam khi chua thich, do khi da thich */
.like-btn{ color:var(--faint); }
.like-btn:hover{ color:#c0405f; background:rgba(224,36,94,.08); }
.like-btn.liked{ color:#e0245e; }
.like-btn.liked:hover{ color:#c0405f; }

.tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:var(--s6); }
.tab{ padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:var(--panel);
  color:var(--muted); font-size:14px; }
.tab:hover{ border-color:var(--acc-line); }
.tab.is-on{ border-color:var(--goldb); background:var(--acc-soft); color:var(--goldb); }
.empty{ padding:var(--s8) var(--s4); text-align:center; color:var(--faint);
  border:1px dashed var(--line); border-radius:var(--r-lg); }