/* VimAI Ecom OS — nền tảng giao diện: biến màu theo theme, khung, sidebar, thẻ, bảng, nút, modal.
   Màu lấy mẫu từ ảnh tham chiếu (theme "Midnight"). Mã tự viết — mR47 — Phong Creator. */

:root {
	--bg: #1c1d2a;
	--bg-2: #181924;
	--sb: #20212d;
	--card: #2a2d43;
	--card-2: #252840;
	--card-hi: #32364f;
	--line: #383c56;
	--line-2: #2f3349;
	--text: #e8eaf4;
	--text-2: #b9bdd2;
	--muted: #8a8fa9;
	--dim: #5f6480;
	--accent: #7ec3fa;
	--accent-2: #5aa9ee;
	--accent-ink: #0d1b2a;
	--accent-soft: rgba(126, 195, 250, .14);
	--accent-line: rgba(126, 195, 250, .45);
	--track: #2a3149;
	--green: #3ddc97;
	--green-soft: rgba(61, 220, 151, .14);
	--orange: #ff9a4a;
	--orange-soft: rgba(255, 154, 74, .14);
	--red: #ff6b6b;
	--red-soft: rgba(255, 107, 107, .13);
	--yellow: #ffcc5c;
	--yellow-soft: rgba(255, 204, 92, .14);
	--purple: #a78bfa;
	--purple-soft: rgba(167, 139, 250, .16);
	--radius: 8px;
	--font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
	--sbw: 216px;
	--scale: 1;
	--ov: 255, 255, 255;
	--surface: #272a40;
	--surface-2: #2f3350;
	--toggle-off: #454a66;
	--scroll: #3b4060;
	--scroll-hi: #4b5178;
	--text-strong: #ffffff;
	--editor: #1a1b22;
	--bubble: #33384d;
	--bubble-2: #383e5a;
	color-scheme: dark;
}
html[data-theme="graphite"] {
	--bg: #1b1b22; --bg-2: #17171d; --sb: #202027; --card: #2a2a35; --card-2: #25252f; --card-hi: #33333f; --line: #3a3a48; --line-2: #30303c;
	--accent: #a78bfa; --accent-2: #8b6cf0; --accent-ink: #160f2e; --accent-soft: rgba(167, 139, 250, .15); --accent-line: rgba(167, 139, 250, .45); --track: #2e2e3b;
}
html[data-theme="crimson"] {
	--bg: #1f1a1e; --bg-2: #1a1619; --sb: #241e22; --card: #30272d; --card-2: #2a2227; --card-hi: #3a2f36; --line: #45373f; --line-2: #382d33;
	--accent: #ff6b81; --accent-2: #ef4863; --accent-ink: #2b0a12; --accent-soft: rgba(255, 107, 129, .15); --accent-line: rgba(255, 107, 129, .45); --track: #35292f;
}

/* ---------- chế độ SÁNG (data-mode="light"), dùng chung cho 3 theme ---------- */
html[data-mode="light"] {
	color-scheme: light;
	--bg: #f3f5fa; --bg-2: #eceff6; --sb: #e8ecf4; --card: #ffffff; --card-2: #f7f9fc; --card-hi: #e7edf7; --line: #d3d9e6; --line-2: #e1e6ef;
	--text: #18202f; --text-2: #3b4558; --muted: #5f6a80; --dim: #8b94a8; --text-strong: #0b1220;
	--accent: #2a7bd0; --accent-2: #1e69b8; --accent-ink: #ffffff; --accent-soft: rgba(42, 123, 208, .11); --accent-line: rgba(42, 123, 208, .42); --track: #dde3ee;
	--green: #12945c; --green-soft: rgba(18, 148, 92, .11); --orange: #d26a14; --orange-soft: rgba(210, 106, 20, .11); --red: #d23f3f; --red-soft: rgba(210, 63, 63, .1);
	--yellow: #9a7006; --yellow-soft: rgba(190, 140, 10, .14); --purple: #7653db; --purple-soft: rgba(118, 83, 219, .12);
	--ov: 20, 30, 60; --surface: #ffffff; --surface-2: #ffffff; --toggle-off: #c3cad8; --scroll: #c4cbd9; --scroll-hi: #a9b2c4;
	--editor: #fbfcfe; --bubble: #eef2f8; --bubble-2: #e9eef7;
}
html[data-mode="light"][data-theme="graphite"] {
	--bg: #f4f4f7; --bg-2: #ededf2; --sb: #ebebf1; --card-hi: #ececf4; --line: #d8d8e3; --line-2: #e5e5ee; --track: #e1e1ea;
	--accent: #7653db; --accent-2: #6142c4; --accent-soft: rgba(118, 83, 219, .11); --accent-line: rgba(118, 83, 219, .42);
}
html[data-mode="light"][data-theme="crimson"] {
	--bg: #f8f4f5; --bg-2: #f2ecee; --sb: #f0e8ea; --card-hi: #f4e6ea; --line: #e3d4d9; --line-2: #eee3e6; --track: #eadde1;
	--accent: #cf3352; --accent-2: #b52343; --accent-soft: rgba(207, 51, 82, .1); --accent-line: rgba(207, 51, 82, .42);
}
html[data-mode="light"] .modal-bg { background: rgba(24, 30, 46, .32); }
html[data-mode="light"] .modal, html[data-mode="light"] .cmdk, html[data-mode="light"] .toast { box-shadow: 0 18px 50px rgba(20, 30, 60, .18); }
html[data-mode="light"] .card, html[data-mode="light"] .kpi { box-shadow: 0 1px 2px rgba(20, 30, 60, .04); }
html[data-mode="light"] .mdc pre, html[data-mode="light"] .pr-cmd, html[data-mode="light"] .ap-raw, html[data-mode="light"] .agm-test { background: var(--bg-2); }
html[data-mode="light"] .pr-open > td { background: var(--bg-2) !important; }
html[data-mode="light"] .sb-foot .dot { box-shadow: 0 0 0 3px rgba(20, 30, 60, .07); }

/* Màn vốn tối (HUD Jarvis, phòng họp War Room, Hive Mind, Jarvis nổi) giữ tối cả khi chọn giao diện sáng */
html[data-mode="light"] .hud, html[data-mode="light"] .wm, html[data-mode="light"] .pg.hv, html[data-mode="light"] .jw {
	color-scheme: dark; color: var(--text);
	--bg: #1c1d2a; --bg-2: #181924; --sb: #20212d; --card: #2a2d43; --card-2: #252840; --card-hi: #32364f; --line: #383c56; --line-2: #2f3349;
	--text: #e8eaf4; --text-2: #b9bdd2; --muted: #8a8fa9; --dim: #5f6480; --text-strong: #ffffff;
	--accent: #7ec3fa; --accent-2: #5aa9ee; --accent-ink: #0d1b2a; --accent-soft: rgba(126, 195, 250, .14); --accent-line: rgba(126, 195, 250, .45); --track: #2a3149;
	--green: #3ddc97; --green-soft: rgba(61, 220, 151, .14); --orange: #ff9a4a; --orange-soft: rgba(255, 154, 74, .14); --red: #ff6b6b; --red-soft: rgba(255, 107, 107, .13);
	--yellow: #ffcc5c; --yellow-soft: rgba(255, 204, 92, .14); --purple: #a78bfa; --purple-soft: rgba(167, 139, 250, .16);
	--ov: 255, 255, 255; --surface: #272a40; --surface-2: #2f3350; --toggle-off: #454a66; --scroll: #3b4060; --scroll-hi: #4b5178;
	--editor: #1a1b22; --bubble: #33384d; --bubble-2: #383e5a;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
	background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: 1.45;
	-webkit-font-smoothing: antialiased; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-line); }
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.green { color: var(--green); } .red { color: var(--red); } .orange { color: var(--orange); } .yellow { color: var(--yellow); } .accent { color: var(--accent); }
.right { text-align: right; } .center { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up { text-transform: uppercase; letter-spacing: .08em; }

/* ---------- thanh cuộn ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- khung ứng dụng ---------- */
#app { display: grid; grid-template-columns: var(--sbw) minmax(0, 1fr); height: calc(100vh / var(--scale)); width: calc(100vw / var(--scale)); zoom: var(--scale); }
#app.no-sb { grid-template-columns: 0 minmax(0, 1fr); }
#app.no-sb .sb { display: none; }
.main { position: relative; min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
#page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pg-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px 28px; }
.pg-body.flush { padding: 0; }

/* ---------- sidebar ---------- */
.sb { background: var(--sb); border-right: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; user-select: none; }
.sb-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px 8px; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; cursor: pointer; }
.sb-logo { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #9fd4ff 0%, #5aa9ee 55%, #3d79c9 100%); box-shadow: inset 0 0 0 1px rgba(var(--ov), .25); flex: none; }
html[data-theme="graphite"] .sb-logo { background: linear-gradient(135deg, #d6c8ff, #8b6cf0); }
html[data-theme="crimson"] .sb-logo { background: linear-gradient(135deg, #ffb3bf, #ef4863); }
.sb-brand { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-brand .ic { color: var(--muted); }
.sb-tgl { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sb-tgl:hover { background: rgba(var(--ov), .07); color: var(--text); }
.sb-foot .sb-mode { margin-left: auto; }
.sb-foot-txt { min-width: 0; }
#app { transition: grid-template-columns .18s ease; }
#tip { position: fixed; z-index: 200; pointer-events: none; background: #11131c; color: #f1f3fa; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); white-space: nowrap; opacity: 0; transition: opacity .1s; }
#tip.on { opacity: 1; }
#tip small { font-weight: 400; opacity: .65; margin-left: 6px; font-family: var(--mono); font-size: 10.5px; }
@media (min-width: 761px) {
	#app.sb-mini { --sbw: 60px; }
	#app.sb-mini .sb-head { flex-direction: column; gap: 8px; padding: 12px 0 6px; }
	#app.sb-mini .sb-brand { flex: none; }
	#app.sb-mini .sb-name, #app.sb-mini .sb-brand .ic, #app.sb-mini .sb-search .lbl, #app.sb-mini .sb-search kbd, #app.sb-mini .sb-glabel, #app.sb-mini .sb-foot-txt { display: none; }
	#app.sb-mini .sb-search { justify-content: center; margin: 2px 10px 6px; padding: 8px 0; }
	#app.sb-mini .sb-nav { padding: 0 10px 10px; }
	#app.sb-mini .sb-group { margin-top: 6px; }
	#app.sb-mini .sb-group + .sb-group { border-top: 1px solid var(--line-2); padding-top: 6px; }
	#app.sb-mini .sb-group.closed .sb-item { display: flex; }
	#app.sb-mini .sb-item { justify-content: center; padding: 8px 0; position: relative; }
	#app.sb-mini .sb-item > span:not(.ic):not(.sb-badge) { display: none; }
	#app.sb-mini .sb-badge { position: absolute; top: 1px; right: 2px; min-width: 15px; height: 15px; font-size: 9px; padding: 0 3px; }
	#app.sb-mini .sb-foot { flex-direction: column; padding: 10px 0; gap: 9px; }
	#app.sb-mini .sb-foot .sb-mode { margin-left: 0; }
}
.sb-search { margin: 2px 8px 6px; padding: 7px 9px; border-radius: 7px; display: flex; align-items: center; gap: 9px; color: var(--text-2); cursor: pointer; }
.sb-search:hover { background: rgba(var(--ov), .04); }
.sb-search kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
.sb-group { margin-top: 10px; }
.sb-glabel { display: flex; align-items: center; gap: 6px; padding: 6px 8px 5px; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--dim); text-transform: uppercase; cursor: pointer; }
.sb-glabel .ic { transition: transform .15s; }
.sb-group.closed .sb-glabel .ic { transform: rotate(-90deg); }
.sb-group.closed .sb-item { display: none; }
.sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 7px; color: var(--text-2); cursor: pointer; border: 1px solid transparent; font-size: 13.5px; }
.sb-item .ic { color: var(--muted); }
.sb-item:hover { background: rgba(var(--ov), .04); color: var(--text); text-decoration: none; }
.sb-item.active { background: var(--accent-soft); color: var(--accent); }
.sb-item.active .ic { color: var(--accent); }
.sb-item:focus-visible { outline: none; border-color: var(--accent-line); }
.sb-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sb-badge.orange { background: var(--orange); color: #2a1503; }
.sb-badge.blue { background: var(--accent); color: var(--accent-ink); }
.sb-foot { border-top: 1px solid var(--line-2); padding: 9px 14px 10px; display: flex; align-items: center; gap: 10px; }
.sb-foot .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px rgba(var(--ov), .06); }
.sb-foot.live .dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.sb-foot b { display: block; font-size: 12.5px; }
.sb-foot small { color: var(--dim); font-size: 10.5px; }

/* ---------- đầu trang ---------- */
.ph { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; min-height: 40px; }
.ph-crumb { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.ph-title { font-size: 15px; font-weight: 700; letter-spacing: .005em; }
.ph-right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.ph-sub { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 16px 9px; border-bottom: 1px solid var(--line-2); }
.ph-line { flex: none; height: 1px; background: var(--line-2); margin-top: 9px; }

/* ---------- tab / đoạn chọn ---------- */
.tab { padding: 5px 10px; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 12.5px; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--card-hi); color: var(--text); font-weight: 600; }
.tab small { color: var(--dim); font-size: 10.5px; font-family: var(--mono); }
.tab .tdot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }
.tab .tdot.on { background: var(--green); }
.seg { display: inline-flex; background: transparent; border-radius: 7px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 4px 10px; border-radius: 6px; font-size: 12.5px; }
.seg button.active { background: var(--card-hi); color: var(--text); font-weight: 600; }
.seg button:hover { color: var(--text); }

/* ---------- thẻ ---------- */
.card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); }
.card-pad { padding: 12px 14px; }
.card-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; margin-bottom: 8px; }
.card-h .ic { color: var(--muted); }
.card-h .note { margin-left: auto; color: var(--dim); font-weight: 400; font-size: 10.5px; }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 11px 13px 10px; min-width: 0; position: relative; }
.kpi-l { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; display: flex; align-items: center; }
.kpi-l .delta { margin-left: auto; font-size: 10px; letter-spacing: 0; display: inline-flex; align-items: center; gap: 2px; }
.kpi-v { font-size: 21px; font-weight: 700; margin-top: 3px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-s { font-size: 10.5px; color: var(--dim); margin-top: 2px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gap { height: 12px; flex: none; }

/* ---------- nhãn / huy hiệu ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 5px; font-size: 10.5px; background: rgba(var(--ov), .06); color: var(--text-2); white-space: nowrap; border: 1px solid transparent; }
.chip.mono { font-family: var(--mono); font-size: 10px; }
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.red { background: var(--red-soft); color: var(--red); }
.chip.orange { background: var(--orange-soft); color: var(--orange); }
.chip.yellow { background: var(--yellow-soft); color: var(--yellow); }
.chip.blue { background: var(--accent-soft); color: var(--accent); }
.chip.purple { background: var(--purple-soft); color: var(--purple); }
.chip.line { background: transparent; border-color: var(--line); color: var(--muted); }
.sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.sdot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.sdot.warn { background: var(--orange); }
.sdot.err { background: var(--red); }
.sdot.blue { background: var(--accent); }

/* ---------- nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: rgba(var(--ov), .03); color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.btn:hover { background: rgba(var(--ov), .07); color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn.soft:hover { background: rgba(126, 195, 250, .22); }
.btn.danger { color: var(--red); border-color: rgba(255, 107, 107, .4); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }
.btn.block { width: 100%; }
.btn.icon { padding: 5px 7px; }

/* ---------- ô nhập ---------- */
.input, .select, .textarea { background: rgba(var(--ov), .04); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; color: var(--text); outline: none; min-width: 0; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent-line); }
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.select { appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { background: var(--surface); color: var(--text); }
.search { display: flex; align-items: center; gap: 8px; background: rgba(var(--ov), .04); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 10px; color: var(--muted); }
.search input { background: transparent; border: 0; outline: none; flex: 1; min-width: 0; color: var(--text); }
.toggle { width: 34px; height: 19px; border-radius: 19px; background: var(--toggle-off); position: relative; border: 0; flex: none; transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 17px; }

/* ---------- bảng ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgba(var(--ov), .02); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl.click tbody tr { cursor: pointer; }

/* ---------- thanh tiến độ ---------- */
.bar { height: 4px; border-radius: 4px; background: var(--track); position: relative; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.bar.green > i { background: var(--green); } .bar.red > i { background: var(--red); } .bar.orange > i { background: var(--orange); }
.hb-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 74px 34px; align-items: center; gap: 10px; padding: 5.5px 0; font-size: 12px; }
.hb-row .lab { color: var(--muted); font-size: 11.5px; }
.hb-row .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-row .sub { color: var(--dim); font-size: 9px; line-height: 1.1; text-align: right; }

/* ---------- dải thông báo ---------- */
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card-2); font-size: 12.5px; }
.banner.orange { border-color: rgba(255, 154, 74, .55); background: rgba(255, 154, 74, .05); }
.banner.red { border-color: rgba(255, 107, 107, .6); background: rgba(255, 107, 107, .06); }
.banner.green { border-color: rgba(61, 220, 151, .35); }
.banner.blue { border-color: var(--accent-line); background: var(--accent-soft); }
.banner b { font-weight: 700; }
.banner .ml { margin-left: auto; color: var(--muted); font-size: 11.5px; display: inline-flex; gap: 12px; align-items: center; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(8, 9, 16, .62); backdrop-filter: blur(2px); z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 4vh; overflow: auto; }
.modal { width: min(760px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); display: flex; flex-direction: column; max-height: 88vh; animation: pop .16s ease-out; }
.modal.wide { width: min(980px, 100%); }
.modal.narrow { width: min(520px, 100%); }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); font-weight: 700; font-size: 14px; }
.modal-h .x { margin-left: auto; color: var(--muted); background: transparent; border: 0; padding: 4px; border-radius: 6px; }
.modal-h .x:hover { color: var(--text); background: rgba(var(--ov), .06); }
.modal-b { padding: 14px 16px; overflow: auto; min-height: 0; }
.modal-f { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line-2); }
.modal-f .sp { flex: 1; }
@keyframes pop { from { transform: translateY(8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.field .hint { font-size: 11px; color: var(--dim); }

/* ---------- toast ---------- */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); color: var(--text); border-radius: 8px; padding: 9px 13px; font-size: 12.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); max-width: 420px; animation: pop .16s ease-out; pointer-events: auto; }
.toast.ok { border-left-color: var(--green); } .toast.warn { border-left-color: var(--orange); } .toast.err { border-left-color: var(--red); }

/* ---------- bảng lệnh (⌘K) ---------- */
.cmdk { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); overflow: hidden; animation: pop .14s ease-out; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--muted); }
.cmdk-in input { flex: 1; background: transparent; border: 0; outline: none; font-size: 14.5px; color: var(--text); }
.cmdk-list { max-height: 52vh; overflow: auto; padding: 6px; }
.cmdk-sec { font-size: 9.5px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; padding: 8px 9px 4px; font-weight: 600; }
.cmdk-it { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 7px; cursor: pointer; color: var(--text-2); }
.cmdk-it .ic { color: var(--muted); }
.cmdk-it small { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 10.5px; }
.cmdk-it.sel { background: var(--accent-soft); color: var(--accent); }
.cmdk-it.sel .ic { color: var(--accent); }
.cmdk-foot { padding: 7px 12px; border-top: 1px solid var(--line-2); color: var(--dim); font-size: 10.5px; display: flex; gap: 14px; }

/* ---------- markdown ---------- */
.mdc p { margin: 0 0 4px; }
.mdc .md-gap { height: 7px; }
.mdc ul, .mdc ol { margin: 2px 0 6px; padding-left: 20px; }
.mdc li { margin: 2px 0; }
.mdc code { font-family: var(--mono); font-size: .9em; background: rgba(var(--ov), .07); padding: 1px 5px; border-radius: 4px; }
.mdc pre { background: rgba(0, 0, 0, .25); border: 1px solid var(--line-2); border-radius: 7px; padding: 9px 11px; overflow: auto; margin: 6px 0; }
.mdc pre code { background: transparent; padding: 0; }
.mdc .md-h { margin: 8px 0 4px; font-size: 13.5px; }
.mdc strong { font-weight: 700; color: var(--text-strong); }
.mdc .mention { color: var(--accent); font-family: var(--mono); font-size: .92em; }
.md-table { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.md-table th { background: rgba(var(--ov), .05); font-weight: 600; }

/* ---------- avatar ---------- */
.av { border-radius: 50%; overflow: hidden; flex: none; display: inline-block; background: #1a1c2a; line-height: 0; }
.av svg, .av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.av.sq { border-radius: 7px; }

/* ---------- trạng thái trống ---------- */
.empty { color: var(--dim); text-align: center; padding: 26px 10px; font-size: 12.5px; }
.empty b { display: block; color: var(--muted); font-size: 13.5px; margin-bottom: 4px; }
.note-inferred { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--dim); border: 1px dashed var(--line); border-radius: 6px; padding: 2px 8px; }

@media (max-width: 1180px) {
	.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	:root { --sbw: 0px; }
	#app, #app.no-sb { grid-template-columns: minmax(0, 1fr); }
	.sb { position: fixed; left: 0; top: 0; bottom: 0; width: 230px; z-index: 70; transform: translateX(-100%); transition: transform .18s; }
	#app.sb-open .sb { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .5); }
	.kpis, .kpis.c4, .kpis.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mobile-menu { display: inline-flex !important; }
	.ph { flex-wrap: wrap; padding: 8px 10px 0; }
	.ph-right { flex-wrap: wrap; justify-content: flex-end; }
	.ph-sub { overflow-x: auto; padding: 8px 10px; }
	.pg-body { padding: 10px 10px 90px; }
	.tbl { display: block; overflow-x: auto; white-space: nowrap; }
	.modal-bg { padding: 2vh 8px; }
}
.mobile-menu { display: none; }
html[data-mode="light"] .jw { background: rgb(15, 21, 33); }