/* ===================================================================
   [B] KHAM PHA - the bang xep hang, anh bia vuong, luoi nghe si, luoi album.

   Hai lop .card va .cover nam trong day nhung la [chung]: mang A dung
   .card cho the phu o cot phai, C dung cho hop thoai, D dung cho o thong ke.
   Sua hai lop do thi bao nhom; phan con lai la cua B.
   =================================================================== */

/* [B] the bang xep hang */
.scroller{ display:flex; gap:var(--s4); overflow-x:auto; padding-bottom:var(--s3); scroll-snap-type:x mandatory; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.chart-card{ scroll-snap-align:start; flex-shrink:0; width:224px; text-align:left; padding:var(--s4);
  display:flex; flex-direction:column; gap:12px; color:var(--ink); }
/* [B] anh bia vuong, rong bang khung the */
.chart-cover{ display:block; width:100%; aspect-ratio:1; border-radius:var(--r-md); }
.chart-card:hover{ border-color:var(--acc-line); box-shadow:var(--shadow-md); }
.cover{ display:inline-block; border-radius:var(--r-sm); flex-shrink:0; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(20,23,26,.10); }
.card-foot{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--faint);
  border-top:1px solid var(--line); padding-top:10px; }

/* [B] luoi nghe si / album */
.grid{ display:grid; gap:var(--s4); }
.grid-artists{ grid-template-columns:repeat(auto-fill, minmax(178px,1fr)); gap:var(--s6); }
.grid-cards{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); }
.artist{ text-align:center; background:none; border:0; color:var(--ink); }
.artist .cover{ display:block; width:100px; height:100px; border-radius:50%; margin:0 auto; box-shadow:var(--shadow-md); }
.artist:hover .cover{ box-shadow:var(--shadow-lg); }
.tile{ padding:var(--s4); display:flex; flex-direction:column; gap:13px; text-align:left; color:var(--ink); }
.tile:hover{ background:var(--panel2); box-shadow:var(--shadow-md); }
.tile .cover{ width:100%; aspect-ratio:1; border-radius:var(--r-md); }
.tile-name{ font-size:17px; }
.tile{ position:relative; }