/* ===========================================================================
   JAPANO ADMIN — HỆ THIẾT KẾ
   ---------------------------------------------------------------------------
   Nguồn sự thật của bảng màu, thang chữ, bo góc và khoảng cách là
   `mobile/theme/tokens.ts`. Mọi giá trị ở tầng token bên dưới đều chép đúng từ
   đó, để cổng quản trị và ứng dụng trên điện thoại nhìn ra là MỘT sản phẩm.

   Nguyên tắc kế thừa từ app:
     · Nền trung tính, viền mảnh, chữ rõ thứ bậc. Trang trí càng ít càng tốt.
     · Nút hành động chính dùng ĐEN. Đỏ chu sa là màu nhấn duy nhất và phải
       dùng tiết chế — chỉ cho chỉ báo cần chú ý.
     · Thẻ KHÔNG đổ bóng. Viền và khoảng trắng là đủ. Bóng chỉ dành cho thứ
       thực sự nổi lên trên mặt phẳng: hộp thoại, ngăn kéo, toast.
     · Bo góc tiết chế — giao diện thời trang cần cảm giác sắc nét.

   Thứ tự các tầng: token → nền → bố cục → thành phần → chuyển động → co giãn.
   =========================================================================== */

/* ───────────────────────── PHÔNG CHỮ ─────────────────────────
   Arimo — đúng phông app đang dùng (mobile/app/_layout.tsx nạp Arimo 400/500/
   600/700). Tệp .ttf lấy từ @expo-google-fonts/arimo, đặt cạnh trang này nên
   không cần mạng và không phụ thuộc CDN nào.
   Arimo tương thích thước với Arial, nên khi phông chưa tải xong, bản dự phòng
   xếp chữ ra đúng chiều rộng — không bị nhảy layout. */
@font-face{font-family:'Arimo';src:url('fonts/Arimo_400Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Arimo';src:url('fonts/Arimo_500Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Arimo';src:url('fonts/Arimo_600SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Arimo';src:url('fonts/Arimo_700Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
/* Ionicons — cùng tệp phông biểu tượng mà app render qua @expo/vector-icons. */
@font-face{font-family:'Ionicons';src:url('fonts/Ionicons.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block}

:root{
  /* ═══ MÀU — chép từ mobile/theme/tokens.ts ═══ */
  --bg:#F7F7F5;                 /* neutral100 — nền trang */
  --bg-alt:#FAFAF8;             /* neutral50 */
  --surface:#FFFFFF;            /* neutral0 — mặt thẻ */
  --surface-muted:#F1F1EE;      /* neutral150 — mặt chìm */

  --text-primary:#141414;       /* ink900 */
  --text-secondary:#686868;     /* ink500 */
  --text-muted:#696969;         /* chữ nhỏ vẫn đạt WCAG AA trên nền trắng */
  --text-disabled:#B4B4B0;      /* ink300 */
  --text-on-dark:#FFFFFF;

  --border-c:#E5E5E0;           /* neutral200 */
  --border-strong:#CFCFC9;      /* neutral300 */

  --brand:#111111;              /* black — hành động chính, mục đang chọn */
  --brand-hover:#000000;
  --brand-soft:#F1F1EE;
  --on-brand:#FFFFFF;

  --accent:#C43A30;             /* vermilion — màu nhấn DUY NHẤT */
  --accent-deep:#9E2B23;
  --accent-soft:#FBEEEC;

  --success:#2E7D4F;  --success-soft:#EDF6F0;
  --warning:#7A500D;  --warning-soft:#FBF3E6;
  --danger:#B3261E;   --danger-soft:#FCEEED;
  --info:#2C5C8A;     --info-soft:#EEF3F8;

  --overlay-c:rgba(17,17,17,0.42);
  --skeleton:#F1F1EE;
  --skeleton-hi:#E5E5E0;

  /* Nền tối của thanh điều hướng — dùng chính màu chữ chính của app (ink900)
     để khối đen này là cùng một sắc đen với nút hành động chính. */
  --nav-bg:#141414;
  --nav-line:#262624;
  --nav-text:#B4B4B0;
  --nav-text-hi:#FFFFFF;
  --nav-hover:#1F1F1E;
  --nav-group:#9A9A96;

  /* ═══ BO GÓC ═══ */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;

  /* ═══ KHOẢNG CÁCH — thang 4pt ═══ */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ═══ ĐỔ BÓNG — chỉ cho thứ thực sự nổi lên ═══ */
  --shadow-sm:0 1px 2px rgba(17,17,17,.05);
  --shadow-md:0 4px 12px rgba(17,17,17,.08);
  --shadow-lg:0 12px 28px rgba(17,17,17,.14);

  /* ═══ CHUYỂN ĐỘNG ═══ */
  --motion-fast:140ms; --motion-base:200ms; --motion-slow:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ═══ CHỮ ═══ */
  --font-sans:'Arimo','Arial','Helvetica Neue',Helvetica,'Liberation Sans',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* ═══ BỐ CỤC ═══ */
  --sidebar-w:244px;
  --sidebar-w-collapsed:64px;
  --header-h:56px;
  --content-max:1360px;

  /* ═══════════════════════════════════════════════════════════════════
     BÍ DANH TƯƠNG THÍCH NGƯỢC
     Các tệp trong js/ có nhiều chỗ viết thẳng `style="color:var(--faint)"`
     trong chuỗi HTML. Giữ nguyên nhóm tên cũ và trỏ về token mới, để đổi hệ
     thiết kế mà không phải sửa đồng thời 2.400 dòng JavaScript.
     ═══════════════════════════════════════════════════════════════════ */
  --panel:var(--surface);
  --panel2:var(--surface-muted);
  --line:var(--border-c);
  --line2:#EFEFEB;
  --ink:var(--text-primary);
  --ink2:#3D3D3D;
  --muted:var(--text-secondary);
  --faint:var(--text-muted);
  --brand-weak:var(--brand-soft);
  --brand-deep:var(--brand-hover);
  --accent-weak:var(--accent-soft);
  --green:var(--success);      --green-weak:var(--success-soft);
  --amber:var(--warning);      --amber-weak:var(--warning-soft);
  --red:var(--danger);         --red-weak:var(--danger-soft);
  --blue:var(--info);          --blue-weak:var(--info-soft);
  --violet:#6D4AA8;            --violet-weak:#F0EBF8;
  --r:var(--radius-md); --r2:var(--radius-sm);
  --sh:var(--shadow-sm); --sh2:var(--shadow-lg);
  --sb:var(--sidebar-w);
}

/* ═══════════════════════════ NỀN ═══════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text-primary);
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:13px;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-sm);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
::-webkit-scrollbar-track{background:transparent}

/* Vòng tiêu điểm bàn phím — một kiểu duy nhất cho toàn trang. Người dùng bàn
   phím phải luôn thấy mình đang ở đâu; :focus-visible nên chuột bấm không hiện. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-xs)}
.sidebar :focus-visible{outline-color:#FFFFFF}

/* ═══════════════════════ THANG CHỮ ═══════════════════════
   Bảy bậc, mỗi bậc một nhiệm vụ — soi theo `type` trong tokens.ts, chỉnh mật
   độ cho màn hình lớn. Không đặt cỡ chữ tuỳ hứng ngoài nhóm này. */
.t-display{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.4px}
.t-h1{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.3px}
.t-h2{font-size:16px;line-height:1.3;font-weight:700;letter-spacing:-.2px}
.t-h3{font-size:14px;line-height:1.4;font-weight:600}
.t-body{font-size:13.5px;line-height:1.5}
.t-sm{font-size:12.5px;line-height:1.45}
.t-caption{font-size:11.5px;line-height:1.4;color:var(--text-secondary)}
.t-label{font-size:10.5px;line-height:1.3;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted)}
.mono{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.94em}
.muted{color:var(--text-secondary)}
.faint{color:var(--text-muted)}
.bold{font-weight:700}
.right{text-align:right}.center{text-align:center}
.hidden{display:none!important}
.hspace{flex:1}

/* ═══════════════════════ BIỂU TƯỢNG ═══════════════════════
   Ionicons dựng bằng phông: ăn theo currentColor và cỡ chữ, nên một biểu tượng
   dùng lại được ở mọi ngữ cảnh mà không cần biến thể màu. */
.ion{
  font-family:'Ionicons';
  font-style:normal;
  font-weight:normal;
  font-size:16px;
  line-height:1;
  display:inline-block;
  vertical-align:-.14em;
  -webkit-font-smoothing:antialiased;
  speak:none;
}
.ion.accent{color:var(--accent)}
.ion.success{color:var(--success)}
.ion.warning{color:var(--warning)}
.ion.danger{color:var(--danger)}
.ion.info{color:var(--info)}

/* ═══════════════════════ BỐ CỤC ═══════════════════════ */
.app{display:flex;min-height:100vh}
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;transition:margin-left var(--motion-base) var(--ease)}
.content{padding:var(--sp-6);max-width:var(--content-max);width:100%;margin:0 auto}

/* ─────────────── THANH ĐIỀU HƯỚNG ─────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--nav-bg);color:var(--nav-text);
  position:fixed;inset:0 auto 0 0;height:100vh;
  display:flex;flex-direction:column;z-index:40;
  transition:width var(--motion-base) var(--ease);
}
.brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-4);border-bottom:1px solid var(--nav-line);min-height:var(--header-h)}
.brand .mark{
  width:32px;height:32px;border-radius:var(--radius-md);flex:none;
  background:var(--surface);color:var(--nav-bg);
  display:grid;place-items:center;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:20px;
  position:relative;isolation:isolate;overflow:hidden;
}
.brand .mark::before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:var(--accent);left:4px;bottom:3px;z-index:-1}
.brand .btext{min-width:0;overflow:hidden}
.brand b{color:var(--nav-text-hi);font-size:14px;letter-spacing:.4px;display:block;white-space:nowrap}
.brand small{display:block;color:var(--nav-group);font-size:9.5px;letter-spacing:1.6px;white-space:nowrap;margin-top:1px}
.navtoggle{
  margin-left:auto;width:28px;height:28px;flex:none;border:none;background:transparent;
  color:var(--nav-group);border-radius:var(--radius-sm);display:grid;place-items:center;
  transition:background var(--motion-fast),color var(--motion-fast);
}
.navtoggle:hover{background:var(--nav-hover);color:var(--nav-text-hi)}

.nav{padding:var(--sp-2) var(--sp-2) var(--sp-4);overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:thin}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:#2E2E2C;border:none;border-radius:3px}
.nav .grp{
  color:var(--nav-group);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  font-weight:700;padding:var(--sp-4) var(--sp-3) var(--sp-2);white-space:nowrap;
}
.nav a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:8px var(--sp-3);border-radius:var(--radius-sm);
  color:var(--nav-text);font-size:13px;font-weight:500;
  margin-bottom:1px;position:relative;white-space:nowrap;
  transition:background var(--motion-fast),color var(--motion-fast);
}
.nav a .ion{font-size:17px;width:18px;text-align:center;flex:none;opacity:.85}
.nav a .lbl{overflow:hidden;text-overflow:ellipsis}
.nav a:hover{background:var(--nav-hover);color:var(--nav-text-hi)}
.nav a:hover .ion{opacity:1}
.nav a.on{background:var(--surface);color:var(--nav-bg);font-weight:600}
.nav a.on .ion{opacity:1}
.nav a .tag{
  margin-left:auto;background:#2A2A28;color:var(--nav-text);
  font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums;
}
.nav a.on .tag{background:var(--surface-muted);color:var(--text-secondary)}

.sidefoot{border-top:1px solid var(--nav-line);padding:var(--sp-3) var(--sp-4)}
.sidefoot .st{display:flex;align-items:center;gap:var(--sp-2);font-size:11px;color:var(--nav-group);padding:3px 0;white-space:nowrap}
.sidefoot .st .faint{color:#A6A6A1}
.sidefoot .st .lb{overflow:hidden;text-overflow:ellipsis}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot.g{background:var(--success)}
.dot.r{background:var(--danger)}
.dot.a{background:var(--warning)}

/* Thu gọn: chỉ còn biểu tượng. Nhãn và nhóm ẩn đi, không bóp chữ. */
body.nav-collapsed .sidebar{width:var(--sidebar-w-collapsed)}
body.nav-collapsed .main{margin-left:var(--sidebar-w-collapsed)}
body.nav-collapsed .brand{padding-left:var(--sp-4);padding-right:var(--sp-4)}
body.nav-collapsed .brand .btext,
body.nav-collapsed .brand .navtoggle,
body.nav-collapsed .nav a .lbl,
body.nav-collapsed .nav a .tag,
body.nav-collapsed .nav .grp,
body.nav-collapsed .sidefoot .st .lb{display:none}
body.nav-collapsed .nav a{justify-content:center;padding-left:0;padding-right:0}
body.nav-collapsed .nav .grp{display:block;height:1px;padding:0;margin:var(--sp-3) var(--sp-3);background:var(--nav-line);overflow:hidden;text-indent:-999px}
body.nav-collapsed .sidefoot{padding:var(--sp-3) 0;text-align:center}
body.nav-collapsed .sidefoot .st{justify-content:center}
/* Nhãn hiện lại dạng chú giải khi rê chuột — thu gọn không được làm mất nghĩa. */
body.nav-collapsed .nav a:hover::after{
  content:attr(data-label);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--nav-bg);color:var(--nav-text-hi);border:1px solid var(--nav-line);
  padding:5px 9px;border-radius:var(--radius-sm);font-size:11.5px;font-weight:600;
  white-space:nowrap;z-index:50;box-shadow:var(--shadow-md);pointer-events:none;
}

/* ─────────────── THANH TIÊU ĐỀ ─────────────── */
.header{
  height:var(--header-h);background:var(--surface);
  border-bottom:1px solid var(--border-c);
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-6);position:sticky;top:0;z-index:30;
}
.header .htitle{min-width:0}
.header h1{font-size:15.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header .crumb{color:var(--text-muted);font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.header .crumb .ion{font-size:11px}
.menubtn{display:none;width:34px;height:34px;flex:none;border:1px solid var(--border-c);background:var(--surface);border-radius:var(--radius-sm);place-items:center;color:var(--text-secondary)}

.search{
  flex:1;max-width:380px;display:flex;align-items:center;gap:var(--sp-2);
  background:var(--surface-muted);border:1px solid transparent;
  border-radius:var(--radius-sm);padding:6px var(--sp-3);color:var(--text-muted);
  transition:border-color var(--motion-fast),background var(--motion-fast);
}
.search:focus-within{background:var(--surface);border-color:var(--brand)}
.search input{border:none;background:none;outline:none;flex:1;min-width:0;color:var(--text-primary)}
.search input::placeholder{color:var(--text-muted)}

.hicon{
  width:34px;height:34px;border-radius:var(--radius-sm);
  display:grid;place-items:center;color:var(--text-secondary);
  position:relative;border:1px solid transparent;flex:none;
  transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast);
}
.hicon:hover{background:var(--surface-muted);color:var(--text-primary)}
.hicon .n{position:absolute;top:6px;right:7px;width:6px;height:6px;background:var(--accent);border-radius:50%}
.hicon .bellcount{
  position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
  background:var(--accent);color:#fff;border-radius:var(--radius-pill);
  display:grid;place-items:center;font-size:9.5px;font-weight:700;line-height:1;
}
.apibtn{
  display:flex;align-items:center;gap:6px;flex:none;
  border:1px solid var(--border-c);background:var(--surface);
  padding:5px var(--sp-3);border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:600;color:var(--text-secondary);
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
.apibtn:hover{background:var(--surface-muted)}

.who{display:flex;align-items:center;gap:var(--sp-2);padding-left:var(--sp-3);border-left:1px solid var(--border-c);flex:none;position:relative}
.who .av{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-weight:700;font-size:12.5px;
}
/* Nút mở trình đơn tài khoản — vùng bấm gồm cả avatar, tên và mũi tên. */
.whotrigger{
  display:flex;align-items:center;gap:var(--sp-2);
  border:1px solid transparent;background:none;padding:3px;border-radius:var(--radius-sm);
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
.whotrigger:hover{background:var(--surface-muted)}
.whotrigger .chev{font-size:12px;color:var(--text-muted);transition:transform var(--motion-fast)}
.whotrigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.who .whotext{min-width:0;text-align:left}
.who .nm{display:block;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.who .rl{display:block;color:var(--text-muted);font-size:10.5px}
.iconbtn{
  width:30px;height:30px;border:1px solid var(--border-c);background:var(--surface);
  border-radius:var(--radius-sm);display:inline-grid;place-items:center;color:var(--text-secondary);
  transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast);
}
.iconbtn:hover{background:var(--surface-muted);color:var(--text-primary)}
.iconbtn.d:hover{background:var(--danger-soft);color:var(--danger);border-color:#EFC9C6}

/* Trình đơn tài khoản — thay cho nút đăng xuất trần trên thanh tiêu đề. */
.usermenu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:196px;z-index:50;
  background:var(--surface);border:1px solid var(--border-c);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:var(--sp-1);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--motion-fast),transform var(--motion-fast);
}
.usermenu.show{opacity:1;transform:none;pointer-events:auto}
.usermenu .uhead{padding:var(--sp-3);border-bottom:1px solid var(--line2);margin-bottom:var(--sp-1)}
.usermenu .uhead .nm{font-weight:700;font-size:13px}
.usermenu .uhead .em{color:var(--text-muted);font-size:11px;margin-top:2px;word-break:break-all}
.usermenu button{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  border:none;background:none;text-align:left;
  padding:8px var(--sp-3);border-radius:var(--radius-sm);
  font-size:12.5px;font-weight:600;color:var(--text-secondary);
  transition:background var(--motion-fast),color var(--motion-fast);
}
.usermenu button:hover{background:var(--surface-muted);color:var(--text-primary)}
.usermenu button.danger{color:var(--danger)}
.usermenu button.danger:hover{background:var(--danger-soft)}

/* ═══════════════════════ THÔNG BÁO DẢI ═══════════════════════ */
.banner{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);
  margin-bottom:var(--sp-4);font-size:12.5px;border:1px solid var(--border-c);
}
.banner .bi{width:26px;height:26px;border-radius:var(--radius-sm);display:grid;place-items:center;flex-shrink:0;font-size:14px}
.banner.warn{background:var(--warning-soft);border-color:#EBDCC0}
.banner.warn .bi{background:rgba(154,107,31,.12);color:var(--warning)}
.banner.err{background:var(--danger-soft);border-color:#EFC9C6}
.banner.err .bi{background:rgba(179,38,30,.12);color:var(--danger)}
.banner b{color:var(--text-primary)}
.banner .acts{margin-left:auto;display:flex;gap:var(--sp-2);flex:none}

/* ═══════════════════════ NÚT BẤM ═══════════════════════
   Bốn cấp, đúng như app: chính (đen) · phụ (viền) · nhẹ (không viền) · nguy
   hiểm (đỏ). Mỗi cấp đủ năm trạng thái: thường, rê, nhấn, tắt, đang chạy. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border-c);background:var(--surface);color:var(--text-primary);
  padding:7px var(--sp-3);border-radius:var(--radius-sm);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),opacity var(--motion-fast);
}
.btn .ion{font-size:15px}
.btn:hover{background:var(--surface-muted);border-color:var(--border-strong)}
.btn:active{background:var(--border-c)}
.btn.p{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.p:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.p:active{background:#2A2A2A}
.btn.d{background:var(--surface);border-color:#EFC9C6;color:var(--danger)}
.btn.d:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn.g{background:transparent;border-color:transparent;color:var(--text-secondary)}
.btn.g:hover{background:var(--surface-muted);color:var(--text-primary);border-color:transparent}
.btn.sm{padding:5px 9px;font-size:11.5px}
.btn.sm .ion{font-size:13px}
.btn.lg{padding:10px var(--sp-5);font-size:13.5px}
.btn.blk{width:100%}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
/* Đang chạy: con quay thay biểu tượng, chữ giữ nguyên chỗ để nút không nhảy. */
.btn.loading{position:relative;color:transparent;pointer-events:none}
.btn.loading::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:var(--text-secondary);
  animation:spin .6s linear infinite;
}
.btn.p.loading::after{color:var(--on-brand)}

/* Nút dạng liên kết — dùng cho mã đơn/mã giao dịch bấm được nằm giữa dòng chữ.
   Trước đây lớp `.link` không hề có định nghĩa nào, nên trình duyệt vẽ ra một
   hộp nút xám mặc định ngay giữa bảng. */
.link{
  border:none;background:none;padding:0;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--text-primary);border-bottom:1px solid var(--border-strong);
  transition:color var(--motion-fast),border-color var(--motion-fast);
}
.link:hover{color:var(--accent);border-color:var(--accent)}

/* ═══════════════════════ THẺ / BẢNG ĐIỀU KHIỂN ═══════════════════════
   Một kiểu thẻ duy nhất cho toàn hệ thống: nền trắng, viền mảnh, KHÔNG bóng. */
.dash-intro{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:var(--sp-8);align-items:stretch;margin-bottom:var(--sp-4);padding:clamp(24px,3vw,38px);
  border-radius:18px;background:
    radial-gradient(circle at 78% 20%,rgba(196,58,48,.2),transparent 23%),
    linear-gradient(135deg,#111 0%,#191918 58%,#242220 100%);
  color:#fff;border:1px solid #292927;
}
.dash-intro::after{content:"運営";position:absolute;right:32px;top:-30px;color:rgba(255,255,255,.035);font:700 150px/1 Georgia,serif;pointer-events:none}
.dash-intro-copy{position:relative;z-index:1;align-self:center}
.dash-eyebrow{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:9.5px;font-weight:700;letter-spacing:1.5px;margin-bottom:13px}
.dash-eyebrow span{width:18px;height:2px;background:var(--accent)}
.dash-intro h2{font-size:clamp(24px,2.5vw,36px);line-height:1.12;letter-spacing:-1px}
.dash-intro p{max-width:660px;color:rgba(255,255,255,.62);font-size:12.5px;line-height:1.65;margin-top:12px}
.dash-intro p b{color:#fff}
.dash-intro-actions{display:flex;gap:8px;margin-top:20px}
.dash-intro .btn.p{background:#fff;border-color:#fff;color:#111}.dash-intro .btn.p:hover{background:#f1f1ee;border-color:#f1f1ee}
.dash-intro .dash-quiet{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:#fff}.dash-intro .dash-quiet:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.dash-intro-state{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;min-height:174px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px)}
.dash-monogram{position:absolute;right:14px;top:8px;color:rgba(255,255,255,.08);font:700 72px/1 Georgia,serif}
.dash-state-row{display:flex;align-items:center;gap:10px}.dash-state-row .dot{box-shadow:0 0 0 5px rgba(46,125,79,.15)}
.dash-state-row b{display:block;font-size:12px}.dash-state-row small{display:block;color:rgba(255,255,255,.42);font-size:9.5px;margin-top:2px}
.reactbits-shiny-text{
  color:rgba(255,255,255,.72);
  background:linear-gradient(110deg,rgba(255,255,255,.72) 38%,#fff 50%,rgba(255,255,255,.72) 62%);
  background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:reactbitsShine 5.8s linear infinite;
}
@keyframes reactbitsShine{from{background-position:115% center}to{background-position:-115% center}}
.dash-state-metrics{display:flex;align-items:flex-end;gap:12px}.dash-state-metrics span{color:rgba(255,255,255,.46);font-size:9.5px;line-height:1.25}.dash-state-metrics b{display:block;color:#fff;font-size:19px;letter-spacing:-.4px}.dash-state-metrics i{width:1px;height:28px;background:rgba(255,255,255,.11)}
.dash-intro-loading{min-height:250px}
.dash-intro-loading .sk{background:linear-gradient(90deg,rgba(255,255,255,.075) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.075) 63%);background-size:400% 100%}
.dash-sk-eyebrow{width:130px;height:9px;margin-bottom:18px}
.dash-sk-title{width:min(440px,82%);height:34px}
.dash-sk-copy{width:min(610px,94%);height:28px;margin-top:16px}
.dash-sk-action{width:170px;height:34px;margin-top:22px}
.grid{display:grid;gap:var(--sp-4)}
.kpis{grid-template-columns:repeat(4,1fr)}

.panel{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);
}
.panel:hover{border-color:var(--border-strong);box-shadow:0 8px 24px rgba(17,17,17,.035)}
/* Hàng tiêu đề panel là flex một dòng, và flex item mặc định có min-width:auto —
 * tức là KHÔNG co nhỏ hơn nội dung của chính nó. Một tiêu đề dài cộng một .sub
 * tiếng Việt dài (ví dụ "Mỗi đơn đạt điều kiện ngẫu nhiên nhận 1 thẻ chưa có")
 * đẩy cả hàng rộng 466px trong khung nhìn 390px, kéo theo cả trang trượt ngang
 * 95px ở màn Thẻ địa danh. Cho phép xuống dòng và cho phép co lại. */
.panel .ph{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line2);
}
.panel .ph>*{min-width:0}
.panel .ph h3{font-size:13.5px;font-weight:700;letter-spacing:-.1px;display:flex;align-items:center;gap:7px}
.panel .ph .sub{font-size:11px;color:var(--text-muted);font-weight:500}
.panel .pb{padding:var(--sp-5)}
.panel .pf{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line2);background:var(--bg-alt);display:flex;align-items:center;gap:var(--sp-3)}

/* Bộ lưới dùng chung — thay cho grid-template-columns viết thẳng trong chuỗi
   HTML của js/. Nhờ vậy quy tắc co giãn ở cuối tệp bám vào lớp, không phải
   dò chuỗi trong thuộc tính style. */
.grid.g-2{grid-template-columns:repeat(2,1fr)}
.grid.g-3{grid-template-columns:repeat(3,1fr)}
.grid.g-4{grid-template-columns:repeat(4,1fr)}
.grid.g-2-1{grid-template-columns:2fr 1fr}
.grid.g-1-2{grid-template-columns:1fr 2fr}
.grid.g-3-2{grid-template-columns:3fr 2fr}
.grid.g-auto{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.grid.align-start{align-items:start}
.grid.pairlist{font-size:12px;gap:var(--sp-2)}
.mt{margin-top:var(--sp-4)}
.mb{margin-bottom:var(--sp-4)}

/* ─── Thẻ chỉ số ─── */
.kpi{
  background:var(--surface);border:1px solid var(--border-c);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);
  position:relative;overflow:hidden;
  transition:border-color var(--motion-fast),transform var(--motion-fast);
}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent 72%);opacity:0;transition:opacity var(--motion-fast)}
.kpi[onclick]{cursor:pointer}
.kpi[onclick]:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,17,17,.055)}
.kpi[onclick]:hover::before{opacity:1}
.kpi .top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.kpi .lb{color:var(--text-secondary);font-size:11.5px;font-weight:600}
.kpi .ic{width:30px;height:30px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none}
.kpi .ic .ion{font-size:16px}
.kpi .v{font-size:23px;font-weight:700;letter-spacing:-.6px;margin-top:var(--sp-3);color:var(--text-primary);font-variant-numeric:tabular-nums}
.kpi .dl{font-size:11px;font-weight:600;margin-top:5px;display:flex;align-items:center;gap:4px;color:var(--text-muted)}
.kpi .dl.up{color:var(--success)}
.kpi .dl.dn{color:var(--danger)}
.kpi .spark{position:absolute;right:12px;bottom:10px;opacity:.85}
.kpi.reactbits-spotlight{--rb-spot-x:50%;--rb-spot-y:50%;isolation:isolate}
.kpi.reactbits-spotlight::after{
  content:"";position:absolute;z-index:0;inset:-1px;opacity:0;pointer-events:none;
  background:radial-gradient(circle 150px at var(--rb-spot-x) var(--rb-spot-y),rgba(196,58,48,.11),transparent 76%);
  transition:opacity var(--motion-base) var(--ease);
}
.kpi.reactbits-spotlight:hover::after,.kpi.reactbits-spotlight:focus-within::after{opacity:1}
.kpi.reactbits-spotlight>*{position:relative;z-index:1}

.ministat{
  background:var(--surface);border:1px solid var(--border-c);border-radius:var(--radius-lg);
  padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);
}
.ministat .ic{width:34px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0}
.ministat .ic .ion{font-size:17px}
.ministat .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.ministat .lb{font-size:11px;color:var(--text-secondary);font-weight:500;margin-top:1px}

/* Nền nhạt cho ô biểu tượng — mỗi màu ngữ nghĩa một cặp nền/chữ. */
.tint-brand{background:var(--brand-soft);color:var(--text-primary)}
.tint-blue{background:var(--info-soft);color:var(--info)}
.tint-green{background:var(--success-soft);color:var(--success)}
.tint-amber{background:var(--warning-soft);color:var(--warning)}
.tint-red{background:var(--danger-soft);color:var(--danger)}
.tint-violet{background:var(--violet-weak);color:var(--violet)}
.tint-accent{background:var(--accent-soft);color:var(--accent)}

.seg{display:inline-flex;background:var(--surface-muted);border:1px solid var(--border-c);border-radius:var(--radius-md);padding:2px;flex:none}
.seg button{border:none;background:none;padding:5px var(--sp-3);border-radius:var(--radius-xs);font-size:11.5px;font-weight:600;color:var(--text-secondary);transition:background var(--motion-fast),color var(--motion-fast)}
.seg button:hover{color:var(--text-primary)}
.seg button.on{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* ═══════════════════════ BẢNG DỮ LIỆU ═══════════════════════ */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{
  text-align:left;color:var(--text-muted);font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.7px;
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-c);
  background:var(--bg-alt);white-space:nowrap;position:sticky;top:0;z-index:1;
}
.tbl td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tbody tr{transition:background var(--motion-fast)}
.tbl tbody tr:hover td{background:var(--bg-alt)}
.tbl tr:last-child td{border-bottom:none}
.tbl .prod{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.tbl td .rowact{display:flex;gap:5px;justify-content:flex-end;align-items:center}
/* Chỉ các nút biểu tượng phụ mới mờ đi khi chưa trỏ vào hàng. Nút hành động
   CHÍNH của hàng (bước tiếp theo của đơn) phải luôn đọc được — đó là thứ người
   trực quét dọc cả cột để tìm việc cần làm. */
.tbl td .rowact .iconbtn{opacity:.5;transition:opacity var(--motion-fast)}
.tbl tbody tr:hover .rowact .iconbtn{opacity:1}

/* Bảng nghiệp vụ có 8–9 cột nên tràn ngang ở màn hình hẹp. Ghim cột thao tác
   vào mép phải để nút "bước tiếp theo" không bao giờ trôi ra ngoài tầm nhìn —
   người dùng không phải cuộn ngang chỉ để bấm một nút. */
.tbl.acts th:last-child,.tbl.acts td:last-child{position:sticky;right:0;background:var(--surface)}
.tbl.acts th:last-child{background:var(--bg-alt);z-index:2}
.tbl.acts td:last-child{z-index:1}
.tbl.acts tbody tr:hover td:last-child{background:var(--bg-alt)}
.tbl.acts th:last-child::before,.tbl.acts td:last-child::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line2);
}

.thumb{
  width:38px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
  background:var(--surface-muted);
}
.thumb.sq{width:36px;height:36px;border-radius:50%}
.stack{display:flex}
.stack .thumb{width:30px;height:36px;border:2px solid var(--surface);margin-left:-8px;border-radius:var(--radius-xs)}
.stack .thumb:first-child{margin-left:0}

/* Hàng "không khớp bộ lọc" — khác hẳn bảng chưa có dữ liệu, nên nói rõ là do
   bộ lọc và mời gỡ lọc thay vì một dòng chữ xám cụt lủn. */
.emptyrow td{background:var(--bg-alt)}
.emptyrow:hover td{background:var(--bg-alt)}
.emptycell{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-8) var(--sp-4);color:var(--text-secondary);text-align:center;font-size:12.5px;
}
.emptycell .ion{color:var(--text-disabled)}

/* ═══════════════════════ HUY HIỆU TRẠNG THÁI ═══════════════════════
   Nền nhạt + chữ đậm màu ngữ nghĩa; không dùng màu bão hoà làm nền. */
.bdg{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;white-space:nowrap;
}
.bdg .d{width:5px;height:5px;border-radius:50%;flex:none}
.b-green{background:var(--success-soft);color:var(--success)}.b-green .d{background:var(--success)}
.b-blue{background:var(--info-soft);color:var(--info)}.b-blue .d{background:var(--info)}
.b-amber{background:var(--warning-soft);color:var(--warning)}.b-amber .d{background:var(--warning)}
.b-red{background:var(--danger-soft);color:var(--danger)}.b-red .d{background:var(--danger)}
.b-gray{background:var(--surface-muted);color:var(--text-secondary)}.b-gray .d{background:var(--text-muted)}
.b-violet{background:var(--violet-weak);color:var(--violet)}.b-violet .d{background:var(--violet)}

/* ═══════════════════════ BIỂU MẪU ═══════════════════════ */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--text-primary);margin-bottom:5px}
.field label .req{color:var(--accent);margin-left:2px}
.inp,.sel,.ta{
  width:100%;border:1px solid var(--border-c);background:var(--surface);
  border-radius:var(--radius-sm);padding:8px var(--sp-3);color:var(--text-primary);outline:none;
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast);
}
.inp::placeholder,.ta::placeholder{color:var(--text-muted)}
.inp:hover,.sel:hover,.ta:hover{border-color:var(--border-strong)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(17,17,17,.07)}
.inp:disabled,.sel:disabled,.ta:disabled{background:var(--surface-muted);color:var(--text-disabled);cursor:not-allowed}
.inp.err,.sel.err,.ta.err{border-color:var(--danger)}
.inp.err:focus,.ta.err:focus{box-shadow:0 0 0 3px rgba(179,38,30,.10)}
.sel{appearance:none;padding-right:var(--sp-8);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23686868' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--sp-3) center;
}
.ta{resize:vertical;min-height:84px;line-height:1.55}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.hint{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.45}
.errmsg{font-size:11px;color:var(--danger);margin-top:4px;display:flex;align-items:center;gap:4px}
/* Biểu mẫu không nên kéo dài hết bề ngang màn hình — mắt phải quét quá xa. */
.formcol{max-width:560px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--border-c);background:var(--surface);border-radius:var(--radius-pill);
  padding:5px var(--sp-3);font-size:11.5px;font-weight:600;color:var(--text-secondary);
  transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);
}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.switch{width:38px;height:22px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;transition:background var(--motion-fast);flex-shrink:0;cursor:pointer}
.switch.on{background:var(--brand)}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--surface);border-radius:50%;transition:left var(--motion-fast) var(--ease);box-shadow:var(--shadow-sm)}
.switch.on i{left:18px}

/* ═══════════════════════ THANH LỌC ═══════════════════════ */
.filters{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.tabs{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--border-c);border-radius:var(--radius-md);padding:3px;flex-wrap:wrap}
.tabs button{
  border:none;background:none;padding:6px var(--sp-3);border-radius:var(--radius-sm);
  font-size:12px;font-weight:600;color:var(--text-secondary);
  display:flex;align-items:center;gap:6px;
  transition:background var(--motion-fast),color var(--motion-fast);
}
.tabs button:hover{background:var(--surface-muted);color:var(--text-primary)}
.tabs button.on{background:var(--brand);color:var(--on-brand)}
.tabs button .c{background:var(--surface-muted);color:var(--text-secondary);font-size:10px;padding:0 6px;border-radius:var(--radius-pill);font-weight:700;font-variant-numeric:tabular-nums}
.tabs button.on .c{background:rgba(255,255,255,.2);color:var(--on-brand)}

/* ═══════════════════════ TRẠNG THÁI RỖNG ═══════════════════════ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-12) var(--sp-6)}
.empty .art{
  width:64px;height:64px;border-radius:var(--radius-lg);background:var(--surface-muted);
  display:grid;place-items:center;margin-bottom:var(--sp-4);color:var(--text-muted);
}
.empty .art .ion{font-size:28px}
.empty h3{font-size:15px;font-weight:700}
.empty p{color:var(--text-secondary);margin-top:6px;max-width:400px;font-size:12.5px;line-height:1.6}
.empty .acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap;justify-content:center}

/* ═══════════════════════ KHUNG XƯƠNG (ĐANG TẢI) ═══════════════════════ */
.sk{
  background:linear-gradient(90deg,var(--skeleton) 25%,var(--skeleton-hi) 37%,var(--skeleton) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-sm);
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ═══════════════════════ BIỂU ĐỒ ═══════════════════════ */
.bars{display:flex;align-items:flex-end;gap:var(--sp-3);height:180px;padding-top:var(--sp-3)}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;cursor:default;position:relative;transition:transform var(--motion-base) var(--ease)}
.bars .col.clickable{cursor:pointer}
.bars .col.clickable:hover{transform:translateY(-3px)}
.bars .bar{width:60%;max-width:32px;background:var(--brand);border-radius:var(--radius-xs) var(--radius-xs) 0 0;position:relative;transition:height var(--motion-slow) var(--ease),background var(--motion-fast)}
.bars .col.clickable:hover .bar{background:var(--accent)}
.bars .bar.forecast{background:repeating-linear-gradient(135deg,var(--info) 0 4px,#3E6E9C 4px 8px);opacity:.85}
.bars .bl{font-size:10.5px;color:var(--text-muted)}
.bars .bv{font-size:10px;color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}
.chartsummary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line2)}
.chartsummary .cell{
  background:var(--bg-alt);border:1px solid var(--line2);padding:var(--sp-3);
  border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast);
}
.chartsummary .cell:hover{border-color:var(--border-strong);background:var(--surface-muted)}
.chartsummary .cell b{display:block;font-size:14px;margin-top:3px;font-variant-numeric:tabular-nums}
.chartsummary .cell span{font-size:10.5px;color:var(--text-secondary)}
.donut{width:148px;height:148px;border-radius:50%;position:relative;flex-shrink:0}
.donut .hole{position:absolute;inset:26px;background:var(--surface);border-radius:50%;display:grid;place-items:center;text-align:center}
.legend{display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.legend .li{display:flex;align-items:center;gap:var(--sp-2);font-size:12px;border-radius:var(--radius-sm);transition:background var(--motion-fast)}
.legend .li:hover{background:var(--surface-muted)}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.hbar{display:flex;flex-direction:column;gap:var(--sp-3)}
.hbar .r{display:flex;align-items:center;gap:var(--sp-3)}
.hbar .nm{width:130px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.hbar .track{flex:1;height:8px;background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden}
.hbar .fill{height:100%;border-radius:var(--radius-pill);background:var(--brand);transition:width var(--motion-slow) var(--ease)}
.hbar .v{width:66px;text-align:right;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}

.dataflag{
  display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:2px 8px;
  font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:var(--success-soft);color:var(--success);
}
.dataflag.demo{background:var(--warning-soft);color:var(--warning)}
.dataflag.local{background:var(--info-soft);color:var(--info)}
.dataflag.stale{background:var(--surface-muted);color:var(--text-secondary)}
.modelmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--text-muted);font-size:10.5px}
.metriccards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.metriccard{border:1px solid var(--line2);background:var(--bg-alt);border-radius:var(--radius-md);padding:var(--sp-3)}
.metriccard .mv{font-size:16px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.metriccard .ml{font-size:10.5px;color:var(--text-secondary)}

/* ─── Bảng gợi ý thông minh ───
   Khối tối duy nhất trong vùng nội dung: dùng đúng sắc đen thương hiệu, không
   pha gradient tím/xanh như bản cũ. */
.ai{background:var(--nav-bg);border:1px solid var(--nav-bg);border-radius:var(--radius-lg);color:#EDEDEA;overflow:hidden}
.ai .ph{border-bottom:1px solid rgba(255,255,255,.09)}
.ai .ph h3{color:#fff}
.ai .ph .sub{color:var(--nav-group)}
.ai .ins{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid rgba(255,255,255,.06);align-items:flex-start}
.ai .ins:last-child{border-bottom:none}
.ai .ins .bi{width:26px;height:26px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:13px;flex-shrink:0;background:rgba(255,255,255,.08)}
.ai .ins p{font-size:12.5px;color:#CFCFC9;line-height:1.55}
.ai .ins b{color:#fff}
.ai .ins .go{
  margin-left:auto;color:#CFCFC9;font-size:11px;font-weight:600;white-space:nowrap;
  align-self:center;border:1px solid rgba(255,255,255,.18);padding:4px 9px;border-radius:var(--radius-sm);
  transition:background var(--motion-fast);
}
.ai .ins .go:hover{background:rgba(255,255,255,.1)}

/* ═══════════════════════ HỘP THOẠI / NGĂN KÉO ═══════════════════════ */
.overlay{position:fixed;inset:0;background:var(--overlay-c);z-index:60;display:flex;opacity:0;pointer-events:none;transition:opacity var(--motion-fast)}
.overlay.show{opacity:1;pointer-events:auto}
.modal{
  margin:auto;background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);width:min(560px,94vw);max-height:90vh;overflow:auto;
}
.modal.lg{width:min(920px,96vw)}
.modal.sm{width:min(420px,94vw)}
.drawer{
  margin-left:auto;height:100%;background:var(--surface);width:min(560px,96vw);
  box-shadow:var(--shadow-lg);overflow:auto;transform:translateX(16px);
  transition:transform var(--motion-base) var(--ease);
}
.overlay.show .drawer{transform:none}
.mh{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border-c);
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.mh h3{font-size:15px;font-weight:700;letter-spacing:-.2px}
.mb{padding:var(--sp-5)}
.mf{
  display:flex;gap:var(--sp-2);justify-content:flex-end;
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border-c);
  position:sticky;bottom:0;background:var(--surface);
}
.x{
  width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--text-secondary);border:1px solid transparent;flex:none;cursor:pointer;
  transition:background var(--motion-fast),color var(--motion-fast);
}
.x:hover{background:var(--surface-muted);color:var(--text-primary)}
/* Hộp thoại xoá: biểu tượng cảnh báo đỏ đặt trên, để hành động không hoàn tác
   được nhận ra trước khi đọc chữ. */
.dangerhead{display:flex;gap:var(--sp-3);align-items:flex-start}
.dangerhead .di{width:38px;height:38px;border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);display:grid;place-items:center;flex:none}
.dangerhead .di .ion{font-size:19px}

/* ═══════════════════════ CỔNG ĐĂNG NHẬP ═══════════════════════ */
.authgate{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:clamp(20px,4vw,56px);
  overflow-y:auto;
  background:
    radial-gradient(circle at 12% 8%,rgba(196,58,48,.085),transparent 28%),
    radial-gradient(circle at 90% 92%,rgba(17,17,17,.055),transparent 30%),
    var(--bg);
}
.authgate.show{display:grid}
.authgate-stage{
  width:min(1120px,100%);min-height:min(720px,calc(100vh - 80px));
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  background:var(--surface);border:1px solid var(--border-c);border-radius:24px;
  box-shadow:0 30px 90px rgba(17,17,17,.12);overflow:hidden;
}
.authgate-story{
  position:relative;overflow:hidden;padding:clamp(32px,5vw,64px);
  color:#fff;background:
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 42%),
    radial-gradient(circle at 73% 23%,rgba(196,58,48,.28),transparent 25%),
    #121211;
  display:flex;flex-direction:column;justify-content:space-between;
}
.authgate-story::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(to bottom right,transparent,black);
}
.authgate-sun{position:absolute;width:280px;height:280px;border-radius:50%;right:-68px;top:80px;background:var(--accent);opacity:.86;box-shadow:0 0 90px rgba(196,58,48,.22)}
.authgate-petal{position:absolute;width:13px;height:24px;border-radius:100% 0 100% 0;background:rgba(255,255,255,.38);transform:rotate(35deg)}
.authgate-petal.p1{right:31%;top:17%}.authgate-petal.p2{right:18%;top:58%;transform:rotate(112deg) scale(.72)}
.authgate-story-top{position:relative;z-index:2;display:flex;align-items:center;gap:13px}
.authgate-brandmark,.authgate-mobilemark{
  width:46px;height:46px;border-radius:14px;background:#fff;color:#111;display:grid;place-items:center;
  font:700 29px/1 Georgia,'Times New Roman',serif;position:relative;isolation:isolate;overflow:hidden;
}
.authgate-brandmark::before,.authgate-mobilemark::before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:var(--accent);left:5px;bottom:4px;z-index:-1}
.authgate-story-top b{display:block;font-size:15px;letter-spacing:2.4px}.authgate-story-top span{display:block;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:1.8px;margin-top:2px}
.authgate-copy{position:relative;z-index:2;max-width:540px;margin:80px 0}
.authgate-kicker{font-size:10px;font-weight:700;letter-spacing:2.2px;color:rgba(255,255,255,.52);margin-bottom:16px}
.authgate-copy h1{font-size:clamp(29px,3.2vw,46px);line-height:1.11;letter-spacing:-1.5px;font-weight:700;max-width:520px}
.authgate-copy p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.61);max-width:470px;margin-top:20px}
.authgate-capabilities{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap}
.authgate-capabilities span{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.68);font-size:10.5px;background:rgba(255,255,255,.035);backdrop-filter:blur(8px)}
.authgate-capabilities i{width:5px;height:5px;border-radius:50%;background:#63B581;box-shadow:0 0 0 4px rgba(99,181,129,.1)}
.authgate-jp{position:absolute;right:27px;bottom:32px;writing-mode:vertical-rl;color:rgba(255,255,255,.1);font:600 19px/1.2 Georgia,serif;letter-spacing:7px}
.authgate-card{
  align-self:center;width:100%;max-width:430px;margin:auto;background:var(--surface);
  padding:clamp(34px,5vw,62px);border:none;
}
.authgate-formhead{margin-bottom:28px}.authgate-mobilemark{display:none;background:var(--brand);color:#fff;margin-bottom:24px}
.authgate-overline{color:var(--accent);font-size:9.5px;font-weight:700;letter-spacing:1.7px;margin-bottom:9px}
.authgate-card h2{font-size:27px;line-height:1.15;font-weight:700;margin:0 0 10px;letter-spacing:-.7px}
.authgate-sub{color:var(--text-secondary);font-size:12.5px;margin:0;line-height:1.65}
.authgate-card .field{margin-bottom:16px}.authgate-card .field label{font-size:11.5px;margin-bottom:7px}
.authgate-card .inp{height:48px;border-radius:10px;padding:0 14px;background:var(--bg-alt);transition:border-color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast)}
.authgate-card .inp:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(17,17,17,.06);outline:none}
.password-field{position:relative}.password-field .inp{width:100%;padding-right:62px}
.password-toggle{position:absolute;right:5px;top:4px;min-width:50px;height:40px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);display:grid;place-items:center;font-size:11px;font-weight:700}
.password-toggle:hover{background:var(--surface-muted);color:var(--text-primary)}
.authgate-help{display:flex;justify-content:flex-end;margin:-10px 0 12px}
.authgate-help button{min-height:36px;border:0;background:transparent;color:var(--accent);font-size:11.5px;font-weight:700;padding:6px 0}
.authgate-help button:hover{text-decoration:underline;text-underline-offset:3px}
.authgate-recovery{padding:14px;margin:0 0 16px;border:1px solid var(--border-c);border-radius:12px;background:var(--bg-alt)}
.authgate-recovery[hidden],.authgate-reset-fields[hidden]{display:none}
.authgate-recovery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.authgate-recovery-head b,.authgate-recovery-head span{display:block}
.authgate-recovery-head b{font-size:12.5px;margin-bottom:3px}.authgate-recovery-head span{font-size:10.5px;color:var(--text-secondary);line-height:1.45}
.authgate-recovery-head button{min-height:32px;border:0;background:transparent;color:var(--text-secondary);font-size:10.5px;font-weight:700;padding:4px}
.authgate-code{width:100%;justify-content:center}
.authgate-reset-fields{margin-top:14px}.authgate-reset-fields .field:last-of-type{margin-bottom:12px}
.authgate-recovery-status{min-height:17px;margin-top:10px;color:var(--text-secondary);font-size:10.5px;line-height:1.5}
.authgate-recovery-status.ok{color:#246B45}.authgate-recovery-status a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.authgate-error{color:var(--danger);font-size:12px;min-height:18px;margin:-4px 0 10px;text-align:left}
.authgate-submit{height:50px;border-radius:10px;justify-content:space-between;padding-inline:17px}
.authgate-submit .ion{font-size:16px}
.authgate-security{display:flex;align-items:flex-start;gap:8px;color:var(--text-secondary);font-size:10.5px;line-height:1.55;margin-top:18px}
.authgate-security .ion{font-size:14px;color:var(--success);margin-top:1px}

/* ═══════════════════════ TOAST ═══════════════════════ */
.toasts{position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:80;display:flex;flex-direction:column;gap:var(--sp-2)}
.toast{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--nav-bg);color:#fff;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-size:12.5px;font-weight:500;min-width:240px;max-width:400px;
  animation:slideup var(--motion-base) var(--ease);
}
.toast .ti{width:20px;height:20px;border-radius:var(--radius-xs);display:grid;place-items:center;font-size:12px;flex:none}
.toast.ok .ti{background:var(--success);color:#fff}
.toast.err .ti{background:var(--danger);color:#fff}
.toast.info .ti{background:var(--info);color:#fff}
@keyframes slideup{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ═══════════════════════ DÒNG SỰ KIỆN ═══════════════════════ */
.feedrow{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line2);cursor:pointer;border-left:3px solid transparent;transition:background var(--motion-fast),border-left-color var(--motion-fast)}
.feedrow:hover{background:var(--bg-alt);border-left-color:var(--brand)}
.feedtext{font-size:12.5px;font-weight:500;line-height:1.5}

/* ═══════════════════════ CHỌN MÀU ═══════════════════════ */
.cp{border:1px solid var(--border-c);border-radius:var(--radius-md);padding:var(--sp-3);background:var(--bg-alt)}
.cp .sv{height:120px;border-radius:var(--radius-sm);position:relative;cursor:crosshair;margin-bottom:var(--sp-3);touch-action:none}
.cp .svh{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;transform:translate(-7px,-7px);box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.cp .hue{height:14px;border-radius:var(--radius-pill);position:relative;cursor:pointer;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none}
.cp .hh{position:absolute;top:-3px;width:20px;height:20px;border:2px solid #fff;border-radius:50%;transform:translateX(-10px);box-shadow:var(--shadow-md);pointer-events:none}
.cp .presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--sp-3)}
.cp .presets .sw{width:26px;height:26px;border-radius:var(--radius-sm);cursor:pointer;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-c)}
.cp .presets .sw.on{box-shadow:0 0 0 2px var(--brand)}
.cp .out{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.cp .prev{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border-c)}

/* ═══════════════════════ BẢNG BIẾN THỂ ═══════════════════════ */
/* Bảng biến thể nằm trong cột trái của trình soạn nên rất hẹp. Cố định tỉ lệ
   cột theo nhu cầu thật: ô màu cần chỗ cho tên màu, ô mã hàng và giá cần đủ
   rộng để đọc hết giá trị — trước đây cả hai bị bóp lại thành "CAI" và
   "8900…". Bảng tự cuộn ngang khi khung quá hẹp thay vì cắt chữ. */
.vtblwrap{overflow-x:auto}
.vtbl{width:100%;min-width:440px;border-collapse:collapse;font-size:12px;table-layout:fixed}
.vtbl th{text-align:left;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600;padding:7px 8px;border-bottom:1px solid var(--border-c);white-space:nowrap}
.vtbl td{padding:6px 8px;border-bottom:1px solid var(--line2)}
.vtbl .inp,.vtbl .sel{padding:6px 8px;font-size:12px}
.vtbl .sel{padding-right:var(--sp-6);background-position:right 6px center}
.vtbl col.c-color{width:31%}
.vtbl col.c-size{width:16%}
.vtbl col.c-sku{width:19%}
.vtbl col.c-price{width:18%}
.vtbl col.c-stock{width:11%}
.vtbl col.c-del{width:5%}
.vtbl .iconbtn{width:26px;height:26px}
.swatchbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--border-c);background:var(--surface);border-radius:var(--radius-sm);padding:5px 8px;font-size:12px;font-weight:600}
.swatchbtn:hover{border-color:var(--border-strong)}
.swatchbtn .c{width:16px;height:16px;border-radius:var(--radius-xs);border:1px solid rgba(0,0,0,.1)}

/* ═══════════════════════ TẢI ẢNH ═══════════════════════ */
.imgs{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.imgs .it{width:76px;height:88px;border-radius:var(--radius-md);position:relative;overflow:hidden;border:1px solid var(--border-c);background:var(--surface-muted);display:grid;place-items:center}
.imgs .it img{width:100%;height:100%;object-fit:cover}
.imgs .it video{width:100%;height:100%;object-fit:cover;background:var(--nav-bg)}
.imgs .it .kind{position:absolute;bottom:4px;left:4px;background:rgba(17,17,17,.82);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill)}
.imgs .it .cov{position:absolute;top:4px;left:4px;background:var(--brand);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill)}
.imgs .it .rm{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(17,17,17,.66);color:#fff;display:grid;place-items:center;font-size:11px;cursor:pointer}
.imgs .add{width:76px;height:88px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);display:grid;place-items:center;color:var(--text-muted);cursor:pointer;background:var(--bg-alt);transition:border-color var(--motion-fast),color var(--motion-fast)}
.imgs .add:hover{border-color:var(--brand);color:var(--brand)}

/* ═══════════════════════ DÒNG THỜI GIAN ═══════════════════════ */
.timeline{display:flex;flex-direction:column}
.timeline .n{display:flex;gap:var(--sp-3);position:relative;padding-bottom:var(--sp-4)}
.timeline .n:before{content:"";position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--border-c)}
.timeline .n:last-child:before{display:none}
.timeline .dotn{width:18px;height:18px;border-radius:50%;border:3px solid var(--surface);flex-shrink:0;z-index:1;box-shadow:0 0 0 1px var(--border-c);background:var(--surface-muted)}
.timeline .n.done .dotn{background:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.timeline .n .tl-b{font-size:12.5px;font-weight:600}
.timeline .n .tl-t{font-size:11px;color:var(--text-muted);margin-top:1px}

.section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-3)}
.section-title h2{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.section-title .sub{color:var(--text-muted);font-size:11.5px}

/* ─── Bảng quy trình giao–nhận–đổi/trả (js/views-commerce.js) ─── */
.polstage{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line2)}
.polstage:last-child{border-bottom:none}
.polnum{flex:none;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-size:11px;font-weight:700}
.polname{font-size:12.5px;font-weight:700}
.polactor{font-size:11px;color:var(--text-secondary);margin-top:2px}
.poldesc{font-size:11.5px;line-height:1.6;color:var(--text-secondary);margin-top:4px}

/* ─── Đóng góp địa điểm cộng đồng (js/views-content.js) ─── */
.sugcard{border:1px solid var(--border-c);border-radius:var(--radius-md);padding:var(--sp-3);margin-bottom:var(--sp-2)}
.sugcard.done{border-color:#C3DFCB;background:var(--success-soft)}
.sugcard.no{border-color:#EFC9C6;background:var(--danger-soft)}
.sugtext{font-size:12.5px;line-height:1.55}
.sugacts{display:flex;gap:6px;margin-top:var(--sp-2);flex-wrap:wrap}

/* ===========================================================================
   CHUYỂN ĐỘNG
   ---------------------------------------------------------------------------
   Chuyển động ở đây có đúng một nhiệm vụ: chỉ cho mắt biết chỗ nào vừa đổi và
   việc nào đang chạy — không trang trí.

   QUAN TRỌNG: animation "xuất hiện" chỉ chạy khi ĐỔI TRANG (`.render-fresh`),
   không chạy ở lượt làm mới dữ liệu nền. Trước đây `.panel`/`.kpi` animation
   vô điều kiện, nên mỗi lần nhịp đồng bộ dựng lại DOM là cả trang lại trôi lên
   một lượt — người dùng thấy đúng như trang tự tải lại. Xem renderView() trong
   js/core.js.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reactbits-shiny-text{color:#fff;background:none;-webkit-text-fill-color:currentColor}
  .kpi.reactbits-spotlight::after{display:none}
}
@keyframes riseIn{from{transform:translateY(6px)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

.render-fresh .panel,.render-fresh .ai{animation:riseIn var(--motion-base) var(--ease) both}
.render-fresh .kpi{animation:riseIn var(--motion-slow) var(--ease) both}
.render-fresh .kpis .kpi:nth-child(2){animation-delay:40ms}
.render-fresh .kpis .kpi:nth-child(3){animation-delay:80ms}
.render-fresh .kpis .kpi:nth-child(4){animation-delay:120ms}

.overlay.show .modal{animation:riseIn var(--motion-base) var(--ease) both}
.feedrow:first-child{animation:riseIn var(--motion-slow) var(--ease) both}
#bellCount{animation:popIn var(--motion-base) var(--ease) both}
@keyframes bellRing{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(4deg)}}
#bellBtn.has-unread .ion{animation:bellRing 2.6s ease-in-out infinite;transform-origin:50% 15%}
#refreshBtn.spinning .ion{animation:spin .7s linear infinite}
/* Chấm của trạng thái ĐANG chạy thì đập nhịp — phân biệt việc chưa xong với
   việc đã chốt. */
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.35}}
.bdg.b-amber .d{animation:badgePulse 1.8s ease-in-out infinite}
.dot.a{animation:badgePulse 1.6s ease-in-out infinite}
.dot{transition:background var(--motion-base)}
.thumb{transition:transform var(--motion-base) var(--ease)}
.tbl tbody tr:hover .thumb{transform:scale(1.05)}

/* ===========================================================================
   CO GIÃN THEO MÀN HÌNH
   Cổng quản trị chủ yếu dùng trên máy để bàn, nhưng phải không vỡ ở mọi cỡ.
   Bốn mốc: 1280 (thu hẹp lưới), 1024 (thanh bên thu gọn), 860 (thanh bên trượt
   ra), 640 (một cột).
   =========================================================================== */
@media (max-width:1280px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .chartsummary{grid-template-columns:repeat(2,1fr)}
  .content{padding:var(--sp-5)}
  .grid.g-2-1,.grid.g-1-2,.grid.g-3-2{grid-template-columns:minmax(0,1fr)}
  .grid.g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  :root{--sidebar-w:var(--sidebar-w-collapsed)}
  .brand .btext,.brand .navtoggle,.nav a .lbl,.nav a .tag,.sidefoot .st .lb{display:none}
  .nav a{justify-content:center;padding-left:0;padding-right:0}
  .nav .grp{height:1px;padding:0;margin:var(--sp-3);background:var(--nav-line);overflow:hidden;text-indent:-999px}
  .nav a:hover::after{
    content:attr(data-label);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
    background:var(--nav-bg);color:var(--nav-text-hi);border:1px solid var(--nav-line);
    padding:5px 9px;border-radius:var(--radius-sm);font-size:11.5px;font-weight:600;
    white-space:nowrap;z-index:50;box-shadow:var(--shadow-md);pointer-events:none;
  }
  .sidefoot{padding:var(--sp-3) 0}
  .sidefoot .st{justify-content:center}
  .header .search{max-width:260px}
  .metriccards{grid-template-columns:repeat(2,1fr)}
  .dash-intro{grid-template-columns:1fr;padding:28px}
  .dash-intro-state{min-height:132px}
  .authgate-stage{grid-template-columns:minmax(0,1fr) minmax(360px,.9fr)}
  .authgate-story{padding:38px}
  .authgate-copy h1{font-size:32px}
}
@media (max-width:860px){
  /* Thanh bên trượt ra khi gọi, không chiếm chỗ thường trực. */
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w-collapsed);transition:transform var(--motion-base) var(--ease)}
  body.nav-open .sidebar{transform:none;box-shadow:var(--shadow-lg)}
  .main{margin-left:0}
  .menubtn{display:grid}
  .header{padding:0 var(--sp-4);gap:var(--sp-3)}
  .header .search{display:none}
  .who .whotext{display:none}
  .content{padding:var(--sp-4)}
  body.nav-open::after{content:"";position:fixed;inset:0;background:var(--overlay-c);z-index:35}
  .authgate{padding:16px}
  .authgate-stage{display:block;min-height:0;max-width:520px;border-radius:20px}
  .authgate-story{display:none}
  .authgate-card{max-width:none;padding:42px}
  .authgate-mobilemark{display:grid}
}
@media (max-width:640px){
  .header{padding:0 10px;gap:8px}
  .header .htitle{flex:1}
  .header .hspace{display:none}
  .header .crumb{display:none}
  .header h1{font-size:14.5px}
  .apibtn{width:34px;height:34px;padding:0;justify-content:center}
  .who{padding-left:0;border-left:0}
  .whotrigger{padding:1px}.whotrigger .chev{display:none}
  .kpis,.chartsummary,.metriccards{grid-template-columns:1fr}
  .grid.g-2,.grid.g-3,.grid.g-4{grid-template-columns:minmax(0,1fr)}
  .row2,.row3{grid-template-columns:minmax(0,1fr)}
  .apibtn span:not(.dot){display:none}
  .filters{gap:var(--sp-2)}
  .tabs{width:100%;overflow-x:auto}
  .modal,.modal.lg{width:96vw}
  .drawer{width:100vw}
  .toasts{left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4)}
  .toast{min-width:0}
  .empty{padding:var(--sp-8) var(--sp-4)}
  .dash-intro{padding:22px;border-radius:14px}
  .dash-intro h2{font-size:25px}
  .dash-intro-actions{flex-direction:column}
  .dash-intro-state{display:none}
  .authgate-card{padding:30px 24px}
  .authgate-card h2{font-size:24px}
}

/* In ấn: bỏ khung điều hướng, giữ nội dung. */
@media print{
  .sidebar,.header,.toasts,.overlay{display:none!important}
  .main{margin-left:0}
  .panel,.kpi{border-color:#ccc;break-inside:avoid}
}

/* ---------------------------------------------------------------------------
   Kích thước vùng chạm tối thiểu (WCAG 2.2 AA — 2.5.8 Target Size, 24x24px).
   Trang quản trị cố tình dày đặc thông tin, nên KHÔNG phóng to các điều khiển
   này về mặt thị giác: chỉ nới vùng bấm bằng pseudo-element hoặc min-height,
   giữ nguyên bố cục bảng. Đo được trước đó: .switch 38x22, .seg button 51x22,
   button.link 65x15, ô tìm kiếm 220x15 — tất cả đều dưới ngưỡng 24px.
   --------------------------------------------------------------------------- */
.switch::after{content:"";position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%)}
.seg button{min-height:24px}
.search input{min-height:24px}
/* button.link nằm trong ô bảng: nới vùng bấm mà không đổi chiều cao dòng.
   Cần inline-block thì hộp định vị mới bao đủ dải 24px (hộp inline bị cắt theo
   line box, nên nửa dưới của dải rơi ra ngoài và chạm vào <td>). */
.tbl button.link{position:relative;display:inline-block}
.tbl button.link::after{content:"";position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%)}
/* Liên kết "Xem tất cả" trong .ph .sub của bảng điều khiển (đo được 71x12). */
.panel .ph .sub a{position:relative;display:inline-block}
.panel .ph .sub a::after{content:"";position:absolute;left:0;right:0;top:50%;height:24px;transform:translateY(-50%)}

/* Bỏ qua điều hướng: thanh bên có 16 mục, trước đây người dùng bàn phím phải Tab
   hết cả 16 mục đó ở MỌI khung nhìn mới tới được nội dung. Chỉ hiện khi có focus. */
.skip-link{position:fixed;z-index:200;left:12px;top:12px;padding:10px 16px;background:var(--brand,#111);color:#fff;
  border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;transform:translateY(-160%);transition:transform var(--motion-fast) var(--ease)}
.skip-link:focus-visible{transform:none}