/* ==========================================================================
   AMX SSO – design tokens & component classes dùng chung
   Nguyên tắc: phẳng, card nổi bằng bóng đổ (không viền), bo góc 6–8px, màu đặc (không gradient),
   chữ tối – tương phản rõ. Màu thương hiệu #4326C4 lấy từ logo.

   Chế độ sáng / tối: mọi màu nền, chữ, viền đều là biến CSS bên dưới.
   Chế độ tối = <html data-theme="dark"> (đặt bởi assets/js/theme.js) ghi đè các biến này.

   Nguồn: bộ template AMX (claude_sso) – giữ nguyên tên lớp và token để dùng chung với
   AMX CRM / Inbox / CMS / Mail. Đã bỏ phần chỉ phục vụ trang demo của template:
   bảng lệnh Ctrl K (.palette-panel/.pal-item), thẻ đồng hồ giả lập (.storage-card/.st-mini),
   chuyển tài khoản demo (.demo-acct), khối JWT của trang "Kiểm tra JWT" (.jwt-*).
   ========================================================================== */

:root {
  /* Thương hiệu – #4326C4 (logo) ở bậc 600. Giá trị dạng "R G B" để dùng được với alpha. */
  --brand-50: 243 241 254;
  --brand-100: 232 228 253;
  --brand-200: 212 204 251;
  --brand-300: 182 168 247;
  --brand-400: 145 123 240;
  --brand-500: 91 63 214;
  --brand-600: 67 38 196;
  --brand-700: 55 29 163;
  --brand-800: 45 24 128;
  --brand-900: 35 18 98;
  --brand-950: 23 11 69;
  --brand-hover: 55 29 163;  /* nền nút chính khi rê chuột */
  --link: 67 38 196;         /* màu liên kết */

  /* Bề mặt */
  --surface: 255 255 255;    /* panel, menu, ô nhập, modal */
  --page: 244 245 248;       /* nền trang: xám trung tính (không trùng tông tím của card) */
  --tint: 248 249 251;       /* nền nhấn rất nhạt: đầu bảng, hàng khi rê chuột */
  --hover: 242 244 247;      /* nền khi rê chuột lên mục menu, nhãn xám */
  --line: 228 231 238;
  --line-strong: 208 213 224;
  --track: 208 213 221;      /* rãnh công tắc, thanh cuộn */
  --disabled-bg: 249 250 251;

  /* Chữ: ink (chính) · ink-2 (phụ) · ink-3 (chú thích) – đều đạt tương phản ≥ 4.5:1 trên nền */
  --ink: 29 41 57;
  --ink-2: 71 84 103;
  --ink-3: 102 112 133;
  --ink-4: 152 162 179;
  --text-strong: 52 64 84;   /* nhãn form, nút phụ */
  --placeholder: 152 162 179;
  --good-ink: #067647;
  --warn-ink: #b54708;
  --bad-ink: #b42318;
  --invalid: 180 35 24;      /* viền ô lỗi (bản "R G B" của --bad-ink, để dùng được với alpha) */

  /* Font: đặt bởi assets/js/theme.js (ghi đè biến này). Giá trị dưới đây chỉ là dự phòng. */
  --font-sans: 'Google Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Màu biểu đồ (đã chạy validate_palette cho từng chế độ – dùng đúng thứ tự, tối đa 5 nhóm) */
  --series-1: #5b3fd6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --ramp-1: #a99bf1; --ramp-2: #8a75e8; --ramp-3: #6c52dc; --ramp-4: #5136c8; --ramp-5: #3a22a3; /* phễu: 1 hue, nhạt → đậm */
  --chart-grid: #eaecf0;
  --chart-muted: #667085;

  /* Card nổi bằng bóng đổ mềm (tông tím nhạt) thay cho viền */
  --shadow-card: 0 1px 2px rgb(40 30 110 / .05), 0 4px 14px -4px rgb(40 30 110 / .09);
  --shadow-hover: 0 2px 4px rgb(40 30 110 / .06), 0 12px 28px -8px rgb(40 30 110 / .18);
  --shadow-pop: 0 4px 8px rgb(40 30 110 / .06), 0 16px 40px -8px rgb(40 30 110 / .22);
  --shadow-shell-r: 2px 0 14px -4px rgb(40 30 110 / .10);
  --shadow-shell-b: 0 2px 14px -6px rgb(40 30 110 / .14);
  --overlay: rgb(16 24 40 / .45);
  --bulk: #1d2939;

  --radius: 6px;        /* nút, ô nhập, thẻ nhỏ */
  --radius-lg: 8px;     /* panel, menu */
}

/* ---------- Chế độ tối ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Thương hiệu: nền nhạt (50–200) thành nền tối; chữ nhấn (700–900) thành màu sáng; 600 sáng hơn để nổi trên nền tối */
  --brand-50: 30 27 66;
  --brand-100: 42 37 90;
  --brand-200: 60 52 125;
  --brand-300: 88 74 178;
  --brand-400: 128 108 238;
  --brand-500: 124 100 240;
  --brand-600: 108 84 232;
  --brand-700: 176 164 250;
  --brand-800: 205 198 252;
  --brand-900: 225 221 253;
  --brand-950: 240 238 254;
  --brand-hover: 128 106 245;
  --link: 176 164 250;

  --surface: 22 25 36;
  --page: 13 15 22;
  --tint: 27 31 44;
  --hover: 36 41 58;
  --line: 41 46 63;
  --line-strong: 62 68 90;
  --track: 62 68 90;
  --disabled-bg: 27 31 44;

  --ink: 236 238 244;
  --ink-2: 178 185 202;
  --ink-3: 139 147 168;
  --ink-4: 100 108 130;
  --text-strong: 214 219 230;
  --placeholder: 107 115 138;
  --good-ink: #6ce9a6;
  --warn-ink: #fec84b;
  --bad-ink: #fda29b;
  --invalid: 253 162 155;

  --series-1: #9085e9;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --ramp-1: #5846c0; --ramp-2: #6e5ad6; --ramp-3: #8672ea; --ramp-4: #a291f5; --ramp-5: #c3b8fa; /* dim → sáng */
  --chart-grid: #2a2f40;
  --chart-muted: #8b93a8;

  --shadow-card: 0 1px 2px rgb(0 0 0 / .35), 0 6px 18px -6px rgb(0 0 0 / .5);
  --shadow-hover: 0 2px 4px rgb(0 0 0 / .4), 0 14px 30px -8px rgb(0 0 0 / .65);
  --shadow-pop: 0 4px 10px rgb(0 0 0 / .4), 0 18px 44px -8px rgb(0 0 0 / .7);
  --shadow-shell-r: 2px 0 14px -4px rgb(0 0 0 / .5);
  --shadow-shell-b: 0 2px 14px -6px rgb(0 0 0 / .55);
  --overlay: rgb(0 0 0 / .62);
  --bulk: #2c3146;
}

/* Font tiêu đề (tuỳ chọn, đặt bởi theme.js → THEME.headingFont); mặc định dùng chung font chính */
h1, h2, h3, h4, .panel-title, .stat .font-semibold, .font-heading { font-family: var(--font-heading, var(--font-sans)); }
/* Font riêng cho menu bên trái (tuỳ chọn, THEME.sidebarFont) */
#sidebar { font-family: var(--font-sidebar, var(--font-sans)); }
/* Phudu (chỉ khi được chọn làm phông menu trái — mặc định nay là AM Sans) viết hoa toàn bộ,
   nét rộng nên nhãn dài bị cắt thành "…" trong sidebar 248px. Siết nhẹ khoảng cách chữ (không
   đổi cỡ chữ, không đổi bề rộng sidebar) để hiện đủ cả nhãn. AM Sans có chữ thường thật nên
   không cần chỉnh. data-sidebar-font do theme.js đặt theo đúng phông đang dùng. */
html[data-sidebar-font="phudu"] #sidebar .nav-label { letter-spacing: -.012em; }

html { text-rendering: optimizeLegibility; } /* không bật antialiased: trên macOS nó làm chữ mỏng đi */

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--ink));
  background-color: rgb(var(--page));
}

::selection { background: rgb(var(--brand-200)); }

* { scrollbar-width: thin; scrollbar-color: rgb(var(--track)) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgb(var(--track)); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-4)); }

[data-lucide] { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Lưới mặc định 1 cột co được (minmax(0,1fr)) – tránh tràn ngang trên mobile khi bên trong có bảng/biểu đồ.
   Các lớp grid-cols-* của Tailwind nằm sau file này nên vẫn ghi đè bình thường. */
.grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Panel: khối nội dung duy nhất, không lồng panel trong panel ---------- */
.panel {
  background: rgb(var(--surface));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.panel-hover { transition: box-shadow .2s ease; }
.panel-hover:hover { box-shadow: var(--shadow-hover); }
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  min-height: 3.5rem; padding: .75rem 1.25rem; border-bottom: 1px solid rgb(var(--line));
}
.panel-title { font-size: 15px; font-weight: 600; color: rgb(var(--ink)); display: flex; align-items: center; gap: .5rem; }
.panel-title::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: rgb(var(--brand-600)); flex-shrink: 0; }
.panel-sub { font-size: 13px; color: rgb(var(--ink-3)); }
.panel-body { padding: 1.25rem; }
.link { color: rgb(var(--link)); font-weight: 500; }
.link:hover { color: rgb(var(--brand-800)); text-decoration: underline; }

/* ---------- Tông màu: dùng cho thẻ thống kê (.stat) và chip icon ---------- */
.tone-brand { --tone-bg: #ede9fd; --tone-fg: rgb(var(--brand-600)); --tone-ink: rgb(var(--brand-700)); }
.tone-blue  { --tone-bg: #eff8ff; --tone-fg: #1570ef; --tone-ink: #175cd3; }
.tone-green { --tone-bg: #ecfdf3; --tone-fg: #039855; --tone-ink: #067647; }
.tone-amber { --tone-bg: #fffaeb; --tone-fg: #f79009; --tone-ink: #b54708; }
.tone-red   { --tone-bg: #fef3f2; --tone-fg: #f04438; --tone-ink: #b42318; }
.tone-pink  { --tone-bg: #fdf2fa; --tone-fg: #ee46bc; --tone-ink: #c11574; }
.tone-cyan  { --tone-bg: #ecfdff; --tone-fg: #06aed4; --tone-ink: #0e7090; }
.stat { background: var(--tone-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.125rem 1.25rem; }
.chip {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-lg); background: var(--tone-fg); color: #fff;
}
.chip-soft { background: var(--tone-bg); color: var(--tone-ink); }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 2.125rem; padding: 0 .875rem; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; user-select: none;
}
.btn:focus-visible { outline: 2px solid rgb(var(--brand-500)); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { color: #fff; background: rgb(var(--brand-600)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--brand-hover)); }
.btn-ghost { color: rgb(var(--text-strong)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--tint)); border-color: rgb(var(--brand-300)); color: rgb(var(--brand-700)); }
.btn-plain { color: rgb(var(--ink-3)); background: transparent; }
.btn-plain:hover:not(:disabled) { color: rgb(var(--brand-700)); background: rgb(var(--brand-50)); }
.btn-danger { color: #fff; background: #d92d20; }
.btn-danger:hover:not(:disabled) { background: #b42318; }
.btn-sm { height: 1.75rem; padding: 0 .625rem; font-size: 13px; }
.btn-lg { height: 2.5rem; padding: 0 1.25rem; font-size: 15px; }
.btn-icon { width: 2.125rem; padding: 0; }
.btn-icon.btn-sm { width: 1.75rem; }

/* ---------- Form ---------- */
.input, .select, .textarea {
  width: 100%; height: 2.125rem; padding: 0 .75rem; border-radius: var(--radius);
  border: 1px solid rgb(var(--line-strong)); background: rgb(var(--surface)); color: rgb(var(--ink));
  font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; padding: .5rem .75rem; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: rgb(var(--placeholder)); }
.input:hover, .select:hover, .textarea:hover { border-color: rgb(var(--brand-300)); }
.input:focus, .select:focus, .textarea:focus {
  border-color: rgb(var(--brand-600));
  box-shadow: 0 0 0 3px rgb(var(--brand-600) / .18);
}
.input:disabled { background: rgb(var(--disabled-bg)); color: rgb(var(--placeholder)); cursor: not-allowed; }
.select {
  appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center;
}
html[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.field-label { display: block; margin-bottom: .375rem; font-size: 13px; font-weight: 500; color: rgb(var(--text-strong)); }
.field-label .req { color: #d92d20; margin-left: 2px; }

.check {
  appearance: none; width: 1rem; height: 1rem; border-radius: 4px; cursor: pointer;
  border: 1.5px solid rgb(var(--ink-4)); background: rgb(var(--surface)); display: inline-grid; place-content: center;
  transition: all .15s; flex-shrink: 0;
}
.check:hover { border-color: rgb(var(--brand-600)); }
.check:checked { background: rgb(var(--brand-600)); border-color: rgb(var(--brand-600)); }
.check:checked::after {
  content: ''; width: .3rem; height: .55rem; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check:indeterminate { background: rgb(var(--brand-600)); border-color: rgb(var(--brand-600)); }
.check:indeterminate::after { content: ''; width: .5rem; height: 2px; background: #fff; }
.check:focus-visible { outline: 2px solid rgb(var(--brand-500)); outline-offset: 2px; }
.check.round { border-radius: 9999px; width: 1.125rem; height: 1.125rem; }

.switch { position: relative; display: inline-block; vertical-align: middle; width: 2.25rem; height: 1.25rem; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 9999px; background: rgb(var(--track)); transition: background .2s; }
.switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem;
  border-radius: 9999px; background: #fff; transition: transform .2s;
}
.switch input:checked + i { background: rgb(var(--brand-600)); }
.switch input:checked + i::after { transform: translateX(1rem); }

/* ---------- Tag (nhãn phân loại) & Status (trạng thái = chấm màu + chữ) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .25rem; height: 1.375rem; padding: 0 .5rem;
  border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.tag-brand  { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.tag-green  { background: #ecfdf3; color: #067647; }
.tag-orange { background: #fff4ed; color: #b93815; }
.tag-red    { background: #fef3f2; color: #b42318; }
.tag-blue   { background: #eff8ff; color: #175cd3; }
.tag-pink   { background: #fdf2fa; color: #c11574; }
.tag-cyan   { background: #ecfdff; color: #0e7090; }
.tag-gray   { background: rgb(var(--hover)); color: rgb(var(--text-strong)); }

.status { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.status::before { content: ''; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--dot, #98a2b3); }
.status-blue   { --dot: #2e90fa; }
.status-brand  { --dot: rgb(var(--brand-500)); }
.status-orange { --dot: #f79009; }
.status-green  { --dot: #12b76a; }
.status-red    { --dot: #f04438; }
.status-gray   { --dot: #98a2b3; }

/* ---------- Avatar: màu đặc nhạt + chữ đậm cùng tông ---------- */
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; font-weight: 600; border-radius: 9999px;
  background: var(--av-bg); color: var(--av-fg);
}
.av-0 { --av-bg: #e1dbfc; --av-fg: #371da3; }
.av-1 { --av-bg: #d1e9ff; --av-fg: #175cd3; }
.av-2 { --av-bg: #d1fadf; --av-fg: #027a48; }
.av-3 { --av-bg: #ffe6d5; --av-fg: #b93815; }
.av-4 { --av-bg: #fce7f6; --av-fg: #c11574; }
.av-5 { --av-bg: #fef0c7; --av-fg: #b54708; }
.av-solid { --av-bg: rgb(var(--brand-600)); --av-fg: #fff; }

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1; padding: .625rem 1rem; text-align: left; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: rgb(var(--ink-2)); background: rgb(var(--tint));
  border-bottom: 1px solid rgb(var(--line));
}
.tip { cursor: help; text-decoration: underline dotted; text-decoration-color: rgb(var(--ink-4)); text-underline-offset: 4px; }
.tbl thead th.text-right { text-align: right; }
.tbl thead th.text-center { text-align: center; }
.tbl tbody td { padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--line)); vertical-align: middle; }
.tbl tbody tr:hover { background: rgb(var(--tint)); }
.tbl tfoot td { padding: .75rem 1rem; border-top: 1px solid rgb(var(--line)); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.is-selected { background: rgb(var(--brand-50)); }
.tbl th:first-child, .tbl td:first-child { padding-left: 1.25rem; }
.tbl th:last-child, .tbl td:last-child { padding-right: 1.25rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Sidebar & topbar (phân tách bằng bóng đổ) ---------- */
.shell-r { box-shadow: var(--shadow-shell-r); }
.shell-b { box-shadow: var(--shadow-shell-b); }
.nav-group { padding: 0 .75rem; margin-bottom: 1.25rem; }
.nav-title { padding: 0 .75rem; margin-bottom: .375rem; font-size: 12px; font-weight: 500; color: rgb(var(--ink-3)); }
.nav-item {
  display: flex; align-items: center; gap: .625rem; height: 2.375rem; padding: 0 .75rem;
  border-radius: var(--radius); font-size: 14px; font-weight: 500; color: rgb(var(--ink-2));
  transition: background-color .15s, color .15s;
}
.nav-item [data-lucide] { width: 1.125rem; height: 1.125rem; color: rgb(var(--ink-3)); transition: color .15s; }
.nav-item:hover { background: rgb(var(--brand-50) / .7); color: rgb(var(--brand-700)); }
.nav-item:hover [data-lucide] { color: rgb(var(--brand-700)); }
.nav-item.active { background: rgb(var(--brand-100)); color: rgb(var(--brand-700)); font-weight: 600; }
.nav-item.active [data-lucide] { color: rgb(var(--brand-700)); }

/* ---------- Dropdown / Menu ---------- */
.menu {
  position: absolute; z-index: 50; min-width: 12rem; padding: .25rem;
  background: rgb(var(--surface)); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.menu-item {
  display: flex; align-items: center; gap: .625rem; width: 100%; padding: .4375rem .625rem;
  border-radius: 4px; font-size: 14px; color: rgb(var(--ink-2)); text-align: left; cursor: pointer;
}
.menu-item:hover { background: rgb(var(--hover)); color: rgb(var(--ink)); }
.menu-item [data-lucide] { color: rgb(var(--ink-3)); }
.menu-sep { height: 1px; margin: .25rem; background: rgb(var(--line)); }

/* ---------- Overlay: drawer & modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.overlay.open { visibility: visible; }
.overlay-mask { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity .2s; }
.overlay.open .overlay-mask { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); display: flex; flex-direction: column;
  background: rgb(var(--surface)); transform: translateX(100%); transition: transform .25s ease;
}
.overlay.open .drawer-panel { transform: none; }
.modal-panel {
  position: absolute; left: 50%; top: 50%; width: min(440px, calc(100% - 2rem));
  background: rgb(var(--surface)); border-radius: 10px; box-shadow: var(--shadow-pop);
  transform: translate(-50%, -48%); opacity: 0; transition: all .2s ease;
}
.overlay.open .modal-panel { transform: translate(-50%, -50%); opacity: 1; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  display: flex; align-items: center; gap: .625rem; min-width: 16rem; padding: .625rem .875rem;
  background: rgb(var(--surface)); border-radius: var(--radius-lg); font-size: 14px;
  box-shadow: var(--shadow-pop); animation: toast-in .2s ease-out;
}
.toast.out { opacity: 0; transition: opacity .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Misc ---------- */
.progress { height: 6px; border-radius: 3px; background: rgb(var(--brand-100)); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--brand-600)); }

.bulk-bar { background: var(--bulk); color: #fff; }

.kbd {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .35rem; border-radius: 4px;
  font-size: 12px; font-weight: 500; color: rgb(var(--ink-3)); background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong));
}

/* Số bước trong hướng dẫn cài đặt */
.step { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-right: .5rem; border-radius: 9999px; background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); font-size: 12px; font-weight: 600; }

/* Khối mã: tiêu đề + nút sao chép, cuộn ngang khi dòng dài */
.codebox { border-radius: var(--radius); background: rgb(var(--tint)); overflow: hidden; }
.codebox-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem .5rem .25rem .875rem; font-size: 13px; color: rgb(var(--ink-2)); border-bottom: 1px solid rgb(var(--line)); }
.codebox pre { margin: 0; padding: .875rem; overflow: auto; max-height: 21rem; tab-size: 2; white-space: pre; color: rgb(var(--ink));
  font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Phân đoạn (segmented): nền nhạt, mục đang chọn tô màu thương hiệu */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; padding: 2px; gap: 2px; border-radius: var(--radius); background: rgb(var(--brand-50)); }
.seg button {
  height: 1.875rem; padding: 0 .75rem; border-radius: 4px; font-size: 13px; font-weight: 500;
  color: rgb(var(--ink-2)); white-space: nowrap; transition: background-color .15s, color .15s;
}
.seg button:hover { color: rgb(var(--brand-700)); }
.seg button.active:hover { color: #fff; }
.seg button.active { background: rgb(var(--brand-600)); color: #fff; }

/* Tab gạch chân. Hai dạng mục tab dùng CÙNG một kiểu:
   - <button data-tab="…">  đổi nội dung bằng JS (không đổi URL),
   - <a href="…">           tab là liên kết thật, giữ query string (tab trạng thái của các trang danh sách).
   Mục đang chọn nhận .active (và aria-current="page" ở dạng liên kết) → cùng màu, cùng gạch chân. */
.tabs { display: flex; gap: 1.5rem; padding: 0 1.25rem; border-bottom: 1px solid rgb(var(--line)); overflow-x: auto; }
.tabs button,
.tabs a {
  position: relative; display: inline-flex; align-items: center; gap: .375rem; height: 3rem;
  font-size: 14px; font-weight: 500; color: rgb(var(--ink-2)); white-space: nowrap; transition: color .15s;
}
.tabs a { text-decoration: none; }
.tabs button:hover,
.tabs a:hover { color: rgb(var(--ink)); }
/* Vòng tiêu điểm lùi vào trong: .tabs cuộn ngang nên vòng vẽ ra ngoài sẽ bị cắt. */
.tabs button:focus-visible,
.tabs a:focus-visible { outline: 2px solid rgb(var(--brand-500)); outline-offset: -2px; border-radius: 4px; }
.tabs button.active,
.tabs a.active,
.tabs a[aria-current="page"] { color: rgb(var(--brand-700)); font-weight: 600; }
.tabs button.active::after,
.tabs a.active::after,
.tabs a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgb(var(--brand-600));
}
.tabs .count {
  min-width: 1.375rem; height: 1.25rem; padding: 0 .375rem; display: inline-grid; place-items: center;
  border-radius: 4px; font-size: 12px; font-weight: 600; color: rgb(var(--ink-2)); background: rgb(var(--brand-50));
}
.tabs button.active .count,
.tabs a.active .count,
.tabs a[aria-current="page"] .count { color: #fff; background: rgb(var(--brand-600)); }

/* ---------- Dropdown tự vẽ (thay <select> gốc): ô chọn + danh sách nổi bằng bóng đổ, không viền ---------- */
.dd { position: relative; }
.dd-trigger { display: flex; align-items: center; text-align: left; }
.dd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-trigger[aria-expanded="true"] { border-color: rgb(var(--brand-600)); box-shadow: 0 0 0 3px rgb(var(--brand-600) / .18); }
.dd-pop {
  position: fixed; z-index: 90; padding: 4px; background: rgb(var(--surface)); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); animation: dd-in .12s ease-out;
}
.dd-search {
  display: flex; align-items: center; gap: .5rem; height: 2.125rem; margin: 2px 2px 4px; padding: 0 .625rem;
  border-radius: var(--radius); background: rgb(var(--page)); color: rgb(var(--ink-3));
}
.dd-search:focus-within { background: rgb(var(--brand-50)); }
.dd-search input { flex: 1; min-width: 0; background: transparent; outline: none; font-size: 14px; color: rgb(var(--ink)); }
.dd-search input::placeholder { color: rgb(var(--placeholder)); }
.dd-list { max-height: min(264px, 45vh); overflow-y: auto; }
.dd-opt {
  display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem; border-radius: 4px;
  font-size: 14px; color: rgb(var(--ink-2)); cursor: pointer;
}
.dd-opt.hl { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.dd-opt.sel { color: rgb(var(--brand-700)); font-weight: 600; }
.dd-opt.off { color: rgb(var(--ink-4)); cursor: not-allowed; }
.dd-empty { padding: .875rem; text-align: center; font-size: 13px; color: rgb(var(--ink-3)); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Select gốc sau khi được ui.js nâng cấp: ẩn khỏi mắt nhưng KHÔNG dùng display:none —
   trình duyệt còn thấy nó để báo lỗi `required` khi gửi form (nếu ẩn hẳn, Chrome chặn gửi
   với thông báo "An invalid form control is not focusable" mà không hiện gì cho người dùng).
   Viền lỗi do ui.js bật trên .dd-trigger khi sự kiện `invalid` bắn ra. */
.dd > select.dd-native {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
.dd-trigger[aria-invalid="true"] {
  border-color: rgb(var(--invalid));
  box-shadow: 0 0 0 3px rgb(var(--invalid) / .18);
}



/* ---------- Sidebar thu gọn (chỉ từ màn hình lớn; mobile vẫn là ngăn kéo) ---------- */
#sidebar { transition: transform .2s ease, width .2s ease; }
@media (min-width: 1024px) {
  body.sb-collapsed #sidebar { width: 72px; }
  body.sb-collapsed #sidebar .brand-text,
  body.sb-collapsed #sidebar .nav-label { display: none; }
  /* Khối logo đầu menu trái: trước đây là <a> trực tiếp, nay bọc trong #eco-brand và JS đổi
     thành .eco-brand-btn (ecosystem.js) – thu gọn thì cả hai dạng đều chỉ còn logo. */
  body.sb-collapsed #sidebar > a:first-child,
  body.sb-collapsed #sidebar #eco-brand > a:first-child,
  body.sb-collapsed #sidebar .eco-brand-btn { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sb-collapsed .nav-title { height: 1px; margin: .625rem .5rem; padding: 0; font-size: 0; background: rgb(var(--line)); }
  body.sb-collapsed .nav-group:first-child .nav-title { display: none; }
  body.sb-collapsed .nav-item { position: relative; justify-content: center; padding: 0; }
  body.sb-collapsed .nav-badge {
    position: absolute; top: 6px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0;
    border-radius: 9999px; font-size: 0; color: transparent; background: rgb(var(--brand-500));
  }
  body.sb-collapsed .nav-badge.is-red { background: #f04438; }
  body.sb-collapsed [data-sidebar-collapse] { justify-content: center; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   CHẾ ĐỘ TỐI – phần ghi đè
   (a) Thành phần tự viết (tag, tông màu, avatar…)
   (b) Các lớp màu có sẵn của Tailwind đang dùng trong markup (bg-white, text-emerald-700, …)
   ========================================================================== */
/* Ảnh có hai bản: .only-light chỉ hiện ở chế độ sáng, .only-dark chỉ hiện ở chế độ tối */
html[data-theme="dark"] .only-light { display: none !important; }
html:not([data-theme="dark"]) .only-dark { display: none !important; }

html[data-theme="dark"] .tone-brand { --tone-bg: rgb(124 100 240 / .17); }
html[data-theme="dark"] .tone-blue  { --tone-bg: rgb(46 144 250 / .14);  --tone-ink: #84caff; }
html[data-theme="dark"] .tone-green { --tone-bg: rgb(18 183 106 / .14);  --tone-ink: #6ce9a6; }
html[data-theme="dark"] .tone-amber { --tone-bg: rgb(247 144 9 / .14);   --tone-ink: #fec84b; }
html[data-theme="dark"] .tone-red   { --tone-bg: rgb(240 68 56 / .14);   --tone-ink: #fda29b; }
html[data-theme="dark"] .tone-pink  { --tone-bg: rgb(238 70 188 / .14);  --tone-ink: #faa7e0; }
html[data-theme="dark"] .tone-cyan  { --tone-bg: rgb(6 174 212 / .14);   --tone-ink: #67e3f9; }

html[data-theme="dark"] .tag-brand  { background: rgb(var(--brand-100)); }
html[data-theme="dark"] .tag-green  { background: rgb(18 183 106 / .16); color: #6ce9a6; }
html[data-theme="dark"] .tag-orange { background: rgb(247 144 9 / .16);  color: #fdb022; }
html[data-theme="dark"] .tag-red    { background: rgb(240 68 56 / .16);  color: #fda29b; }
html[data-theme="dark"] .tag-blue   { background: rgb(46 144 250 / .16); color: #84caff; }
html[data-theme="dark"] .tag-pink   { background: rgb(238 70 188 / .16); color: #faa7e0; }
html[data-theme="dark"] .tag-cyan   { background: rgb(6 174 212 / .16);  color: #67e3f9; }

html[data-theme="dark"] .av-0 { --av-bg: #2d2764; --av-fg: #c4baf9; }
html[data-theme="dark"] .av-1 { --av-bg: #1a3358; --av-fg: #84caff; }
html[data-theme="dark"] .av-2 { --av-bg: #123d2c; --av-fg: #6ce9a6; }
html[data-theme="dark"] .av-3 { --av-bg: #4a2512; --av-fg: #fdb592; }
html[data-theme="dark"] .av-4 { --av-bg: #4a1d3c; --av-fg: #faa7e0; }
html[data-theme="dark"] .av-5 { --av-bg: #4a3412; --av-fg: #fec84b; }

/* Lớp tiện ích Tailwind dùng màu cố định → đổi sang biến */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .focus\:\!bg-white:focus { background-color: rgb(var(--surface)) !important; }
html[data-theme="dark"] .ring-white { --tw-ring-color: rgb(var(--surface)); }
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgb(var(--hover)); }
html[data-theme="dark"] .bg-gray-50 { background-color: rgb(var(--tint)); }
/* Các màu của Tailwind (nền nhạt → nền tối trong suốt; chữ đậm → chữ sáng) */
html[data-theme="dark"] .text-emerald-600 { color: #34d399; }
html[data-theme="dark"] .text-emerald-700 { color: #6ee7b7; }
html[data-theme="dark"] .text-emerald-800 { color: #a7f3d0; }
html[data-theme="dark"] .text-emerald-900 { color: #d1fae5; }
html[data-theme="dark"] .text-emerald-900\/80 { color: rgb(209 250 229 / .8); }
html[data-theme="dark"] .bg-emerald-50 { background-color: rgb(16 185 129 / .12); }
html[data-theme="dark"] .bg-emerald-100,
html[data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgb(16 185 129 / .2); }
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .\!text-red-600 { color: #f87171; }
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .\!text-red-700 { color: #fca5a5; }
html[data-theme="dark"] .text-red-900 { color: #fee2e2; }
html[data-theme="dark"] .text-red-900\/80 { color: rgb(254 226 226 / .8); }
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .\!bg-red-50 { background-color: rgb(239 68 68 / .12); }
html[data-theme="dark"] .text-blue-600 { color: #60a5fa; }
html[data-theme="dark"] .text-blue-700 { color: #93c5fd; }
html[data-theme="dark"] .text-blue-900 { color: #dbeafe; }
html[data-theme="dark"] .text-blue-900\/80 { color: rgb(219 234 254 / .8); }
html[data-theme="dark"] .bg-blue-50 { background-color: rgb(59 130 246 / .12); }
html[data-theme="dark"] .bg-blue-100 { background-color: rgb(59 130 246 / .2); }
html[data-theme="dark"] .text-amber-600 { color: #fbbf24; }
html[data-theme="dark"] .text-amber-700 { color: #fcd34d; }
html[data-theme="dark"] .text-amber-900 { color: #fef3c7; }
html[data-theme="dark"] .text-amber-900\/80 { color: rgb(254 243 199 / .8); }
html[data-theme="dark"] .bg-amber-50 { background-color: rgb(245 158 11 / .12); }
html[data-theme="dark"] .bg-amber-100 { background-color: rgb(245 158 11 / .2); }
html[data-theme="dark"] .text-orange-600 { color: #fb923c; }
html[data-theme="dark"] .text-orange-700 { color: #fdba74; }
html[data-theme="dark"] .bg-orange-50 { background-color: rgb(249 115 22 / .12); }
html[data-theme="dark"] .bg-orange-100 { background-color: rgb(249 115 22 / .2); }
html[data-theme="dark"] .text-pink-700 { color: #f9a8d4; }
html[data-theme="dark"] .bg-pink-100 { background-color: rgb(236 72 153 / .2); }
html[data-theme="dark"] .text-cyan-700 { color: #67e8f9; }
html[data-theme="dark"] .bg-cyan-100 { background-color: rgb(6 182 212 / .2); }



/* Chỉ hiện khi in */
.print-only { display: none; }
@media print { .print-only { display: block !important; } }

/* Bảng nhiều cột: giảm khoảng đệm ngang giữa các cột, giữ lề 1.25rem ở hai mép */
.tbl-tight thead th, .tbl-tight tbody td { padding-left: .625rem; padding-right: .625rem; }
.tbl-tight th:first-child, .tbl-tight td:first-child { padding-left: 1.25rem; }
.tbl-tight th:last-child, .tbl-tight td:last-child { padding-right: 1.25rem; }



/* Trang quản trị AMX SSO */
.bar-chart { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; align-items: stretch; }
.bc-y { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 11.5px; color: rgb(var(--ink-3)); padding-bottom: 1.25rem; }
.bc-plot { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid rgb(var(--line)); background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), rgb(var(--line) / .6) calc(25% - 1px), rgb(var(--line) / .6) 25%); position: relative; padding-bottom: 1.25rem; box-sizing: content-box; }
.bc-col { flex: 1; min-width: 0; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; outline: none; }
.bc-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.bc-bar { flex: 1; max-width: 14px; border-radius: 3px 3px 0 0; min-height: 1px; }
.bc-x { position: absolute; bottom: -1.25rem; left: 0; right: 0; text-align: center; font-size: 10.5px; color: rgb(var(--ink-3)); }
.bc-tip { display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 9.5rem; padding: .5rem .625rem; border-radius: var(--radius); background: #1d2939; color: #fff; font-size: 12px; box-shadow: var(--shadow-pop); pointer-events: none; }
.bc-tip b { display: block; margin-bottom: .25rem; } .bc-tip span { display: flex; align-items: center; gap: .375rem; } .bc-tip i { width: .5rem; height: .5rem; border-radius: 2px; }
.bc-col:hover .bc-tip, .bc-col:focus .bc-tip { display: block; }
.todo-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; border-radius: var(--radius); background: rgb(var(--tint)); text-decoration: none; color: inherit; }
.todo-item:hover { background: rgb(var(--brand-50)); }
.todo-ic { width: 2rem; height: 2rem; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0; background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.todo-ic.warn { background: #fffaeb; color: #b54708; } .todo-ic.bad { background: #fef3f2; color: #b42318; }
.rec-chip { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .5rem; height: 1.25rem; border-radius: 4px; font-size: 12px; font-weight: 600; }
.rec-ok { background: #ecfdf3; color: #067647; } .rec-warn { background: #fffaeb; color: #b54708; } .rec-missing, .rec-fail { background: #fef3f2; color: #b42318; }
html[data-theme="dark"] .rec-ok { background: rgb(18 183 106 / .16); color: #6ce9a6; } html[data-theme="dark"] .rec-warn { background: rgb(247 144 9 / .16); color: #fec84b; } html[data-theme="dark"] .rec-missing, html[data-theme="dark"] .rec-fail { background: rgb(240 68 56 / .16); color: #fda29b; }
.rule-card { padding: .75rem .875rem; border-radius: var(--radius); background: rgb(var(--tint)); }
.dns-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; background: rgb(var(--tint)); padding: .375rem .5rem; border-radius: 4px; display: block; }


/* ==========================================================================
   AMX SSO: thành phần dùng riêng cho đăng nhập tập trung
   ========================================================================== */
.note-box { display: flex; gap: .625rem; padding: .75rem .875rem; border-radius: var(--radius); background: rgb(var(--brand-50)); color: rgb(var(--brand-800)); font-size: 13.5px; line-height: 1.5; }
.note-box svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 1px; }
.note-box.warn { background: #fffaeb; color: #93370d; }
.note-box.bad { background: #fef3f2; color: #912018; }
html[data-theme="dark"] .note-box { color: rgb(var(--brand-800)); }
html[data-theme="dark"] .note-box.warn { background: rgb(247 144 9 / .14); color: #fec84b; }
html[data-theme="dark"] .note-box.bad { background: rgb(240 68 56 / .16); color: #fecdca; }
.meter { height: 4px; margin-top: .375rem; border-radius: 2px; background: rgb(var(--hover)); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; transition: width .15s, background-color .15s; }
.chip-btn { display: inline-flex; align-items: center; min-height: 2.125rem; padding: 0 .875rem; border-radius: 9999px; background: rgb(var(--surface)); box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); font-size: 14px; color: rgb(var(--ink-2)); cursor: pointer; border: 0; }
.chip-btn:hover { box-shadow: inset 0 0 0 1px rgb(var(--brand-400)); color: rgb(var(--brand-700)); } .chip-btn.is-on { background: rgb(var(--brand-600)); color: #fff; box-shadow: none; }
.empty-state { text-align: center; padding: 3rem 1.5rem; color: rgb(var(--ink-2)); }
.empty-state svg { width: 2.25rem; height: 2.25rem; margin: 0 auto; color: rgb(var(--ink-4)); }
.shell-t { box-shadow: 0 -1px 0 rgb(var(--line)); }
.mc-dl { display: grid; grid-template-columns: 9rem 1fr; gap: .375rem .75rem; margin: 0; } .mc-dl dt { color: rgb(var(--ink-3)); font-size: 13px; } .mc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .mc-dl { grid-template-columns: 1fr; } .mc-dl dd { margin-bottom: .5rem; } }
.codeblock { border-radius: var(--radius); background: rgb(var(--tint)); overflow: hidden; }
.codeblock pre { margin: 0; font: 12.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgb(var(--ink)); white-space: pre; }
.json-view { margin: 0; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: rgb(var(--ink)); white-space: pre-wrap; word-break: break-all; }
.json-view .j-k { color: rgb(var(--brand-700)); } .json-view .j-s { color: #067647; } .json-view .j-n { color: #b54708; }
html[data-theme="dark"] .json-view .j-s { color: #6ce9a6; } html[data-theme="dark"] .json-view .j-n { color: #fec84b; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.app-host { font-family: 'Onest', ui-sans-serif, system-ui, sans-serif; }
.step-dots { display: flex; gap: .375rem; justify-content: center; } .step-dots i { width: .5rem; height: .5rem; border-radius: 9999px; background: rgb(var(--line-strong)); } .step-dots i.on { background: rgb(var(--brand-600)); }
.org-card { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .75rem .875rem; border-radius: var(--radius); background: rgb(var(--tint)); border: 0; cursor: pointer; font: inherit; color: inherit; }
.org-card:hover { background: rgb(var(--brand-50)); } .org-card:focus-visible { outline: 2px solid rgb(var(--brand-500)); outline-offset: 2px; }
.scope-row { display: flex; gap: .75rem; padding: .625rem 0; } .scope-row + .scope-row { box-shadow: 0 -1px 0 rgb(var(--line)); }
.scope-ic { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0; background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.otp-in { text-align: center; letter-spacing: .4em; font-size: 20px; font-variant-numeric: tabular-nums; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .login-shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.login-brand { background: rgb(var(--brand-600)); color: #fff; }
.login-brand a { color: #fff; }
/* Đĩa nền sau logo thương hiệu. Logo AMX là mực tím #4326C4 vẽ trên nền trong suốt nên
   luôn cần nền SÁNG, kể cả ở chế độ tối — nếu không, logo tím chìm vào cột nền tím
   (.login-brand) hoặc nền trang tối. KHÔNG dùng .bg-white cho việc này: chế độ tối ghi đè
   .bg-white thành --surface (nền tối) ở quy tắc "html[data-theme=\"dark\"] .bg-white" phía trên. */
.logo-plate { background-color: #fff; }
.timeline-i { position: relative; padding-left: 1.5rem; } .timeline-i::before { content: ''; position: absolute; left: .4rem; top: .5rem; bottom: -.5rem; width: 2px; background: rgb(var(--line)); } .timeline-i:last-child::before { display: none; }
.timeline-i .tl-dot { position: absolute; left: 0; top: .375rem; width: .875rem; height: .875rem; border-radius: 9999px; background: rgb(var(--surface)); box-shadow: inset 0 0 0 3px rgb(var(--brand-500)); }
.timeline-i .tl-dot.warn { box-shadow: inset 0 0 0 3px #f79009; } .timeline-i .tl-dot.bad { box-shadow: inset 0 0 0 3px #f04438; } .timeline-i .tl-dot.ok { box-shadow: inset 0 0 0 3px #12b76a; }
.only-light { display: block; } .only-dark { display: none; }
html[data-theme="dark"] .only-light { display: none !important; } html[data-theme="dark"] .only-dark { display: block !important; }

/* Hệ sinh thái AM: nút chuyển ứng dụng (ecosystem.js) */
/* Nội dung bảng chuyển ứng dụng dùng phông NỘI DUNG, không thừa hưởng phông menu trái.
   Bảng mở từ nút logo nằm TRONG #sidebar, mà #sidebar đặt font-family: phông menu trái (Phudu
   viết hoa toàn bộ) nên tên ứng dụng và mô tả 12,5px ở đây từng bị in hoa, rất khó đọc. Đặt
   thẳng trên khối bảng (thắng cả giá trị thừa hưởng từ #sidebar, bất kể độ ưu tiên của #sidebar) để tiêu đề
   bảng, tên app, mô tả, nhãn "Đang mở" và chân bảng đều dùng phông nội dung. Chữ trên NÚT logo
   KHÔNG nằm trong khối này nên vẫn giữ phông menu trái như cũ. Bảng mobile (nút 9 chấm trên
   topbar) vốn đã ngoài #sidebar — cùng một lớp nên hai nơi luôn thống nhất. */
.eco-panel { font-family: var(--font-sans); }
.eco-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .625rem; border-radius: var(--radius); text-align: left; color: rgb(var(--ink)); transition: background-color .15s; }
.eco-item:hover { background: rgb(var(--hover)); }
.eco-item:focus-visible { outline: none; background: rgb(var(--hover)); box-shadow: inset 0 0 0 2px rgb(var(--brand-500)); }
.eco-item.is-current { background: rgb(var(--brand-50)); }
.eco-item.is-locked { cursor: not-allowed; }
.eco-item.is-locked .chip { filter: grayscale(1); opacity: .7; }
.eco-item.is-locked .font-semibold { color: rgb(var(--ink-2)); }
.eco-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; font-size: 12.5px; color: rgb(var(--ink-3)); background: rgb(var(--tint)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.eco-n { position: absolute; top: .125rem; right: .125rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; display: grid; place-items: center; border-radius: 9999px; background: #d92d20; color: #fff; font-size: 11px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px rgb(var(--surface)); }
.eco-n-inline { position: static; box-shadow: none; flex-shrink: 0; }
/* Khối logo ở đầu menu trái làm nút chuyển ứng dụng */
.eco-brand-btn { display: flex; align-items: center; gap: .625rem; width: 100%; height: 3.5rem; padding: 0 .75rem 0 1.25rem; text-align: left; transition: background-color .15s; }
.eco-brand-btn:hover, .eco-brand-btn[aria-expanded="true"] { background: rgb(var(--brand-50)); }
.eco-brand-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--brand-500)); }
.eco-chev { margin-left: auto; display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: var(--radius); color: rgb(var(--brand-700)); background: rgb(var(--brand-100)); transition: background-color .15s, transform .15s; }
.eco-brand-btn:hover .eco-chev { background: rgb(var(--brand-200)); }
.eco-brand-btn[aria-expanded="true"] .eco-chev { background: rgb(var(--brand-200)); transform: rotate(180deg); }
.eco-brand-btn .eco-n { top: -.125rem; right: -.375rem; }
body.sb-collapsed #sidebar .eco-brand-btn { padding: 0; }

/* ===== Cỡ chữ theo từng phần (SINH TỰ ĐỘNG bởi tools/gen-font-size-css.py, đừng sửa tay) ===== */
html[data-fs] body { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .panel-title { font-size: calc(15px * var(--fs-head, 1)); }
html[data-fs] .panel-sub { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .btn { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .btn-sm { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .btn-lg { font-size: calc(15px * var(--fs-body, 1)); }
html[data-fs] .input { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .select { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .textarea { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .field-label { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .tag { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .tbl { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .tbl thead th { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .nav-title { font-size: calc(12px * var(--fs-menu, 1)); }
html[data-fs] .nav-item { font-size: calc(14px * var(--fs-menu, 1)); }
html[data-fs] .menu-item { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .toast { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .kbd { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .step { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .codebox-head { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .seg button { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .tabs button { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .tabs a { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .tabs .count { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .dd-search input { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .dd-opt { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .dd-empty { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .bc-y { font-size: calc(11.5px * var(--fs-body, 1)); }
html[data-fs] .bc-x { font-size: calc(10.5px * var(--fs-body, 1)); }
html[data-fs] .bc-tip { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .rec-chip { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .dns-val { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] .note-box { font-size: calc(13.5px * var(--fs-body, 1)); }
html[data-fs] .chip-btn { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] .mc-dl dt { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] .mono { font-size: calc(12.5px * var(--fs-body, 1)); }
html[data-fs] .app-host { font-size: calc(12.5px * var(--fs-body, 1)); }
html[data-fs] .eco-foot { font-size: calc(12.5px * var(--fs-body, 1)); }
html[data-fs] .eco-n { font-size: calc(11px * var(--fs-body, 1)); }
html[data-fs] .text-\[12px\] { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[12px\] { font-size: calc(12px * var(--fs-menu, 1)); }
html[data-fs] .text-xs { font-size: calc(12px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-xs { font-size: calc(12px * var(--fs-menu, 1)); }
html[data-fs] .text-\[12\.5px\] { font-size: calc(12.5px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[12\.5px\] { font-size: calc(12.5px * var(--fs-menu, 1)); }
html[data-fs] .text-\[13px\] { font-size: calc(13px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[13px\] { font-size: calc(13px * var(--fs-menu, 1)); }
html[data-fs] .text-\[13\.5px\] { font-size: calc(13.5px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[13\.5px\] { font-size: calc(13.5px * var(--fs-menu, 1)); }
html[data-fs] .text-\[14px\] { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[14px\] { font-size: calc(14px * var(--fs-menu, 1)); }
html[data-fs] .text-sm { font-size: calc(14px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-sm { font-size: calc(14px * var(--fs-menu, 1)); }
html[data-fs] .text-\[15px\] { font-size: calc(15px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[15px\] { font-size: calc(15px * var(--fs-menu, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[15px\] { font-size: calc(15px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[15px\] { font-size: calc(15px * var(--fs-head, 1)); }
html[data-fs] .text-\[16px\] { font-size: calc(16px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[16px\] { font-size: calc(16px * var(--fs-menu, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[16px\] { font-size: calc(16px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[16px\] { font-size: calc(16px * var(--fs-head, 1)); }
html[data-fs] .text-base { font-size: calc(16px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-base { font-size: calc(16px * var(--fs-menu, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-base { font-size: calc(16px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-base { font-size: calc(16px * var(--fs-head, 1)); }
html[data-fs] .text-\[17px\] { font-size: calc(17px * var(--fs-body, 1)); }
html[data-fs] #sidebar .text-\[17px\] { font-size: calc(17px * var(--fs-menu, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[17px\] { font-size: calc(17px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[17px\] { font-size: calc(17px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-lg { font-size: calc(18px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-lg { font-size: calc(18px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-xl { font-size: calc(20px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-xl { font-size: calc(20px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[22px\] { font-size: calc(22px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[22px\] { font-size: calc(22px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-2xl { font-size: calc(24px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-2xl { font-size: calc(24px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[30px\] { font-size: calc(30px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[30px\] { font-size: calc(30px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[64px\] { font-size: calc(64px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[64px\] { font-size: calc(64px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading).text-\[72px\] { font-size: calc(72px * var(--fs-head, 1)); }
html[data-fs] :is(h1, h2, h3, h4, .font-heading, .stat) .text-\[72px\] { font-size: calc(72px * var(--fs-head, 1)); }
body { text-transform: var(--case-body, none); }
html[data-case-head] :is(h1, h2, h3, h4, .panel-title, .font-heading, .brand-text) { text-transform: var(--case-head, none); }
html[data-case-menu] :is(.nav-item, .nav-title) { text-transform: var(--case-menu, none); }