/* ===================================================================
   [D] TRANG QUAN TRI - thanh tren, o thong ke, bang du lieu, o chon nhieu.
       Chi trang /admin dung, khong anh huong trang chinh.
   =================================================================== */

/* --------------- [D] trang quan tri --------------- */
.admin{ height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.admin-bar{ display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s6);
  background:var(--chrome); border-bottom:1px solid var(--line); }
.admin-body{ flex:1; overflow-y:auto; padding:var(--s6); }
.stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s3); margin-bottom:var(--s6); }
.stat{ padding:var(--s4); }
.stat-n{ font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.03em; }
.table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.table th{ text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  padding:11px var(--s3); background:var(--panel2); border-bottom:1px solid var(--line); font-weight:400; }
.table td{ padding:10px var(--s3); border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.table tr:last-child td{ border-bottom:0; }
.table tr:hover td{ background:var(--panel2); }
.badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px;
  background:var(--acc-soft); color:var(--gold); border:1px solid var(--acc-line); }
.badge-plain{ background:var(--panel2); color:var(--muted); border-color:var(--line); }
.cell-actions{ display:flex; gap:6px; justify-content:flex-end; }
.tag-genre{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:11.5px;
  background:var(--acc-soft); color:var(--gold); border:1px solid var(--acc-line); }
.pick-list{ display:flex; flex-direction:column; gap:2px; max-height:190px; overflow-y:auto;
  border:1px solid var(--line); border-radius:var(--r-md); padding:6px; background:#fff; }
.pick-row{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--r-md);
  font-size:13.5px; cursor:pointer; }
.pick-row:hover{ background:var(--panel2); }
.pick-row input{ accent-color:var(--goldb); }
.avatar-ph{ display:grid; place-items:center; border-radius:50%; background:var(--panel2);
  color:var(--faint); flex-shrink:0; box-shadow:inset 0 0 0 1px var(--line); }
.mini-input{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:6px 9px;
  font-size:13px; width:100%; outline:none; }
.mini-input:focus{ border-color:var(--goldb); }

/* O chon anh bia kem khung xem truoc (hop thoai tai nhac len va sua bai hat). */
.cover-pick{ display:flex; gap:var(--s4); align-items:flex-start; }
.cover-pick-view{ width:96px; height:96px; border-radius:var(--r-md); flex-shrink:0;
  display:grid; place-items:center; text-align:center; font-size:11px; color:var(--faint);
  background-color:var(--panel2); background-size:cover; background-position:center;
  border:1px dashed var(--line); }
.cover-pick-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.cover-pick-rm{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }