/* ============================================================
   Copyrights Hub — Component styles
   Yêu cầu: nạp tokens.css trước file này.
   Font: Google Fonts — Poppins, JetBrains Mono.
   Icon: Lucide (https://unpkg.com/lucide@0.474.0/dist/umd/lucide.min.js)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-head); }
svg { stroke-width: 2; flex: 0 0 auto; }

/* ---------- Chữ ---------- */
.ch-display { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); color: var(--text-head); line-height: 1.12; }
.ch-title   { font-size: var(--text-2xl); }
.ch-section { font-size: var(--text-xl); }
.ch-label   { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.ch-mono    { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--text-hint); }
.ch-muted   { color: var(--text-muted); }

/* ---------- Thẻ ---------- */
.ch-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.ch-card--active { background: var(--bg-tint); border-color: var(--border-brand); }
.ch-card--warn   { border-color: var(--warn); }
.ch-card--danger { border-color: var(--danger); }
.ch-card--lg { border-radius: var(--r-lg); padding: var(--sp-5); }

/* ---------- Nút ---------- */
.ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 46px; padding: 0 18px; border-radius: var(--r-md); font-size: var(--text-lg);
  border: 1px solid var(--border-strong); color: var(--text-body); background: transparent;
  cursor: pointer; transition: transform .14s, background .14s, box-shadow .14s; }
.ch-btn:hover  { background: rgba(255,255,255,0.04); }
.ch-btn:active { transform: scale(0.97); }
.ch-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ch-btn--primary { background: var(--cta-grad); color: var(--text-on-cta); border-color: transparent; font-weight: 600; border-radius: var(--r-pill); box-shadow: var(--shadow-cta); }
.ch-btn--primary:hover { filter: brightness(1.06); }
.ch-btn--danger  { border-color: #5c2a24; color: var(--danger); }
.ch-btn--sm { height: 38px; padding: 0 14px; font-size: var(--text-md); }
.ch-btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Ô nhập ---------- */
.ch-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ch-input { height: 48px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--border-strong);
  color: var(--text-head); font-family: var(--font-sans); font-size: var(--text-base); }
.ch-input::placeholder { color: var(--text-hint); }
.ch-input:focus { outline: none; border-color: var(--border-brand); box-shadow: var(--focus-ring); }
.ch-textarea { min-height: 84px; padding: 12px 14px; resize: vertical; }
.ch-hint { font-size: var(--text-sm); color: var(--text-hint); }
.ch-error { font-size: var(--text-sm); color: var(--danger); }

/* ---------- Chip / pill / badge ---------- */
.ch-chip { display: inline-flex; align-items: center; padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-body); font-size: var(--text-md); }
.ch-chip--on { background: var(--cta); color: var(--text-on-cta); border-color: transparent; font-weight: 600; }
.ch-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: .03em; background: var(--bg-chip); color: var(--text-muted); }
.ch-badge--ok     { background: var(--ok-bg);     color: var(--ok); }
.ch-badge--warn   { background: var(--warn-bg);   color: var(--warn); }
.ch-badge--danger { background: var(--danger-bg); color: var(--danger); }
.ch-badge--cta    { background: var(--cta);       color: var(--text-on-cta); }

/* ---------- Danh sách ---------- */
.ch-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ch-list__row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 15px; border-bottom: 1px solid var(--border); }
.ch-list__row:last-child { border-bottom: none; }
.ch-list__row--active { background: var(--bg-tint); }

/* ---------- Bảng (desktop) ---------- */
.ch-table { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ch-table__head, .ch-table__row { display: grid; align-items: center; }
.ch-table__head { background: var(--bg-page); border-bottom: 1px solid var(--border); }
.ch-table__head > * { padding: 10px 12px; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.ch-table__row { border-bottom: 1px solid var(--border); }
.ch-table__row > * { padding: 11px 12px; font-size: var(--text-md); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-table__row--active { background: var(--bg-tint); }
.ch-num { font-family: var(--font-mono); color: var(--text-head); }

/* ---------- Điều hướng ---------- */
.ch-tabbar { height: var(--tabbar-h); display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 9px 2px 18px; background: var(--bg-card); border-top: 1px solid var(--border); }
.ch-tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; color: #96705a; }
.ch-tabbar__item--on { color: var(--accent); font-weight: 600; }

.ch-sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--bg-sidebar);
  border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 5px; }
.ch-sidebar__item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-md); font-size: var(--text-base); color: var(--text-muted); }
.ch-sidebar__item--on { background: var(--nav-active-bg); color: var(--cta); font-weight: 600; }
.ch-sidebar__sub { margin-left: 30px; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--text-md); color: var(--text-muted); }
.ch-sidebar__sub--on { background: var(--bg-tint); color: var(--text-head); font-weight: 600; }
/* Bổ sung 2026-09-20: tiêu đề nhóm khu vực nav (Vận hành & Nội dung / Quản lý khách hàng). */
.ch-sidebar__section { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding: 14px 13px 4px; }
.ch-sidebar__section:first-child { padding-top: 2px; }

.ch-topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.ch-crumb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-hint); }

.ch-subtabs { display: flex; gap: 4px; padding: 0 22px; background: var(--bg-page); border-bottom: 1px solid var(--border); }
.ch-subtabs__item { padding: 12px 14px; font-size: var(--text-md); color: var(--text-muted); }
.ch-subtabs__item--on { color: var(--text-head); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cta); }

/* ---------- Trình phát ---------- */
.ch-player { background: var(--grad-hero); color: #fff; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.ch-player__art { border-radius: var(--r-lg); background: var(--grad-card); box-shadow: var(--shadow-lg); }
.ch-progress { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); position: relative; }
.ch-progress__bar { position: absolute; inset: 0 auto 0 0; background: #fff; border-radius: 3px; }
.ch-playbtn { width: 66px; height: 66px; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ch-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--online); }

/* ---------- Thanh tiến trình / thanh đo ---------- */
.ch-meter { height: 8px; border-radius: 4px; background: var(--bg-sunken); position: relative; }
.ch-meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--cta); border-radius: 4px; }

/* ---------- Khối ghi chú spec (chỉ dùng trong tài liệu) ---------- */
.ch-spec { padding: 13px 15px; border-radius: var(--r-md); background: #15100e; border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; color: var(--text-muted); }