/* Copyrights Hub — CMS layout riêng, dựa trên tokens.css + components.css của bản giao thiết kế. */
html, body { height: 100%; }
body { overflow: hidden; }
#app { height: 100vh; width: 100vw; }

.ch-shell { display: flex; height: 100vh; width: 100vw; background: var(--bg-page); }
.ch-sidebar { width: var(--sidebar-w-admin); flex: 0 0 var(--sidebar-w-admin); display: flex; flex-direction: column; justify-content: space-between; }
.ch-sidebar__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.ch-sidebar__section { color: var(--cta); font-weight: 700; }
.ch-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.ch-brand__mark { width: 30px; height: 30px; color: var(--text-head); flex: 0 0 30px; }
.ch-brand__mark svg { width: 100%; height: 100%; display: block; }
.ch-brand__name { font-family: var(--font-display); font-weight: 700; color: var(--text-head); font-size: var(--text-md); }
.ch-sidebar__footer { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.ch-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 4px; }
.ch-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--bg-tint); color: var(--cta); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); }
.ch-sidebar__uname { color: var(--text-head); font-size: var(--text-sm); font-weight: 600; }

.ch-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ch-topbar__actions { display: flex; gap: 10px; align-items: center; }
.ch-content { flex: 1; overflow-y: auto; padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Bổ sung 2026-09-20: bug flexbox kinh điển — không có dòng này, các thẻ con (.ch-card/
   .ch-table/...) bị CO LẠI (flex-shrink mặc định = 1) để vừa khít .ch-content thay vì được
   phép cao hơn khung rồi cuộn — nội dung dài (vd D06 89 bài, không phân trang) bị ẩn mất phần
   dưới mà KHÔNG có thanh cuộn nào hoạt động. flex-shrink: 0 buộc mỗi thẻ con giữ đúng chiều cao
   tự nhiên của nó, để .ch-content (overflow-y: auto ở trên) cuộn đúng như thiết kế. */
.ch-content > * { flex-shrink: 0; }

/* ---------- Trạng thái ---------- */
.ch-skel-wrap { display: flex; flex-direction: column; gap: 10px; }
.ch-skel { height: 52px; border-radius: 12px; background: var(--bg-elev); animation: ch-pulse 1.2s ease-in-out infinite; }
@keyframes ch-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ch-state-card { align-items: center; text-align: center; padding: 40px 20px; gap: 12px; }
.ch-state-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--bg-elev); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.ch-state-icon i { width: 22px; height: 22px; }

/* ---------- Toast ---------- */
.ch-toast-host { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 999; }
.ch-toast { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-head);
  padding: 12px 16px; border-radius: 10px; font-size: var(--text-md); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease-out, transform .2s ease-out; }
.ch-toast--in { opacity: 1; transform: translateY(0); }
.ch-toast--ok { border-color: var(--ok); }
.ch-toast--danger { border-color: var(--danger); }

/* ---------- Mất mạng ---------- */
.ch-offline-bar { background: var(--bg-tint); color: var(--warn); padding: 8px 16px; font-size: var(--text-sm); text-align: center; }

/* ---------- Modal ---------- */
.ch-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.ch-modal { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 24px; width: 520px; max-width: 92vw; max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.ch-modal--wide { width: 920px; }
.ch-modal__title { font-family: var(--font-display); font-weight: 700; color: var(--text-head); font-size: var(--text-xl); margin-bottom: 14px; }
.ch-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Login ---------- */
.ch-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--grad-hero); }
.ch-login-card { width: 400px; max-width: 92vw; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow-lg); }
.ch-login-card__logo { width: 56px; height: 56px; color: var(--text-head); margin-bottom: 18px; filter: drop-shadow(var(--shadow-cta)); }
.ch-login-card__logo svg { width: 100%; height: 100%; display: block; }

/* ---------- Cấu trúc chung ---------- */
.ch-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ch-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ch-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ch-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ch-stat { display: flex; flex-direction: column; gap: 6px; }
.ch-stat__value { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--text-head); }
.ch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ch-toolbar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-search { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 0 12px; height: 40px; min-width: 220px; }
.ch-search input { background: transparent; border: none; outline: none; color: var(--text-head); font-family: var(--font-sans); font-size: var(--text-md); width: 100%; }
.ch-search i { color: var(--text-hint); width: 16px; height: 16px; }

.ch-subtabs { border-radius: var(--r-md); }
.ch-subtabs__item { cursor: pointer; }

/* ---------- Bảng cột theo ngữ cảnh (đặt qua inline style grid-template-columns) ---------- */
.ch-table__head > *, .ch-table__row > * { display: flex; align-items: center; gap: 6px; }
.ch-row-link { cursor: pointer; }
.ch-row-link:hover { background: rgba(255,255,255,0.03); }
.ch-chevron { color: var(--text-dim); margin-left: auto; }

.ch-input--err { border-color: var(--danger) !important; }
.ch-form { display: flex; flex-direction: column; gap: 14px; }
.ch-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Wizard D05-01 ---------- */
.ch-steps { display: flex; gap: 8px; }
.ch-step { flex: 1; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-muted); }
.ch-step--on { border-color: var(--border-brand); color: var(--text-head); background: var(--bg-tint); font-weight: 600; }
.ch-step--done { color: var(--ok); }
.ch-dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: 40px; text-align: center; color: var(--text-muted); cursor: pointer; }
.ch-dropzone:hover { border-color: var(--border-brand); }

/* scroll thanh mảnh */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) {
  .ch-sidebar { width: 64px; flex-basis: 64px; }
  /* Sửa 2026-09-22: .ch-label là class dùng chung cho MỌI nhãn form/section trong cả app (vd
     "Mã kết nối máy phát", "Thiết bị"...), không chỉ riêng 2 dòng phụ đề trong sidebar (brand
     sub + vai trò user). Trước đây chọn nhầm .ch-label (không scope vào .ch-sidebar) nên màn
     hình <=1100px ẨN MẤT mọi nhãn field ở toàn bộ các màn — đây là lý do khách báo "không thấy
     mã để ghép máy phát" (tái hiện được khi thu cửa sổ trình duyệt xuống 800px). Scope lại
     đúng chỉ còn 2 dòng phụ đề thật sự nằm trong sidebar. */
  .ch-sidebar__item span, .ch-brand__name, .ch-sidebar__uname, .ch-sidebar .ch-label, .ch-sidebar__footer .ch-btn span { display: none; }
}