/* ===================================================================
   [chung] MAN HINH NHO DAN - phai nap CUOI CUNG vi toan la @media ghi de
       len tam file phia tren.

   Moi nguoi sua phan man hinh nho cua mang minh trong day,
   nho ghi ro [A]/[B]/[C]/[D] canh quy tac de nguoi sau con biet.
   =================================================================== */

/* --------------- [chung] man hinh nho dan --------------- */
.nav-mini{ display:none; gap:2px; }

@media (max-width:1240px){
  .rail{ width:300px; }
  .side-cards{ width:230px; }
}

/* khong con cho cho panel phai -> hang cho chuyen vao trang bai hat */
@media (max-width:1080px){
  .rail{ display:none; }
  .track-queue{ display:flex; }
}

@media (max-width:880px){
  .sidebar{ display:none; }
  .nav-mini{ display:flex; }
  .mini-now,.mini-right{ width:auto; }
  .view{ padding-left:var(--s4); padding-right:var(--s4); }
  .deck-track{ width:min(240px,54vw); }
  .side-cards{ width:100%; }
  .lyrics-box{ min-width:0; }
  .grid-cards{ grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); }
  .grid-artists{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:var(--s4); }
  .admin-bar{ flex-wrap:wrap; }
  .admin-bar .search{ order:9; max-width:none; }
}

@media (max-width:640px){
  h1.big{ font-size:31px; }
  .hero h1{ font-size:clamp(26px,8vw,36px); }
  .hero{ gap:var(--s4); }
  .topbar{ padding:var(--s3) var(--s4); gap:var(--s2); }
  .search{ max-width:none; min-width:0; padding:8px var(--s3); }
  .search input{ min-width:0; }
  #user-slot{ flex:none; }
  .view{ padding-bottom:150px; }
  /* thanh phat gon lai: bo am luong va nut phu, giu cho ten bai hat */
  .mini-right .vol, .mini-right svg{ display:none; }
  .mini-acts{ display:none; }        /* [A] het cho o thanh phat -> bo trai tim va nut + */
  #c-shuffle, #c-repeat{ display:none; }
  .mini-row{ padding:10px var(--s4); gap:var(--s3); }
  .mini-ctrl{ flex:none; gap:var(--s2); }
  .mini-now{ flex:1; min-width:0; }
  .mini-right{ flex:none; }
  /* danh sach bai hat: bo cot album, luon hien nut thao tac */
  .list-head{ display:none; }
  .track-row{ grid-template-columns:26px 1fr 52px auto; gap:var(--s3); padding:10px var(--s3); }
  .track-row > :nth-child(3){ display:none; }
  .row-actions .icon-btn{ opacity:1; }
  .t-title{ font-size:15.5px; }
  .tabs{ gap:6px; }
  .tab{ padding:8px 14px; font-size:13px; }
  .modal-card{ padding:var(--s4); }
}

/* (7) bang quan tri: cuon ngang trong khung thay vi tran trang */
#panel{ overflow-x:auto; }
#panel .table{ min-width:820px; }