/* =============================================================================
* style.css — Giao diện webapp kế toán doanh thu (công ty truyền thông)
* Toàn bộ màu sắc khai báo bằng CSS variables -> đổi theme không cần sửa từng chỗ.
* ========================================================================== */
/* --------------------------- Biến màu: chế độ Sáng ------------------------ */
:root {
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--accent: #4f46e5;
--accent-strong: #4338ca;
--accent-soft: rgba(99, 102, 241, 0.10);
--accent-soft-2: rgba(99, 102, 241, 0.18);
--accent-contrast: #ffffff;
--accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
--bg: #f3f5fb;
--bg-elev: #ffffff;
--sidebar-bg: #ffffff;
--card-bg: #ffffff;
--border: #e8eaf2;
--border-strong: #d9dceb;
--text: #1b2030;
--text-strong: #0f1422;
--text-muted: #6b7280;
--hover: #f2f4fb;
--zebra: rgba(99, 102, 241, 0.022);
/* Thẻ "Tổng quỹ" FB MCN — tông teal/emerald hiện đại (gợi tiền/quỹ) */
--fund: #0d9488;
--fund-tint: rgba(13, 148, 136, 0.08);
--fund-tint-2: rgba(13, 148, 136, 0.16);
--fund-grad: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(13, 148, 136, 0.035) 72%);
--pos: #15a34a; /* dương / tốt */
--neg: #e11d48; /* âm / xấu */
--warn: #d97706; /* cảnh báo */
--warn-bg: rgba(217, 119, 6, 0.13);
--crit: #e11d48; /* nghiêm trọng */
--crit-bg: rgba(225, 29, 72, 0.12);
--ok-bg: rgba(21, 163, 74, 0.12);
--info-bg: rgba(37, 99, 235, 0.12);
--info: #2563eb;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
--shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);
--shadow-lg: 0 22px 50px rgba(16, 24, 40, 0.18), 0 6px 16px rgba(16, 24, 40, 0.08);
--radius: 16px;
--radius-sm: 10px;
--radius-xs: 8px;
--sidebar-w: 260px;
}
/* --------------------------- Biến màu: chế độ Tối ------------------------- */
[data-theme="dark"] {
--accent: #818cf8;
--accent-strong: #a5b4fc;
--accent-soft: rgba(129, 140, 248, 0.14);
--accent-soft-2: rgba(129, 140, 248, 0.24);
--accent-contrast: #0b1020;
--accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
--bg: #0a0e1a;
--bg-elev: #121829;
--sidebar-bg: #0e1322;
--card-bg: #141a2b;
--border: #232b42;
--border-strong: #2f3953;
--text: #e7ebf5;
--text-strong: #f4f6fc;
--text-muted: #93a0b8;
--hover: #1b2238;
--zebra: rgba(129, 140, 248, 0.04);
/* Thẻ "Tổng quỹ" — teal sáng hơn cho nền tối */
--fund: #2dd4bf;
--fund-tint: rgba(45, 212, 191, 0.10);
--fund-tint-2: rgba(45, 212, 191, 0.20);
--fund-grad: linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(16, 185, 129, 0.05) 72%);
--pos: #4ade80;
--neg: #fb7185;
--warn: #fbbf24;
--warn-bg: rgba(251, 191, 36, 0.16);
--crit: #fb7185;
--crit-bg: rgba(251, 113, 133, 0.16);
--ok-bg: rgba(74, 222, 128, 0.15);
--info-bg: rgba(96, 165, 250, 0.16);
--info: #60a5fa;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
--shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip; /* chặn tràn ngang toàn trang (clip giữ được position:sticky) */
transition: background 0.25s ease, color 0.25s ease;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* ============================== Bố cục tổng thể ========================== */
.app { display: flex; min-height: 100vh; }
/* Thu gọn sidebar trên desktop -> chỉ còn ICON (mini rail), nút ☰ */
@media (min-width: 861px) {
.app.nav-collapsed .sidebar { width: 80px; padding: 16px 8px; overflow-x: hidden; }
.app.nav-collapsed .sidebar .nav-text,
.app.nav-collapsed .sidebar .caret,
.app.nav-collapsed .sidebar .brand-name,
.app.nav-collapsed .sidebar .brand-sub,
.app.nav-collapsed .sidebar .nav-sub { display: none; }
.app.nav-collapsed .sidebar .brand { flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 0 8px; }
.app.nav-collapsed .sidebar .nav-item { justify-content: center; padding: 10px 0; gap: 0; position: relative; }
.app.nav-collapsed .sidebar .nav-label { height: 1px; padding: 0; margin: 8px 12px; background: var(--border); overflow: hidden; text-indent: -999px; }
.app.nav-collapsed .sidebar .nav-item .badge { position: absolute; top: 5px; right: 13px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; }
.app.nav-collapsed .sidebar .nav-item .ic { width: 40px; height: 40px; font-size: 21px; border-radius: 11px; }
.app.nav-collapsed .sidebar .nav-item .ic svg { width: 23px; height: 23px; }
/* Thu gọn: chân sidebar chỉ còn icon/avatar, canh giữa */
.app.nav-collapsed .sidebar .side-foot { border: none; background: transparent; box-shadow: none; padding: 4px 0; align-items: center; }
.app.nav-collapsed .sidebar .user-card { border-top: none; }
.app.nav-collapsed .sidebar .side-tools { grid-template-columns: 1fr; gap: 5px; width: 100%; }
.app.nav-collapsed .sidebar .side-tool { padding: 10px 0; }
.app.nav-collapsed .sidebar .side-tool span { display: none; }
.app.nav-collapsed .sidebar .side-tool svg { width: 21px; height: 21px; }
.app.nav-collapsed .sidebar .user-card { justify-content: center; padding: 6px 0; gap: 0; border: none; background: transparent; box-shadow: none; margin-top: 4px; }
.app.nav-collapsed .sidebar .user-card:hover { box-shadow: none; }
.app.nav-collapsed .sidebar .user-card .uc-info, .app.nav-collapsed .sidebar .user-card .uc-logout { display: none; }
}
/* Tooltip tùy biến khi rê chuột lên icon sidebar thu gọn (fixed vào body) */
.nav-tip {
position: fixed; z-index: 120; padding: 8px 12px;
background: var(--text-strong); color: var(--bg-elev);
font-size: 13.5px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
white-space: nowrap; border-radius: 10px; box-shadow: var(--shadow-md);
opacity: 0; pointer-events: none;
transform: translateY(-50%) translateX(-6px);
transition: opacity .15s ease, transform .15s ease;
}
.nav-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }
.nav-tip::before {
content: ''; position: absolute; right: 100%; top: 50%;
transform: translateY(-50%);
border: 6px solid transparent; border-right-color: var(--text-strong);
}
/* ------------------------------- Sidebar --------------------------------- */
.sidebar {
width: var(--sidebar-w);
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
padding: 18px 14px;
display: flex;
flex-direction: column;
gap: 6px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
transition: width .22s ease, padding .22s ease, opacity .18s ease, transform 0.25s ease, background 0.25s ease;
z-index: 30;
}
.brand {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px 16px;
}
.brand .logo {
width: 40px; height: 40px; border-radius: 12px;
background: var(--accent-grad);
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
flex-shrink: 0; box-shadow: 0 6px 14px var(--accent-soft-2);
}
.brand .brand-name { font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.brand .brand-sub { font-size: 11px; color: var(--text-muted); }
.nav-item {
position: relative;
display: flex; align-items: center; gap: 11px;
padding: 10px 12px; border-radius: var(--radius-sm);
color: var(--text-muted); cursor: pointer; font-weight: 500; font-size: 14.5px;
border: none; background: transparent; width: 100%; text-align: left;
transition: background 0.16s ease, color 0.16s ease;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: color-mix(in srgb, var(--ic) 11%, transparent); color: var(--ic); font-weight: 600; }
.nav-item.active::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--ic);
}
/* ---- Màu theo NHÓM (mỗi mục 1 tông) — chỉ bật khi rê chuột / đang chọn ---- */
.nav-group { --ic: var(--accent); --ic2: #8b5cf6; } /* mặc định: tím accent */
.nav-group[data-nav="masterdata"] { --ic: #3b82f6; --ic2: #60a5fa; } /* xanh dương */
.nav-group[data-nav="org"] { --ic: #0ea5e9; --ic2: #38bdf8; } /* xanh trời */
.nav-group[data-nav="directory"] { --ic: #8b5cf6; --ic2: #a78bfa; } /* tím */
.nav-group[data-nav="entry"] { --ic: #6366f1; --ic2: #818cf8; } /* chàm */
.nav-group[data-nav="approval"] { --ic: #16a34a; --ic2: #22c55e; } /* xanh lá */
.nav-group[data-nav="headcount"] { --ic: #14b8a6; --ic2: #2dd4bf; } /* teal */
.nav-group[data-nav="cashbook"] { --ic: #10b981; --ic2: #34d399; } /* ngọc lục */
.nav-group[data-nav="recurring"] { --ic: #06b6d4; --ic2: #22d3ee; } /* cyan */
.nav-group[data-nav="fbmcn"] { --ic: #2563eb; --ic2: #3b82f6; } /* xanh FB */
.nav-group[data-nav="advances"] { --ic: #f59e0b; --ic2: #fbbf24; } /* hổ phách */
.nav-group[data-nav="debts"] { --ic: #f97316; --ic2: #fb923c; } /* cam */
.nav-group[data-nav="reports"] { --ic: #3b82f6; --ic2: #60a5fa; } /* xanh dương */
.nav-group[data-nav="budget"] { --ic: #ec4899; --ic2: #f472b6; } /* hồng */
.nav-group[data-nav="forecast"] { --ic: #22c55e; --ic2: #4ade80; } /* xanh lá */
.nav-group[data-nav="calendar"] { --ic: #8b5cf6; --ic2: #a78bfa; } /* tím */
.nav-group[data-nav="cashflow"] { --ic: #0891b2; --ic2: #06b6d4; } /* cyan đậm */
.nav-group[data-nav="tax"] { --ic: #d97706; --ic2: #f59e0b; } /* cam vàng */
.nav-group[data-nav="alerts"] { --ic: #ef4444; --ic2: #f87171; } /* đỏ */
.nav-group[data-nav="users"] { --ic: #6366f1; --ic2: #818cf8; } /* chàm */
.nav-group[data-nav="audit"] { --ic: #64748b; --ic2: #94a3b8; } /* xám xanh */
.nav-group[data-nav="settings"] { --ic: #64748b; --ic2: #94a3b8; } /* xám xanh */
.nav-item .ic { width: 26px; height: 26px; display: grid; place-items: center; font-size: 15px; border-radius: 8px; flex-shrink: 0;
color: var(--ic, var(--text-muted)); /* icon hiện màu nhóm ngay cả lúc nghỉ */
background: color-mix(in srgb, var(--ic) 10%, transparent);
transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.nav-item .ic svg { width: 18px; height: 18px; display: block; }
/* Rê chuột: icon bật màu NHÓM trên nền cùng tông nhạt */
.nav-item:not(.active):hover .ic { background: color-mix(in srgb, var(--ic) 15%, transparent); color: var(--ic); }
/* Đang chọn: chip nền GRADIENT theo nhóm, icon trắng, quầng sáng cùng tông -> nổi bật, hiện đại */
.nav-item.active .ic { background: linear-gradient(135deg, var(--ic), var(--ic2)); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--ic) 38%, transparent); }
.nav-item .nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item .badge { margin-left: 4px; }
.nav-item .caret { margin-left: 4px; font-size: 19px; line-height: 1; font-weight: 600; color: color-mix(in srgb, var(--text-muted) 45%, transparent); transition: transform .12s ease, color .15s ease; }
.nav-group.open > .nav-item .caret { transform: rotate(90deg); }
.nav-group.open > .nav-item .caret,
.nav-item:hover .caret { color: var(--text); }
.nav-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted); padding: 10px 12px 2px; font-weight: 700; }
/* --- Submenu xổ (accordion) --- */
.nav-group { display: flex; flex-direction: column; }
.nav-sub {
display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0;
transition: grid-template-rows .24s ease, opacity .2s ease, margin .2s ease;
}
.nav-group.open > .nav-sub { grid-template-rows: 1fr; opacity: 1; margin: 2px 0 4px; }
.nav-sub-inner { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
/* Đường kẻ dọc liền mạch nối các mục con (thay cho các chấm tròn) */
.nav-sub-inner::before {
content: ""; position: absolute; left: 24.5px; top: 6px; bottom: 6px;
width: 2px; border-radius: 2px; background: var(--border-strong);
}
.nav-subitem {
position: relative; display: flex; align-items: center; width: 100%; text-align: left;
border: none; background: transparent; cursor: pointer; color: var(--text-muted);
font-size: 14.5px; font-family: inherit; padding: 7px 12px 7px 40px; border-radius: var(--radius-sm);
transition: background .14s, color .14s;
}
/* Đoạn tô dọc trên đường kẻ — nổi lên khi rê chuột / đang chọn */
.nav-subitem::before {
content: ""; position: absolute; left: 24px; top: 4px; bottom: 4px;
width: 3px; border-radius: 3px; background: transparent; transition: background .15s;
}
/* Không dùng nền/gạch chân; hiệu ứng = chữ đổi màu nhóm (đậm khi đang chọn) */
.nav-subitem:hover { color: var(--ic); }
.nav-subitem:hover::before { background: var(--ic); }
.nav-subitem.active { color: var(--ic); font-weight: 600; }
.nav-subitem.active::before { background: var(--ic); }
/* ------------------------------- Main area ------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.header {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 12px;
padding: 13px 24px;
background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--border);
}
.header .menu-toggle { display: grid; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions .btn { white-space: nowrap; }
.header h1 { font-size: 17px; margin: 0; font-weight: 800; letter-spacing: -.01em; color: var(--text-strong);
min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tiêu đề trang động trên topbar (AppShell header): icon + tên trang + ⓘ */
.app-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.app-title-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.app-title-ic svg { width: 18px; height: 18px; }
.app-title-ic:empty { display: none; }
.app-title-help { display: inline-flex; align-items: center; }
.app-title-help:empty { display: none; }
.app-title .hc-help { width: 20px; height: 20px; }
.app-title .hc-help svg { width: 13px; height: 13px; }
.header .spacer { flex: 1 1 0; min-width: 8px; }
.period-switch { display: inline-flex; background: var(--bg); border: 1px solid var(--border);
border-radius: 11px; padding: 3px; gap: 2px; }
.period-switch button {
border: none; background: transparent; color: var(--text-muted);
padding: 6px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;
transition: background .18s, color .18s, box-shadow .18s;
}
.period-switch button.active { background: var(--card-bg); color: var(--accent); box-shadow: var(--shadow-sm); }
.icon-btn {
width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
background: var(--bg-elev); color: var(--text); cursor: pointer; font-size: 17px;
display: grid; place-items: center; transition: background .15s, border-color .15s, transform .1s;
}
.icon-btn:hover { background: var(--hover); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(0.94); }
/* ---- Chân sidebar: cụm quản trị dữ liệu + thẻ tài khoản ---- */
/* Chân sidebar — gom Dữ liệu mẫu/Xoá mẫu + Sáng/Tối + thẻ tài khoản thành 1 cụm */
.side-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 8px;
border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elev);
box-shadow: 0 2px 14px -9px rgba(15, 23, 42, .4); }
[data-theme="dark"] .side-foot { box-shadow: 0 2px 14px -7px rgba(0, 0, 0, .55); }
/* 2 nút quản trị dữ liệu — tông trung tính chuyên nghiệp (bỏ xanh dương chói) */
.side-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side-tool { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px;
border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: background .14s, color .14s, border-color .14s, transform .1s; }
.side-tool svg { width: 15px; height: 15px; flex-shrink: 0; }
.side-tool:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
.side-tool:active { transform: translateY(1px); }
.side-tool.danger:hover { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); background: color-mix(in srgb, var(--neg) 9%, transparent); }
/* Nút Sáng/Tối */
.side-theme { width: 100%; justify-content: flex-start; padding: 9px 11px; }
.side-theme:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.side-theme #themeIco { font-size: 15px; line-height: 1; flex-shrink: 0; }
/* Nút thu gọn menu trong brand (thay cho ☰ trên header cũ) */
.brand-txt { flex: 1; min-width: 0; }
.side-collapse { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
background: var(--bg-elev); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0; transition: background .14s, color .14s, border-color .14s; }
.side-collapse:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.side-collapse svg { width: 16px; height: 16px; }
.app.nav-collapsed .sidebar .brand-txt { display: none; }
/* Nút ☰ nổi — chỉ dùng trên mobile để mở drawer */
.menu-fab { display: none; }
/* Thẻ tài khoản — phần đáy của cụm (ngăn bằng hairline, nền accent nhẹ, avatar gradient) */
.user-card { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
margin-top: 2px; padding: 9px 8px; border: none; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px;
color: var(--text); font-family: inherit; background: transparent; transition: background .16s; }
.user-card:hover { background: var(--accent-soft); box-shadow: none; }
.user-card .avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px;
box-shadow: 0 4px 12px -2px var(--accent-soft-2); }
.user-card:hover .avatar { transform: scale(1.04); transition: transform .16s; }
.user-card .uc-info { flex: 1; min-width: 0; }
.user-card .u-name { font-weight: 700; font-size: 13.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .u-role { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-logout { width: 32px; height: 32px; border-radius: 9px; border: none; background: transparent; color: var(--text-muted);
cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background .15s, color .15s; }
.uc-logout:hover { background: var(--crit-bg); color: var(--neg); }
.uc-logout svg { width: 17px; height: 17px; display: block; }
.content { padding: 24px 28px; max-width: none; width: 100%; margin: 0; min-width: 0; }
/* ------------------------------- Tiêu đề trang --------------------------- */
.page-head { margin-bottom: 20px; }
.page-head h2 { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); }
.page-head p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
/* Header trang dùng chung (icon + tiêu đề + mô tả) */
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pg-head-title { display: flex; align-items: center; gap: 13px; }
.pg-head-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.pg-head-ic svg { width: 23px; height: 23px; }
.pg-head-title h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--text-strong); }
.pg-head-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
/* Icon vuông cho tiêu đề card */
.card-title .ct-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.card-title .ct-ic { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.card-title .ct-ic svg { width: 15px; height: 15px; display: block; }
/* Nút có icon + chữ */
.ico-btn { display: inline-flex; align-items: center; gap: 7px; }
.ico-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Card đầu trang Cài đặt: tiêu đề + nút Hướng dẫn + tabs gom chung 1 card */
.set-head { margin-bottom: 16px; }
.set-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.set-head-t h2 { margin: 0 0 3px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--text-strong); }
.set-head-t p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.set-head-acts { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.set-head-acts .btn.sm { white-space: nowrap; }
/* Nút Hướng dẫn: tím NHẠT (khác nút Thêm tài khoản tím đậm) */
.set-head-acts .set-guide-btn { text-decoration: none; background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft-2); }
.set-head-acts .set-guide-btn:hover { background: var(--accent-soft-2); color: var(--accent); border-color: var(--accent-soft-2); }
.set-head .tabs { margin: 0; flex-wrap: wrap; }
@media (max-width: 560px) { .set-head-row { flex-direction: column; } .set-head-acts { width: 100%; } .set-head-acts .btn { flex: 1; justify-content: center; } }
/* ===== Cài đặt — 3 tab (Tài khoản / Danh mục / Kiểm soát) ===== */
/* KPI tài khoản tiền */
.set-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.set-kpi { display: flex; align-items: center; gap: 12px; position: relative;
border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px; background: var(--bg-elev);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
animation: setKpiIn .5s cubic-bezier(.2, .75, .3, 1) both; }
.set-kpi:nth-child(2) { animation-delay: .06s; } .set-kpi:nth-child(3) { animation-delay: .11s; } .set-kpi:nth-child(4) { animation-delay: .16s; }
.set-kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(2, 6, 23, .10); border-color: var(--border-strong); }
.set-kpi-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
background: rgba(100, 116, 139, .12); color: var(--text-muted); }
.set-kpi-ic svg { width: 19px; height: 19px; }
.set-kpi-body { min-width: 0; flex: 1 1 auto; }
.set-kpi-v { font-size: clamp(14px, 1.32vw, 19px); font-weight: 800; letter-spacing: -.4px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-kpi-l { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.set-kpi.k-total .set-kpi-ic { background: var(--accent-soft); color: var(--accent); } .set-kpi.k-total .set-kpi-v { color: var(--accent); }
.set-kpi.k-cash .set-kpi-ic { background: rgba(22, 163, 74, .12); color: #16a34a; }
.set-kpi.k-bank .set-kpi-ic { background: rgba(37, 99, 235, .12); color: #2563eb; }
.set-kpi.k-warn .set-kpi-ic { background: rgba(217, 119, 6, .12); color: #d97706; } .set-kpi.k-warn .set-kpi-v { color: #d97706; }
[data-theme="dark"] .set-kpi.k-cash .set-kpi-ic { color: #4ade80; } [data-theme="dark"] .set-kpi.k-bank .set-kpi-ic { color: #60a5fa; } [data-theme="dark"] .set-kpi.k-warn .set-kpi-ic, [data-theme="dark"] .set-kpi.k-warn .set-kpi-v { color: #fbbf24; }
[data-theme="dark"] .set-kpi:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
@keyframes setKpiIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .set-kpi { animation: none; } .set-kpi:hover { transform: none; } }
@media (max-width: 760px) { .set-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .set-kpis { grid-template-columns: 1fr; } }
/* Bảng Cài đặt */
.set-tbl td { vertical-align: middle; }
.set-tbl .set-idx { color: var(--text-muted); font-weight: 600; }
.set-tbl .muted-c { color: var(--text-muted); }
.set-acc { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.set-acc-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.set-acc-ic svg { width: 16px; height: 16px; }
.set-acc-ic.is-cash { background: rgba(22, 163, 74, .12); color: #16a34a; }
.set-acc-ic.is-bank { background: rgba(37, 99, 235, .12); color: #2563eb; }
[data-theme="dark"] .set-acc-ic.is-cash { color: #4ade80; } [data-theme="dark"] .set-acc-ic.is-bank { color: #60a5fa; }
.set-flag { color: #d97706; font-size: 11px; margin-left: 2px; }
.set-row-acts { display: flex; gap: 2px; justify-content: flex-end; }
.set-empty { text-align: center; color: var(--text-muted); padding: 26px 12px; }
.card-title .set-ct-r { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.ct-ic.ct-ic-up { background: rgba(22, 163, 74, .12); color: #16a34a; }
.ct-ic.ct-ic-down { background: rgba(220, 38, 38, .12); color: #dc2626; }
[data-theme="dark"] .ct-ic.ct-ic-up { color: #4ade80; } [data-theme="dark"] .ct-ic.ct-ic-down { color: #f87171; }
.ico-badge { display: inline-flex; align-items: center; gap: 5px; } .ico-badge svg { width: 12px; height: 12px; }
/* Danh mục thu/chi — 2 cột cạnh nhau */
.set-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.set-cat-card { margin: 0; }
.set-cat-tbl { table-layout: auto; }
.set-cat-tbl th, .set-cat-tbl td { padding-top: 10px; padding-bottom: 10px; }
.set-cat-tbl th:first-child, .set-cat-tbl td:first-child { width: 40px; text-align: center; padding-left: 4px; padding-right: 8px; }
.set-cat-tbl .set-idx { text-align: center; }
.set-cat-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; }
.set-cat-tbl tbody tr { transition: background .12s; }
.set-cat-tbl tbody tr:hover { background: var(--hover); }
.set-cat-tbl td b { font-weight: 600; color: var(--text); }
@media (max-width: 900px) { .set-cat-grid { grid-template-columns: 1fr; } }
/* Kiểm soát & Khóa sổ — 2 cột (form dồn 1 hàng dọc trong cột hẹp) */
.set-ctrl-grid .set-form { grid-template-columns: 1fr; }
/* ===== Lịch dòng tiền ===== */
.cal-head { margin-bottom: 16px; }
.cal-verdict { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 7px 14px; font-size: 13px; }
.cal-verdict svg { width: 15px; height: 15px; flex: 0 0 auto; }
.set-kpi.k-in .set-kpi-ic { background: rgba(22, 163, 74, .12); color: #16a34a; } .set-kpi.k-in .set-kpi-v { color: #16a34a; }
.set-kpi.k-out .set-kpi-ic { background: rgba(220, 38, 38, .12); color: #dc2626; } .set-kpi.k-out .set-kpi-v { color: #dc2626; }
/* Card KPI lịch: click để tới đích + nền màu */
.cal-kpis .set-kpi { cursor: pointer; padding-right: 40px; }
.cal-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .28); }
.cal-kpis .set-kpi.k-in, .cal-kpis .set-kpi.k-cash { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .28); }
.cal-kpis .set-kpi.k-out, .cal-kpis .set-kpi.k-crit { background: linear-gradient(180deg, rgba(220, 38, 38, .09), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .28); }
.cal-kpis .set-kpi.k-warn { background: linear-gradient(180deg, rgba(217, 119, 6, .09), rgba(217, 119, 6, .03)); border-color: rgba(217, 119, 6, .28); }
.cal-kpis .set-kpi:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.cal-kpis .set-kpi.is-active { box-shadow: 0 0 0 2px currentColor inset, 0 10px 24px rgba(2, 6, 23, .10); }
.cal-kpis .set-kpi.k-in.is-active { color: #16a34a; } .cal-kpis .set-kpi.k-out.is-active { color: #dc2626; }
.cal-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
[data-theme="dark"] .set-kpi.k-in .set-kpi-ic, [data-theme="dark"] .set-kpi.k-in .set-kpi-v { color: #4ade80; }
[data-theme="dark"] .set-kpi.k-out .set-kpi-ic, [data-theme="dark"] .set-kpi.k-out .set-kpi-v { color: #f87171; }
.set-kpi-sub2 { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-muted); }
.cal-tbl .sm-badge { font-size: 11px; padding: 2px 8px; }
.cal-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.cal-tbl th:first-child, .cal-tbl td:first-child { width: 40px; text-align: center; }
.cal-ev { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.cal-ev-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.cal-ev-ic svg { width: 15px; height: 15px; }
.cal-ev-ic.is-in { background: rgba(22, 163, 74, .12); color: #16a34a; }
.cal-ev-ic.is-out { background: rgba(220, 38, 38, .12); color: #dc2626; }
[data-theme="dark"] .cal-ev-ic.is-in { color: #4ade80; } [data-theme="dark"] .cal-ev-ic.is-out { color: #f87171; }
@media (max-width: 560px) { .cal-verdict { align-self: flex-start; } }
.fc-tbl thead th, .cash-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.fc-tbl th:first-child, .fc-tbl td:first-child, .cash-tbl th:first-child, .cash-tbl td:first-child { width: 40px; text-align: center; }
.fc-tbl td, .cash-tbl td { vertical-align: middle; }
.cash-tbl .sm-badge { font-size: 11px; padding: 2px 8px; }
.cash-tbl tbody tr:hover { background: var(--hover); }
/* KPI ngân hàng (xanh dương) — dùng chung */
.set-kpi.k-bank .set-kpi-ic { background: rgba(37, 99, 235, .12); color: #2563eb; }
[data-theme="dark"] .set-kpi.k-bank .set-kpi-ic { color: #60a5fa; }
.cal-kpis .set-kpi.k-bank { background: linear-gradient(180deg, rgba(37, 99, 235, .09), rgba(37, 99, 235, .03)); border-color: rgba(37, 99, 235, .28); }
.cal-kpis .set-kpi.k-bank.is-active { color: #2563eb; }
.kpi-warn-t { color: #d97706; }
/* Sổ quỹ: lưới thẻ tài khoản co giãn theo số lượng */
.cash-kpis { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
.cash-kpis .set-kpi-v { font-size: clamp(13px, 1.02vw, 15.5px); }
.cash-kpis .set-kpi { padding-right: 36px; }
.cash-kpis .set-kpi-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 460px) { .cash-kpis { grid-template-columns: 1fr; } .cash-kpis .set-kpi-v { font-size: 18px; } }
/* Ngân sách: tô màu 2 nhóm cột — Doanh thu (tím) vs Chi phí (cam) */
/* ô THÂN: nền tô mờ dịu (cuộn được, không cần đục) */
.fc-tbl .bud-rev { background: rgba(99, 102, 241, .055); }
.fc-tbl .bud-cost { background: rgba(217, 119, 6, .055); }
.fc-tbl tbody tr:hover .bud-rev { background: rgba(99, 102, 241, .12); }
.fc-tbl tbody tr:hover .bud-cost { background: rgba(217, 119, 6, .11); }
/* ô HEADER: nền ĐỤC (tint phủ trên nền) để khi cố định KHÔNG lộ dữ liệu phía dưới */
.fc-tbl .bud-rev-h { color: var(--accent); background-color: var(--bg); background-image: linear-gradient(rgba(99, 102, 241, .12), rgba(99, 102, 241, .12)); }
.fc-tbl .bud-cost-h { color: #d97706; background-color: var(--bg); background-image: linear-gradient(rgba(217, 119, 6, .12), rgba(217, 119, 6, .12)); }
[data-theme="dark"] .fc-tbl .bud-rev-h { color: #a5b4fc; background-image: linear-gradient(rgba(99, 102, 241, .2), rgba(99, 102, 241, .2)); }
[data-theme="dark"] .fc-tbl .bud-cost-h { color: #fbbf24; background-image: linear-gradient(rgba(217, 119, 6, .2), rgba(217, 119, 6, .2)); }
[data-theme="dark"] .fc-tbl .bud-rev { background: rgba(99, 102, 241, .13); }
[data-theme="dark"] .fc-tbl .bud-cost { background: rgba(217, 119, 6, .12); }
/* Tiêu đề "Ngân sách theo team" — banner màu liền mạch, khớp bề ngang bảng */
/* Card "Ngân sách theo team" — thẻ SOFT: bo tròn mềm, elevation trung tính rõ, viền tím mảnh */
.card.pad-lg:has(> .bud-title) { overflow: hidden; padding-top: 0;
border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow); }
.card.pad-lg:has(> .table-scroll) > .bud-title {
position: relative; z-index: 5;
margin: 0; padding: 13px 20px; border-radius: 0;
background: linear-gradient(180deg, rgba(99, 102, 241, .12), rgba(99, 102, 241, .045));
border: none; border-bottom: 1px solid rgba(99, 102, 241, .16);
}
.bud-title .ct-ic { background: #fff; }
[data-theme="dark"] .card.pad-lg:has(> .table-scroll) > .bud-title {
background: linear-gradient(180deg, rgba(99, 102, 241, .2), rgba(99, 102, 241, .07));
border-bottom-color: rgba(129, 140, 248, .28);
}
[data-theme="dark"] .bud-title .ct-ic { background: rgba(129, 140, 248, .28); box-shadow: none; }
/* Bảng ngân sách: cố định hàng header + chiều cao linh động + chữ đậm, bóng mềm */
.bud-scroll { max-height: 62vh; overflow-y: auto; }
.bud-scroll table.tbl thead th { z-index: 3; font-weight: 800; font-size: 11.5px; box-shadow: 0 4px 10px -6px rgba(2, 6, 23, .28); }
.bud-scroll table.tbl thead th:not(.bud-rev-h):not(.bud-cost-h) { background: var(--bg-elev); }
[data-theme="dark"] .bud-scroll table.tbl thead th { box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .55); }
/* Hài hoà: bỏ zebra (đã có dải màu theo cột), hàng thoáng, hover mềm mại theo cột */
.bud-scroll table.tbl tbody tr:nth-child(even) { background: transparent; }
.bud-scroll table.tbl tbody tr:hover { background: transparent; }
.bud-scroll table.tbl tbody tr:hover td:not(.bud-rev):not(.bud-cost) { background: var(--hover); }
.bud-scroll table.tbl th, .bud-scroll table.tbl td { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.bud-scroll table.tbl tbody td { font-size: 13.5px; }
.bud-scroll table.tbl tbody td:nth-child(2) b { color: var(--text-strong); }
.bud-scroll table.tbl tbody tr:last-child td { border-bottom: none; }
/* Ô sửa trong bảng ngân sách: canh phải, nền trắng nổi trên dải màu */
.bud-scroll .editable { width: 134px; }
/* Nút SẮP XẾP trên header (mũi tên) */
.bud-sort { cursor: pointer; user-select: none; -webkit-user-select: none; }
.bud-sort-in { display: inline-flex; align-items: center; gap: 5px; }
.bud-sort svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .4; transition: opacity .15s, transform .15s; }
.bud-sort:hover svg { opacity: .8; }
.bud-sort.sorted svg { opacity: 1; }
.bud-sort:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Nháy sáng thẻ đích khi cuộn tới (click KPI) + không bị thanh trên che */
.card { scroll-margin-top: 80px; }
.scroll-flash { animation: scrollFlash 1.3s ease; }
@keyframes scrollFlash {
0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
18% { box-shadow: 0 0 0 3px rgba(99, 102, 241, .5); }
100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
@media (prefers-reduced-motion: reduce) { .scroll-flash { animation: none; } }
/* ===== Báo cáo P&L ===== */
.pg-abbr { font-size: .62em; font-weight: 700; color: var(--text-muted); letter-spacing: .3px; vertical-align: 2px; }
/* Tab Hiển thị menu */
.mm-head-r { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.mm-list { display: flex; flex-direction: column; gap: 8px; }
.mm-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 12px 2px 2px; }
.mm-sec:first-child { margin-top: 0; }
.mm-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); transition: border-color .14s, opacity .14s, background .14s; }
.mm-row.off { opacity: .55; }
.mm-row.off .mm-name { text-decoration: line-through; text-decoration-color: var(--text-muted); }
.mm-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.mm-ic svg { width: 17px; height: 17px; }
.mm-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-sw { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mm-lock { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
/* Tính thưởng nhân viên */
/* Nguồn dữ liệu: nút trên topbar (AppShell header) + popup thao tác */
.th-srcbtn { position: relative; display: inline-flex; }
.th-srcbtn-toggle svg:last-child { width: 13px; height: 13px; opacity: .65; }
.th-srcbtn.open .th-srcbtn-toggle { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.th-src-badge { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.th-src-badge.ok { color: #059669; background: rgba(16, 185, 129, .12); }
.th-src-badge.warn { color: #d97706; background: rgba(245, 158, 11, .14); }
[data-theme="dark"] .th-src-badge.ok { color: #34d399; }
.th-srcpop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: none; width: 400px; max-width: 90vw;
padding: 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 42px rgba(2, 6, 23, .20); }
.th-srcbtn.open .th-srcpop { display: block; animation: hcPopIn .15s ease; }
[data-theme="dark"] .th-srcpop { box-shadow: 0 16px 42px rgba(0, 0, 0, .5); }
.th-srcpop-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.th-srcpop-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text-strong); }
.th-srcpop-t > svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.th-srcpop-h .btn { margin-left: auto; }
.th-url { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text-strong); font-size: 14px; }
.th-url:focus { outline: none; border-color: var(--accent); }
.th-srcpop-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.th-srcpop-row .btn { flex: 1; justify-content: center; }
.th-file-btn { cursor: pointer; }
.th-srcpop-time { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.th-srcpop-time svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.th-srcpop-time b { color: var(--text-strong); font-weight: 700; }
.th-srcpop-hint { margin: 11px 0 0; font-size: 12px; line-height: 1.55; }
.th-empty-cta { margin: 16px auto 0; }
.th-empty { text-align: center; padding: 44px 20px; }
.th-empty-ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.th-empty-ic svg { width: 28px; height: 28px; }
.th-loading-spin { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: thSpin .7s linear infinite; }
@keyframes thSpin { to { transform: rotate(360deg); } }
.th-empty-t { font-size: 17px; font-weight: 800; color: var(--text-strong); }
.th-empty-s { font-size: 13px; color: var(--text-muted); max-width: 560px; margin: 6px auto 0; line-height: 1.6; }
.th-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 6px; }
.th-map-row { display: flex; flex-direction: column; gap: 5px; }
.th-map-row label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.th-head-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.th-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.th-month { height: 34px; }
.th-nv { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.th-nv svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.th-net { font-weight: 600; }
.th-bonus { font-weight: 800; color: var(--accent); }
/* Bảng thưởng cuộn trong khung: ghim thead trên + tfoot (TỔNG) dưới cố định */
.th-scroll { max-height: 60vh; overflow: auto; }
/* Trang bảng thưởng: chiều cao vùng cuộn do JS (thFitTable) đo để lấp đầy tới sát đáy khung nhìn,
bỏ khoảng trống dưới chân trang; bảng cuộn nội bộ (thead/tfoot dính). */
#content.th-fillview .th-scroll { min-height: 240px; }
.th-scroll table.th-tbl.pl-tbl thead th { position: sticky; top: 0; z-index: 6; background: var(--card-bg); box-shadow: 0 2px 7px -5px rgba(2, 6, 23, .4); }
.th-scroll table.th-tbl.pl-tbl tfoot td { position: sticky; bottom: 0; z-index: 6; background: #e9e9fd; box-shadow: 0 -4px 9px -6px rgba(2, 6, 23, .32); }
[data-theme="dark"] .th-scroll table.th-tbl.pl-tbl tfoot td { background: #252b57; }
.th-pct-cell { white-space: nowrap; }
.th-pct-wrap { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 7px; }
.th-pct { width: 40px; text-align: right; height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text-strong); font-size: 13px; font-weight: 700; transition: border-color .14s, box-shadow .14s; }
.th-pct::placeholder { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.th-pct:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.th-pct.th-pct-locked, .th-pct:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
.th-fill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 7px; font-size: 10px; font-weight: 700; line-height: 1.4; border: 1px dashed; border-radius: 999px; letter-spacing: .1px; }
.th-fill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.th-fill.ok { color: #fff; border-color: var(--accent); background: var(--accent); } /* Đã điền: chip tím, chữ trắng */
.th-fill.miss { color: #d97706; border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .11); }
.th-fill.none { color: #fde047; border-color: #fca5a5; background: #dc2626; } /* Chưa điền: chip đỏ, chữ vàng */
[data-theme="dark"] .th-fill.miss { color: #fbbf24; }
.th-pct:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.th-foot-hint { margin: 12px 0 0; }
/* Xổ chi tiết nhân viên */
.th-exp { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 2px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev); color: var(--text-muted); cursor: pointer; flex: 0 0 auto; transition: transform .16s, color .14s, border-color .14s, background .14s; }
.th-exp svg { width: 13px; height: 13px; }
.th-exp:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.th-exp.open { transform: rotate(90deg); color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.th-row-open > td { background: var(--accent-soft); }
.th-drow { display: none; }
.th-drow.open { display: table-row; }
.th-drow > td { padding: 0 !important; background: var(--bg); }
.th-detail { padding: 12px 16px 14px 46px; border-left: 3px solid var(--accent); }
.th-detail-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 9px; }
.th-detail-h svg { width: 14px; height: 14px; color: var(--accent); }
.th-detail-h b { color: var(--text-strong); }
.th-dscroll { overflow-x: auto; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.th-dtbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--bg-elev); }
.th-dtbl th { position: sticky; top: 0; z-index: 3; text-align: left; padding: 8px 11px; background: var(--bg-elev); color: var(--text-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 2px solid var(--border); white-space: nowrap; box-shadow: 0 3px 8px -6px rgba(2, 6, 23, .35); }
[data-theme="dark"] .th-dtbl th { box-shadow: 0 3px 8px -5px rgba(0, 0, 0, .6); }
.th-dtbl td { padding: 8px 11px; border-bottom: 1px solid var(--border); color: var(--text-strong); }
.th-dtbl tr:last-child td { border-bottom: 0; }
.th-dtbl .num { text-align: right; }
.th-dtbl .th-dky { color: var(--text-muted); white-space: nowrap; }
.th-dtbl .th-xcol { white-space: nowrap; }
.th-dtbl tbody .th-xcol-dtvnd, .th-dtbl tbody .th-xcol-dtwind { color: #00a63e; color: lab(59.0978% -58.6621 41.2579); } /* DT VND & DT Wind: đổi màu hàng dữ liệu (không in đậm) */
.th-dtbl .th-xresult { color: var(--text-strong); font-weight: 600; }
.th-dtbl tbody .th-xresult { font-weight: 800; color: #c6005c; color: lab(42.1737% 71.8009 7.42233); } /* Wind thực nhận: hàng dữ liệu in đậm + màu yêu cầu */
.th-dbadge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* Trạng thái đã trả + KPI còn phải trả + lịch sử */
.th-paid { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .14s; }
.th-paid svg { width: 13px; height: 13px; }
.th-paid:hover { filter: brightness(1.04); }
.th-paid.paid { color: #059669; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.5); }
.th-paid.unpaid { color: #d97706; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); }
[data-theme="dark"] .th-paid.paid { color: #34d399; }
[data-theme="dark"] .th-paid.unpaid { color: #fbbf24; }
.set-kpi.k-due .set-kpi-ic { background: rgba(245,158,11,.14); color: #d97706; }
[data-theme="dark"] .set-kpi.k-due .set-kpi-ic { color: #fbbf24; }
.th-due-c { color: #d97706; font-weight: 800; }
[data-theme="dark"] .th-due-c { color: #fbbf24; }
/* Nút Đã chốt + badge + hộp xác nhận chốt kỳ */
.btn.th-closed { color: #059669; border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.1); }
.btn.th-closed:hover { background: rgba(16,185,129,.18); }
[data-theme="dark"] .btn.th-closed { color: #34d399; }
.th-closed-badge { background: rgba(16,185,129,.14) !important; color: #059669 !important; border: 1px solid rgba(16,185,129,.4); font-weight: 700; }
[data-theme="dark"] .th-closed-badge { color: #34d399 !important; }
.th-close-prev { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 8px 0; border-radius: 10px; background: rgba(245,158,11,.1); color: var(--text); font-size: 13px; }
.th-close-prev svg { width: 16px; height: 16px; color: #d97706; flex: 0 0 auto; }
.th-close-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.th-close-c { border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; background: var(--bg); }
.th-close-c span { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.th-close-c b { font-size: 15px; color: var(--text-strong); }
.th-close-c b.pos { color: #059669; } .th-close-c b.neg { color: #dc2626; }
.th-close-c .th-close-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); font-style: normal; }
.th-close-go { cursor: pointer; transition: border-color .14s, background .14s; }
.th-close-go span { display: flex; align-items: center; justify-content: space-between; }
.th-close-go span svg { width: 13px; height: 13px; color: var(--text-muted); }
.th-close-go:hover { border-color: var(--accent); background: var(--accent-soft); }
.th-close-go:hover span svg { color: var(--accent); }
.th-settle-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 13px; margin: 2px 0 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text-strong); font-size: 13px; }
.th-settle-bar > svg { width: 15px; height: 15px; color: var(--accent); }
.th-settle-x { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.th-settle-x svg { width: 13px; height: 13px; }
.th-settle-x:hover { border-color: var(--accent); color: var(--accent); }
.th-close-warn, .th-close-ok { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.th-close-warn { background: rgba(245,158,11,.12); color: var(--text); } .th-close-warn svg { width: 17px; height: 17px; color: #d97706; flex: 0 0 auto; }
.th-close-ok { background: rgba(16,185,129,.12); color: var(--text); } .th-close-ok svg { width: 17px; height: 17px; color: #059669; flex: 0 0 auto; }
.th-close-miss { margin: 12px 0 2px; }
.th-miss-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 8px; }
.th-miss-h svg { width: 15px; height: 15px; color: #d97706; }
.th-miss-hint { font-weight: 400; color: var(--text-muted); font-style: italic; }
.th-miss-wrap { display: flex; flex-wrap: wrap; gap: 7px; max-height: 190px; overflow-y: auto; padding: 2px; }
.th-miss-chip { display: inline-flex; align-items: center; gap: 2px; padding: 5px 8px 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); color: var(--text-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.th-miss-chip svg { width: 13px; height: 13px; color: var(--text-muted); }
.th-miss-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.th-miss-chip:hover svg { color: var(--accent); }
@keyframes thFlash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.th-flash > td { animation: thFlash 1.9s ease; }
/* ===== Hộp Chốt kỳ (redesign) ===== */
.thc { display: flex; flex-direction: column; gap: 14px; }
.thc-head { display: flex; align-items: center; gap: 13px; }
.thc-head-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.thc-head-ic svg { width: 22px; height: 22px; }
.thc-head-t { flex: 1; min-width: 0; }
.thc-head-t h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text-strong); }
.thc-head-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.thc-badge { flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.thc-badge.full { color: #059669; background: rgba(16,185,129,.13); }
.thc-badge.part { color: #d97706; background: rgba(245,158,11,.15); }
[data-theme="dark"] .thc-badge.full { color: #34d399; } [data-theme="dark"] .thc-badge.part { color: #fbbf24; }
.thc-notice { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--text); }
.thc-notice svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.thc-notice.warn { background: rgba(245,158,11,.1); } .thc-notice.warn svg { color: #d97706; }
.thc-notice.alert { background: rgba(245,158,11,.13); } .thc-notice.alert svg { color: #d97706; }
.thc-notice.ok { background: rgba(16,185,129,.12); } .thc-notice.ok svg { color: #059669; }
.thc-prog { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.thc-prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }
.thc-prog-top b { color: var(--text-strong); font-size: 13px; }
.thc-prog-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.thc-prog-bar span { display: block; height: 100%; border-radius: 999px; background: #d97706; transition: width .3s ease; }
.thc-prog-bar span.full { background: #10b981; }
.thc-sec-l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 2px 2px -4px; }
.thc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.thc-stat { display: flex; align-items: center; gap: 11px; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-elev); cursor: pointer; transition: border-color .14s, background .14s, transform .1s; font: inherit; }
.thc-stat.nogo { cursor: default; }
.thc-stat.go:hover { border-color: var(--accent); background: var(--accent-soft); }
.thc-stat.go:active { transform: scale(.99); }
.thc-stat-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); }
.thc-stat-ic svg { width: 17px; height: 17px; }
.thc-stat-ic.pos { background: rgba(16,185,129,.13); color: #059669; }
.thc-stat-ic.neg { background: rgba(239,68,68,.12); color: #dc2626; }
.thc-stat-ic.due { background: rgba(245,158,11,.14); color: #d97706; }
.thc-stat-body { min-width: 0; display: flex; flex-direction: column; }
.thc-stat-l { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-muted); }
.thc-stat-l svg { width: 12px; height: 12px; }
.thc-stat-v { font-size: 17px; font-weight: 800; color: var(--text-strong); line-height: 1.2; }
.thc-stat-v.pos { color: #059669; } .thc-stat-v.neg { color: #dc2626; } .thc-stat-v.due { color: #d97706; }
[data-theme="dark"] .thc-stat-v.pos, [data-theme="dark"] .thc-stat-ic.pos { color: #34d399; }
[data-theme="dark"] .thc-stat-v.due, [data-theme="dark"] .thc-stat-ic.due { color: #fbbf24; }
.thc-stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.thc-miss { border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; background: var(--bg); }
.thc-miss-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.thc-miss-h > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-strong); }
.thc-miss-h svg { width: 15px; height: 15px; color: #d97706; }
.thc-miss-hint { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.thc-miss-wrap { display: flex; flex-wrap: wrap; gap: 7px; max-height: 168px; overflow-y: auto; padding: 2px; }
.thc-chip { display: inline-flex; align-items: center; gap: 2px; padding: 5px 8px 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); color: var(--text-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.thc-chip svg { width: 13px; height: 13px; color: var(--text-muted); }
.thc-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.thc-chip:hover svg { color: var(--accent); }
.thc-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; padding-top: 4px; }
@media (max-width: 620px) { .thc-stats { grid-template-columns: 1fr; } }
.th-hist-who { font-size: 11px; color: var(--text-muted); }
.th-clst { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.th-clst svg { width: 13px; height: 13px; }
.th-clst.full { color: #059669; background: rgba(16,185,129,.12); }
.th-clst.part { color: #d97706; background: rgba(245,158,11,.14); }
[data-theme="dark"] .th-clst.full { color: #34d399; } [data-theme="dark"] .th-clst.part { color: #fbbf24; }
.th-detail-tip { color: var(--text-muted); font-style: italic; }
.th-fpct { width: 62px; text-align: right; height: 28px; padding: 0 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--card-bg); color: var(--text-strong); font-size: 12.5px; font-weight: 700; }
.th-fpct:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.th-dtbl .th-fbonus { font-weight: 800; color: var(--accent); }
.th-dtotal td { background: var(--bg); font-weight: 800; color: var(--text-strong); border-top: 2px solid var(--border); border-bottom: 0; }
.th-search { position: relative; display: inline-flex; align-items: center; }
.th-search > svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.th-search input { height: 34px; width: 190px; padding: 0 28px 0 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev); color: var(--text-strong); font-size: 13px; }
.th-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.th-search-x { position: absolute; right: 6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--border); color: var(--text); font-size: 11px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.th-search-x:hover { background: var(--danger, #ef4444); color: #fff; }
/* Header bảng thưởng — gộp tiêu đề · lọc · hành động trên MỘT hàng ngang (nén gọn; chỉ wrap khi màn quá hẹp) */
.th-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.th-bar > .th-head2-l { flex: 0 1 auto; min-width: 0; margin-right: 2px; }
.th-bar .th-head2-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-bar .th-search { flex: 1 1 150px; max-width: 220px; min-width: 130px; }
.th-bar .th-search input { width: 100%; }
.th-bar .th-month { max-width: 120px; }
.th-bar .th-acts { margin-left: auto; }
.th-bar .th-chk span { white-space: nowrap; }
.th-head2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.th-head2-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.th-head2-title { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.th-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.th-status-chip svg { width: 13px; height: 13px; }
.th-status-chip.full { color: #059669; background: rgba(16,185,129,.13); }
.th-status-chip.part { color: #d97706; background: rgba(245,158,11,.15); }
.th-status-chip.none { color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); }
[data-theme="dark"] .th-status-chip.full { color: #34d399; } [data-theme="dark"] .th-status-chip.part { color: #fbbf24; }
.th-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.th-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--bg-elev); }
.th-seg-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: background .14s, color .14s; }
.th-seg-btn:first-child { border-left: 0; }
.th-seg-btn svg { width: 15px; height: 15px; }
.th-seg-btn:hover { background: var(--accent-soft); color: var(--accent); }
.th-tb-div { width: 1px; align-self: stretch; background: var(--border); margin: 0 3px; }
.th-more { position: relative; display: inline-flex; }
.th-more-btn { padding: 0; width: 34px; justify-content: center; }
.th-more-btn svg { width: 18px; height: 18px; }
.th-more.open .th-more-btn { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.th-more-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; display: none; min-width: 220px; padding: 6px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(2, 6, 23, .18); }
.th-more.open .th-more-pop { display: block; animation: hcPopIn .15s ease; }
[data-theme="dark"] .th-more-pop { box-shadow: 0 14px 36px rgba(0, 0, 0, .5); }
.th-more-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-strong); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.th-more-item svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }
.th-more-item:hover { background: var(--accent-soft); color: var(--accent); }
.th-more-item:hover svg { color: var(--accent); }
.th-more-div { height: 1px; background: var(--border); margin: 5px 6px; }
/* Thanh lọc gọn (dropdown nhiều lựa chọn) */
.th-head-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.th-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 13px; margin: 2px 0 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.th-tb-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.th-tb-lbl svg { width: 15px; height: 15px; }
.th-tb-clear { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; margin-left: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s; }
.th-tb-clear svg { width: 14px; height: 14px; }
.th-tb-clear:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.th-tb-clear.hidden { display: none; }
.th-fdd { position: relative; }
.th-fdd-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev); color: var(--text-strong); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .14s; }
.th-fdd-btn:hover { border-color: var(--accent); }
.th-fdd-ic { display: inline-flex; color: var(--text-muted); }
.th-fdd-ic svg { width: 15px; height: 15px; }
.th-fdd-caret { display: inline-flex; color: var(--text-muted); transition: transform .16s; }
.th-fdd-caret svg { width: 14px; height: 14px; }
.th-fdd.open .th-fdd-caret { transform: rotate(180deg); }
.th-fdd.open .th-fdd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.th-fdd.filtered .th-fdd-btn { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.th-fdd.filtered .th-fdd-ic { color: var(--accent); }
.th-fdd-badge { min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.th-fdd-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: none; width: 250px; max-width: 78vw; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(2, 6, 23, .18); overflow: hidden; }
.th-fdd.open .th-fdd-pop { display: block; animation: hcPopIn .15s ease; }
.th-fdd-actions { display: flex; gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.th-fdd-a { flex: 1; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elev); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.th-fdd-a:hover { border-color: var(--accent); color: var(--accent); }
.th-fdd-list { max-height: 264px; overflow-y: auto; padding: 5px; }
.th-fdd-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-strong); }
.th-fdd-item:hover { background: var(--accent-soft); }
.th-fdd-item input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.th-fdd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-fdd-n { flex: 0 0 auto; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 700; }
[data-theme="dark"] .th-fdd-pop { box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
/* Nhân sự theo tháng */
.hc-head-t { display: flex; align-items: center; gap: 8px; }
.hc-help-wrap { position: relative; display: inline-flex; }
.hc-help { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .14s, color .14s, border-color .14s; }
.hc-help:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.hc-help svg { width: 14px; height: 14px; }
.hc-pop { position: absolute; top: calc(100% + 11px); left: -10px; width: 330px; max-width: 78vw; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(2, 6, 23, .20); padding: 13px 15px; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--text); z-index: 60; display: none; }
.hc-pop.open { display: block; animation: hcPopIn .16s ease; }
.hc-pop b { color: var(--text-strong); font-weight: 700; }
.hc-pop > b:first-of-type { display: block; margin-bottom: 4px; color: var(--accent); }
.hc-pop-arrow { position: absolute; top: -7px; left: 16px; width: 12px; height: 12px; background: var(--card-bg); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.mm-row .hc-pop { left: auto; right: -10px; }
.mm-row .hc-pop-arrow { left: auto; right: 16px; }
@keyframes hcPopIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .hc-pop { box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
.hc-kylabel { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.hc-month { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; }
.hc-kpis { margin-bottom: 16px; }
.hc-kpis .set-kpi[role="button"] { cursor: pointer; padding-right: 40px; }
.hc-kpis .set-kpi[role="button"]:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.hc-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .26); }
.hc-kpis .set-kpi.k-bank { background: linear-gradient(180deg, rgba(37, 99, 235, .09), rgba(37, 99, 235, .03)); border-color: rgba(37, 99, 235, .26); }
.hc-kpis .set-kpi.k-out { background: linear-gradient(180deg, rgba(217, 119, 6, .10), rgba(217, 119, 6, .03)); border-color: rgba(217, 119, 6, .26); }
.hc-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.hc-team { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.hc-team svg { width: 15px; height: 15px; opacity: .6; flex: 0 0 auto; }
.pl-total .hc-team { color: var(--accent); font-weight: 800; }
.pl-total .hc-team svg { opacity: 1; }
/* Ô nhập trong bảng */
.hc-tbl input.hc-in { width: 84px; font-variant-numeric: tabular-nums; }
.hc-tbl input.hc-in-w { width: 150px; }
/* Thanh tỷ trọng */
.hc-share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.hc-bar { width: 58px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; flex: 0 0 auto; }
.hc-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
/* Cảnh báo đột biến */
.alert-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.alert-kpis .set-kpi { cursor: pointer; }
.alert-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.alert-kpis .set-kpi.k-crit { background: linear-gradient(180deg, rgba(220, 38, 38, .10), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .28); }
.alert-kpis .set-kpi.k-warn { background: linear-gradient(180deg, rgba(217, 119, 6, .10), rgba(217, 119, 6, .03)); border-color: rgba(217, 119, 6, .26); }
.alert-kpis .set-kpi.is-active { box-shadow: 0 0 0 2px var(--accent) inset, 0 10px 24px rgba(2, 6, 23, .10); }
.alert-kpis .set-kpi.k-crit.is-active { box-shadow: 0 0 0 2px #dc2626 inset, 0 10px 24px rgba(220, 38, 38, .14); }
.alert-kpis .set-kpi.k-warn.is-active { box-shadow: 0 0 0 2px #d97706 inset, 0 10px 24px rgba(217, 119, 6, .14); }
/* Thanh công cụ: tab (trái) + bộ lọc dropdown (phải) trên MỘT hàng */
.al-head { margin: 0 0 12px; }
.al-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.al-tb-right { display: flex; gap: 8px; flex-wrap: wrap; }
.al-tb-right select { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 13.5px; }
/* Chip lọc theo loại */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.al-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.al-chip:hover { border-color: var(--border-strong); color: var(--text); }
.al-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.al-chip-n { font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
.al-chip.active .al-chip-n { background: rgba(255, 255, 255, .28); }
/* Nhãn loại trên thẻ */
.al-cat { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }
/* Nút hành động trên thẻ (đã xử lý) */
.al-card { padding-right: 14px; }
.al-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.al-done { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.al-done svg { width: 13px; height: 13px; }
.al-done:hover { border-color: var(--pos); color: var(--pos); background: rgba(22, 163, 74, .08); }
.al-done.undo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.al-card .al-go { position: static; transform: none; opacity: .4; }
.al-card:hover .al-go { transform: translateX(2px); opacity: 1; }
.al-card.is-done { opacity: .6; }
.al-card.is-done .al-title { text-decoration: line-through; text-decoration-color: var(--text-muted); }
/* Tab Chưa xử lý / Đã xử lý */
.al-tabs { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.al-tabs button { border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s; }
.al-tabs button:hover { color: var(--text); }
.al-tabs button.active { background: var(--accent); color: #fff; }
.al-tab-n { font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, .09); border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
.al-tabs button.active .al-tab-n { background: rgba(255, 255, 255, .28); }
.al-list { display: flex; flex-direction: column; gap: 10px; }
.al-card { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 40px 14px 16px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; background: var(--bg-elev); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.al-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.al-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.al-card.crit { border-left-color: #dc2626; }
.al-card.warn { border-left-color: #d97706; }
.al-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.al-card.crit .al-ic { background: rgba(220, 38, 38, .12); color: #dc2626; }
.al-card.warn .al-ic { background: rgba(217, 119, 6, .13); color: #d97706; }
.al-ic svg { width: 19px; height: 19px; }
.al-body { min-width: 0; flex: 1; }
.al-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-title { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.al-desc { font-size: 13px; color: var(--text); margin-top: 3px; line-height: 1.5; }
.al-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.al-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); opacity: .5; transition: transform .16s, opacity .16s; }
.al-go svg { width: 17px; height: 17px; display: block; }
.al-card:hover .al-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.al-empty { display: flex; align-items: center; gap: 12px; padding: 26px 16px; justify-content: center; text-align: left; }
.al-empty-ic { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(22, 163, 74, .12); color: var(--pos); flex: 0 0 auto; }
.al-empty-ic svg { width: 22px; height: 22px; }
.al-empty b { display: block; color: var(--text-strong); }
.al-empty span { font-size: 13px; color: var(--text-muted); }
@media (max-width: 640px) { .alert-kpis { grid-template-columns: 1fr; } }
/* Tổng quan (Executive Dashboard) */
.dash-kpis { margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.dash-kpis .set-kpi { cursor: pointer; padding-right: 40px; }
.dash-kpis .set-kpi:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.dash-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.dash-kpis .set-kpi.k-in { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .26); }
.dash-kpis .set-kpi.k-out { background: linear-gradient(180deg, rgba(220, 38, 38, .09), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .26); }
.dash-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .26); }
.dash-kpis .set-kpi.k-crit { background: linear-gradient(180deg, rgba(220, 38, 38, .10), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .28); }
.dash-kpis .set-kpi.k-bank { background: linear-gradient(180deg, rgba(37, 99, 235, .09), rgba(37, 99, 235, .03)); border-color: rgba(37, 99, 235, .26); }
.dash-kpis .set-kpi.k-warn { background: linear-gradient(180deg, rgba(217, 119, 6, .10), rgba(217, 119, 6, .03)); border-color: rgba(217, 119, 6, .26); }
/* Dải "Cần theo dõi / xử lý" */
.dash-prio { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dp-tile { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 38px 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-elev); cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s; }
.dp-body { min-width: 0; }
.dp-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.dp-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.dp-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.dp-ic svg { width: 18px; height: 18px; }
.dp-num { font-size: 18px; font-weight: 800; color: var(--text-strong); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dp-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); opacity: .5; }
.dp-go svg { width: 16px; height: 16px; display: block; }
/* Tông theo mức độ — chỉ ĐỎ khi thật sự khẩn, còn lại dịu */
.dp-tile.dp-red { border-color: rgba(220, 38, 38, .38); background: rgba(220, 38, 38, .05); }
.dp-tile.dp-red .dp-ic { background: rgba(220, 38, 38, .14); color: #dc2626; }
.dp-tile.dp-red .dp-num { color: #dc2626; }
.dp-tile.dp-amber .dp-ic { background: rgba(217, 119, 6, .14); color: #d97706; }
.dp-tile.dp-amber .dp-num { color: #b45309; }
.dp-tile.dp-info .dp-ic { background: var(--accent-soft); color: var(--accent); }
.dp-tile.dp-muted { opacity: .68; }
.dp-tile.dp-muted .dp-ic { background: var(--bg); color: var(--text-muted); }
.dp-tile.dp-muted .dp-num { color: var(--text-muted); }
[data-theme="dark"] .dp-tile.dp-red .dp-ic, [data-theme="dark"] .dp-tile.dp-red .dp-num { color: #f87171; }
[data-theme="dark"] .dp-tile.dp-amber .dp-num { color: #fbbf24; }
/* Cảnh báo mới nhất — dạng gọn 1 dòng */
.da-lite { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px 26px 11px 4px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .13s; }
.da-lite:last-child { border-bottom: 0; }
.da-lite:hover { background: var(--hover); }
.da-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: #d97706; }
.da-lite.crit .da-dot { background: #dc2626; }
.da-tx { min-width: 0; flex: 1; }
.da-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-tx span { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.da-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); opacity: .45; }
.da-go svg { width: 15px; height: 15px; display: block; }
.erc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Báo cáo thuế GTGT */
.tax-kpis { margin-bottom: 16px; }
.tax-kpis .set-kpi { cursor: pointer; padding-right: 40px; }
.tax-kpis .set-kpi:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.tax-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.tax-kpis .set-kpi.k-in { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .26); }
.tax-kpis .set-kpi.k-out { background: linear-gradient(180deg, rgba(220, 38, 38, .09), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .26); }
.tax-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .26); }
.tax-kpis .set-kpi.k-bank { background: linear-gradient(180deg, rgba(37, 99, 235, .09), rgba(37, 99, 235, .03)); border-color: rgba(37, 99, 235, .26); }
.tax-mon { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.tax-mon svg { width: 15px; height: 15px; opacity: .7; flex: 0 0 auto; }
.tax-total .tax-mon { color: var(--accent); font-weight: 800; }
.tax-total .tax-mon svg { opacity: 1; }
.tax-pay { color: #d97706; }
[data-theme="dark"] .tax-pay { color: #fbbf24; }
.pl-kpis { margin-bottom: 16px; }
.pl-kpis .set-kpi { cursor: pointer; padding-right: 40px; }
.pl-kpis .set-kpi:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.pl-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.pl-kpis .set-kpi.k-in, .pl-kpis .set-kpi.k-cash { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .26); }
.pl-kpis .set-kpi.k-out, .pl-kpis .set-kpi.k-crit { background: linear-gradient(180deg, rgba(220, 38, 38, .09), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .26); }
.pl-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .26); }
.pl-th { display: inline-flex; align-items: center; gap: 5px; }
.pl-th svg { width: 13px; height: 13px; opacity: .65; flex: 0 0 auto; }
table.tbl.pl-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-strong); font-weight: 800; white-space: nowrap; border-bottom: 1px solid var(--border); }
.pl-tbl .pl-th svg { opacity: .8; }
.pl-tbl th, .pl-tbl td { padding-top: 12px; padding-bottom: 12px; }
.pl-tbl tbody tr.pl-row:hover td { background: var(--hover); }
.pl-team { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text); min-width: 0; }
.pl-team > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-muted); }
table.tbl.pl-tbl tbody tr.pl-dept td { background: var(--accent-soft); border-top: 1px solid var(--accent-soft-2); border-bottom: 1px solid var(--accent-soft-2); }
.pl-dept .pl-team { color: var(--accent); font-weight: 800; }
.pl-dep-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .65); flex: 0 0 auto; }
.pl-dep-ic svg { width: 14px; height: 14px; color: var(--accent); }
.pl-margin { display: inline-block; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.pl-margin.up { color: #16a34a; background: rgba(22, 163, 74, .12); }
.pl-margin.down { color: #dc2626; background: rgba(220, 38, 38, .12); }
[data-theme="dark"] .pl-margin.up { color: #4ade80; } [data-theme="dark"] .pl-margin.down { color: #f87171; }
[data-theme="dark"] .pl-dep-ic { background: rgba(129, 140, 248, .22); }
table.tbl.pl-tbl tbody tr:last-child td { border-bottom: 0; } /* tránh viền solid đè lên nét đứt của tfoot (border-collapse) */
table.tbl.pl-tbl tfoot td { background: rgba(99, 102, 241, .14); font-weight: 800; border-top: 1px dashed var(--accent); }
.pl-total .pl-team { color: var(--accent); font-weight: 800; }
.pl-total .pl-dep-ic { background: var(--accent); } .pl-total .pl-dep-ic svg { color: #fff; }
/* ===== Quản lý người dùng ===== */
.sm-badge { font-size: 11px; padding: 2px 8px; }
.usr-kpis { margin-bottom: 16px; }
.usr-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .24); }
.usr-kpis .set-kpi.k-cash { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .24); }
.usr-kpis .set-kpi.k-bank { background: linear-gradient(180deg, rgba(37, 99, 235, .09), rgba(37, 99, 235, .03)); border-color: rgba(37, 99, 235, .24); }
.usr-kpis .set-kpi.k-warn { background: linear-gradient(180deg, rgba(217, 119, 6, .1), rgba(217, 119, 6, .03)); border-color: rgba(217, 119, 6, .26); }
.usr-kpis .set-kpi { cursor: pointer; padding-right: 40px; }
.usr-kpis .set-kpi:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.usr-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.usr-kpis .set-kpi.is-active { box-shadow: 0 0 0 2px var(--accent) inset, 0 10px 24px rgba(2, 6, 23, .10); }
.usr-kpis .set-kpi.k-total.is-active { box-shadow: 0 0 0 2px #6366f1 inset, 0 10px 24px rgba(99, 102, 241, .14); }
.usr-kpis .set-kpi.k-cash.is-active { box-shadow: 0 0 0 2px #16a34a inset, 0 10px 24px rgba(22, 163, 74, .14); }
.usr-kpis .set-kpi.k-bank.is-active { box-shadow: 0 0 0 2px #2563eb inset, 0 10px 24px rgba(37, 99, 235, .14); }
.usr-kpis .set-kpi.k-warn.is-active { box-shadow: 0 0 0 2px #d97706 inset, 0 10px 24px rgba(217, 119, 6, .14); }
.usr-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.usr-tbl th:first-child, .usr-tbl td:first-child { width: 40px; text-align: center; }
.usr-tbl th, .usr-tbl td { padding-top: 10px; padding-bottom: 10px; }
.usr-tbl tbody tr:hover { background: var(--hover); }
/* Badge vai trò tô màu */
.rb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rb svg { width: 13px; height: 13px; }
.rb.r-admin { background: rgba(220, 38, 38, .12); color: #dc2626; }
.rb.r-kt { background: rgba(99, 102, 241, .13); color: var(--accent); }
.rb.r-kv { background: rgba(37, 99, 235, .12); color: #2563eb; }
.rb.r-tp { background: rgba(22, 163, 74, .12); color: #16a34a; }
.rb.r-tn { background: rgba(13, 148, 136, .14); color: #0d9488; }
.rb.r-nv { background: rgba(100, 116, 139, .14); color: #64748b; }
.rb.r-vw { background: rgba(148, 163, 184, .18); color: #64748b; }
[data-theme="dark"] .rb.r-admin { color: #f87171; } [data-theme="dark"] .rb.r-kt { color: #a5b4fc; } [data-theme="dark"] .rb.r-kv { color: #60a5fa; } [data-theme="dark"] .rb.r-tp { color: #4ade80; } [data-theme="dark"] .rb.r-tn { color: #2dd4bf; } [data-theme="dark"] .rb.r-nv, [data-theme="dark"] .rb.r-vw { color: #94a3b8; }
/* Thẻ Vai trò & quyền hạn */
.role-ref { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.role-ref-row { position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 15px 19px; background: var(--bg-elev); overflow: hidden;
--rrc: var(--accent); --rrc-soft: var(--accent-soft);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.role-ref-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rrc); }
.role-ref-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.rr-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.rr-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--rrc-soft); color: var(--rrc); }
.rr-ico svg { width: 19px; height: 19px; }
.rr-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rr-title b { font-size: 14.5px; font-weight: 800; color: var(--text-strong); letter-spacing: -.2px; }
.rr-count { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.rr-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 11px; }
.rr-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 7px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text); }
.cap-chip.cap-none { color: var(--text-muted); font-style: italic; border-style: dashed; }
.role-ref-row.r-admin { --rrc: #dc2626; --rrc-soft: rgba(220, 38, 38, .12); }
.role-ref-row.r-kt { --rrc: var(--accent); --rrc-soft: var(--accent-soft); }
.role-ref-row.r-kv { --rrc: #2563eb; --rrc-soft: rgba(37, 99, 235, .12); }
.role-ref-row.r-tp { --rrc: #16a34a; --rrc-soft: rgba(22, 163, 74, .12); }
.role-ref-row.r-tn { --rrc: #0d9488; --rrc-soft: rgba(13, 148, 136, .14); }
.role-ref-row.r-nv { --rrc: #64748b; --rrc-soft: rgba(100, 116, 139, .14); }
.role-ref-row.r-vw { --rrc: #94a3b8; --rrc-soft: rgba(148, 163, 184, .18); }
[data-theme="dark"] .role-ref-row.r-admin { --rrc: #f87171; } [data-theme="dark"] .role-ref-row.r-kv { --rrc: #60a5fa; } [data-theme="dark"] .role-ref-row.r-tp { --rrc: #4ade80; } [data-theme="dark"] .role-ref-row.r-tn { --rrc: #2dd4bf; } [data-theme="dark"] .role-ref-row.r-nv, [data-theme="dark"] .role-ref-row.r-vw { --rrc: #94a3b8; }
@media (max-width: 760px) { .role-ref { grid-template-columns: 1fr; } }
/* Ghi chú vai trò trong modal đổi vai trò */
.cr-note { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 11px 13px; border-radius: 11px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); }
.cr-note-tx { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
/* ===== Danh bạ nhân sự ===== */
.dir-kpis { margin-bottom: 16px; }
.dir-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .24); }
.dir-kpis .set-kpi.k-bank { background: linear-gradient(180deg, rgba(37, 99, 235, .09), rgba(37, 99, 235, .03)); border-color: rgba(37, 99, 235, .24); }
.dir-kpis .set-kpi.k-cash { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .24); }
/* Thanh tìm & lọc */
.dir-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.dir-search { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 200px;
background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; height: 40px; transition: border-color .15s, box-shadow .15s; }
.dir-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dir-search svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }
.dir-search input { border: none; background: none; outline: none; flex: 1; min-width: 0; font-size: 14px; color: var(--text); padding: 0; }
.dir-toolbar > select { height: 40px; }
.dir-clear { flex: 0 0 auto; }
/* Bảng danh bạ */
.dir-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
/* Header khít mép trên card (bỏ khoảng trống), bo góc theo card */
.card.pad-lg.dir-card { padding-top: 0; }
.dir-tbl thead tr th:first-child { border-top-left-radius: 15px; }
.dir-tbl thead tr th:last-child { border-top-right-radius: 15px; }
.dir-tbl th, .dir-tbl td { padding-top: 10px; padding-bottom: 10px; }
.dir-tbl th:first-child, .dir-tbl td:first-child { width: 40px; text-align: center; }
.dir-tbl tbody tr:hover { background: var(--hover); }
.dir-person { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.dir-ava { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .3px; }
.dir-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dir-info b { color: var(--text-strong); font-weight: 700; }
.dir-code { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dir-role { font-weight: 600; }
.dir-acts { display: flex; gap: 2px; justify-content: flex-end; }
/* Phân trang */
.dir-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px 2px; }
.dir-pager-btns { display: flex; gap: 8px; }
.dir-pager-btns .btn:first-child svg { transform: rotate(180deg); }
@media (max-width: 620px) { .dir-search { flex-basis: 100%; } .dir-toolbar > select { flex: 1; } }
.dir-row { cursor: pointer; }
.dir-cf { white-space: nowrap; } .dir-cf-empty { color: var(--border-strong); }
/* Cố định hàng header + 2 cột đầu (# và Nhân sự) khi cuộn — chỉ áp cho bảng danh sách nhân sự */
.dir-scroll { max-height: 70vh; overflow-y: auto; }
.card.pad-lg:has(> .table-scroll) > .dir-scroll table.tbl.dir-tbl th:first-child,
.card.pad-lg:has(> .table-scroll) > .dir-scroll table.tbl.dir-tbl td:first-child {
position: sticky; left: 0; z-index: 3; width: 46px; min-width: 46px; max-width: 46px;
padding-left: 14px; padding-right: 4px; text-align: center; }
.card.pad-lg:has(> .table-scroll) > .dir-scroll table.tbl.dir-tbl th:nth-child(2),
.card.pad-lg:has(> .table-scroll) > .dir-scroll table.tbl.dir-tbl td:nth-child(2) {
position: sticky; left: 46px; z-index: 3; box-shadow: 8px 0 10px -8px rgba(2, 6, 23, .16); }
.dir-tbl tbody td:first-child, .dir-tbl tbody td:nth-child(2) { background: var(--card-bg); }
table.tbl.dir-tbl thead th { z-index: 4; } /* header thường trên ô body đông cứng (z-index 3) */
/* ô header của cột đông cứng: z-index cao nhất (selector cùng cấp rule đóng băng + thead để thắng) */
.card.pad-lg:has(> .table-scroll) > .dir-scroll table.tbl.dir-tbl thead th:first-child,
.card.pad-lg:has(> .table-scroll) > .dir-scroll table.tbl.dir-tbl thead th:nth-child(2) { z-index: 6; background: var(--bg); }
.dir-tbl tbody tr:hover td:first-child, .dir-tbl tbody tr:hover td:nth-child(2) { background: var(--hover); }
/* Badge sinh nhật / thâm niên / hạn HĐ */
.dir-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.tag-bd { background: rgba(219, 39, 119, .12); color: #db2777; }
.tag-ten { background: rgba(22, 163, 74, .12); color: #16a34a; }
.tag-warn { background: rgba(217, 119, 6, .14); color: #d97706; }
.tag-crit { background: rgba(220, 38, 38, .12); color: #dc2626; }
[data-theme="dark"] .tag-bd { color: #f472b6; } [data-theme="dark"] .tag-ten { color: #4ade80; } [data-theme="dark"] .tag-warn { color: #fbbf24; } [data-theme="dark"] .tag-crit { color: #f87171; }
/* Header modal đẹp (icon + tiêu đề + mô tả) + footer dính */
.md-hd { display: flex; align-items: center; gap: 13px; margin: -2px 0 18px; }
.md-hd-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.md-hd-ic svg { width: 22px; height: 22px; }
.md-hd h3 { margin: 0 0 2px; }
.md-hd p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.md-code { color: var(--accent); font-variant-numeric: tabular-nums; background: var(--accent-soft); padding: 1px 7px; border-radius: 6px; font-weight: 700; }
.md-foot { position: sticky; bottom: -26px; z-index: 3; display: flex; gap: 10px; margin: 22px -28px -26px; padding: 15px 28px; background: var(--card-bg); border-top: 1px solid var(--border); }
.md-foot .btn:first-child { flex: 1; justify-content: center; }
@media (max-width: 640px) { .md-foot { bottom: -20px; margin: 18px -20px -20px; padding: 14px 20px; } }
/* Form nhân sự: nhóm trường + phụ cấp nhiều dòng */
.em-sec { margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.em-sec-t { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); }
.em-sec-t svg { width: 15px; height: 15px; }
.em-sec-lock { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; color: var(--text-muted); background: var(--bg); padding: 1px 8px; border-radius: 999px; }
.hint-inline { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.em-allow-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.em-al-label { flex: 1 1 auto; } .em-al-amount { flex: 0 0 140px; text-align: right; }
.em-add-allow { align-self: flex-start; margin-top: 2px; border: 1px dashed var(--border-strong); background: transparent; }
.em-add-allow:hover { border-color: var(--accent); color: var(--accent); }
/* Cấu hình trường tùy chỉnh */
.cf-cfg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-height: 260px; overflow-y: auto; padding: 2px; }
.cf-cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.cf-cfg-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cf-cfg-name { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.cf-cfg-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cf-cfg-txt b { color: var(--text-strong); font-weight: 700; }
.cf-cfg-opts { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Badge kiểu tô màu riêng */
.cf-type { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-left: auto; flex: 0 0 auto; }
.cf-type-text { background: rgba(100,116,139,.14); color: #64748b; }
.cf-type-number { background: rgba(37,99,235,.13); color: #2563eb; }
.cf-type-date { background: rgba(147,51,234,.13); color: #9333ea; }
.cf-type-money { background: rgba(22,163,74,.13); color: #16a34a; }
.cf-type-bool { background: rgba(217,119,6,.14); color: #d97706; }
.cf-type-select { background: rgba(219,39,119,.12); color: #db2777; }
[data-theme="dark"] .cf-type-text { color:#94a3b8; } [data-theme="dark"] .cf-type-number { color:#60a5fa; } [data-theme="dark"] .cf-type-date { color:#c084fc; } [data-theme="dark"] .cf-type-money { color:#4ade80; } [data-theme="dark"] .cf-type-bool { color:#fbbf24; } [data-theme="dark"] .cf-type-select { color:#f472b6; }
/* Chấm icon theo kiểu */
.cf-dot-text { background: rgba(100,116,139,.14); color: #64748b; }
.cf-dot-number { background: rgba(37,99,235,.13); color: #2563eb; }
.cf-dot-date { background: rgba(147,51,234,.13); color: #9333ea; }
.cf-dot-money { background: rgba(22,163,74,.13); color: #16a34a; }
.cf-dot-bool { background: rgba(217,119,6,.14); color: #d97706; }
.cf-dot-select { background: rgba(219,39,119,.12); color: #db2777; }
.cf-cfg-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.cf-cfg-dot { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); align-items: center; justify-content: center; flex: 0 0 auto; }
.cf-cfg-dot svg { width: 14px; height: 14px; }
.cf-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: 10px; }
.cf-add { padding: 14px; margin-top: 4px; border: 1px dashed var(--accent-soft-2); border-radius: 12px; background: var(--accent-soft); }
.cf-add-h { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--accent); margin-bottom: 10px; }
.cf-add-h svg { width: 15px; height: 15px; }
.cf-add-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.cf-add-row #cfLabel { flex: 1 1 180px; min-width: 0; height: 42px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.cf-add-row #cfLabel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-add-row .nice-select { flex: 0 0 148px; }
.cf-add-row .nice-select-btn { height: 42px; border-radius: 10px; background: var(--card-bg); }
.cf-add-row .cf-add-btn { flex: 0 0 auto; height: 42px; border-radius: 10px; padding: 0 18px; }
.cf-add #cfOpts { margin-top: 8px; width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font-size: 14px; font-family: inherit; }
.cf-add #cfOpts:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 560px) { .cf-add-row #cfLabel, .cf-add-row .nice-select { flex: 1 1 100%; } .cf-add-row .cf-add-btn { flex: 1 1 100%; justify-content: center; } }
/* Hồ sơ chi tiết nhân sự */
.ep-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ep-ava { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; }
.ep-head-t { min-width: 0; }
.ep-name { margin: 0 0 3px; font-size: 19px; font-weight: 800; color: var(--text-strong); }
.ep-sub { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ep-sub2 { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.ep-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ep-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.ep-row:last-child { border-bottom: none; }
.ep-row:nth-child(even) { background: var(--bg-elev); }
.ep-k { color: var(--text-muted); font-size: 13px; flex: 0 0 auto; }
.ep-v { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ep-total { background: var(--accent-soft) !important; } .ep-total .ep-k, .ep-total .ep-v { color: var(--accent); font-weight: 800; }
.ep-sec { margin: 16px 0 8px; }
.ep-actions { display: flex; gap: 10px; margin-top: 18px; }
.ep-actions .btn:first-child { flex: 1; justify-content: center; }
/* Widget nhắc nhân sự (Dashboard) */
.emp-rem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.emp-rem-col { border: 1px solid var(--border); border-radius: 14px; padding: 6px 6px 8px; background: var(--bg-elev); transition: transform .16s, box-shadow .16s; }
.emp-rem-col:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.erc-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--text-strong); padding: 9px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
/* Nền màu hiện đại theo chủ đề mỗi cột */
.emp-rem-col.rc-bd { background: linear-gradient(180deg, rgba(219, 39, 119, .09), rgba(219, 39, 119, .02)); border-color: rgba(219, 39, 119, .22); }
.emp-rem-col.rc-bd .erc-h { color: #db2777; border-bottom-color: rgba(219, 39, 119, .22); }
.emp-rem-col.rc-ten { background: linear-gradient(180deg, rgba(13, 148, 136, .10), rgba(13, 148, 136, .02)); border-color: rgba(13, 148, 136, .22); }
.emp-rem-col.rc-ten .erc-h { color: #0d9488; border-bottom-color: rgba(13, 148, 136, .22); }
.emp-rem-col.rc-hd { background: linear-gradient(180deg, rgba(217, 119, 6, .11), rgba(217, 119, 6, .02)); border-color: rgba(217, 119, 6, .24); }
.emp-rem-col.rc-hd .erc-h { color: #d97706; border-bottom-color: rgba(217, 119, 6, .24); }
.emp-rem-col .erc-item:hover { background: rgba(255, 255, 255, .45); }
[data-theme="dark"] .emp-rem-col .erc-item:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .emp-rem-col.rc-hd .erc-h { color: #fbbf24; }
[data-theme="dark"] .emp-rem-col.rc-bd .erc-h { color: #f472b6; }
[data-theme="dark"] .emp-rem-col.rc-ten .erc-h { color: #2dd4bf; }
.erc-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.erc-item:hover { background: var(--hover); }
.erc-name { min-width: 0; flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erc-item .dir-tag { margin-left: 0; flex: 0 0 auto; }
.erc-empty { font-size: 12.5px; color: var(--text-muted); padding: 16px 8px; text-align: center; }
@media (max-width: 820px) { .emp-rem-grid { grid-template-columns: 1fr; } }
[data-theme="dark"] table.tbl.pl-tbl tfoot td { background: rgba(99, 102, 241, .22); border-top-color: #818cf8; }
/* Bỏ khoảng hở dưới cùng: bảng chạm sát đáy card, bo góc tfoot theo card (giữ sticky header) */
.card.pad-lg.pl-card { padding-bottom: 0; }
table.tbl.pl-tbl tfoot tr td:first-child { border-bottom-left-radius: 15px; }
table.tbl.pl-tbl tfoot tr td:last-child { border-bottom-right-radius: 15px; }
/* Hàng công cụ Ngân sách: chọn tháng (trái) + nút (phải) */
.bud-acts { align-items: center; margin: -2px 0 16px; }
.bud-acts-sp { flex: 1 1 auto; }
.bud-month { display: inline-flex; align-items: center; gap: 9px; }
.bud-month-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.bud-month-l svg { width: 15px; height: 15px; }
.bud-month select { height: 34px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card-bg);
color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
appearance: none; -webkit-appearance: none; 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='%2364748b' stroke-width='2.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 9px center; }
.bud-month select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 560px) { .bud-acts { flex-wrap: wrap; } .bud-month { width: 100%; } .bud-month select { flex: 1; } .bud-acts-sp { display: none; } }
/* Kiểm soát nội bộ */
.set-sub { margin: -2px 0 16px; }
.set-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 16px; cursor: pointer;
border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elev); transition: border-color .15s, background .15s; }
.set-toggle:hover { border-color: var(--border-strong); }
.set-toggle input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.set-toggle-tx { display: flex; flex-direction: column; gap: 2px; }
.set-toggle-tx b { color: var(--text-strong); font-size: 14px; }
.set-toggle-tx span { color: var(--text-muted); font-size: 12.5px; }
.set-form .set-hint { font-weight: 400; color: var(--text-muted); }
.set-actbar { margin-top: 16px; }
@media (max-width: 640px) { .set-form { grid-template-columns: 1fr; } }
/* ---- Cấu hình Email (SMTP) ---- */
.set-mail-grid { align-items: start; }
.mc-status { border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; background: var(--bg-elev); border: 1px solid var(--border); font-size: 13.5px; }
.mc-status.is-ok { background: rgba(22, 163, 74, .07); border-color: rgba(22, 163, 74, .30); }
.mc-status.is-warn { background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .30); }
.mc-st-row { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.mc-st-row svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.mc-status.is-ok .mc-st-row svg { color: var(--pos); }
.mc-status.is-warn .mc-st-row svg { color: #d97706; }
.mc-adv { margin-top: 12px; }
.mc-adv summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 4px 0; user-select: none; }
.mc-adv summary:hover { color: var(--accent); }
.mc-actbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mc-test { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mc-test input { width: 210px; max-width: 46vw; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 13.5px; }
.mc-test input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) { .mc-actbar { flex-direction: column; align-items: stretch; } .mc-test { margin-left: 0; } .mc-test input { flex: 1; max-width: none; } }
/* Hướng dẫn */
.mc-guide .mc-steps { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 11px; font-size: 13.8px; line-height: 1.55; }
.mc-guide .mc-steps li { padding-left: 4px; }
.mc-guide .mc-steps a { color: var(--accent); font-weight: 600; text-decoration: none; word-break: break-word; }
.mc-guide .mc-steps a:hover { text-decoration: underline; }
.mc-guide code { background: var(--code-bg, rgba(99, 102, 241, .10)); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 12.5px; letter-spacing: 1px; }
.mc-note { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mc-tips { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.mc-tip { display: flex; align-items: flex-start; gap: 9px; font-size: 12.8px; color: var(--text-muted); line-height: 1.5; background: var(--bg-elev); border: 1px dashed var(--border); border-radius: 10px; padding: 9px 11px; }
.mc-tip svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.mc-tip b { color: var(--text); }
/* Tùy chỉnh giao diện email */
.mc-custom { margin-top: 4px; padding: 13px 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-elev); }
.mc-custom-hd { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }
.mc-custom-hd svg { width: 15px; height: 15px; }
.mc-color { display: flex; align-items: center; gap: 8px; }
.mc-color input[type=color] { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev); cursor: pointer; }
.mc-color input[type=text] { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 13.5px; text-transform: lowercase; }
/* Khung xem trước email */
.mc-preview-card .card-title { margin-bottom: 4px; }
.mc-pv-toggle { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.mc-pv-toggle button { border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.mc-pv-toggle button.active { background: var(--accent); color: #fff; }
.mc-frame-wrap { margin-top: 4px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #eef1f5; }
#mcFrame { display: block; width: 100%; height: 560px; border: 0; background: #eef1f5; }
/* Hướng dẫn 2 cột khi rộng */
.mc-guide-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.mc-guide-cols .mc-tips { margin-top: 2px; }
@media (max-width: 860px) { .mc-guide-cols { grid-template-columns: 1fr; gap: 16px; } }
/* Cụm nút thao tác từng dòng phiếu — nút icon chuẩn (ô 34px, icon 16px, hover tô nền) */
.tx-acts { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
/* Bảng Danh sách phiếu: header cố định + chữ đậm + sort */
.tx-scroll { max-height: 62vh; overflow-y: auto; }
table.tbl.tx-tbl thead th { z-index: 3; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-strong); white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(2, 6, 23, .28); }
[data-theme="dark"] table.tbl.tx-tbl thead th { box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .55); }
.tx-tbl th:first-child, .tx-tbl td:first-child { width: 40px; text-align: center; }
.tx-tbl tbody tr:hover { background: var(--hover); }
.tx-tbl th, .tx-tbl td { padding-top: 11px; padding-bottom: 11px; }
#txPager .tx-count-line { padding: 12px 18px 2px; }
.icon-act { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-muted);
cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.icon-act svg { width: 16px; height: 16px; display: block; }
.icon-act:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.icon-act:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.icon-act.act-primary { color: var(--accent); }
.icon-act.act-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft-2); }
.icon-act.act-danger:hover { color: #dc2626; background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .3); }
@media (prefers-reduced-motion: reduce) { .icon-act { transition: none; } }
/* Icon dòng số dư tài khoản (Nhập phiếu) */
#entryBalances .bal-ic { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: -3px; }
#entryBalances .bal-ic svg { width: 15px; height: 15px; }
#entryBalances .is-cash { color: #16a34a; }
#entryBalances .is-bank { color: #2563eb; }
[data-theme="dark"] #entryBalances .is-cash { color: #4ade80; }
[data-theme="dark"] #entryBalances .is-bank { color: #60a5fa; }
/* Danh sách số dư tài khoản (đẹp) */
.bal-list { display: flex; flex-direction: column; gap: 8px; }
.bal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); transition: border-color .15s, transform .15s; }
.bal-row:hover { border-color: var(--border-strong); transform: translateX(2px); }
.bal-left { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.bal-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.bal-ico svg { width: 18px; height: 18px; }
.bal-ico.is-cash { background: rgba(22, 163, 74, .12); color: #16a34a; }
.bal-ico.is-bank { background: rgba(37, 99, 235, .12); color: #2563eb; }
.bal-ico.is-total { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .bal-ico.is-cash { color: #4ade80; } [data-theme="dark"] .bal-ico.is-bank { color: #60a5fa; }
.bal-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.bal-nm b { color: var(--text-strong); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.bal-sub { font-size: 11.5px; color: var(--text-muted); }
.bal-warn { color: #d97706; font-weight: 700; }
.bal-amt { font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.bal-amt.neg { color: var(--neg); }
.bal-total { background: var(--accent-soft); border: 1.5px dashed var(--accent); }
.bal-total:hover { transform: none; border-color: var(--accent); }
.bal-total .bal-amt, .bal-total .bal-nm b { color: var(--accent); }
.bal-total .bal-nm b { text-transform: uppercase; font-weight: 800; letter-spacing: .3px; }
.bal-total .bal-amt { font-weight: 800; }
[data-theme="dark"] .bal-warn { color: #fbbf24; }
/* --------------------------------- Card ---------------------------------- */
.card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card.pad-lg { padding: 24px; }
.card-title { font-weight: 700; font-size: 15px; margin: 0 0 16px; display: flex;
align-items: center; justify-content: space-between; gap: 10px; color: var(--text-strong); }
.mini-link { border: none; background: none; color: var(--accent); font-size: 11px; font-weight: 600;
cursor: pointer; padding: 0; margin-left: 6px; font-family: inherit; text-decoration: none; }
.mini-link:hover { opacity: .7; text-decoration: none; }
/* Dữ liệu tổng — tab sheet + ô lưới */
/* Trang Dữ liệu tổng — header hiện đại */
.md-head { margin-bottom: 16px; }
.md-head-title { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.md-head-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
background: var(--accent-soft); color: var(--accent); }
.md-head-ic svg { width: 23px; height: 23px; }
.md-head-title h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-strong); letter-spacing: -.4px; }
.md-head-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.md-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); border-radius: 999px;
padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.tab-chip:hover { border-color: var(--border-strong); }
.tab-chip.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft-2); }
.tab-chip.add { border-style: dashed; color: var(--text-muted); }
.tab-chip .tc-ic { display: inline-flex; align-items: center; color: var(--text-muted); }
.tab-chip.active .tc-ic { color: var(--accent); }
.tab-chip .tc-ic svg { width: 15px; height: 15px; display: block; }
/* Toolbar Dữ liệu tổng: nút icon SVG + ô tìm có icon */
.md-toolbar .btn.sm { display: inline-flex; align-items: center; gap: 6px; }
.md-toolbar .btn.sm svg { width: 15px; height: 15px; flex: 0 0 auto; }
.md-toolbar .md-tb-sp { flex: 1; }
.md-icon-btn { padding: 7px 9px !important; }
.md-search { position: relative; display: flex; align-items: center; min-width: 230px; }
.md-search-ic { position: absolute; left: 11px; display: flex; align-items: center; color: var(--text-muted); pointer-events: none; }
.md-search-ic svg { width: 16px; height: 16px; }
.md-search input { width: 100%; padding: 9px 12px 9px 34px !important; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
background: var(--bg); color: var(--text); font-size: 13.5px; }
.md-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
table.tbl .md-in { width: 100%; min-width: 90px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
background: transparent; color: var(--text); font-size: 13.5px; font-family: inherit; }
table.tbl .md-in:hover { border-color: var(--border); }
table.tbl .md-in:focus { outline: none; border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 2px var(--accent-soft); }
table.tbl td.num .md-in { text-align: right; }
/* Dropdown trong ô lưới: mũi tên tùy biến, gọn đẹp, không lỗi giao diện */
select.md-in { appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 7px center; }
select.md-in:hover { border-color: var(--border); }
/* Cột tên fanpage in đậm + cột Link rút gọn "Link" bấm ra URL */
.md-in.md-bold { font-weight: 800; color: var(--text-strong); }
.md-link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px;
color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; background: var(--accent-soft);
transition: background .13s, box-shadow .13s; }
.md-link:hover { background: var(--accent-soft-2); box-shadow: 0 0 0 1px var(--accent) inset; }
.md-link svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Lưới Dữ liệu tổng — khung cuộn + header cố định 2 hàng (tiêu đề + lọc) */
.md-grid-wrap { max-height: calc(100vh - 320px); min-height: 220px; overflow: auto;
border: 1px solid var(--border); border-radius: var(--radius-sm); }
.md-table { border-collapse: separate; border-spacing: 0; }
.md-table thead th { position: sticky; z-index: 3; background: var(--bg-elev); }
.md-table thead tr:first-child th { top: 0; height: 38px; font-weight: 800; color: var(--text-strong);
font-size: 11.5px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.md-table tbody td { border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Kéo-thả đổi vị trí cột */
.md-th-drag { cursor: grab; }
.md-th-drag:active { cursor: grabbing; }
.md-table thead th.md-dragging { opacity: .45; }
.md-table thead th.md-drop-to { box-shadow: inset 3px 0 0 0 var(--accent); background: var(--accent-soft); }
/* ===== Bảng dữ liệu (/doi-tac & Dữ liệu tổng): phối màu neutral-slate dịu mắt, chuyên nghiệp ===== */
/* Tiêu đề: nền slate rất nhạt, chữ slate-600 IN HOA nhẹ -> sạch, không "đen đậm" */
.md-table thead tr:first-child th { background: #f8fafc; color: #475569; font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #e2e8f0; }
[data-theme="dark"] .md-table thead tr:first-child th { background: #1e2637; color: #94a3b8; border-bottom-color: #334155; }
/* Zebra trung tính (bỏ ánh tím) + viền hàng mềm */
table.tbl.md-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, .022); }
[data-theme="dark"] table.tbl.md-table tbody tr:nth-child(even) { background: rgba(148, 163, 184, .05); }
.md-table tbody td { border-bottom-color: #eef1f6; }
[data-theme="dark"] .md-table tbody td { border-bottom-color: rgba(148, 163, 184, .13); }
.md-table tbody tr:hover td { background: #eef2f7; }
[data-theme="dark"] .md-table tbody tr:hover td { background: rgba(148, 163, 184, .09); }
/* Chip "Link": xanh dương điềm đạm (thay tím) — dễ nhận là liên kết, dịu mắt */
.md-link { color: #2563eb; background: rgba(37, 99, 235, .08); font-weight: 600; }
.md-link:hover { background: rgba(37, 99, 235, .14); box-shadow: 0 0 0 1px rgba(37, 99, 235, .32) inset; }
[data-theme="dark"] .md-link { color: #60a5fa; background: rgba(96, 165, 250, .12); }
[data-theme="dark"] .md-link:hover { background: rgba(96, 165, 250, .2); box-shadow: 0 0 0 1px rgba(96, 165, 250, .4) inset; }
/* Icon sắp xếp khi đang bật: slate đậm điềm đạm (không tô tím) */
.md-table thead .bud-sort.sorted { color: #334155; }
[data-theme="dark"] .md-table thead .bud-sort.sorted { color: #cbd5e1; }
/* Cột tên fanpage in đậm: dùng màu chữ mạnh trung tính */
.md-table .md-in.md-bold { color: #0f172a; }
[data-theme="dark"] .md-table .md-in.md-bold { color: #f1f5f9; }
/* Popup nhập/sửa dòng sheet: nhãn có icon + tab chuyển nhóm khi nhiều trường */
/* Popup nhập/sửa dòng — form sạch, chuẩn Swiss (lưới đều, spacing chuẩn, 1 accent) */
#modalBox .field label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
#modalBox .field label svg { width: 14px; height: 14px; color: var(--accent); opacity: .75; flex: 0 0 auto; }
/* Tab dạng segmented (card tab): thanh nền xám bo tròn, tab đang chọn là thẻ trắng nổi */
.mdrf-seg { display: flex; gap: 4px; margin: 4px 0 18px; padding: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; }
.mdrf-segbtn { flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: var(--text-muted); font-family: inherit;
font-weight: 600; font-size: 13px; padding: 9px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s, box-shadow .15s; }
.mdrf-segbtn:hover:not(.active) { color: var(--text-strong); background: var(--hover); }
.mdrf-segbtn.active { background: var(--card-bg); color: var(--text-strong); font-weight: 700; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .mdrf-segbtn.active { background: var(--bg-elev); }
.mdrf-tab:not(.active) { display: none; }
@media (max-width: 560px) { .mdrf-seg { flex-wrap: wrap; } .mdrf-segbtn { flex: 1 0 auto; } }
.mdrf-form .form-grid { gap: 15px 18px; }
.mdrf-form .field input, .mdrf-form .field select, .mdrf-form .field textarea {
background: #f6f8fc; border: 1px solid var(--border); border-radius: 10px; padding: 0 13px; font-size: 14px; }
[data-theme="dark"] .mdrf-form .field input, [data-theme="dark"] .mdrf-form .field select, [data-theme="dark"] .mdrf-form .field textarea {
background: rgba(148, 163, 184, .08); border-color: rgba(148, 163, 184, .16); }
.mdrf-form .field input { height: 44px; }
.mdrf-form .field textarea { padding: 10px 13px; }
.mdrf-form .field input:focus, .mdrf-form .field select:focus, .mdrf-form .field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card-bg); }
[data-theme="dark"] .mdrf-form .field input:focus, [data-theme="dark"] .mdrf-form .field select:focus, [data-theme="dark"] .mdrf-form .field textarea:focus { background: var(--card-bg); }
.mdrf-form .field input:hover:not(:focus), .mdrf-form .field select:hover:not(:focus), .mdrf-form .field textarea:hover:not(:focus) { border-color: var(--accent-soft-2); }
.md-fin-ta { resize: vertical; min-height: 46px; line-height: 1.5; }
.md-rowacts { white-space: nowrap; text-align: right; }
.md-rowacts .md-icon-btn { padding: 4px 7px; }
/* Bảng "full trang": card tràn sát mép + lưới cao + cột đủ rộng (không cắt chữ) */
.md-card { margin: 14px -28px 0; border-radius: 0; padding: 12px 20px; }
/* Trang riêng của sheet ghim: bảng khít ngay dưới header (bỏ khoảng trống trên) */
#content.md-flush { padding-top: 0; }
#content.md-flush .md-card { margin-top: 0; }
.md-card .md-grid-wrap { max-height: calc(100dvh - 236px); }
.md-table td .md-in { min-width: 116px; }
.md-table td .md-in.money { min-width: 128px; }
.md-table td select.md-in { min-width: 116px; }
/* Cột text "chữ nhiều": ô nhập nhiều dòng, xuống dòng + tự co giãn chiều cao */
.md-ta { width: 100%; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word;
line-height: 1.45; min-height: 30px; font: inherit; display: block; }
.md-table td.md-td-long, .md-table th.md-td-long { min-width: 240px; max-width: 420px; vertical-align: middle; }
.md-table td.md-td-long .md-ta { min-width: 0; }
@media (max-width: 860px) { .md-card { margin-left: -14px; margin-right: -14px; padding: 10px 12px; } }
/* Quản lý cột (modal) — thẻ hàng + công tắc gạt */
.col-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.col-head h3 { margin: 0; }
.col-mgr { display: flex; flex-direction: column; gap: 7px; max-height: 50vh; overflow: auto; margin: 12px -2px 0; padding: 2px; }
.col-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border);
border-radius: 12px; background: var(--bg-elev); transition: border-color .15s, opacity .15s; }
.col-row:hover { border-color: var(--border-strong); }
.col-row.off { opacity: .5; }
.col-row .cr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-row .cr-name { font-weight: 600; font-size: 14.5px; color: var(--text-strong); }
.col-row .cr-in { width: 150px; flex: 0 0 auto; }
.col-row .cr-in, .col-add input[type="text"] { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit; }
.col-row .cr-in:focus, .col-add input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.col-row .cr-ico { width: 20px; text-align: center; color: var(--text-muted); flex: 0 0 auto; }
.col-add { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px;
border: 1px dashed var(--border-strong); border-radius: 12px; flex-wrap: wrap; }
.col-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill-src { background: var(--hover); color: var(--text-muted); }
.pill-lock { background: var(--warn-bg); color: var(--warn); }
.pill-extra { background: var(--accent-soft); color: var(--accent); }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .sl { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; cursor: pointer; transition: background .2s; }
.switch .sl::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(16, 24, 40, .35); }
.switch input:checked + .sl { background: var(--accent); }
.switch input:checked + .sl::before { transform: translateX(16px); }
/* ---- Quản lý người dùng: cột Menu · ô tìm · phân quyền menu ---- */
.usr-menu-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.usr-menu-chip.custom { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
/* Thanh lọc segmented (thay 4 thẻ KPI nhiều màu) */
.usr-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 13px; margin-bottom: 18px; flex-wrap: wrap; }
/* Header thẻ danh sách: tiêu đề + thanh lọc + ô tìm trên cùng 1 hàng */
.usr-list-head { flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.usr-list-head .usr-tabs { margin-bottom: 0; }
.usr-list-head .usr-search-wrap { margin-left: auto; }
@media (max-width: 900px) { .usr-list-head .usr-search-wrap { margin-left: 0; width: 100%; } .usr-list-head .usr-search { width: 100%; } }
.usr-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 10px; border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .14s, color .14s; }
.usr-tab:hover { color: var(--text); background: var(--hover); }
.usr-tab.active { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #7c3aed)); color: #fff;
box-shadow: 0 6px 16px -7px color-mix(in srgb, var(--accent) 75%, transparent); }
.usr-tab-n { min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.usr-tab.active .usr-tab-n { background: rgba(255, 255, 255, .26); color: #fff; }
.usr-tab-n.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
/* Nút thao tác: trung tính khi nghỉ, chỉ hiện màu ngữ nghĩa khi hover (êm mắt) */
.usr-tbl .tx-acts .icon-act { color: var(--text-muted); border-color: transparent; }
.usr-tbl .tx-acts .icon-act:hover { color: var(--text); background: var(--hover); border-color: var(--border); }
.usr-tbl .tx-acts .icon-act.act-primary:hover { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.usr-tbl .tx-acts .icon-act.act-danger:hover { color: var(--neg); background: color-mix(in srgb, var(--neg) 10%, transparent); border-color: transparent; }
.usr-tbl .tx-acts .icon-act.act-warn:hover { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: transparent; }
.usr-tbl .tx-acts .icon-act.act-ok:hover { color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, transparent); border-color: transparent; }
/* Thẻ "Vai trò & quyền" thu gọn được */
.usr-roles-head { cursor: pointer; margin-bottom: 0; user-select: none; }
.usr-roles-head .urh-r { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.urh-caret { display: inline-flex; color: var(--text-muted); transition: transform .18s; }
.urh-caret.open { transform: rotate(180deg); }
.urh-caret svg { width: 18px; height: 18px; }
.usr-search-wrap { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
.usr-search-ic { position: absolute; left: 12px; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.usr-search-ic svg { width: 15px; height: 15px; }
.usr-search { height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev);
padding: 0 14px 0 34px; font-size: 13px; color: var(--text); min-width: 230px; box-sizing: border-box; }
.usr-search::placeholder { color: var(--text-muted); }
.usr-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card-bg); }
.rr-menu-btn { margin-left: auto; align-self: flex-start; border-radius: 999px; }
.rr-menu-note { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.um-inherit { display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin: 2px 0 12px; border: 1px solid var(--border);
border-radius: 12px; background: var(--bg-elev); font-size: 13px; font-weight: 600; cursor: pointer; }
.um-inherit input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.um-list.is-inherit { opacity: .5; pointer-events: none; }
@media (max-width: 560px) { .usr-search-wrap { width: 100%; margin-left: 0; } .usr-search { min-width: 0; width: 100%; } }
.usr-tbl .tx-acts { flex-wrap: nowrap; gap: 2px; justify-content: flex-end; }
.usr-tbl td:last-child { width: 1%; }
.usr-tbl .tx-acts .icon-act { width: 30px; height: 30px; }
.usr-tbl .tx-acts .icon-act svg { width: 15px; height: 15px; }
.icon-act.act-warn { color: var(--warn); } .icon-act.act-warn:hover { background: color-mix(in srgb, var(--warn) 15%, transparent); border-color: transparent; }
.icon-act.act-ok { color: var(--pos); } .icon-act.act-ok:hover { background: color-mix(in srgb, var(--pos) 15%, transparent); border-color: transparent; }
tr.usr-suspended { opacity: .62; }
tr.usr-suspended:hover { opacity: 1; }
/* Banner "Xem trước như người dùng" */
#previewBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; gap: 12px;
padding: 11px 18px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #4338ca));
color: #fff; box-shadow: 0 -6px 20px -8px rgba(0,0,0,.4); font-size: 13.5px; }
#previewBar .pv-ic { display: inline-flex; } #previewBar .pv-ic svg { width: 18px; height: 18px; }
#previewBar .pv-txt { flex: 1; min-width: 0; } #previewBar .pv-txt b { font-weight: 800; }
#previewBar .pv-exit { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; cursor: pointer;
background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; }
#previewBar .pv-exit:hover { background: rgba(255,255,255,.3); }
#previewBar .pv-exit svg { width: 15px; height: 15px; }
@media (max-width: 620px) { #previewBar .pv-txt { font-size: 12px; } #previewBar .pv-exit span { display: none; } }
body.previewing .content { padding-bottom: 64px; }
/* Nhật ký người dùng */
.ulog-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.ulog-row { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.ulog-ic { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); }
.ulog-ic svg { width: 17px; height: 17px; }
.ulog-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ulog-time { font-size: 11.5px; color: var(--text-muted); }
/* Nhập dữ liệu — thẻ nguồn */
.imp-target { border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; background: var(--accent-soft); margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.imp-target label { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--text-strong); cursor: pointer; }
.imp-target input[type=radio] { margin: 0; flex: 0 0 auto; accent-color: var(--accent); position: relative; top: 2px; }
.imp-t-note { color: var(--text-muted); font-weight: 400; font-size: 12.5px; }
.imp-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--bg-elev); }
.imp-card + .imp-card { margin-top: 10px; }
.imp-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.imp-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
background: var(--accent-soft); color: var(--accent); font-size: 16px; flex: 0 0 auto; }
.imp-title { font-weight: 700; font-size: 14.5px; color: var(--text-strong); }
.imp-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin-top: 1px; }
.imp-in { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit; }
textarea.imp-in.mono { font-family: ui-monospace, Menlo, Consolas, monospace; resize: vertical; }
.imp-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Popup Dữ liệu tổng (Sao lưu & Tùy chỉnh cột): icon SVG trong ô/nút/pill */
.imp-ic svg { width: 19px; height: 19px; }
.pill svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.imp-card .btn, .col-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.imp-card .btn svg, .col-foot .btn svg, .md-icon-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.col-row .btn, .col-add .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.col-row .btn svg, .col-add .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.cr-ico svg { width: 16px; height: 16px; }
.cr-ico { display: inline-flex; align-items: center; justify-content: center; }
.imp-file { width: 100%; font-size: 13.5px; color: var(--text-muted); }
.imp-file::file-selector-button { padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
background: var(--bg); color: var(--text); font-weight: 600; cursor: pointer; margin-right: 10px; font-family: inherit; font-size: 13.5px; }
.imp-file::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
/* Popup loading giữa màn hình khi đang xử lý */
.busy-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
background: rgba(10, 14, 26, .5); backdrop-filter: blur(3px); animation: nsIn .12s ease; }
.busy-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg);
padding: 28px 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 240px; max-width: 82vw; text-align: center; }
.busy-msg { font-weight: 600; font-size: 15px; color: var(--text-strong); line-height: 1.45; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--accent-soft-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.busy-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; }
.busy-ic.ok { background: var(--ok-bg); color: var(--pos); }
.busy-ic.err { background: var(--crit-bg); color: var(--neg); }
/* Bảng "Tổng quỹ theo người" (FB MCN) — thẻ nhấn tông teal/emerald hiện đại */
.fund-card { background: var(--card-bg); background-image: var(--fund-grad); border-color: var(--fund-tint-2); }
.fund-card .card-title { color: var(--text-strong); }
.fund-card table.tbl thead th { background: transparent; color: var(--fund); border-bottom-color: var(--fund-tint-2); }
.fund-card table.tbl tbody tr:nth-child(even) { background: transparent; }
.fund-card table.tbl tbody tr:hover { background: var(--fund-tint); }
.fund-card table.tbl td, .fund-card table.tbl th { border-bottom-color: var(--fund-tint); }
.fund-card table.tbl tfoot td { background: var(--fund-tint); border-top-color: var(--fund); font-weight: 800; }
/* Co bảng vừa khít thẻ — không kéo ngang, không trống thừa */
.fund-card { align-self: start; } /* hug nội dung, bỏ khoảng trống dọc */
.fund-card .table-scroll { overflow-x: hidden; } /* tắt rê chuột kéo qua lại */
.fund-card table.tbl th, .fund-card table.tbl td { padding: 10px 9px; font-size: 13.5px; }
.fund-card table.tbl thead th { white-space: normal; line-height: 1.2; vertical-align: bottom; } /* tiêu đề xuống dòng -> cột hẹp */
/* ===== Làm đẹp bảng "Tổng quỹ theo người" (viền liền mạch, phủ full card) ===== */
.fund-card .table-scroll { width: 100%; }
.fund-card table.tbl { width: 100%; border-collapse: collapse; table-layout: auto; }
.fund-card table.tbl thead th { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; font-weight: 700; padding: 8px 12px; vertical-align: middle; opacity: .9; }
.fund-card table.tbl tbody td, .fund-card table.tbl tfoot td { padding: 12px 12px; font-size: 13.5px; }
.fund-card table.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fund-card table.tbl tbody td:nth-child(2) { font-weight: 700; color: var(--text-strong); }
.fund-card table.tbl tbody td:last-child { font-weight: 700; }
.fund-card table.tbl tbody tr { transition: background .12s; }
/* Kẻ ngang nét đứt NHẠT & ĐỀU cho toàn bảng (header + mọi hàng + dòng tổng) */
.fund-card table.tbl thead th { border-bottom: 1.5px dashed var(--fund-tint-2); }
.fund-card table.tbl tbody td { border-bottom: 1.5px dashed var(--fund-tint-2); }
.fund-card table.tbl tbody tr:hover { background: var(--fund-tint); }
.fund-card table.tbl tfoot td { font-size: 14px; font-weight: 800; border-top: 1.5px dashed var(--fund-tint-2); background: var(--fund-tint); }
.fund-card table.tbl .bal { color: var(--fund); }
.fund-card table.tbl td.num, .fund-card table.tbl tfoot td.num { white-space: nowrap; } /* số liền 1 dòng */
.fund-card table.tbl th:first-child, .fund-card table.tbl td:first-child { width: 1%; } /* STT bám nội dung */
/* Bảng lấp ĐẦY trong card (chạm sát viền), chỉ chừa lề chữ — như sổ bút toán */
.card.fund-card { padding-left: 0; padding-right: 0; padding-bottom: 0; overflow: hidden; }
.fund-card .table-scroll { margin-bottom: 0; }
.fund-card .card-title { padding-left: 18px; padding-right: 18px; }
.fund-card table.tbl th:first-child, .fund-card table.tbl td:first-child { padding-left: 18px; }
.fund-card table.tbl th:last-child, .fund-card table.tbl td:last-child { padding-right: 18px; }
/* ============ ĐỒNG BỘ MỌI TRANG: bảng dữ liệu lấp ĐẦY trong card ============ *
* Áp cho mọi .card.pad-lg có .table-scroll là con trực tiếp (bảng chính của trang).
* Bảng trong modal/không phải card-trang KHÔNG bị ảnh hưởng. Chữ vẫn chừa lề 18px. */
.card.pad-lg:has(> .table-scroll) { padding-left: 0; padding-right: 0; }
.card.pad-lg:has(> .table-scroll) > :not(.table-scroll) { padding-left: 18px; padding-right: 18px; }
.card.pad-lg:has(> .table-scroll) > .table-scroll table.tbl th:first-child,
.card.pad-lg:has(> .table-scroll) > .table-scroll table.tbl td:first-child { padding-left: 18px; }
.card.pad-lg:has(> .table-scroll) > .table-scroll table.tbl th:last-child,
.card.pad-lg:has(> .table-scroll) > .table-scroll table.tbl td:last-child { padding-right: 18px; }
/* Hàng trên FB MCN: thẻ quỹ rộng hơn (nhiều dữ liệu) — form hẹp lại */
.fb-top { grid-template-columns: 1.95fr 1fr; }
@media (max-width: 1100px) { .fb-top { grid-template-columns: 1fr; } }
/* =============== Trang "Thu chi FB MCN" — bố cục & màu kế toán =============== */
.fb-kpis { margin-bottom: 18px; }
/* KPI theo quy ước kế toán: Thu = xanh lá, Chi = đỏ, Quỹ = teal, Quy mô = accent */
.kpi-card.kpi-pos { background: linear-gradient(180deg, var(--ok-bg), transparent 70%); }
.kpi-card.kpi-neg { background: linear-gradient(180deg, var(--crit-bg), transparent 70%); }
.kpi-card.kpi-fund { background: linear-gradient(180deg, var(--fund-tint-2), transparent 70%); }
.kpi-card.kpi-pos .kpi-ic { background: var(--ok-bg); color: var(--pos); }
.kpi-card.kpi-neg .kpi-ic { background: var(--crit-bg); color: var(--neg); }
.kpi-card.kpi-fund .kpi-ic { background: var(--fund-tint-2); color: var(--fund); }
.kpi-card.kpi-neutral .kpi-ic{ background: var(--accent-soft-2); color: var(--accent); }
.kpi-card.kpi-bal { background: linear-gradient(180deg, var(--accent-soft), transparent 70%); }
.kpi-card.kpi-bal .kpi-ic { background: var(--accent-soft-2); color: var(--accent); }
.kpi-card .kpi-unit { font-size: 14px; font-weight: 600; color: var(--text-muted); }
/* Số dư / tồn quỹ dùng màu tím (accent) — kể cả trong thẻ quỹ tông teal */
.bal { color: var(--accent); }
.fund-card table.tbl td.bal, .fund-card table.tbl td b.bal { color: var(--accent); }
/* Nút chip nhấn tím nhạt (Chuyển người / Thêm chi nhánh) */
.btn.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.btn.accent:hover { background: var(--accent-soft-2); border-color: var(--accent); }
/* Nhãn Thu/Chi trong đầu bảng nhập hàng loạt */
.fb-bulk-head .lbl-in { color: var(--pos); }
.fb-bulk-head .lbl-out { color: var(--neg); }
/* Bảng sổ bút toán — lề 2 bên BẰNG các thẻ ở trên (thẳng hàng), header dính + cao lấp màn */
/* Phân quyền chi nhánh FB MCN */
.fba-list { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.fba-dept-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin: 8px 2px -2px; }
.fba-dept-h:first-child { margin-top: 0; }
.fba-dept-h svg { width: 15px; height: 15px; }
.fba-branch { border: 1px solid var(--border); border-radius: 13px; padding: 13px 14px; background: var(--bg-elev); }
.fba-brh { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.fba-brh b { font-size: 14.5px; color: var(--text-strong); }
.fba-bric { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.fba-bric svg { width: 16px; height: 16px; }
.fba-cnt { margin-left: auto; }
.fba-users { display: flex; flex-wrap: wrap; gap: 8px; }
.fba-user { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--card-bg); transition: border-color .14s, background .14s; }
.fba-user:hover { border-color: var(--border-strong); }
.fba-user.on { border-color: var(--accent); background: var(--accent-soft); }
.fba-user input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.fba-uinfo { display: inline-flex; align-items: center; gap: 7px; }
.fba-uinfo b { font-size: 13px; font-weight: 700; }
/* Mã Apps Script */
.gas-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.gas-code { max-height: 46vh; overflow: auto; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre; tab-size: 2; }
/* Nhập thu/chi từ Sheet/File */
.fbimp-src { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.fbimp-ta { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; resize: vertical; }
.fbimp-ta:focus { outline: none; border-color: var(--accent); }
.fbimp-sum { font-size: 13px; margin: 12px 0 8px; color: var(--text-muted); }
.fbimp-preview { margin-top: 4px; }
.fbimp-tbl-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.fbimp-tbl { width: 100%; font-size: 12.5px; }
.fbimp-tbl thead th { position: sticky; top: 0; background: var(--bg-elev); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); font-weight: 700; box-shadow: inset 0 -1px 0 var(--border); }
.fbimp-tbl tbody tr.bad td { background: rgba(220, 38, 38, .07); }
.fbimp-tbl td, .fbimp-tbl th { padding: 6px 10px; }
.fb-full { margin-left: 0; margin-right: 0; }
/* Bảng lấp ĐẦY bên trong card (chạm sát viền card); chỉ chừa lề cho chữ */
.card.fb-full { padding-left: 0; padding-right: 0; }
.fb-full .card-title, .fb-full .toolbar, .fb-full .fb-pager { padding-left: 18px; padding-right: 18px; }
.fb-full table.tbl th:first-child, .fb-full table.tbl td:first-child { padding-left: 18px; }
.fb-full table.tbl th:last-child, .fb-full table.tbl td:last-child { padding-right: 18px; }
.fb-full .table-scroll { overflow: auto; }
.fb-full table.tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-elev); box-shadow: inset 0 -1px 0 var(--border); }
.fb-full table.tbl tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--bg-elev); box-shadow: inset 0 1px 0 var(--border-strong); }
.fb-pager { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* Sổ bút toán: mã & mục cố định dạng chip, số thu/chi đậm màu, dấu — nhạt */
.fb-ledger td.pos, .fb-ledger td.neg { font-weight: 600; }
.fb-ledger .dash { color: var(--border-strong); font-weight: 400; }
/* Hàng TỔNG (theo lọc): nền nhấn, viền nét đứt, chữ in hoa đậm */
.fb-full table.tbl.fb-ledger tfoot td { background: rgba(99, 102, 241, .12); border-top: 1px dashed var(--accent); box-shadow: none; font-weight: 800; padding-top: 13px; padding-bottom: 13px; }
[data-theme="dark"] .fb-full table.tbl.fb-ledger tfoot td { background: rgba(99, 102, 241, .22); border-top-color: #818cf8; }
.fb-ledger tfoot .fb-total-lbl { text-transform: uppercase; letter-spacing: .5px; font-weight: 800; color: var(--accent); }
.fb-ledger tfoot td.pos { color: var(--pos); }
.fb-ledger tfoot td.neg { color: var(--neg); }
.code-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
letter-spacing: .02em; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.cat-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
background: var(--fund-tint-2); color: var(--fund); white-space: nowrap; }
/* ---- Nhập nhanh nhiều dòng trong bảng Sổ thu chi (mặc định ẩn) ---- */
.tc-quickbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 -1px;
padding: 10px 16px; border: 1px solid var(--border); border-bottom: none;
border-radius: 12px 12px 0 0; background: var(--bg-elev); }
.tc-quickbar .tc-qb-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.tc-quickbar .tc-qb-title svg { width: 15px; height: 15px; color: var(--accent); }
.tc-quickbar .tc-qb-title b { font-weight: 700; color: var(--text-strong); }
/* hàng nhập: nền trung tính sạch, chỉ 1 vạch accent bên trái để đánh dấu */
.fb-ledger tbody tr.tc-quick > td { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 6px 8px; vertical-align: middle; }
.fb-ledger tbody tr.tc-quick > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.fb-ledger tbody tr.tc-quick:first-child > td { border-top: 1px solid var(--border); }
.tc-q-plus { color: var(--accent); font-weight: 700; text-align: center; opacity: .85; }
.tc-q-auto { font-size: 10.5px; font-style: italic; color: var(--text-muted); }
.tc-qin { width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit; font-size: 13px; line-height: 1.2;
border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text);
transition: border-color .12s, box-shadow .12s, background .12s; }
.tc-qin::placeholder { color: var(--text-muted); opacity: .75; }
.tc-qin:hover:not(:focus) { border-color: var(--border-strong); }
.tc-qin:focus { outline: none; border-color: var(--accent); background: var(--card-bg); box-shadow: 0 0 0 3px var(--accent-soft); }
.tc-qin.right { text-align: right; font-variant-numeric: tabular-nums; }
.fb-ledger tbody tr.tc-quick .nice-select { min-width: 116px; width: 100%; }
.fb-ledger tbody tr.tc-quick .nice-select .nice-select-btn { background: var(--bg-elev); border-color: var(--border); }
.fb-ledger tbody tr.tc-quick .icon-act.act-danger { color: var(--neg); }
.fb-ledger tbody tr.tc-quick .icon-act.act-danger:hover { background: color-mix(in srgb, var(--neg) 14%, transparent); }
/* ---- Cột văn bản dài (Nội dung / Ghi chú): xuống hàng, dài quá thì cắt "…" ---- */
.fb-ledger td.tc-c-text { max-width: 300px; vertical-align: top; }
.fb-ledger td.tc-c-note { max-width: 240px; color: var(--text-muted); }
.fb-ledger td.tc-c-note .tc-clamp { font-size: 12.5px; }
.tc-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; word-break: break-word;
line-height: 1.42; max-height: 2.84em; }
@media (max-width: 720px) { .fb-ledger td.tc-c-text { max-width: 180px; } .fb-ledger td.tc-c-note { max-width: 150px; } }
/* ---- Tổng quan Sổ thu chi: 2 card cạnh nhau (trái: chỉ số · phải: bảng quỹ) ---- */
.tc-overview { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: stretch; margin-bottom: 18px; }
.tc-overview > .card { margin: 0; height: 100%; box-sizing: border-box; }
.tc-sum-card { display: flex; flex-direction: column; }
.tc-fund-card { display: flex; flex-direction: column; }
.tc-fund-card .table-scroll { flex: 1; }
@media (max-width: 1040px) { .tc-overview { grid-template-columns: 1fr; } }
.tc-sum-card .card-title { flex: 0 0 auto; }
/* Tiêu đề 2 card tổng quan: in hoa */
.tc-sum-card .card-title .ct-l, .tc-fund-card .card-title .ct-l { text-transform: uppercase; letter-spacing: .02em; }
/* Hero gradient — Tổng tồn quỹ nổi bật, hiện đại */
.tc-hero2 { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 18px 16px; flex: 0 0 auto; color: #fff;
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #4338ca) 100%);
box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--accent) 65%, transparent); }
.tc-hero2--neg { background: linear-gradient(135deg, var(--neg) 0%, #b91c1c 100%);
box-shadow: 0 12px 26px -14px rgba(239, 68, 68, .5); }
.tc-hero2-glow { position: absolute; right: -34px; top: -44px; width: 150px; height: 150px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%); pointer-events: none; }
.tc-hero2-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.tc-hero2-label svg { width: 15px; height: 15px; }
.tc-hero2-value { font-size: clamp(23px, 2.5vw, 29px); font-weight: 800; letter-spacing: -.02em; margin-top: 9px;
line-height: 1.06; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.tc-hero2-sub { font-size: 11.5px; color: rgba(255, 255, 255, .74); margin-top: 8px; }
/* 3 chỉ số: hàng mềm, phủ đều phần còn lại, hover nổi nhẹ */
.tc-sum-grid { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-evenly; gap: 8px; padding-top: 14px; }
.tc-sum-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 13px; transition: background .13s; }
.tc-sum-item:hover { background: var(--bg-elev); }
.tc-si-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; }
.tc-si-ic svg { width: 19px; height: 19px; }
.tc-si-ic.pos-bg { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.tc-si-ic.neg-bg { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.tc-si-ic.accent-bg { background: var(--accent-soft); color: var(--accent); }
.tc-si-txt { min-width: 0; }
.tc-si-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.tc-si-val { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 1px; }
.tc-si-unit { font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* ---- Header + bộ lọc Sổ bút toán: gộp 1 hàng gọn, chip lọc hiện đại ---- */
.tc-ledger-head { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; margin-bottom: 15px; padding: 0 18px; }
.tc-ledger-head .ct-l { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--text-strong); }
.tc-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* 3 nút chip màu: Thêm nhanh (accent) · Nhập (xanh dương) · Xuất (xanh lá) */
.tc-tb-actions .btn.tc-cta { height: 38px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; transition: background .13s, box-shadow .13s; }
.tc-tb-actions .btn.tc-cta-add { background: var(--accent-soft); color: var(--accent); }
.tc-tb-actions .btn.tc-cta-add:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: transparent; }
.tc-tb-actions .btn.tc-cta-add.is-on { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px var(--accent); }
.tc-tb-actions .btn.tc-cta-imp { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.tc-tb-actions .btn.tc-cta-imp:hover { background: color-mix(in srgb, var(--info) 24%, transparent); border-color: transparent; }
.tc-tb-actions .btn.tc-cta-exp { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.tc-tb-actions .btn.tc-cta-exp:hover { background: color-mix(in srgb, var(--pos) 24%, transparent); border-color: transparent; }
.tc-tb-actions .btn.tc-cta svg { color: inherit; }
/* chip lọc: bo tròn pill, nền accent nhẹ (hiện đại, không rối mắt) */
.tc-filters .nice-select .nice-select-btn { height: 38px; border-radius: 999px; background: var(--accent-soft);
border: 1px solid transparent; color: var(--accent); padding: 0 14px; font-size: 13px; font-weight: 600; }
.tc-filters .nice-select .nice-select-btn:hover { border-color: var(--accent); }
.tc-filters .nice-select .nice-select-btn svg { color: var(--accent); }
/* ô tìm: pill trung tính, có icon kính lúp */
.tc-search-wrap { position: relative; display: inline-flex; align-items: center; }
.tc-search-ic { position: absolute; left: 13px; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.tc-search-ic svg { width: 15px; height: 15px; }
.tc-search { height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev);
padding: 0 14px 0 35px; font-size: 13px; color: var(--text); min-width: 220px; box-sizing: border-box; }
.tc-search::placeholder { color: var(--text-muted); }
.tc-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card-bg); }
@media (max-width: 780px) {
.tc-tb-actions { margin-left: 0; }
.tc-filters { flex: 1 1 100%; }
.tc-search-wrap, .tc-search { flex: 1; min-width: 0; }
}
/* ---- Header cột Sổ bút toán: nền tint hiện đại + chữ accent (sticky) ---- */
.fb-full table.tbl.tc-ledger thead th { background: var(--accent-soft); color: var(--accent);
text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 800;
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, transparent); }
/* ---- Header cột bảng Tổng quỹ: nền xanh nhạt đồng bộ tông card ---- */
.tc-fund-card table.tbl thead th { background: color-mix(in srgb, var(--fund) 15%, var(--card-bg)); color: var(--fund);
opacity: 1; border-bottom: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fund) 30%, transparent); }
/* ---- Nhập hàng loạt: header đợt + bảng dòng ---- */
.lbl-note { font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.fb-batch-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.fb-batch-head .field select, .fb-batch-head .nice-select { width: 100%; }
@media (max-width: 620px) { .fb-batch-head { grid-template-columns: 1fr; } }
/* overflow visible để popup dropdown không bị khung cắt */
.fb-bulk { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); }
.fb-bulk-head, .fb-brow { display: grid; grid-template-columns: 1.15fr 2.2fr 1fr 1fr 38px; gap: 10px; align-items: center; }
.fb-bulk-head { padding: 11px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.fb-bulk-head .r { text-align: right; }
.fb-brow { padding: 8px 14px; border-bottom: 1px solid var(--border); transition: background .12s; }
.fb-brow:last-child { border-bottom: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.fb-brow:hover { background: var(--hover); }
.fb-brow input, .fb-brow select { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-xs);
background: var(--card-bg); color: var(--text); font-size: 13.5px; font-family: inherit; padding: 0 11px; transition: border-color .15s, box-shadow .15s; }
/* dropdown tuỳ biến trong dòng: khớp chiều cao 38px */
.fb-brow .nice-select { width: 100%; }
.fb-brow .nice-select .nice-select-btn { min-width: 0; height: 38px; padding: 0 11px; font-size: 13.5px; font-weight: 500; border-radius: var(--radius-xs); }
.fb-brow input.money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fb-brow input:focus, .fb-brow select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.fb-brow input.fbr-thu:focus { border-color: var(--pos); box-shadow: 0 0 0 3px var(--ok-bg); }
.fb-brow input.fbr-chi:focus { border-color: var(--neg); box-shadow: 0 0 0 3px var(--crit-bg); }
.fb-brow-del { width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer; justify-self: center;
background: transparent; color: var(--text-muted); font-size: 14px; line-height: 1; transition: background .15s, color .15s; }
.fb-brow-del:hover { background: var(--crit-bg); color: var(--neg); }
.fb-bulk-add { margin-top: 12px; }
.fb-bulk-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.fb-bulk-sum { font-size: 14px; color: var(--text-muted); }
.fb-bulk-send { min-width: 168px; }
/* Mobile: bảng dòng xếp gọn */
@media (max-width: 760px) {
.fb-bulk-head { display: none; }
.fb-brow { grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px; position: relative; }
.fb-brow .fbr-content { grid-column: 1 / -1; order: -1; }
.fb-brow-del { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; }
}
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; } /* cho phép item co lại, tránh tràn ngang khi có bảng/số dài */
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* tự co số cột theo bề rộng -> số tỷ luôn đủ chỗ, không tràn */
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* ------------------------------- Thẻ KPI --------------------------------- */
.kpi-card { display: flex; flex-direction: column; gap: 7px; }
.kpi-card:hover, .team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kpi-card .kpi-label { color: var(--text-muted); font-size: 13.5px; font-weight: 600;
display: flex; align-items: center; gap: 9px; }
.kpi-card .kpi-value { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong);
font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; } /* số tỷ dài: co + xuống dòng an toàn, không bao giờ tràn card */
.kpi-card .kpi-sub { font-size: 13px; color: var(--text-muted); }
.kpi-ic svg { width: 19px; height: 19px; }
.fund-card .ct-ic { background: var(--fund-tint-2); color: var(--fund); }
.kpi-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
background: var(--accent-soft-2); color: var(--accent); font-size: 16px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 11.5px;
padding: 2px 8px; border-radius: 999px; }
.delta.up { color: var(--pos); background: var(--ok-bg); }
.delta.down { color: var(--neg); background: var(--crit-bg); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--text-muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
/* ------------------------------- Biểu đồ --------------------------------- */
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.sm { height: 260px; }
/* ------------------------------- Bảng ------------------------------------ */
.table-scroll { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 12px 14px; text-align: left;
border-bottom: 1px solid var(--border); white-space: nowrap; }
table.tbl thead th { color: var(--text-muted); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; z-index: 1;
background: var(--bg); border-bottom: 1px solid var(--border-strong); }
table.tbl tbody tr { transition: background .12s ease; }
table.tbl tbody tr:nth-child(even) { background: var(--zebra); }
table.tbl tbody tr:hover { background: var(--accent-soft); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tfoot td { border-top: 1px solid var(--border-strong); background: var(--bg); }
/* khi bảng nằm trong .card.pad-lg thì container đã có viền của card -> bỏ viền kép */
.card .table-scroll { border: none; border-radius: 0; }
/* ------------------------------- Badge ----------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--pos); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.crit { background: var(--crit-bg); color: var(--crit); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.neutral { background: var(--hover); color: var(--text-muted); }
.badge.income { background: var(--ok-bg); color: var(--pos); }
.badge.expense { background: var(--crit-bg); color: var(--crit); }
/* ----------------------------- Cảnh báo (alert) -------------------------- */
.alert-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px;
background: var(--bg-elev); transition: box-shadow .18s, transform .18s; }
.alert-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.alert-row .a-ic { width: 34px; height: 34px; border-radius: 9px; display: grid;
place-items: center; font-size: 16px; flex-shrink: 0; }
.alert-row.warn { border-left: 4px solid var(--warn); }
.alert-row.crit { border-left: 4px solid var(--crit); }
.alert-row.warn .a-ic { background: var(--warn-bg); color: var(--warn); }
.alert-row.crit .a-ic { background: var(--crit-bg); color: var(--crit); }
.alert-row .a-title { font-weight: 700; }
.alert-row .a-desc { color: var(--text-muted); font-size: 14px; }
.alert-row .a-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
/* ----------------------------- Form ------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.field-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-link { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: none; white-space: nowrap; }
.field-link svg { width: 13px; height: 13px; }
.field-link:hover { opacity: .78; }
.field input, .field select, .field textarea {
padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
background: var(--bg); color: var(--text); font-size: 15px; font-family: inherit;
transition: border-color .15s, box-shadow .15s;
}
.field input { height: 40px; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2);
}
.field.full { grid-column: 1 / -1; }
.btn { padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
background: var(--bg-elev); color: var(--text); font-weight: 600; cursor: pointer; font-size: 14.5px;
transition: background .15s, border-color .15s, transform .12s, box-shadow .15s, filter .15s; }
.btn:hover { background: var(--hover); border-color: var(--border-strong); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px var(--accent-soft-2); }
.btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 18px var(--accent-soft-2); }
.btn.sm { padding: 6px 12px; font-size: 13.5px; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.btn:disabled:hover { background: var(--bg-elev); border-color: var(--border); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar select, .toolbar input { padding: 9px 12px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: 14px; }
.toolbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
/* ----------------------------- Cây cơ cấu tổ chức ------------------------ */
.org-company { text-align: center; margin-bottom: 8px; }
.org-company .org-node { display: inline-block; min-width: 240px; }
.org-node { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 18px; box-shadow: var(--shadow); }
.org-node .on-name { font-weight: 700; }
.org-node .on-sub { font-size: 13px; color: var(--text-muted); }
.dept-block { margin-top: 18px; }
.dept-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 16px; border-radius: var(--radius); background: var(--accent-soft);
border: 1px solid var(--border); margin-bottom: 12px; }
.dept-head .dh-name { font-weight: 700; font-size: 15px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.team-card .tc-name { font-weight: 700; margin-bottom: 8px; }
.team-card .tc-row { display: flex; justify-content: space-between; padding: 4px 0;
border-bottom: 1px dashed var(--border); font-size: 14px; }
.team-card .tc-row:last-child { border-bottom: none; }
/* Dòng chỉ số bấm được → tới trang dữ liệu nguồn */
.team-card .tc-link { cursor: pointer; gap: 10px; padding-left: 7px; padding-right: 7px; margin-left: -7px; margin-right: -7px; border-radius: 8px; transition: background .13s; }
.team-card .tc-link .tc-lbl { flex: 1 1 auto; min-width: 0; }
.team-card .tc-link > b { flex: 0 0 auto; white-space: nowrap; }
.team-card .tc-go { flex: 0 0 auto; display: inline-flex; align-items: center; width: 0; overflow: hidden; opacity: 0; color: var(--accent); transition: opacity .14s, width .14s; }
.team-card .tc-go svg { width: 15px; height: 15px; display: block; }
.team-card .tc-link:hover { background: var(--hover); }
.team-card .tc-link:hover .tc-go { opacity: 1; width: 16px; }
.team-card .tc-link:hover .tc-lbl { color: var(--text); }
.team-card .tc-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
/* Trang Cơ cấu tổ chức — thiết kế lại (header + hero công ty + card team) */
.org-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.org-head-title { display: flex; align-items: center; gap: 13px; }
.org-head-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.org-head-ic svg { width: 23px; height: 23px; }
.org-head-title h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--text-strong); }
.org-head-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.org-add { display: inline-flex; align-items: center; gap: 6px; }
.org-add svg { width: 15px; height: 15px; }
.org-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 18px; flex-wrap: wrap;
background: linear-gradient(135deg, var(--accent-soft), transparent 72%); border: 1px solid var(--accent-soft-2); }
.org-hero-ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
background: var(--accent); color: #fff; box-shadow: 0 6px 16px var(--accent-soft-2); }
.org-hero-ic svg { width: 26px; height: 26px; }
.org-hero-main { flex: 1 1 auto; min-width: 0; }
.org-hero-name { font-size: 19px; font-weight: 800; color: var(--text-strong); letter-spacing: -.3px; overflow-wrap: anywhere; }
.org-hero-desc { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.org-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.ohs { display: flex; flex-direction: column; }
.ohs b { font-size: 20px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ohs span { font-size: 10.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.ohs-rev b { color: var(--accent); }
.dept-acts { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.dept-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.dept-acts .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.team-card .tc-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-card .tc-title { min-width: 0; overflow-wrap: anywhere; }
.team-card .tc-acts { display: flex; gap: 3px; flex-shrink: 0; }
.team-card .tc-acts .btn svg { width: 14px; height: 14px; }
/* Bộ icon cho các dòng chỉ số trong card team (ô vuông bo màu theo loại) */
.team-card .tc-lbl { display: inline-flex; align-items: center; gap: 8px; }
.team-card .tc-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.team-card .tc-ico svg { width: 13px; height: 13px; }
.team-card .ic-hc { background: rgba(100, 116, 139, .14); color: #64748b; }
.team-card .ic-rev { background: rgba(37, 99, 235, .13); color: #2563eb; }
.team-card .ic-cost { background: rgba(217, 119, 6, .14); color: #d97706; }
.team-card .ic-profit { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .team-card .ic-hc { color: #94a3b8; }
[data-theme="dark"] .team-card .ic-rev { color: #60a5fa; }
[data-theme="dark"] .team-card .ic-cost { color: #fbbf24; }
@media (max-width: 560px) { .org-hero-stats { gap: 16px; } }
/* progress bar nhỏ cho aging / phân bổ */
.mini-bar { height: 8px; border-radius: 6px; background: var(--hover); overflow: hidden; }
.mini-bar > span { display: block; height: 100%; background: var(--accent); }
/* ------------------------------ Modal / overlay -------------------------- */
.overlay { position: fixed; inset: 0; background: rgba(8, 12, 24, 0.5);
backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 20px;
animation: fadeIn .16s ease; }
.overlay.hidden { display: none; }
.modal { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-lg);
width: 100%; max-width: 600px; padding: 26px 28px; border: 1px solid var(--border);
max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; /* popup dài -> cuộn trong, không tràn mất nút */
animation: modalIn .2s cubic-bezier(.2, .8, .2, 1); }
.modal.modal-wide { max-width: 880px; }
.modal h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--text-strong); }
.modal p.sub { margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
/* màn hình đăng nhập (placeholder cho giai đoạn 2) */
.login-card { max-width: 400px; }
.login-card .logo-lg { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 14px;
background: var(--accent-grad); display: grid; place-items: center;
color: #fff; font-size: 26px; font-weight: 800; box-shadow: 0 10px 24px var(--accent-soft-2); }
.login-card .demo-note { margin-top: 14px; font-size: 13px; color: var(--text-muted);
background: var(--info-bg); padding: 10px 12px; border-radius: var(--radius-sm); }
/* ------------------------------ Toast (thông báo chi tiết) --------------- */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 400; display: flex;
flex-direction: column; gap: 12px; max-width: min(380px, calc(100vw - 32px)); }
.toast { position: relative; display: flex; align-items: flex-start; gap: 12px; overflow: hidden;
background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
box-shadow: var(--shadow-lg); padding: 13px 14px 15px; animation: toastIn .3s cubic-bezier(.2,.8,.2,1); }
.toast.out { animation: toastOut .24s ease forwards; }
@keyframes toastIn { from { transform: translateX(40px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(40px) scale(.96); opacity: 0; } }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); }
/* icon tròn theo loại */
.toast-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
font-size: 16px; font-weight: 800; color: #fff; background: var(--tc); box-shadow: 0 4px 10px var(--tc-soft); }
.toast-body { flex: 1; min-width: 0; }
.toast-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 26px; }
.toast-title { font-weight: 800; font-size: 13.5px; color: var(--text-strong); letter-spacing: -.01em; }
.toast-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.toast-msg { font-size: 13px; color: var(--text); line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.toast-detail { font-size: 12px; color: var(--accent); line-height: 1.5; margin-top: 4px; font-weight: 600; white-space: pre-line; }
.toast-x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border: none; background: transparent;
color: var(--text-muted); font-size: 12px; cursor: pointer; border-radius: 6px; opacity: .55; transition: opacity .15s, background .15s; }
.toast-x:hover { opacity: 1; background: var(--hover); }
/* thanh đếm giờ tự đóng */
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left;
background: var(--tc); opacity: .55; animation: toastBar linear forwards; }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* màu theo loại */
.toast-success { --tc: var(--pos); --tc-soft: rgba(21,163,74,.35); }
.toast-error { --tc: var(--neg); --tc-soft: rgba(225,29,72,.35); }
.toast-warn { --tc: var(--warn); --tc-soft: rgba(217,119,6,.35); }
.toast-info { --tc: var(--accent); --tc-soft: var(--accent-soft-2); }
/* ------------------------------ Tabs ------------------------------------- */
.tabs { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border);
border-radius: 11px; padding: 3px; margin-bottom: 16px; }
.tabs button { border: none; background: transparent; color: var(--text-muted); padding: 8px 18px;
border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .18s, color .18s, box-shadow .18s; }
.tabs button.active { background: var(--card-bg); color: var(--accent); box-shadow: var(--shadow-sm); }
.section-gap { margin-top: 20px; }
.hint { font-size: 13.5px; color: var(--text-muted); }
/* ===== Công nợ (phải thu / phải trả) ===== */
.pg-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.debt-head { margin-bottom: 16px; }
.debt-tabs { border: 1.5px dashed var(--border-strong); box-shadow: 0 2px 7px rgba(2, 6, 23, .07); }
[data-theme="dark"] .debt-tabs { box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
/* Tabs + nút gom chung 1 hàng ngang */
.debt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.debt-toolbar-sp { flex: 1 1 auto; }
.debt-toolbar .debt-tabs { margin-bottom: 0; }
.debt-tabs button { display: inline-flex; align-items: center; gap: 7px; }
.debt-tabs button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.set-kpi.k-crit .set-kpi-ic { background: rgba(220, 38, 38, .12); color: #dc2626; } .set-kpi.k-crit .set-kpi-v { color: #dc2626; }
[data-theme="dark"] .set-kpi.k-crit .set-kpi-ic, [data-theme="dark"] .set-kpi.k-crit .set-kpi-v { color: #f87171; }
/* KPI công nợ: card có màu nền + click để lọc bảng */
.debt-kpis .set-kpi { cursor: pointer; padding-right: 40px; }
.debt-kpis .set-kpi.k-total { background: linear-gradient(180deg, rgba(99, 102, 241, .09), rgba(99, 102, 241, .03)); border-color: rgba(99, 102, 241, .28); }
.debt-kpis .set-kpi.k-cash { background: linear-gradient(180deg, rgba(22, 163, 74, .09), rgba(22, 163, 74, .03)); border-color: rgba(22, 163, 74, .28); }
.debt-kpis .set-kpi.k-crit { background: linear-gradient(180deg, rgba(220, 38, 38, .10), rgba(220, 38, 38, .03)); border-color: rgba(220, 38, 38, .28); }
.debt-kpis .set-kpi.k-count { background: linear-gradient(180deg, rgba(100, 116, 139, .10), rgba(100, 116, 139, .03)); border-color: rgba(100, 116, 139, .26); }
.set-kpi-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); opacity: .55; transition: transform .18s ease, opacity .18s ease; }
.set-kpi-go svg { width: 17px; height: 17px; display: block; }
.debt-kpis .set-kpi:hover .set-kpi-go { transform: translateY(-50%) translateX(3px); opacity: 1; }
.debt-kpis .set-kpi.is-active { box-shadow: 0 0 0 2px var(--accent) inset, 0 10px 24px rgba(2, 6, 23, .10); }
.debt-kpis .set-kpi.k-crit.is-active { box-shadow: 0 0 0 2px #dc2626 inset, 0 10px 24px rgba(220, 38, 38, .14); }
.debt-kpis .set-kpi.k-cash.is-active { box-shadow: 0 0 0 2px #16a34a inset, 0 10px 24px rgba(22, 163, 74, .14); }
.debt-kpis .set-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
/* Aging */
.debt-aging { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ag-cell { border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 14px 12px; background: var(--bg-elev); cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.ag-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2, 6, 23, .08); }
.ag-cell:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ag-ok { background: rgba(22, 163, 74, .05); border-color: rgba(22, 163, 74, .35); }
.ag-info { background: rgba(37, 99, 235, .05); border-color: rgba(37, 99, 235, .35); }
.ag-warn { background: rgba(217, 119, 6, .06); border-color: rgba(217, 119, 6, .38); }
.ag-crit { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .38); }
.ag-ok:hover { border-color: rgba(22, 163, 74, .6); } .ag-info:hover { border-color: rgba(37, 99, 235, .6); }
.ag-warn:hover { border-color: rgba(217, 119, 6, .6); } .ag-crit:hover { border-color: rgba(220, 38, 38, .6); }
.ag-cell.is-active { box-shadow: 0 0 0 2px currentColor inset, 0 8px 20px rgba(2, 6, 23, .08); }
.ag-ok.is-active { color: #16a34a; border-color: #16a34a; } .ag-info.is-active { color: #2563eb; border-color: #2563eb; }
.ag-warn.is-active { color: #d97706; border-color: #d97706; } .ag-crit.is-active { color: #dc2626; border-color: #dc2626; }
.ag-top { display: flex; align-items: center; gap: 7px; }
.ag-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ag-k { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; line-height: 1.3; }
.ag-v { font-size: clamp(14px, 1.2vw, 18px); font-weight: 800; letter-spacing: -.4px; color: var(--text); font-variant-numeric: tabular-nums; margin: 7px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bar { height: 6px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.ag-bar span { display: block; height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.2,.75,.3,1); }
.ag-pct { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; font-weight: 600; }
.ag-ok .ag-dot { background: #16a34a; } .ag-ok .ag-bar span { background: #16a34a; }
.ag-info .ag-dot { background: #2563eb; } .ag-info .ag-bar span { background: #2563eb; }
.ag-warn .ag-dot { background: #d97706; } .ag-warn .ag-bar span { background: #d97706; }
.ag-crit .ag-dot { background: #dc2626; } .ag-crit .ag-bar span { background: #dc2626; }
/* Thanh trạng thái lọc (khi click card) */
.debt-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
margin: 0 0 14px; padding: 9px 12px; border-radius: 11px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); }
.debt-filter-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 600; }
.debt-filter-tag svg { width: 15px; height: 15px; flex: 0 0 auto; }
.debt-filter-tag b { font-weight: 800; }
/* Bảng chi tiết */
.debt-tbl .sm-badge { font-size: 11px; padding: 2px 7px; }
.debt-row-acts { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.debt-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.debt-tbl th:first-child, .debt-tbl td:first-child { width: 40px; text-align: center; }
@media (max-width: 1080px) { .debt-aging { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .debt-aging { grid-template-columns: repeat(2, 1fr); } .pg-head-acts { width: 100%; } .pg-head-acts .btn { flex: 1; justify-content: center; } }
.editable { width: 78px; text-align: right; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--card-bg); color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
transition: border-color .15s, box-shadow .15s; }
.editable:hover:not(:disabled) { border-color: var(--border-strong); }
.editable:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.editable:disabled { background: transparent; border-color: transparent; color: var(--text-muted); padding-left: 2px; padding-right: 2px; cursor: default; }
/* ------------------------------ Responsive ------------------------------- */
/* -------------------- An toàn hiển thị (chống tràn / vỡ khung) ------------ */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
/* Chữ dài (URL/không dấu cách) tự xuống dòng, không tràn khung */
.page-head p, .card-title, .kpi-sub, .a-title, .a-desc, .a-meta,
.on-sub, .hint, .modal p.sub, .brand .brand-name, .team-card .tc-name { overflow-wrap: anywhere; }
/* Cuộn ngang mượt trên iOS/Android cho bảng rộng */
.table-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 1100px) {
.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
.sidebar.open { transform: none; }
.side-collapse { display: none; } /* mobile dùng nút ☰ nổi, không cần nút thu gọn */
.menu-fab { display: grid; position: fixed; top: 12px; left: 12px; z-index: 26; width: 42px; height: 42px;
place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elev);
box-shadow: var(--shadow); font-size: 20px; color: var(--text); cursor: pointer; }
.content { padding-top: 64px; } /* chừa chỗ cho nút ☰ nổi */
.grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
.scrim.hidden { display: none; }
}
/* -------------------- Dropdown đẹp có ô tìm kiếm (nice-select) ----------- */
select.ns-native { display: none !important; } /* ẩn select gốc sau khi "bọc" */
.nice-select { position: relative; display: inline-block; vertical-align: middle; }
.field .nice-select { width: 100%; display: block; }
.nice-select-btn {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; min-width: 150px; padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--bg-elev); color: var(--text); font-size: 14px; font-weight: 500;
cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.nice-select-btn:hover, .nice-select.open .nice-select-btn { border-color: var(--accent); }
.nice-select.open .nice-select-btn { box-shadow: 0 0 0 3px var(--accent-soft); }
.nice-select-btn .ns-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nice-select-btn .ns-caret { color: var(--text-muted); font-size: 11px; transition: transform .2s; }
.nice-select.open .ns-caret { transform: rotate(180deg); }
.nice-select.disabled { opacity: .55; pointer-events: none; }
.nice-select-panel {
position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
width: 100%; max-width: 100%; padding: 6px; /* vừa đúng bề ngang ô -> không tràn/cắt trong popup */
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg); animation: nsIn .14s ease;
}
.nice-select-panel.hidden { display: none; }
.nice-select.drop-up .nice-select-panel { top: auto; bottom: calc(100% + 6px); } /* mở lên trên khi dưới hết chỗ */
@keyframes nsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ns-searchbox { padding: 2px 2px 8px; }
.ns-search {
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text); font-size: 14px;
}
.ns-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ns-list { max-height: 260px; overflow-y: auto; }
.ns-item {
padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
white-space: normal; overflow-wrap: anywhere; /* tên dài tự xuống dòng, không bị cắt */
}
.ns-item:hover { background: var(--hover); }
.ns-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ns-item.disabled { opacity: .5; cursor: default; }
.ns-group { padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.ns-empty { padding: 12px; color: var(--text-muted); font-size: 14px; text-align: center; }
/* ----------------------- Vi tương tác & trợ năng (a11y) ------------------ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible, .nice-select-btn:focus-visible,
.period-switch button:focus-visible, .tabs button:focus-visible { outline-offset: 3px; }
/* Thanh cuộn mảnh, tinh tế */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ------------------------------ Khi In (PDF) ----------------------------- */
@media print {
.sidebar, .header, #scrim, .scrim, .toast-wrap, .menu-toggle,
.btn, .icon-btn, .period-switch, .toolbar, .overlay { display: none !important; }
.app { display: block; }
.content { padding: 0; max-width: 100%; }
body { background: #fff; color: #000; }
.card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
table.tbl th { position: static; }
.chart-wrap { height: 300px; }
}
@media (max-width: 620px) {
/* KPI/aging: ép 2 cột kể cả khi render gắn grid-template inline */
.grid.kpi { grid-template-columns: repeat(2, 1fr) !important; }
.grid.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
.team-grid { grid-template-columns: 1fr; }
.content { padding: 14px; }
.header { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
.header h1 { font-size: 15px; flex: 0 1 auto; }
.header .app-title { flex: 1 1 auto; }
.header .spacer { display: block; flex-basis: 100%; height: 0; min-width: 0; } /* ép ngắt dòng: tiêu đề hàng 1, các nút hàng 2 -> không tràn */
.period-switch button { padding: 6px 12px; }
.icon-btn { width: 38px; height: 38px; }
.page-head h2 { font-size: 20px; }
.card, .card.pad-lg { padding: 16px; }
/* Bảng: gọn hơn để vừa màn hình, vẫn cuộn ngang khi cần */
table.tbl th, table.tbl td { padding: 9px 10px; }
table.tbl { font-size: 13.5px; }
.kpi-card .kpi-value { font-size: 21px; }
/* Thanh công cụ: bộ lọc co giãn 2/hàng, ô tìm kiếm full hàng */
.toolbar { gap: 8px; }
.toolbar .nice-select { flex: 1 1 44%; }
.toolbar .nice-select .nice-select-btn { min-width: 0; }
.toolbar input { flex: 1 1 100%; }
.modal { padding: 20px; }
}
@media (max-width: 480px) {
/* Điện thoại dọc: KPI 1 cột -> số tiền tỷ luôn đủ chỗ, không cắt */
.grid.kpi { grid-template-columns: 1fr !important; }
.kpi-card .kpi-value { font-size: 24px; } /* 1 cột rộng -> phóng to lại cho dễ đọc */
}
@media (max-width: 420px) {
table.tbl th, table.tbl td { padding: 8px 9px; }
.toolbar .nice-select { flex: 1 1 100%; }
}
/* Hộp chọn phạm vi xoá dữ liệu */
.clr-opt { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.clr-head { font-weight: 700; font-size: 15px; color: var(--text-strong); margin-bottom: 4px; }
.btn.clr-danger { background: var(--neg); color: #fff; border-color: var(--neg); }
.btn.clr-danger:hover { filter: brightness(1.06); }
/* ============================ Đăng nhập / Thiết lập ============================ */
.auth-overlay { background: var(--bg); padding: 20px; z-index: 300; }
.auth-card { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; max-width: 900px; min-height: 520px;
background: var(--card-bg); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg);
animation: modalIn .25s cubic-bezier(.2,.8,.2,1); }
/* Nhánh thương hiệu (trái) */
.auth-brand { position: relative; padding: 42px 36px; color: #fff; display: flex; flex-direction: column; overflow: hidden;
background: linear-gradient(150deg, #4f46e5, #7c3aed 55%, #0ea5e9); }
.auth-brand::before { content: ""; position: absolute; left: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.09); }
.auth-brand::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.10); }
.auth-logo { width: 54px; height: 54px; border-radius: 15px; background: rgba(255,255,255,.20); display: grid; place-items: center; font-size: 26px; font-weight: 800; margin-bottom: 20px; position: relative; z-index: 1; }
.auth-brand-name { font-size: 24px; font-weight: 800; letter-spacing: .02em; position: relative; z-index: 1; }
.auth-brand-sub { font-size: 14px; opacity: .92; margin-top: 3px; position: relative; z-index: 1; }
.auth-points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; position: relative; z-index: 1; }
.auth-points li { position: relative; padding-left: 27px; font-size: 13.5px; opacity: .96; line-height: 1.45; }
.auth-points li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.24); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.auth-brand-foot { margin-top: auto; padding-top: 24px; font-size: 12px; opacity: .82; position: relative; z-index: 1; }
/* Form (phải) */
.auth-form { padding: 42px 38px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-head { margin-bottom: 22px; }
.auth-title { margin: 0; font-size: 24px; font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; }
.auth-desc { margin: 6px 0 0; font-size: 13.5px; color: var(--text-muted); }
.auth-form .field { margin-bottom: 14px; }
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none;
background: transparent; cursor: pointer; border-radius: 8px; font-size: 15px; opacity: .5; transition: opacity .15s, background .15s; }
.pw-toggle:hover, .pw-toggle.on { opacity: 1; background: var(--hover); }
.auth-err { color: var(--neg); font-size: 12.5px; font-weight: 600; margin: -2px 0 10px; display: none; }
.auth-err.show { display: block; }
.auth-submit { width: 100%; padding: 12px; font-size: 14.5px; margin-top: 4px; }
.auth-note { margin-top: 18px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; background: var(--info-bg); padding: 10px 12px; border-radius: var(--radius-sm); }
@media (max-width: 720px) {
.auth-card { grid-template-columns: 1fr; max-width: 440px; min-height: 0; }
.auth-brand { padding: 24px 24px 20px; }
.auth-points, .auth-brand-foot { display: none; }
.auth-form { padding: 26px 22px; }
}
/* ===========================================================================
* ĐỐI SOÁT DOANH THU (module công cụ độc lập — doisoat.js)
* ======================================================================== */
.ds-lock { font-size: 11px; opacity: .65; }
.ds-checks { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 2px 2px; }
.ds-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px;
font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.ds-chk input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.ds-chk input:disabled { cursor: not-allowed; }
.ds-page .field input:disabled, .ds-page .field select:disabled {
background: var(--hover); color: var(--text-muted); cursor: not-allowed; opacity: .85; }
/* Panel kết quả */
#dsPanel { position: sticky; top: 14px; }
table.ds-res td { padding: 9px 12px; font-size: 13.5px; }
table.ds-res td:first-child { color: var(--text-muted); }
table.ds-res td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.ds-res td.ds-strong { color: var(--accent); font-weight: 800; }
.ds-alert { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
margin-bottom: 12px; font-weight: 600; }
.ds-alert.err { background: rgba(239, 68, 68, .10); color: #dc2626; border: 1px solid rgba(239, 68, 68, .28); }
.ds-alert.warn { background: rgba(245, 158, 11, .10); color: #b45309; border: 1px solid rgba(245, 158, 11, .28); }
[data-theme="dark"] .ds-alert.err { color: #fca5a5; }
[data-theme="dark"] .ds-alert.warn { color: #fcd34d; }
.ds-pay { margin-top: 14px; border: 1px solid var(--border); border-left: 4px solid var(--accent);
border-radius: 12px; padding: 14px 16px; background: var(--accent-soft); }
.ds-pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ds-pay-row span { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.ds-pay-row b { font-size: 20px; color: var(--accent); font-weight: 800; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.ds-pay-words { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
.ds-pay-words i { color: var(--text); }
.ds-qr { margin-top: 14px; text-align: center; padding: 14px; border: 1px dashed var(--border-strong);
border-radius: 12px; }
.ds-qr img { width: 190px; height: 190px; object-fit: contain; border-radius: 8px; background: #fff; padding: 6px; }
.ds-qr-cap { font-size: 12px; color: var(--text-muted); margin: 4px 0; font-weight: 600; }
@media (max-width: 900px) {
.ds-page .ds-grid { grid-template-columns: 1fr !important; }
#dsPanel { position: static; }
}
.ds-actions { display: flex; gap: 8px; margin-top: 14px; }
.ds-actions .btn { flex: 1; justify-content: center; }
@media (max-width: 560px) { .ds-actions { flex-direction: column; } }
/* Lớp phủ xem trước biên bản (in ra PDF) — không dùng popup */
.ds-pv-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(15, 23, 42, .62);
display: flex; flex-direction: column; backdrop-filter: blur(2px); }
.ds-pv-bar { display: flex; align-items: center; gap: 14px; padding: 11px 18px;
background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.ds-pv-title { font-weight: 700; font-size: 15px; color: var(--text); }
.ds-pv-tip { font-size: 12.5px; color: var(--text-muted); }
.ds-pv-tip b { color: var(--text); font-weight: 600; }
.ds-pv-btns { margin-left: auto; display: flex; gap: 8px; }
.ds-pv-body { flex: 1; overflow: auto; padding: 20px; display: flex; justify-content: center; }
.ds-pv-body iframe { width: 210mm; max-width: 100%; height: 100%; min-height: 100%; border: 0;
background: #fff; box-shadow: 0 10px 44px rgba(0,0,0,.28); border-radius: 4px; }
@media (max-width: 680px) { .ds-pv-tip { display: none; } .ds-pv-body { padding: 8px; } }
/* Nút "Tạo link gửi đối tác" */
.ds-share-btn { width: 100%; margin-top: 8px; justify-content: center; }
/* Hộp thoại Link gửi đối tác */
.ds-share-ov { position: fixed; inset: 0; z-index: 520; background: rgba(15, 23, 42, .55);
display: flex; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(2px); }
.ds-share { width: 100%; max-width: 560px; background: var(--card-bg); border: 1px solid var(--border);
border-radius: 16px; padding: 20px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.ds-share-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700;
font-size: 16px; color: var(--text); margin-bottom: 10px; }
.ds-share-x { border: 0; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer;
width: 30px; height: 30px; border-radius: 8px; }
.ds-share-x:hover { background: var(--hover); color: var(--text); }
.ds-share-note { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.ds-share-note b { color: var(--text); }
.ds-share-row { display: flex; gap: 8px; }
.ds-share-url { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--border-strong);
border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13px; font-family: ui-monospace, monospace; }
.ds-share-acts { display: flex; gap: 8px; margin-top: 12px; }
.ds-share-acts .btn { flex: 1; justify-content: center; text-decoration: none; }
.ds-share-warn { font-size: 12px; color: var(--text-muted); margin: 14px 0 0; }
/* Trang xem biên bản công khai (mở từ link) */
.ds-pub { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--bg); }
.ds-pub-bar { display: flex; align-items: center; gap: 14px; padding: 12px 20px;
background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.10); }
.ds-pub-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--text); }
.ds-pub-logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
border-radius: 7px; background: var(--accent-grad); color: #fff; font-weight: 800; }
.ds-pub-bar .ds-pv-tip { margin-left: 4px; }
.ds-pub-bar .btn { margin-left: auto; }
@media (max-width: 680px) { .ds-pub-bar .ds-pv-tip { display: none; } }
/* ===================== ĐỐI SOÁT — Tabs & Hàng loạt ====================== */
.ds-tabs { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.ds-tab { border: 0; background: transparent; padding: 10px 16px; font: 600 14px inherit; color: var(--text-muted);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.ds-tab:hover { color: var(--text); background: var(--hover); }
.ds-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ds-step + .ds-step { margin-top: 16px; }
.ds-step-h { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 14px; color: var(--text);
margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ds-step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
border-radius: 9px; background: var(--accent-grad); color: #fff; font-size: 13px; font-weight: 800; flex: none;
box-shadow: 0 2px 8px var(--accent-soft-2); }
.ds-paste { width: 100%; min-height: 130px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border-strong);
border-radius: 12px; background: var(--bg); color: var(--text); font: 13px ui-monospace, monospace; line-height: 1.5;
white-space: pre; overflow: auto; }
.ds-paste:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-gset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.ds-map-title { font-weight: 600; font-size: 13.5px; color: var(--text); margin: 6px 0 10px; }
.ds-map-title .hint { font-weight: 400; }
.ds-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.ds-map-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; }
.ds-map-row > label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.ds-req { color: #ef4444; font-weight: 700; }
/* Bước 2: gom 3 nhóm thành panel nhẹ + header có icon vuông chuyên nghiệp
(tên .ds-fgrp riêng — KHÔNG trùng .ds-sub là dòng chữ nhỏ/fanpage trong bảng) */
.ds-fgrp { padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elev); }
.ds-fgrp + .ds-fgrp { margin-top: 12px; }
.ds-fgrp .ds-gset { margin-bottom: 0; }
.ds-fgrp-h { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; font-weight: 700; font-size: 14px; color: var(--text); }
.ds-fgrp-ic { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.ds-fgrp-ic .ds-ic { width: 15px; height: 15px; display: block; }
/* Đồng nhất typography & chiều cao ô trong Bước 2 (thang: header 14/700 · label 13/600 · ô 14/500 · hint 12.5) */
.ds-fgrp .field label, .ds-fgrp .ds-map-row > label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ds-fgrp .field input, .ds-fgrp .field select, .ds-fgrp .field textarea { font-size: 14px; height: 40px; }
.ds-fgrp .nice-select-btn { font-size: 14px; font-weight: 500; height: 40px; }
.ds-fgrp .hint { font-size: 12.5px; font-weight: 400; line-height: 1.55; }
.ds-fgrp-h .hint { font-weight: 400; }
.ds-batch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ds-batch-sum { font-size: 14px; color: var(--text); }
.ds-ok { color: #16a34a; font-weight: 600; }
.ds-bad { color: #ef4444; font-weight: 600; }
/* Dải stat gọn ở kết quả hàng loạt — mỗi thẻ 1 nền màu + count-up */
.ds-bstats { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-bstat { display: flex; flex-direction: column; gap: 1px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-elev); min-width: 76px;
transition: transform .16s ease, box-shadow .16s ease; }
.ds-bstat:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2, 6, 23, .08); }
.ds-bstat b { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ds-bstat span { font-size: 10px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ds-bstat.all { background: rgba(100, 116, 139, .10); border-color: rgba(100, 116, 139, .26); }
.ds-bstat.ok { background: rgba(22, 163, 74, .10); border-color: rgba(22, 163, 74, .28); }
.ds-bstat.bad { background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .28); }
.ds-bstat.sel { background: var(--accent-soft); border-color: var(--accent-soft-2); }
.ds-bstat.ok b { color: #16a34a; } .ds-bstat.bad b { color: #ef4444; } .ds-bstat.sel b { color: var(--accent); }
[data-theme="dark"] .ds-bstat.ok b { color: #4ade80; } [data-theme="dark"] .ds-bstat.bad b { color: #fca5a5; }
[data-theme="dark"] .ds-bstat:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .ds-bstat:hover { transform: none; } }
[data-theme="dark"] .ds-ok { color: #4ade80; } [data-theme="dark"] .ds-bad { color: #fca5a5; }
table.ds-batch-tbl td { vertical-align: middle; }
table.ds-batch-tbl .ds-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
table.ds-batch-tbl .ds-pay-cell { color: var(--accent); font-weight: 700; white-space: nowrap; }
table.ds-batch-tbl .dsRowScen { min-width: 190px; max-width: 230px; font-size: 12.5px; }
.ds-row-bad td { background: rgba(239, 68, 68, .05); }
table.ds-batch-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; }
table.ds-batch-tbl tbody tr:not(.ds-row-bad) { transition: background .12s; }
table.ds-batch-tbl tbody tr:not(.ds-row-bad):hover { background: var(--hover); }
.ds-row-acts { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.ds-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ds-badge.ok { background: rgba(22, 163, 74, .12); color: #16a34a; }
.ds-badge.bad { background: rgba(239, 68, 68, .12); color: #dc2626; cursor: help; }
[data-theme="dark"] .ds-badge.ok { color: #4ade80; } [data-theme="dark"] .ds-badge.bad { color: #fca5a5; }
.btn.xs { padding: 5px 9px; font-size: 13px; line-height: 1; }
@media (max-width: 860px) {
.ds-gset { grid-template-columns: 1fr 1fr; }
.ds-map { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ds-gset { grid-template-columns: 1fr; } }
/* Dropdown đẹp (nice-select) trong công cụ đối soát */
.ds-map-row .nice-select { width: 100%; }
.ds-batch-tbl .nice-select { min-width: 190px; width: 100%; }
.ds-batch-tbl td:has(> .nice-select), .ds-batch-tbl td:has(> select.ns-native) { min-width: 210px; }
/* Bảng hàng loạt: overflow hiện (để panel dropdown không bị cắt) + sắp xếp linh động */
.ds-batch-wrap { overflow: visible; }
.ds-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s; }
.ds-th-sort:hover { color: var(--accent); }
.ds-sort-ar { font-size: 10px; margin-left: 4px; opacity: .9; }
.ds-sort-ar.dim { opacity: .3; }
.ds-th-sort:hover .ds-sort-ar.dim { opacity: .6; }
@media (max-width: 820px) { .ds-batch-wrap { overflow-x: auto; } }
/* ============ ĐỐI SOÁT — Redesign: hero, tabs, sections, kết quả ========= */
/* Hero đầu trang */
/* Card đầu trang gộp: tiêu đề + mô tả ngắn + 2 tab trong 1 khối */
.ds-top { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 15px 17px; margin-bottom: 16px; }
.ds-top-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.ds-top-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-grad); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex: none; box-shadow: 0 4px 12px rgba(79, 70, 229, .25); }
.ds-top-tx h2 { margin: 0; font-size: 16.5px; color: var(--text); }
.ds-top-tx p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* Tabs dạng thẻ segmented (override kiểu gạch chân cũ) */
.ds-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; border: 0; }
.ds-tab { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 13px;
border: 1.5px solid var(--border); border-radius: 11px; background: var(--card-bg); cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s; margin: 0; }
.ds-tab:hover { border-color: var(--border-strong); background: var(--hover); color: var(--text); }
.ds-tab.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); border-bottom-color: var(--accent); }
.ds-tab-ic { font-size: 19px; line-height: 1; flex: none; }
.ds-tab-tx { display: flex; flex-direction: column; }
.ds-tab-tx b { font-size: 14px; color: var(--text); }
.ds-tab.on .ds-tab-tx b { color: var(--accent); }
.ds-tab-tx em { font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
/* Callout chọn kịch bản */
.ds-callout { display: flex; gap: 12px; padding: 14px; border-radius: 14px; margin-bottom: 6px;
background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid var(--accent-soft-2); }
.ds-callout.on { border-color: var(--accent); }
.ds-callout-ic { font-size: 22px; line-height: 1.2; }
.ds-callout-body { flex: 1; min-width: 0; }
.ds-callout-t { font-weight: 700; font-size: 14px; color: var(--text); }
.ds-callout-d { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 2px 0 10px; }
.ds-callout-d b { color: var(--text); }
.ds-callout .nice-select, .ds-callout select { width: 100%; }
/* Chế độ "nhập nhanh": ẩn hẳn các ô đã khóa, chỉ chừa ô cần điền */
.ds-form.hide-locked .field.ds-lk,
.ds-form.hide-locked .ds-chk.ds-lk,
.ds-hide-block { display: none !important; }
.ds-linkbtn { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 11.5px; cursor: pointer; padding: 0; text-decoration: none; }
.ds-linkbtn:hover { color: var(--accent-strong); }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; color: var(--text-muted); align-items: center; }
.ds-lg { font-weight: 700; padding: 1px 8px; border-radius: 6px; }
.ds-lg.fill { color: #b45309; background: rgba(245, 158, 11, .16); }
.ds-lg.lock { color: var(--text-muted); background: var(--hover); }
[data-theme="dark"] .ds-lg.fill { color: #fbbf24; }
/* Khi đã chọn kịch bản: ô còn nhập được -> tô cam để nhấn mạnh "điền vào đây" */
.ds-form.has-tpl .field input:not(:disabled),
.ds-form.has-tpl .field textarea:not(:disabled),
.ds-form.has-tpl .field .nice-select:not(.disabled) .nice-select-btn {
background: rgba(245, 158, 11, .09);
border-color: rgba(245, 158, 11, .55);
}
.ds-form.has-tpl .field input:not(:disabled):focus,
.ds-form.has-tpl .field textarea:not(:disabled):focus {
border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}
[data-theme="dark"] .ds-form.has-tpl .field input:not(:disabled),
[data-theme="dark"] .ds-form.has-tpl .field textarea:not(:disabled),
[data-theme="dark"] .ds-form.has-tpl .field .nice-select:not(.disabled) .nice-select-btn {
background: rgba(245, 158, 11, .13); border-color: rgba(245, 158, 11, .5);
}
/* Nhóm trường (section) trong form */
/* Section header hiện đại: icon vuông tô màu + tiêu đề + đường kẻ mảnh dưới */
.ds-sec { padding-top: 2px; }
.ds-sec + .ds-sec { margin-top: 18px; }
.ds-sec-h { display: flex; align-items: center; gap: 11px; margin: 0 0 15px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.ds-sec-tag { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--text); }
.ds-sec-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft); color: var(--accent); }
.ds-sec-ic svg, .ds-sec-ic .ds-ic { width: 16px; height: 16px; display: block; }
.ds-sec-hint { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--text-muted);
background: var(--bg); border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
/* Mục đóng/mở được (progressive disclosure) */
.ds-sec-coll > .ds-sec-h { cursor: pointer; user-select: none; }
.ds-sec-coll > .ds-sec-h:hover .ds-sec-tag { color: var(--accent); }
.ds-sec-chev { display: inline-flex; align-items: center; color: var(--text-muted); transition: transform .2s; margin-left: 8px; }
.ds-sec-chev .ds-ic { width: 17px; height: 17px; }
.ds-sec.is-collapsed .ds-sec-chev { transform: rotate(-90deg); }
.ds-sec.is-collapsed > .ds-sec-body { display: none; }
.ds-sec.is-collapsed > .ds-sec-h { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
/* Cụm VietQR: card nền cam vàng riêng */
.ds-sec-qr { background: linear-gradient(135deg, rgba(245, 158, 11, .10), transparent 82%);
border: 1px solid rgba(245, 158, 11, .30); border-radius: 14px; padding: 14px 16px; margin-top: 18px; }
.ds-sec-qr > .ds-sec-h { border-bottom-color: rgba(245, 158, 11, .25); }
.ds-sec-qr .ds-sec-ic { background: rgba(245, 158, 11, .16); color: #d97706; }
.ds-sec-qr .ds-sec-tag { color: #b45309; }
[data-theme="dark"] .ds-sec-qr .ds-sec-ic, [data-theme="dark"] .ds-sec-qr .ds-sec-tag { color: #fbbf24; }
/* nút "Dùng dữ liệu mẫu" -> chữ tím */
#dsDemo { color: var(--accent); border-color: var(--accent-soft-2); }
/* Panel kết quả: hero số tiền + chip số liệu */
#dsPanel .ds-panel-card { position: static; }
@media (min-width: 900px) { .ds-panel-wrap { position: sticky; top: 14px; align-self: start; } }
.ds-hero { text-align: center; padding: 18px 16px 16px; border-radius: 16px; margin-bottom: 14px;
background: linear-gradient(165deg, var(--accent-soft), transparent 85%); border: 1px solid var(--accent-soft-2); }
.ds-hero-top { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ds-hero-amt { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1.05; margin: 5px 0 9px; font-variant-numeric: tabular-nums; }
.ds-hero-amt span { font-size: 18px; margin-left: 5px; font-weight: 700; }
.ds-hero.muted .ds-hero-amt { color: var(--text-muted); }
.ds-hero-flow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ds-chip-ab { background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 13px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.ds-chip-ab.alt { color: var(--accent); border-color: var(--accent-soft-2); }
.ds-arrow { color: var(--text-muted); font-weight: 800; }
.ds-hero-words { font-size: 12.5px; color: var(--text-muted); margin-top: 9px; }
.ds-hero-words i { color: var(--text); }
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ds-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; }
.ds-stat span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.ds-stat b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.ds-stat b.ds-a { color: #2563eb; } .ds-stat b.ds-b { color: var(--accent); }
[data-theme="dark"] .ds-stat b.ds-a { color: #60a5fa; }
/* Chi tiết tính toán (thu gọn) */
.ds-detail { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.ds-detail summary { cursor: pointer; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--text);
background: var(--bg); list-style: none; user-select: none; }
.ds-detail summary::-webkit-details-marker { display: none; }
.ds-detail summary::before { content: '▸'; margin-right: 8px; color: var(--text-muted); }
.ds-detail[open] summary::before { content: '▾'; }
.ds-detail .table-scroll { padding: 2px 12px 8px; }
.ds-detail table.ds-res td { border: 0; padding: 6px 2px; }
@media (max-width: 680px) {
.ds-tabs { grid-template-columns: 1fr; }
.ds-hero-head { flex-direction: column; text-align: center; }
.ds-hh-tags { justify-content: center; }
}
/* Ô nhập link Google Sheet (nhập hàng loạt) */
.ds-sheet-row { display: flex; gap: 8px; }
.ds-sheeturl { flex: 1; min-width: 0; padding: 10px 13px; border: 1px solid var(--border-strong);
border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; }
.ds-sheeturl:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-sheet-row .btn { white-space: nowrap; }
@media (max-width: 560px) { .ds-sheet-row { flex-direction: column; } }
/* Tiêu đề nhóm phụ "Cấu hình theo dòng" trong phần ghép cột */
.ds-map-sub { font-weight: 700; font-size: 13px; color: var(--text); margin: 16px 0 10px;
padding-top: 12px; border-top: 1px dashed var(--border); }
.ds-map-sub .hint { font-weight: 400; }
/* Bước 2 gập/mở (mặc định ẩn) */
.ds-step-toggle { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; }
.ds-step-toggle .ds-step-note { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.ds-step-toggle .ds-caret { margin-left: auto; color: var(--text-muted); transition: transform .18s; font-size: 12px; }
.ds-collapse.open .ds-step-toggle .ds-caret { transform: rotate(180deg); }
.ds-collapse .ds-step-body { display: none; margin-top: 16px; }
.ds-collapse.open .ds-step-body { display: block; }
.ds-collapse:not(.open) .ds-step-h { margin-bottom: 0; }
.ds-step-toggle:hover .ds-step-note { color: var(--text); }
@media (max-width: 640px) { .ds-step-toggle .ds-step-note { display: none; } }
/* Tooltip lỗi (rê chuột vào "Lỗi (n)") — đẹp, có mũi tên, tự lật */
.ds-errtip { position: fixed; z-index: 600; max-width: 320px; min-width: 180px;
background: var(--card-bg); color: var(--text); border: 1px solid var(--border);
border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,.24); padding: 11px 13px; font-size: 12.5px;
opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .13s ease, transform .13s ease; }
.ds-errtip.show { opacity: 1; transform: translateY(0); }
.ds-errtip-h { font-weight: 800; color: #dc2626; margin-bottom: 7px; font-size: 12.5px; }
[data-theme="dark"] .ds-errtip-h { color: #fca5a5; }
.ds-errtip ul { margin: 0; padding-left: 18px; }
.ds-errtip li { line-height: 1.55; margin: 3px 0; color: var(--text); }
.ds-errtip li::marker { color: #ef4444; }
.ds-errtip-arrow { position: absolute; width: 12px; height: 12px; background: var(--card-bg);
bottom: -7px; transform: rotate(45deg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ds-errtip.below .ds-errtip-arrow { bottom: auto; top: -7px;
border-right: 0; border-bottom: 0; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.ds-badge.bad { cursor: help; outline: none; }
/* Cài đặt logo watermark */
.ds-logo { display: flex; gap: 14px; align-items: flex-start; }
.ds-logo-prev { width: 96px; height: 96px; flex: none; border: 1px dashed var(--border-strong); border-radius: 12px;
display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg);
background-image: linear-gradient(45deg, var(--hover) 25%, transparent 25%, transparent 75%, var(--hover) 75%), linear-gradient(45deg, var(--hover) 25%, transparent 25%, transparent 75%, var(--hover) 75%);
background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.ds-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ds-logo-prev span { font-size: 11.5px; color: var(--text-muted); text-align: center; padding: 4px; }
.ds-logo-ctrls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-logo-btns .btn { cursor: pointer; }
.ds-logo-sl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.ds-logo-sl input[type=range] { flex: 1; accent-color: var(--accent); }
.ds-logo-sl b { color: var(--accent); min-width: 38px; text-align: right; }
@media (max-width: 560px) { .ds-logo { flex-direction: column; align-items: center; } }
/* Thanh chỉnh logo watermark ngay trong bản Xem trước (cập nhật tức thì) */
.ds-pv-wm { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; padding: 8px 18px;
background: var(--card-bg); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.ds-pv-wm-lb { font-weight: 700; color: var(--text); }
.ds-pv-wm label { display: inline-flex; align-items: center; gap: 6px; }
.ds-pv-wm input[type=range] { width: 92px; accent-color: var(--accent); }
.ds-pv-wm-chk { font-weight: 600; color: var(--accent); }
@media (max-width: 680px) { .ds-pv-wm input[type=range] { width: 62px; } .ds-pv-wm { gap: 8px 12px; padding: 8px 12px; } }
/* Cột chọn (checkbox) trong bảng đối soát hàng loạt */
.ds-batch-tbl .ds-selcol { width: 34px; text-align: center; padding-left: 6px; padding-right: 6px; }
.ds-batch-tbl .ds-selcol input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.ds-batch-tbl .ds-selcol input:disabled { cursor: not-allowed; opacity: .4; }
.ds-sel-n { color: var(--accent); font-weight: 600; }
/* Trang công khai từ link ngắn: trạng thái đang tải / hết hạn */
.ds-pub-load { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 20; }
.ds-pub-load-in { font-size: 15px; color: var(--text-muted); text-align: center; line-height: 1.7; padding: 24px; max-width: 420px; }
/* Biên bản xoay ngang (nhiều cột): nới rộng khung xem trước / công khai */
.ds-pv-body iframe.ds-frame-land { width: 297mm; }
/* Tab 3 cột + Lịch sử đối soát */
.ds-tabs.ds-tabs-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 760px) { .ds-tabs.ds-tabs-3 { grid-template-columns: 1fr; } }
.ds-hist-load, .ds-hist-empty { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.ds-hist-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.ds-hist-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.ds-hist-filters select { padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; min-width: 128px; }
.ds-hist-q { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; }
.ds-hist-q:focus, .ds-hist-filters select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-hist-sum { font-size: 13.5px; color: var(--text); white-space: nowrap; }
/* Chọn thời hạn link trong hộp tạo/gia hạn link */
.ds-share-exp { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.ds-share-exp label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.ds-share-days { padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 13.5px; }
.ds-share-days:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Tổng hợp ở tab Lịch sử: Tổng (tím) · Đã trả (xanh) · Còn lại (cam) */
.ds-sum-total { color: var(--accent); font-weight: 700; white-space: nowrap; }
table.ds-batch-tbl td.ds-cfg-cell { color: var(--accent); font-weight: 600; } /* dữ liệu cột Cấu hình -> tím */
.ds-sum-paid { color: #16a34a; font-weight: 700; white-space: nowrap; }
.ds-sum-due { color: #d97706; font-weight: 700; white-space: nowrap; }
[data-theme="dark"] .ds-sum-paid { color: #4ade80; } [data-theme="dark"] .ds-sum-due { color: #fbbf24; }
/* Banner khi đang xem bản lưu ở máy (chưa kết nối máy chủ) */
.ds-hist-off { background: rgba(217, 119, 6, .12); color: #b45309; border: 1px solid rgba(217, 119, 6, .3);
border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 0 0 12px; }
[data-theme="dark"] .ds-hist-off { color: #fbbf24; }
/* Dropdown trạng thái thanh toán trong bảng Lịch sử (tô màu theo trạng thái) */
.ds-hist-st { white-space: nowrap; }
.ds-st-sel { padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 700;
cursor: pointer; -webkit-appearance: none; appearance: none; }
.ds-st-sel:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-st-sel.st-draft { background: rgba(100, 116, 139, .15); color: #475569; }
.ds-st-sel.st-sent { background: rgba(37, 99, 235, .13); color: #2563eb; }
.ds-st-sel.st-confirmed { background: rgba(147, 51, 234, .13); color: #9333ea; }
.ds-st-sel.st-paid { background: rgba(22, 163, 74, .14); color: #16a34a; }
[data-theme="dark"] .ds-st-sel.st-draft { color: #cbd5e1; } [data-theme="dark"] .ds-st-sel.st-sent { color: #93c5fd; }
[data-theme="dark"] .ds-st-sel.st-confirmed { color: #d8b4fe; } [data-theme="dark"] .ds-st-sel.st-paid { color: #86efac; }
/* Khi dropdown trạng thái được bọc nice-select: giữ dạng pill tô màu, panel đẹp như bộ lọc */
.ds-hist-st .nice-select { min-width: 138px; }
.ds-hist-st .nice-select .nice-select-btn { min-width: 0; border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700; border-color: transparent; }
.ds-st-nice .ns-caret { color: currentColor; opacity: .65; }
.ds-st-nice.st-draft .nice-select-btn { background: rgba(100, 116, 139, .15); color: #475569; }
.ds-st-nice.st-sent .nice-select-btn { background: rgba(37, 99, 235, .13); color: #2563eb; }
.ds-st-nice.st-confirmed .nice-select-btn { background: rgba(147, 51, 234, .13); color: #9333ea; }
.ds-st-nice.st-paid .nice-select-btn { background: rgba(22, 163, 74, .14); color: #16a34a; }
[data-theme="dark"] .ds-st-nice.st-draft .nice-select-btn { color: #cbd5e1; } [data-theme="dark"] .ds-st-nice.st-sent .nice-select-btn { color: #93c5fd; }
[data-theme="dark"] .ds-st-nice.st-confirmed .nice-select-btn { color: #d8b4fe; } [data-theme="dark"] .ds-st-nice.st-paid .nice-select-btn { color: #86efac; }
/* Nút ↗ mở thẳng biên bản (tab mới) trong bảng Lịch sử — là thẻ nên bỏ gạch chân */
.ds-row-acts a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
/* Dropdown lọc (Năm/Tháng/Trạng thái) đã bọc nice-select — cho rộng đều, gọn hàng ngang */
.ds-hist-filters .nice-select { flex: 0 0 auto; min-width: 150px; }
.ds-hist-filters .nice-select .nice-select-btn { height: 40px; font-size: 13.5px; font-weight: 500; }
/* Cụm nút hành động ở bảng đối soát hàng loạt */
.ds-batch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .ds-batch-actions { width: 100%; } .ds-batch-actions .btn { flex: 1; justify-content: center; } }
/* ===================== TAB LỊCH SỬ — thiết kế lại (ui-ux-pro-max) ===================== */
.ds-ic { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
.ds-hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ds-hist-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.ds-reload-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ds-reload-btn .ds-ic { width: 15px; height: 15px; }
/* KPI cards tab Lịch sử — icon tô màu + glow góc + hover nâng + entrance stagger
(đặt tên ds-kpi* riêng để KHÔNG đụng .ds-stat của panel kết quả tab Tạo đơn lẻ) */
.ds-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.ds-kpi { display: flex; align-items: center; gap: 13px; position: relative; overflow: hidden;
border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; background: var(--bg-elev);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
animation: dsStatIn .5s cubic-bezier(.2, .75, .3, 1) both; }
.ds-kpi:nth-child(1) { animation-delay: .02s; }
.ds-kpi:nth-child(2) { animation-delay: .07s; }
.ds-kpi:nth-child(3) { animation-delay: .12s; }
.ds-kpi:nth-child(4) { animation-delay: .17s; }
.ds-kpi::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(120% 120% at 100% 0%, var(--ds-kpi-glow, transparent), transparent 60%); }
.ds-kpi:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(2, 6, 23, .10); border-color: var(--border-strong); }
.ds-kpi-ic { position: relative; z-index: 1; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
display: flex; align-items: center; justify-content: center; background: rgba(100, 116, 139, .12); color: var(--text-muted); }
.ds-kpi-ic .ds-ic { width: 21px; height: 21px; }
.ds-kpi-body { position: relative; z-index: 1; min-width: 0; }
.ds-kpi-v { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.ds-kpi-l { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.ds-kpi-total { --ds-kpi-glow: rgba(79, 70, 229, .10); }
.ds-kpi-total .ds-kpi-ic { background: var(--accent-soft); color: var(--accent); }
.ds-kpi-total .ds-kpi-v { color: var(--accent); }
.ds-kpi-paid { --ds-kpi-glow: rgba(22, 163, 74, .10); }
.ds-kpi-paid .ds-kpi-ic { background: rgba(22, 163, 74, .12); color: #16a34a; }
.ds-kpi-paid .ds-kpi-v { color: #16a34a; }
.ds-kpi-due { --ds-kpi-glow: rgba(217, 119, 6, .10); }
.ds-kpi-due .ds-kpi-ic { background: rgba(217, 119, 6, .12); color: #d97706; }
.ds-kpi-due .ds-kpi-v { color: #d97706; }
[data-theme="dark"] .ds-kpi-paid .ds-kpi-ic, [data-theme="dark"] .ds-kpi-paid .ds-kpi-v { color: #4ade80; }
[data-theme="dark"] .ds-kpi-due .ds-kpi-ic, [data-theme="dark"] .ds-kpi-due .ds-kpi-v { color: #fbbf24; }
[data-theme="dark"] .ds-kpi:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
@keyframes dsStatIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-kpi { animation: none; } .ds-kpi:hover { transform: none; } }
@media (max-width: 760px) { .ds-kpis { grid-template-columns: repeat(2, 1fr); } }
/* Toolbar lọc */
.ds-hist-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ds-hist-toolbar .ds-hist-filters { flex: 0 0 auto; margin: 0; }
.ds-hist-toolbar .ds-hist-q { flex: 1; min-width: 200px; margin: 0; }
/* Bảng lịch sử */
.ds-hist-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 700; }
.ds-hist-tbl th, .ds-hist-tbl td { padding-left: 11px; padding-right: 11px; }
.ds-hist-tbl tbody tr { transition: background .12s; }
.ds-hist-tbl tbody tr:hover { background: var(--hover); }
.ds-hist-tbl td { vertical-align: middle; }
.ds-hist-tbl .ds-idx { color: var(--text-muted); font-weight: 600; }
.ds-hist-tbl .ds-name { font-weight: 700; color: var(--text); }
.ds-hist-tbl .ds-period, .ds-hist-tbl .ds-date { font-variant-numeric: tabular-nums; }
.ds-hist-tbl .ds-th-act { text-align: right; }
/* Nút icon thao tác (thay emoji) */
.ds-hist-tbl .ds-row-acts { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.ds-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-muted);
cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.ds-act:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.ds-act:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-act.ds-act-accent:hover { color: var(--accent); border-color: var(--accent-soft-2); background: var(--accent-soft); }
.ds-act.ds-act-danger:hover { color: #dc2626; border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .08); }
.ds-act.is-disabled, .ds-act:disabled { opacity: .32; cursor: not-allowed; }
.ds-act.is-disabled:hover, .ds-act:disabled:hover { background: transparent; color: var(--text-muted); border-color: transparent; }
/* Empty state */
.ds-empty { text-align: center; padding: 46px 20px; }
.ds-empty-ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.ds-empty-ic .ds-ic { width: 26px; height: 26px; }
.ds-empty-t { font-size: 15px; font-weight: 700; color: var(--text); }
.ds-empty-d { font-size: 13px; color: var(--text-muted); margin: 6px auto 0; max-width: 400px; line-height: 1.6; }
.ds-empty-cta { margin-top: 16px; }
@media (max-width: 560px) { .ds-hist-head { flex-direction: column; } .ds-hist-toolbar .ds-hist-q { min-width: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ds-hist-tbl tbody tr, .ds-act { transition: none; } }