/* =========================================================================
   admin-custom.css — Tuỳ biến riêng cho khu vực quản trị, đặt TRÊN AdminLTE.
   Không sửa trực tiếp CSS gốc của AdminLTE để dễ nâng cấp về sau.
   ========================================================================= */

:root{
  --music-accent:#F2A93B;
}

/* Chặn tràn ngang toàn trang (nguyên nhân chính gây "vỡ khung" trên mobile:
   một bảng dữ liệu rộng đẩy cả trang cuộn ngang thay vì chỉ cuộn trong bảng) */
html, body{ overflow-x:hidden; max-width:100%; }
.app-main, .app-content, .app-content-header{ overflow-x:hidden; max-width:100%; }
[data-icon]{ display:inline-flex; align-items:center; justify-content:center; }

.brand-link .brand-text{ font-weight:700; }
.app-sidebar .nav-link.active{ background:var(--music-accent) !important; color:#1B1330 !important; font-weight:600; }
.app-sidebar .nav-icon{ opacity:.85; margin-right:.4rem; }

/* Navbar: tránh chữ tràn / đè lên nhau trên màn hình hẹp */
.admin-username{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:400px){ .admin-username{ max-width:60px; } }

/* ---------- Ảnh đại diện / thumbnail ---------- */
.thumb-chip{
  width:42px; height:42px; border-radius:8px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#fff; background-size:cover; background-position:center;
}
.thumb-chip.round{ border-radius:50%; }
.thumb-chip img{ width:100%; height:100%; object-fit:cover; }
.thumb-preview{
  width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid #dee2e6;
  display:flex; align-items:center; justify-content:center; background:#f1f3f5; color:#adb5bd; flex:none;
}
.thumb-preview.round{ border-radius:50%; }
.thumb-preview img{ width:100%; height:100%; object-fit:cover; }
.thumb-field{ display:flex; gap:12px; align-items:flex-start; }
.thumb-field .thumb-input{ flex:1; }

.table-thumb-cell{ display:flex; align-items:center; gap:10px; }
.badge-hot{ background:#EF5B9C; }

.stat-card small{ opacity:.85; }
.form-hint{ font-size:12px; color:#6c757d; margin-top:4px; }

.crud-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.crud-toolbar input[type="search"]{ min-width:0; flex:1 1 180px; }

.lyrics-textarea{ font-family:"Courier New", monospace; font-size:13px; }

.demo-alert{ font-size:13px; }

/* Bảng dữ liệu: luôn cuộn NGANG bên trong khung của nó, không đẩy cả trang */
.table-responsive{ -webkit-overflow-scrolling:touch; }
.table > :not(caption) > * > *{ vertical-align:middle; }

/* Ẩn bớt cột phụ trên màn hình nhỏ để đỡ phải cuộn ngang nhiều */
@media (max-width:767px){
  .table .col-optional{ display:none; }
}

/* làm gọn phần action buttons trong bảng */
.action-btns{ display:flex; gap:6px; justify-content:flex-end; }
.action-btns .btn{ padding:.3rem .5rem; font-size:.8rem; display:inline-flex; align-items:center; }

/* ---------- Modal: toàn màn hình trên mobile để luôn thấy nút Lưu/Huỷ ---------- */
@media (max-width:576px){
  .modal-dialog{ margin:0; max-width:100%; height:100%; }
  .modal-content{ height:100%; border-radius:0; }
  .modal-body{ overflow-y:auto; }
}
.modal-footer{ position:sticky; bottom:0; background:#fff; z-index:2; }
.modal-header{ position:sticky; top:0; background:#fff; z-index:2; }

.rotate90{ display:inline-block; transform:rotate(90deg); }
.small-box-icon{ display:flex; align-items:center; justify-content:center; }