/* HOME MART Chấm công – hệ thống giao diện (mobile-first, sáng/tối) */
:root {
  /* 07/10/2026 (v61): bảng màu doanh nghiệp — nền xám xanh nhạt, chữ đậm, viền rõ, màu trạng thái đậm (đọc rõ trên nền trắng, chữ trắng trên nền màu) */
  --bg: #eef1f5; --surface: #ffffff; --surface-2: #f3f5f8; --text: #0f1c2d; --muted: #4b5868; --border: #d5dce5;
  --primary: #448127; --primary-2: #2f6219; --on-primary: #ffffff; --accent: #e30613; --brand-bar: #448127; --on-brand: #ffffff;
  --ok: #15803d; --ok-bg: #e5f4ea; --late: #6d28d9; --late-bg: #efe8fd; --danger: #c8102e; --danger-bg: #fcebed;
  --warn: #c2410c; --warn-bg: #fdeee3; --off: #4b5563; --off-bg: #e8ecf1; --pending: #a16207; --pending-bg: #fcf3d4; --upcoming: #1d4ed8; --upcoming-bg: #e6edfc; --working: #0e7490; --working-bg: #dcf2f7;
  --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.07);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1418; --surface: #161d23; --surface-2: #1d262e; --text: #edf1f5; --muted: #9eabb8; --border: #2d3947;
  --primary: #76b82a; --primary-2: #5f9a1f; --on-primary: #0b1a04; --accent: #ff5a5a; --brand-bar: #1e3a10; --on-brand: #ffffff;
  --ok-bg: #0f2a1a; --late-bg: #24173f; --danger-bg: #3a1414; --warn-bg: #3a2210; --off-bg: #232a31; --pending-bg: #332a0c; --upcoming-bg: #13213d; --working-bg: #0c2a31;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
} }
:root[data-theme="dark"] {
  --bg: #0e1418; --surface: #161d23; --surface-2: #1d262e; --text: #edf1f5; --muted: #9eabb8; --border: #2d3947;
  --primary: #76b82a; --primary-2: #5f9a1f; --on-primary: #0b1a04; --accent: #ff5a5a; --brand-bar: #1e3a10; --on-brand: #ffffff;
  --ok-bg: #0f2a1a; --late-bg: #24173f; --danger-bg: #3a1414; --warn-bg: #3a2210; --off-bg: #232a31; --pending-bg: #332a0c; --upcoming-bg: #13213d; --working-bg: #0c2a31;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Màu chủ đạo riêng từng tài khoản (06/10/2026, /giao-dien; util.ACCENTS). Mặc định (không có data-accent) = xanh lá HOME MART. */
:root[data-accent="blue"] { --primary: #1d4ed8; --primary-2: #1e40af; --on-primary: #ffffff; --brand-bar: #1d4ed8; }
:root[data-accent="teal"] { --primary: #0f766e; --primary-2: #115e59; --on-primary: #ffffff; --brand-bar: #0f766e; }
:root[data-accent="purple"] { --primary: #6d28d9; --primary-2: #5b21b6; --on-primary: #ffffff; --brand-bar: #6d28d9; }
:root[data-accent="pink"] { --primary: #be185d; --primary-2: #9d174d; --on-primary: #ffffff; --brand-bar: #be185d; }
:root[data-accent="red"] { --primary: #b91c1c; --primary-2: #991b1b; --on-primary: #ffffff; --brand-bar: #b91c1c; }
:root[data-accent="orange"] { --primary: #c2410c; --primary-2: #9a3412; --on-primary: #ffffff; --brand-bar: #c2410c; }
:root[data-accent="amber"] { --primary: #92400e; --primary-2: #78350f; --on-primary: #ffffff; --brand-bar: #92400e; }
:root[data-accent="slate"] { --primary: #334155; --primary-2: #1e293b; --on-primary: #ffffff; --brand-bar: #334155; }
@media (prefers-color-scheme: dark) { :root[data-accent="blue"]:not([data-theme="light"]) { --primary: #60a5fa; --primary-2: #3b82f6; --on-primary: #071630; --brand-bar: #13264a; } }
:root[data-accent="blue"][data-theme="dark"] { --primary: #60a5fa; --primary-2: #3b82f6; --on-primary: #071630; --brand-bar: #13264a; }
@media (prefers-color-scheme: dark) { :root[data-accent="teal"]:not([data-theme="light"]) { --primary: #2dd4bf; --primary-2: #14b8a6; --on-primary: #03201c; --brand-bar: #0c2f2b; } }
:root[data-accent="teal"][data-theme="dark"] { --primary: #2dd4bf; --primary-2: #14b8a6; --on-primary: #03201c; --brand-bar: #0c2f2b; }
@media (prefers-color-scheme: dark) { :root[data-accent="purple"]:not([data-theme="light"]) { --primary: #a78bfa; --primary-2: #8b5cf6; --on-primary: #160b2e; --brand-bar: #2a1a4f; } }
:root[data-accent="purple"][data-theme="dark"] { --primary: #a78bfa; --primary-2: #8b5cf6; --on-primary: #160b2e; --brand-bar: #2a1a4f; }
@media (prefers-color-scheme: dark) { :root[data-accent="pink"]:not([data-theme="light"]) { --primary: #f472b6; --primary-2: #ec4899; --on-primary: #2a0716; --brand-bar: #4a1430; } }
:root[data-accent="pink"][data-theme="dark"] { --primary: #f472b6; --primary-2: #ec4899; --on-primary: #2a0716; --brand-bar: #4a1430; }
@media (prefers-color-scheme: dark) { :root[data-accent="red"]:not([data-theme="light"]) { --primary: #f87171; --primary-2: #ef4444; --on-primary: #2a0606; --brand-bar: #4a1414; } }
:root[data-accent="red"][data-theme="dark"] { --primary: #f87171; --primary-2: #ef4444; --on-primary: #2a0606; --brand-bar: #4a1414; }
@media (prefers-color-scheme: dark) { :root[data-accent="orange"]:not([data-theme="light"]) { --primary: #fb923c; --primary-2: #f97316; --on-primary: #2a1204; --brand-bar: #4a2410; } }
:root[data-accent="orange"][data-theme="dark"] { --primary: #fb923c; --primary-2: #f97316; --on-primary: #2a1204; --brand-bar: #4a2410; }
@media (prefers-color-scheme: dark) { :root[data-accent="amber"]:not([data-theme="light"]) { --primary: #fbbf24; --primary-2: #f59e0b; --on-primary: #2a1d03; --brand-bar: #3f3410; } }
:root[data-accent="amber"][data-theme="dark"] { --primary: #fbbf24; --primary-2: #f59e0b; --on-primary: #2a1d03; --brand-bar: #3f3410; }
@media (prefers-color-scheme: dark) { :root[data-accent="slate"]:not([data-theme="light"]) { --primary: #94a3b8; --primary-2: #64748b; --on-primary: #0b1220; --brand-bar: #1e293b; } }
:root[data-accent="slate"][data-theme="dark"] { --primary: #94a3b8; --primary-2: #64748b; --on-primary: #0b1220; --brand-bar: #1e293b; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
a { color: var(--primary); text-decoration: none; }
b { font-weight: 600; }
small, .small { font-size: 12.5px; }
.muted { color: var(--muted); }
.neg { color: var(--danger); }
.hidden { display: none !important; }
code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* Nút tròn trên thanh đầu trang (kiểu KiotViet) */
.ibtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ibtn:hover { background: rgba(255,255,255,.28); }
.ibtn .ico { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ibtn-danger { background: rgba(227,6,19,.28); border-color: rgba(255,255,255,.35); }
.ibtn-danger:hover { background: rgba(227,6,19,.5); }
@media (max-width: 1199px) { .ibtn .lbl-hide-m { display: none; } .uname { display: none; } .topnav a { padding: 7px 9px; } }
@media (max-width: 899px) { .topbar { padding: 6px 10px; gap: 8px; } .userbox { gap: 6px; } .ibtn { padding: 0 8px; height: 34px; gap: 4px; } .ibtn .lbl { font-size: 12px; } .urole { display: none; } .logo-disc { width: 34px; height: 34px; } .logo-mark { width: 17px; height: 25.5px; } .wordmark-img { height: 13px; } }
.topbar { flex-wrap: nowrap; } .userbox { flex: 0 0 auto; } .brand { flex: 0 0 auto; }
.login-theme { position: fixed; top: 10px; right: 10px; }
html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } }

/* Menu người dùng (bấm tên) */
.user-menu { position: relative; }
.user-menu summary { list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-sum .avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--primary-2); font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.user-sum .caret { font-size: 11px; opacity: .8; }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; z-index: 50; }
.user-menu .menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.user-menu .menu-head small { color: var(--muted); }
.user-menu .menu-item, .sheet-list .menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-weight: 500; }
.user-menu .menu-item:hover, .sheet-list .menu-item:hover { background: var(--surface-2); }
.user-menu .menu-item svg, .sheet-list .menu-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.user-menu .menu-danger, .sheet-list .menu-danger { color: var(--danger); } .user-menu .menu-danger svg, .sheet-list .menu-danger svg { color: var(--danger); }
.user-menu[open] > summary { background: rgba(255,255,255,.3); }

/* Header */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 6px 16px; background: var(--brand-bar); color: var(--on-brand); border-bottom: 1px solid rgba(0,0,0,.15); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-brand); }
/* Logo chính thức Home Mart (file HM Sign 060321): chữ M đỏ-xanh trong đĩa trắng + wordmark HOME MART, con dấu tròn ở trang đăng nhập */
.logo-disc { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.7); flex: 0 0 auto; }
.logo-mark { display: block; width: 20px; height: 30px; }
.wordmark-img { display: block; height: 15px; width: auto; }
.logo-badge { display: block; width: 132px; height: 132px; margin: 0 auto; }
.login-card h1 .wordmark-img { height: 30px; margin: 0 auto; }
.logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-weight: 800; letter-spacing: .5px; }
.logo.lg { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; }
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.brand-text small { color: rgba(255,255,255,.8); }
.topnav { display: none; flex: 1 1 auto; align-items: center; gap: 4px; margin-left: 8px; min-width: 0; }
.topnav a { flex: 0 0 auto; white-space: nowrap; }
.topnav a { padding: 7px 12px; border-radius: 10px; color: rgba(255,255,255,.85); font-weight: 500; }
.topnav a.active, .topnav a:hover { background: #fff; color: var(--primary-2); }
.userbox { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.uname { font-weight: 600; }
.urole { color: var(--on-brand); font-size: 12px; padding: 2px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; white-space: nowrap; }
@media (max-width: 360px) { .urole { display: none; } .topbar { gap: 8px; padding: 6px 10px; } }
.userbox { gap: 8px; }
/* Máy tính (≥1024px): menu trên; điện thoại + máy tính bảng: thanh dưới + bảng Menu */
@media (min-width: 1024px) { .topnav { display: flex; } body { padding-bottom: 24px; } .bottomnav { display: none !important; } }
@media (max-width: 899px) { .uname { display: none; } .brand-text small { display: none; } }

/* Số việc chờ trên menu */
.nav-count { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; }
.topnav a.active .nav-count { background: var(--accent); }

/* Thanh dưới (điện thoại / máy tính bảng): 5 mục hay dùng + nút Menu mở đủ chức năng */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); box-shadow: 0 -2px 10px rgba(16,24,40,.06); }
.bottomnav > a, .bottomnav > button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 1px 5px; margin: 0; border: 0; background: none; font: inherit; font-size: 11px; line-height: 1.2; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nb-ico { position: relative; display: grid; place-items: center; }
.bottomnav .nb-ico { width: 46px; height: 28px; border-radius: 14px; transition: background-color .15s; }
.bottomnav svg, .sheet-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bottomnav .nb-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottomnav .active { color: var(--primary); font-weight: 700; }
.bottomnav .active .nb-ico { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.nb-ico .nav-count { position: absolute; top: -5px; left: 50%; margin-left: 3px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 359px) { .bottomnav > a, .bottomnav > button { font-size: 10px; } .bottomnav .nb-ico { width: 40px; } }

/* Bảng Menu trượt từ dưới lên */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--text); box-shadow: 0 -16px 48px rgba(0,0,0,.28); overflow: hidden; }
dialog.sheet::backdrop { background: rgba(8, 14, 20, .5); }
dialog.sheet[open] { animation: sheet-up .18s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
.sheet-inner { display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; }
.sheet-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border); }
.sheet-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 800; }
.sheet-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sheet-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-who small { color: var(--muted); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 2px 12px calc(14px + env(safe-area-inset-bottom)); }
.sheet-cap { margin: 12px 4px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.sheet-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.sheet-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 3px 9px; border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 1.25; text-align: center; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; }
.sheet-tile .nb-ico { width: 36px; height: 36px; border-radius: 12px; background: var(--surface); color: var(--primary); }
.sheet-tile:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)); }
.sheet-tile.active { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--primary); }
.sheet-tile .nav-count { left: auto; right: -9px; margin: 0; }
.sheet-list { display: flex; flex-direction: column; }
.sheet-list .menu-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sheet-list .menu-item .ico { display: inline-grid; place-items: center; color: var(--muted); }
.sheet-list .theme-btn .lbl { font-weight: 600; margin-left: -4px; }
@media (max-width: 359px) { .sheet-tile { font-size: 11px; padding: 9px 2px 8px; } .sheet-grid { gap: 5px; } }

/* Layout */
.page { max-width: 100%; }
.container { max-width: 760px; margin: 0 auto; padding: 16px; }
.container.wide { max-width: 1200px; }
.container.narrow { max-width: 440px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.h1 { font-size: 22px; margin: 0 0 2px; font-weight: 700; }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); overflow-x: auto; }
.card.center { text-align: center; }
.card-title { font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-title .link { font-weight: 500; font-size: 13px; }
.empty { color: var(--muted); padding: 14px 4px; text-align: center; }
.table-wrap { overflow-x: auto; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow); border-left: 4px solid var(--primary); }
.kpi span { font-size: 12.5px; color: var(--muted); }
.kpi b { font-size: 26px; line-height: 1.1; }
.kpi small { color: var(--muted); }
.kpi.ok { border-left-color: var(--ok); }
/* Biểu đồ chung */
.chart-card { padding-bottom: 8px; }
.chart-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .chart-grid { grid-template-columns: 2fr 1fr; } }
.chart-main { position: relative; height: 230px; }
.chart-side { position: relative; height: 230px; display: flex; flex-direction: column; }
.chart-side canvas { flex: 1; min-height: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin-top: 4px; color: var(--muted); }
.chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.sw.st-ok { background: var(--ok); } .sw.st-late { background: var(--late); } .sw.st-missing { background: var(--danger); } .sw.st-created { background: var(--warn); } .sw.st-off { background: var(--off); } .sw.st-upcoming { background: var(--upcoming); } .kpi.danger { border-left-color: var(--danger); } .kpi.late { border-left-color: var(--late); } .kpi.warn { border-left-color: var(--warn); }

/* Stat rows */
.stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.stat-row:last-child { border-bottom: 0; }
.stat-row.warn b { color: var(--danger); }
.stat .big { font-size: 22px; color: var(--primary); }
.money-big { font-size: 28px; font-weight: 800; color: var(--primary); margin: 4px 0; }

/* khung biểu đồ có chiều cao cố định (Chart.js maintainAspectRatio: false) */
.chart-box { position: relative; width: 100%; }
/* Quick buttons */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.quick-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 12.5px; text-align: center; }
.quick-btn i { font-style: normal; font-size: 22px; color: var(--primary); }
.quick-btn i svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick.quick-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 399px) { .quick.quick-5 { gap: 6px; } .quick-5 .quick-btn { padding: 10px 2px; font-size: 11.5px; line-height: 1.25; } }
@media (max-width: 339px) { .quick.quick-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pill { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; text-align: center; }
.quick-btn .pill { position: absolute; top: 6px; right: 6px; background: var(--danger); color: #fff; }
.pill-danger { background: var(--danger); color: #fff; }

/* Lists */
.list { display: flex; flex-direction: column; }
.row-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main badge" "sub badge"; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); align-items: center; }
.row-item:last-child { border-bottom: 0; }
.row-main { grid-area: main; } .row-sub { grid-area: sub; color: var(--muted); font-size: 13px; } .row-item .badge, .row-item .pill { grid-area: badge; }
.link-row:hover { background: var(--surface-2); }
.compact-list .row-item { padding: 6px 0; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.st-ok { background: var(--ok-bg); color: var(--ok); } .badge.st-late { background: var(--late-bg); color: var(--late); }
.badge.st-missing { background: var(--danger-bg); color: var(--danger); } .badge.st-created { background: var(--warn-bg); color: var(--warn); }
.badge.st-off { background: var(--off-bg); color: var(--off); } .badge.st-pending { background: var(--pending-bg); color: var(--pending); }
.badge.st-upcoming { background: var(--upcoming-bg); color: var(--upcoming); } .badge.st-working { background: var(--working-bg); color: var(--working); }

/* Shift card (WinMart-style) */
.shift-card { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--off); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.shift-card.st-ok { border-left-color: var(--ok); } .shift-card.st-late { border-left-color: var(--late); } .shift-card.st-missing { border-left-color: var(--danger); }
.shift-card.st-created { border-left-color: var(--warn); } .shift-card.st-off { border-left-color: var(--off); } .shift-card.st-upcoming { border-left-color: var(--upcoming); } .shift-card.st-working { border-left-color: var(--working); }
.shift-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 8px; }
.shift-head > div:first-child { flex: 1 1 200px; min-width: 0; }
.shift-head .shift-badges { margin-left: auto; }
.shift-emp { margin-bottom: 2px; }
.shift-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.kv { display: flex; flex-direction: column; background: var(--surface-2); border-radius: 10px; padding: 6px 8px; }
.kv span { font-size: 11.5px; color: var(--muted); } .kv b { font-size: 15px; }
.shift-notes { margin-top: 8px; font-size: 13px; color: var(--late); }
.shift-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.explain-form { margin-top: -4px; }
.explain-form summary { list-style: none; cursor: pointer; display: inline-block; }
.explain-form summary::-webkit-details-marker { display: none; }
.explain-form form { margin-top: 10px; }

/* Forms */
.form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="color"] { width: 76px; height: 40px; padding: 4px; cursor: pointer; } /* trước giãn hết bề ngang, ô màu nhạt chỉ còn 1 vạch */
.check { flex-direction: row !important; align-items: center; gap: 8px; }
/* nhãn ô chọn có dòng mô tả: mô tả xuống dòng khi hẹp thay vì bóp tên còn 1 chữ / dòng ("Quản / lý") (06/10/2026) */
.check:has(> .muted) { flex-wrap: wrap; row-gap: 0; }
.check > .muted { flex: 1 1 150px; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
.checks .check { margin: 0; font-size: 13px; color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-2); }
.btn-outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
/* nút chỉ có mũi tên ‹ › (tháng / ngày / tuần trước – sau): ô bấm tối thiểu 36px, mũi tên to rõ (06/10/2026) */
.btn[aria-label$=" trước"], .btn[aria-label$=" sau"] { min-width: 36px; min-height: 36px; padding: 0 8px; font-size: 20px; line-height: 1; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; }
.inline-form input { width: auto; }
.inline { display: inline; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.filter-bar label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); flex: 1 1 140px; }
.filter-bar .btn { flex: 0 0 auto; }
.row-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-form input, .row-form select { width: auto; padding: 6px 8px; }
.small-form select, .small-form input { padding: 6px 8px; }
.inline-details { display: inline-block; position: relative; }
.inline-details summary { list-style: none; display: inline-flex; cursor: pointer; }
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details[open] .form { position: absolute; right: 0; z-index: 10; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; width: 300px; box-shadow: var(--shadow); }
.actions { white-space: nowrap; }

/* Alerts */
.alert { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; }
.alert-danger { background: var(--danger-bg); color: var(--danger); } .alert-success { background: var(--ok-bg); color: var(--ok); } .alert-info { background: var(--upcoming-bg); color: var(--upcoming); }
.summary-strip { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface-2); border-radius: 10px; font-size: 13.5px; color: var(--muted); }
.summary-strip b { color: var(--text); }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 8px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.table.compact th, .table.compact td { padding: 6px 6px; font-size: 13.5px; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .total td { font-weight: 700; background: var(--surface-2); }

/* Week grid */
.week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.week-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .week-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } } /* đủ rộng thì 7 cột, hẹp hơn (máy tính bảng, có menu phụ) thì xuống 2 hàng thay vì bóp cột ~50px (06/10/2026) */
.day-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; min-height: 60px; }
.day-col.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.day-col.today .day-head { background: var(--primary); color: var(--on-primary); margin: -8px -8px 8px; padding: 6px 8px; border-radius: 11px 11px 0 0; }
.day-col.today .day-head { flex-wrap: wrap; }
.today-pill { flex: 1 0 100%; margin-top: 3px; text-align: center; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .95; }
.day-head { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); }
.day-empty { color: var(--muted); font-size: 13px; }
.day-shift { border-radius: 8px; padding: 6px 8px; font-size: 13px; margin-bottom: 6px; background: var(--off-bg); border-left: 4px solid var(--off); }
.day-shift.st-ok { background: var(--ok-bg); border-left-color: var(--ok); } .day-shift.st-late { background: var(--late-bg); border-left-color: var(--late); }
.day-shift.st-missing { background: var(--danger-bg); border-left-color: var(--danger); } .day-shift.st-created { background: var(--warn-bg); border-left-color: var(--warn); }
.day-shift.st-upcoming { background: var(--upcoming-bg); border-left-color: var(--upcoming); } .day-shift.st-working { background: var(--working-bg); border-left-color: var(--working); }

/* Matrix */
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lg { font-size: 12px; padding: 2px 8px; border-radius: 999px; border-left: 4px solid; background: var(--surface); }
.lg.st-ok { border-color: var(--ok); } .lg.st-late { border-color: var(--late); } .lg.st-missing { border-color: var(--danger); } .lg.st-created { border-color: var(--warn); } .lg.st-off { border-color: var(--off); } .lg.st-upcoming { border-color: var(--upcoming); }
.matrix-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: 75vh; }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.matrix th, .matrix td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px 3px; text-align: center; white-space: nowrap; }
.matrix thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-weight: 600; }
.matrix th small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.matrix th.sun { color: var(--danger); }
/* Hôm nay: cột nổi bật trên lịch tuần / bảng công (nhãn HÔM NAY trên đầu cột, cột tô màu, viền 2 bên) */
.matrix th.today { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 -3px 0 var(--accent); }
.matrix th.today small { color: inherit; opacity: .85; }
.matrix th.today::before { content: 'Hôm nay'; display: block; font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.matrix td.today { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-left: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.matrix tr.total td.today { font-weight: 700; }
.matrix .sticky { position: sticky; left: 0; background: var(--surface); z-index: 3; text-align: left; min-width: 150px; }
.matrix thead .sticky { z-index: 4; background: var(--surface-2); }
.matrix .sticky small { display: block; color: var(--muted); }
.matrix .num { text-align: right; padding: 4px 6px; }
.dot { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 11.5px; margin: 1px; color: var(--text); background: var(--off-bg); }
.dot.st-ok { background: var(--ok-bg); color: var(--ok); } .dot.st-late { background: var(--late-bg); color: var(--late); } .dot.st-missing { background: var(--danger-bg); color: var(--danger); }
.dot.st-created { background: var(--warn-bg); color: var(--warn); } .dot.st-off { background: var(--off-bg); color: var(--off); } .dot.st-upcoming { background: transparent; color: var(--muted); } .dot.st-working { background: var(--working-bg); color: var(--working); }

/* Lịch làm việc (kiểu KiotViet) */
.sched-wrap { max-height: none; }
.sched th, .sched td { text-align: left; vertical-align: top; }
.sched th { text-align: center; }
.sched-cell { min-width: 132px; padding: 4px; }
.sched-cell.past { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.chip { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 8px; font-size: 12px; line-height: 1.2; margin: 2px 0; border: 1px solid rgba(0,0,0,.06); position: relative; color: inherit; }
.chip-name { font-weight: 700; white-space: normal; }
.chip-time { font-size: 11px; opacity: .8; }
.chip-st { position: absolute; top: 4px; right: 6px; font-size: 11px; font-weight: 700; }
.sched-cell.past .chip { opacity: .75; }
.chip-emp { display: block; padding: 3px 7px; margin: 2px 0 0; background: var(--surface-2); border-left: 3px solid var(--off); font-weight: 600; white-space: nowrap; }
.chip-emp.st-ok { border-left-color: var(--ok); } .chip-emp.st-late { border-left-color: var(--late); } .chip-emp.st-missing { border-left-color: var(--danger); } .chip-emp.st-created { border-left-color: var(--warn); } .chip-emp.st-upcoming { border-left-color: var(--upcoming); } .chip-emp.st-working { border-left-color: var(--working); } .chip-emp.st-off { border-left-color: var(--off); }

/* Approvals */
.approval { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.approval-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.approval-head .badge, .shift-head .badge, .row-item .badge { align-self: flex-start; }
.approval-body { margin: 6px 0; }
.approval-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.approval-actions input { flex: 1 1 160px; }
.approval-actions input[type="number"] { flex: 0 0 90px; }
.approval-actions .btn { flex: 1 1 calc(50% - 6px); }
@media (min-width: 700px) { .approval-actions .btn { flex: 0 0 auto; } }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(160deg, #448127 0%, #24500f 100%); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 20px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card h1 { margin: 12px 0 2px; font-size: 22px; letter-spacing: 1px; }
.login-card .form { text-align: left; margin-top: 16px; }
.login-logo { display: flex; justify-content: center; }

/* Ô mật khẩu có nút mắt */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 42px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 0 10px 10px 0; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--primary); }
.pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
input::-ms-reveal, input::-ms-clear { display: none; }

/* Zalo: mã liên kết, các bước, nội dung xem trước (v14) */
.code-big { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 30px; font-weight: 800; letter-spacing: 4px; text-align: center; padding: 14px 10px; margin: 8px 0 4px; background: var(--surface-2); border: 1px dashed var(--primary); border-radius: 12px; color: var(--primary); user-select: all; -webkit-user-select: all; }
.steps { padding-left: 22px; margin: 6px 0 0; display: flex; flex-direction: column; gap: 12px; }
.steps li { line-height: 1.5; }
.pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px; background: var(--surface-2); padding: 10px 12px; border-radius: 10px; margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* Zalo: banner đăng ký, các bước, QR, bảng thông báo (v15) */
.zalo-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok); }
.zalo-cta-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.zalo-cta form { margin: 0; }
.btn-lg { padding: 14px 18px; font-size: 16px; }
.steps-2 .step { padding: 12px 0; border-bottom: 1px dashed var(--border); line-height: 1.5; }
.steps-2 .step:last-child { border-bottom: 0; }
.step-n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; align-items: center; justify-content: center; font-weight: 700; margin-right: 8px; font-size: 13px; }
.qr-wrap { margin-top: 10px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.qr { display: inline-block; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--border); }
.qr svg { width: 180px; height: 180px; display: block; }
.notif-table td { vertical-align: top; min-width: 150px; }
.notif-table textarea { width: 100%; min-height: 56px; font: inherit; font-size: 13.5px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); resize: vertical; }
.user-menu .menu-item .badge { font-size: 11px; padding: 2px 7px; }

/* Hồ sơ lương: ô nhập trong popup sửa từng người (danh sách dòng 2 cột .plist ở cuối tệp, 05/10/2026) */
.emp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 4px; }
.emp-fields label { margin-bottom: 4px; }
@media (max-width: 479px) { .emp-fields { grid-template-columns: 1fr; } }
.summary-strip .grow { flex: 1 1 200px; }
.filter-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.rules-general > summary { list-style: none; } .rules-general > summary::-webkit-details-marker { display: none; }

/* Chính sách lương + thưởng theo doanh thu (v17) */
.policy-card .card-title { margin-top: 6px; }
.policy-tiers .table input { width: 100%; padding: 6px 8px; }
.policy-tiers .table td { vertical-align: middle; }
.emp-form-2 { border-top: 1px dashed var(--border); padding-top: 10px; }
.form-cap { margin-bottom: 6px; font-weight: 600; }
.pos-tag { color: var(--primary); font-weight: 700; }
.money-in.num, input.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Thẻ quy tắc / quy chế (v19): nút Xem–Thu gọn trên đầu thẻ, mở ra chỉ xem, bấm Sửa mới nhập */
.rule-head { cursor: pointer; margin: 0; flex-wrap: nowrap; align-items: flex-start; }
.rule-head .rule-head-text { flex: 1 1 auto; min-width: 0; }
.rule-head .rule-toggle { flex: 0 0 auto; margin-top: 1px; }
.rule-toggle .when-open { display: none; }
details[open] > .rule-head .rule-toggle .when-open { display: inline; } details[open] > .rule-head .rule-toggle .when-closed { display: none; }
.rule-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.rule-actions .btn[hidden] { display: none !important; }
.rule-form.view-mode input:disabled:not([type=checkbox]), .rule-form.view-mode select:disabled { border-color: transparent; background: var(--surface-2); color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; cursor: default; }
.rule-form.view-mode select:disabled { appearance: none; -webkit-appearance: none; }
.rule-form.view-mode input[type=checkbox]:disabled { opacity: 1; cursor: default; }
.rule-form.view-mode input:disabled::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.rule-form.view-mode .check { cursor: default; }
/* Trang KPI (v20) */
.kpi-table input { min-width: 130px; }
.kpi-table .kpi-upd { white-space: nowrap; }
.kpi-remind .btn { vertical-align: middle; }
.rule-actions .rule-viewonly { white-space: normal; text-align: left; }
.kpi-remind-ok { margin: -4px 0 12px; }
a.kpi { text-decoration: none; }
.rev-table input { width: 100%; min-width: 118px; padding: 6px 8px; }
.rev-table .br-cell { min-width: 130px; }
.rev-table th { white-space: normal; }
.fresh-ins { display: flex; flex-direction: column; gap: 4px; }
.rev-table [data-out="fund"] { white-space: nowrap; margin-top: 4px; }
.rev-table .pct-cell { min-width: 110px; }
.rev-table td { vertical-align: middle; }
.pct-cell { display: flex; flex-direction: column; gap: 3px; min-width: 70px; }
.pct-cell b { font-variant-numeric: tabular-nums; }
.pct-cell .bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pct-cell .bar i { display: block; height: 100%; width: 0; background: var(--muted); border-radius: 3px; }
.pct-cell.ok b { color: var(--ok); } .pct-cell.ok .bar i { background: var(--ok); }
.pct-cell.warn b { color: var(--warn); } .pct-cell.warn .bar i { background: var(--warn); }
.pct-cell.bad b { color: var(--danger); } .pct-cell.bad .bar i { background: var(--danger); }
.target-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.target-strip .t-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.target-strip .t-item .pct-cell { flex-direction: row; align-items: center; gap: 8px; }
.target-strip .t-item .pct-cell .bar { flex: 1; }
/* Bảng xếp chồng thành thẻ trên điện thoại */
@media (max-width: 699px) {
  .table.stack thead { display: none; }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
  .table.stack tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; padding: 6px 10px; background: var(--surface); }
  .table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px dashed var(--border); padding: 6px 0; text-align: right; }
  .table.stack td:last-child { border-bottom: 0; }
  .table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; text-align: left; flex: 0 0 40%; }
  .table.stack td:first-child { display: block; text-align: left; }
  .table.stack td:first-child::before { content: none; }
  /* ô chữ dài (ghi chú): nhãn ở trên, chữ canh trái hết bề ngang — không dồn phải thành cột hẹp (06/10/2026) */
  .table.stack td.st-long { display: block; text-align: left; }
  .table.stack td.st-long::before { display: block; margin-bottom: 2px; }
  .table.stack td input, .table.stack .fresh-ins { max-width: 58%; min-width: 0; }
  .table.stack .fresh-ins input { max-width: none; }
  .table.stack .pct-cell { flex: 1; max-width: 58%; }
  .table.stack .fp-wrap { flex: 1; max-width: 58%; }
  .table.stack .fp-wrap .pct-cell { max-width: none; }
  .table.stack [data-out="fund"] { white-space: normal; }
  .table.stack .cv { max-width: 60%; text-align: right; }
  .card.table-wrap:has(.table.stack) { background: transparent; border: 0; box-shadow: none; padding: 0; }
}
/* Trang Doanh thu & KPI (v18) */
.pos { color: var(--ok); }
.pct-cell .bar { position: relative; overflow: visible; }
.pct-cell .bar i { max-width: 100%; }
.pct-cell .bar .pace { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--text); opacity: .55; border-radius: 1px; }
.rev-daily td, .rev-daily th { white-space: nowrap; }
.rev-daily .today-row td { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); font-weight: 600; }
.rev-table .kpi-fresh { font-size: 12.5px; }
.money-kpis .kpi { min-width: 0; }
.money-kpis .kpi b { font-size: 22px; overflow-wrap: anywhere; }
@media (max-width: 699px) { .money-kpis .kpi b { font-size: 17px; } .money-kpis .kpi { padding: 10px 11px; } }
/* KPI linh hoạt (v21): thẻ KPI, cây nhóm hàng, chọn hàng hoá, tháng kích hoạt */
.kpi-card { border-left: 4px solid var(--primary); }
.kpi-card.kpi-off { border-left-color: var(--pending); }
.kpi-card.kpi-fixed { border-left-color: var(--upcoming); }
.kpi-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 800; margin-right: 8px; flex: 0 0 auto; vertical-align: middle; }
.kpi-card.kpi-off .kpi-num { background: var(--pending); } .kpi-card.kpi-fixed .kpi-num { background: var(--upcoming); }
.kpi-card .card-title > span:first-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kpi-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin: -2px 0 10px; }
.kpi-meta b { color: var(--text); font-weight: 600; }
.kpi-tools { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 8px; }
.kpi-tools > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; color: var(--primary); }
.kpi-tools > summary::-webkit-details-marker { display: none; }
.kpi-tools .form { margin-top: 8px; }
.kpi-tools .row-form { margin: 4px 0; }
.form-cap { margin: 8px 0 6px; font-weight: 600; }
.cat-tree { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--surface); }
.cat-tree details { margin: 2px 0; }
.cat-tree summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 0; }
.cat-tree summary::-webkit-details-marker { display: none; }
.cat-tree .cat-kids { padding-left: 26px; display: flex; flex-direction: column; gap: 2px; }
.cat-tree label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin: 0; color: var(--text); cursor: pointer; }
.cat-tree .caret { width: 14px; color: var(--muted); font-size: 11px; transition: transform .15s; display: inline-block; }
.cat-tree details[open] > summary .caret { transform: rotate(90deg); }
.cat-tree input[type=checkbox]:disabled + span, .cat-tree label.dim { opacity: .55; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip-x { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; }
.chip-x button { border: 0; background: transparent; color: var(--danger); cursor: pointer; font-weight: 700; padding: 0 2px; font: inherit; }
.prod-results { border: 1px solid var(--border); border-radius: 10px; max-height: 240px; overflow: auto; background: var(--surface); margin-top: 4px; }
.prod-results button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); }
.prod-results button:hover { background: var(--surface-2); }
.prod-results .muted { font-size: 12px; }
.month-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.month-checks label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; margin: 0; color: var(--text); cursor: pointer; }
.month-checks input:checked + span { font-weight: 700; color: var(--primary); }
.kpi-mini { margin: 1px 0; white-space: normal; }
.dsw-hide { display: none !important; }
.tiers-mini { width: auto; }
.tiers-mini input { width: 130px; padding: 6px 8px; }
.tiers-mini td { vertical-align: middle; }
.btn.inline { padding: 0 4px; font-size: inherit; }
.kpi-chart-card .chart-legend { margin-top: 6px; }
@media (max-width: 699px) { .kpi-card .card-title { flex-direction: column; align-items: flex-start; } .tiers-mini input { width: 105px; } }
@media (max-width: 699px) { .tiers-mini { width: 100%; } .tiers-mini input { width: 100%; min-width: 88px; } .kpi-meta { gap: 2px 12px; } }
/* KPI v22: thẻ thu gọn (bấm mở chi tiết), popup, nút Huỷ, cột HH KPI */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
details.kpi-card { padding: 0; overflow: visible; }
details.kpi-card > .kpi-sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "num title stats chev"; gap: 6px 14px; align-items: center; padding: 12px 14px; border-radius: var(--radius); }
details.kpi-card > .kpi-sum::-webkit-details-marker { display: none; }
details.kpi-card > .kpi-sum:hover { background: var(--surface-2); }
details.kpi-card[open] > .kpi-sum { border-bottom: 1px dashed var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.kpi-sum .kpi-num { grid-area: num; margin: 0; }
.kpi-sum-title { grid-area: title; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.kpi-sum-title b { font-size: 15.5px; }
.kpi-sum-stats { grid-area: stats; display: flex; gap: 20px; }
.kpi-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 70px; }
.kpi-stat small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.kpi-stat b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-stat b.ok { color: var(--ok); } .kpi-stat b.warn { color: var(--warn); } .kpi-stat b.bad { color: var(--danger); }
.kpi-chev { grid-area: chev; color: var(--muted); font-size: 13px; transition: transform .15s; }
details.kpi-card[open] > .kpi-sum .kpi-chev { transform: rotate(180deg); }
.kpi-body { padding: 10px 14px 14px; overflow-x: auto; }
.kpi-body .kpi-meta { margin: 0 0 8px; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.panel-actions .grow { flex: 1 1 auto; }
.rule-form.view-mode .edit-only { display: none; }
.rule-form .edit-only { margin-top: 4px; }
dialog.modal { width: min(780px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0,0,0,.35); }
dialog.modal::backdrop { background: rgba(8, 14, 20, .55); }
dialog.modal > form { display: flex; flex-direction: column; max-height: calc(100vh - 34px); margin: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 16px; }
.modal-body { padding: 12px 16px; overflow: auto; flex: 1 1 auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 16px 16px; }
.modal-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.modal-x:hover { background: var(--surface-2); color: var(--text); }
.hh-cell .small { white-space: normal; max-width: 240px; margin-left: auto; }
@media (max-width: 699px) {
  details.kpi-card > .kpi-sum { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num title chev" "stats stats stats"; }
  .kpi-sum-stats { justify-content: space-between; gap: 8px; }
  .kpi-sum-stats:empty { display: none; }
  .kpi-stat { align-items: flex-start; min-width: 0; }
  .kpi-body { padding: 8px 10px 12px; }
  dialog.modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; border: 0; }
  dialog.modal > form { height: 100%; max-height: 100%; }
  .modal-foot { border-radius: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
}
.form .cat-tree label, .form .month-checks label, .form .check { flex-direction: row; text-align: left; }
.form .cat-tree label { margin: 0; color: var(--text); font-size: 13.5px; }
.form .month-checks label { margin: 0; color: var(--text); }
.month-nav { margin-left: auto; display: inline-flex; gap: 16px; white-space: nowrap; }
/* v23: nhóm Lương & KPI (tab), vòng hoàn thành + biểu đồ trên thẻ KPI, popup dự báo */
.subtabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; background: var(--surface-2); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { flex: 0 0 auto; padding: 7px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.subtabs a:hover { color: var(--text); }
.subtabs a.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
details.kpi-card > .kpi-sum { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "num title ring stats chev"; }
.kpi-sum .kpi-ring, .kpi-sum .kpi-ring-none { grid-area: ring; }
.kpi-ring { --p: 0; --t: 0; --ring: var(--muted); position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--surface-2) 0); flex: 0 0 auto; }
.kpi-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
details.kpi-card > .kpi-sum:hover .kpi-ring::before { background: var(--surface-2); }
.kpi-ring em { position: relative; font-style: normal; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kpi-ring i { position: absolute; inset: 0; transform: rotate(calc(var(--t) * 3.6deg)); pointer-events: none; }
.kpi-ring i::before { content: ''; position: absolute; left: 50%; top: -3px; width: 2px; height: 10px; margin-left: -1px; background: var(--text); opacity: .6; border-radius: 1px; }
.kpi-ring.ok { --ring: var(--ok); } .kpi-ring.ok em { color: var(--ok); }
.kpi-ring.warn { --ring: var(--warn); } .kpi-ring.warn em { color: var(--warn); }
.kpi-ring.bad { --ring: var(--danger); } .kpi-ring.bad em { color: var(--danger); }
.kpi-sum-stats { align-items: center; }
.fc-btn { padding: 5px 11px; }
.kpi-chart { position: relative; margin: 4px 0 12px; }
dialog.modal.modal-wide { width: min(1080px, calc(100vw - 24px)); }
dialog.modal > .modal-inner { display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.fc-kpis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .fc-kpis { grid-template-columns: repeat(4, 1fr); } }
.fc-chart { position: relative; height: 260px; margin: 4px 0 12px; }
.fc-table td { vertical-align: middle; }
@media (max-width: 699px) {
  details.kpi-card > .kpi-sum { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "num title ring chev" "stats stats stats stats"; }
  .kpi-ring { width: 42px; height: 42px; } .kpi-ring em { font-size: 11.5px; }
  .kpi-sum-stats { flex-wrap: wrap; row-gap: 6px; }
  .kpi-sum-stats .fc-btn { margin-left: auto; }
  dialog.modal > .modal-inner { height: 100%; max-height: 100%; }
  .fc-chart { height: 220px; }
}
/* v24: số tiền có chi tiết khi rê chuột / chạm (HH KPI, khoản tự động) */
.tip { cursor: help; border-bottom: 1px dotted var(--muted); outline: none; }
.tip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.tip-box { display: none; }
.tip-float { position: fixed; z-index: 100; display: none; width: max-content; max-width: min(380px, calc(100vw - 16px)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); padding: 8px 12px; font-size: 13px; text-align: left; pointer-events: none; }
.tip-float .tip-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 4px 0; }
.tip-float .tip-row > span { display: flex; flex-direction: column; gap: 1px; }
.tip-float .tip-row small { font-size: 11.5px; line-height: 1.35; }
.tip-float .tip-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tip-float .tip-total { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 6px; font-weight: 700; }
/* v25: thưởng phạt chờ duyệt */
.adj-table .row-pending td { background: color-mix(in srgb, var(--pending) 7%, transparent); }
.adj-table .row-rejected td { opacity: .65; }
.adj-actions { white-space: nowrap; text-align: right; }
.adj-actions form.inline { display: inline; }
.adj-who { font-weight: 600; margin-bottom: 8px; }
.modal-foot .grow { flex: 1 1 auto; align-self: center; }
.subtabs .nav-count { margin-left: 6px; }
@media (max-width: 699px) { .adj-actions { white-space: normal; text-align: left; } .adj-actions .btn { margin: 2px 0; } }
/* v26: form tài khoản + hồ sơ nhân viên đầy đủ, nhóm Zalo, tin nhắn mẫu */
.acc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.acc-form fieldset[disabled] input, .acc-form fieldset[disabled] select { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.acc-form .grid-2, .acc-form .grid-3 { margin-bottom: 10px; }
.acc-form .grid-2 > label, .acc-form .grid-3 > label { margin-bottom: 0; }
.acc-form .mode-pick .btn { flex: 0 1 auto; }
.form-actions { margin: 4px 0 24px; }
.tpl-grid { display: grid; grid-template-columns: 1fr; gap: 10px 14px; }
@media (min-width: 900px) { .tpl-grid { grid-template-columns: 1fr 1fr; } }
.tpl-grid label { margin-bottom: 0; }
.tpl-grid textarea { font-size: 13px; line-height: 1.45; }
.tpl-vars code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 6px; margin-right: 2px; }
/* 13/10/2026: hướng dẫn biến + xem trước từng tin nhắn mẫu (bấm Xem mới mở) */
.tpl-item { display: flex; flex-direction: column; gap: 4px; }
.tpl-help > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--primary); width: max-content; }
.tpl-help > summary::-webkit-details-marker { display: none; }
.tpl-help[open] { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.tpl-vt { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0; }
.tpl-vt td { padding: 4px 6px; border-bottom: 1px dashed var(--border); vertical-align: top; }
.tpl-vt code { font-size: 12px; background: var(--surface); padding: 1px 5px; border-radius: 6px; white-space: nowrap; }
.tpl-prev { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.45; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 4px 0 0; max-height: 220px; overflow: auto; }
.group-row td { vertical-align: top; }
.code-inline { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .06em; font-size: 18px; }
/* v27: trang Thông báo Zalo chia tab + hạn mức gói */
@media (min-width: 700px) { .kpis.zalo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zalo-kpis .kpi-txt { font-size: 18px; overflow-wrap: anywhere; }
.kpi .meter { display: block; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.kpi .meter i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.kpi.warn .meter i { background: var(--warn); } .kpi.danger .meter i { background: var(--danger); }
.kpi.danger { border-left-color: var(--danger); }
.subtabs a small { font-weight: 500; }
.group-card { border-bottom: 1px solid var(--border); }
.group-card:last-child { border-bottom: 0; }
.group-card > summary { cursor: pointer; list-style: none; }
.group-card > summary::-webkit-details-marker, .tpl-sec > summary::-webkit-details-marker { display: none; }
.group-card[open] > summary b { color: var(--primary); }
.group-form { padding: 4px 0 14px; }
.tpl-sec { border-top: 1px solid var(--border); padding: 8px 0; }
.tpl-sec > summary { cursor: pointer; list-style: none; margin: 0; }
.tpl-sec > summary::before { content: '▸ '; color: var(--muted); }
.tpl-sec[open] > summary::before { content: '▾ '; }
.tpl-sec[open] > summary { margin-bottom: 8px; }

/* Khoá kỳ lương (v28) */
.nowrap { white-space: nowrap; }
.ky-card .card-title > span:first-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* v29: rà soát responsive — thanh trên máy nhỏ, thanh tab trên điện thoại */
@media (max-width: 479px) { .topbar .theme-btn .lbl { display: none; } .topbar .theme-btn { width: 34px; padding: 0; justify-content: center; } }
@media (max-width: 359px) { .user-sum .caret { display: none; } .topbar { gap: 6px; padding: 6px 8px; } .wordmark-img { height: 12px; } }
@media (max-width: 699px) {
  .subtabs { flex-wrap: wrap; }
  .subtabs a { flex: 1 0 auto; padding: 7px 10px; font-size: 13.5px; text-align: center; }
}
/* Menu trên: mục không đủ chỗ dồn vào "Thêm ▾" (app.js đo lại khi đổi cỡ màn hình) */
.nav-more { position: relative; flex: 0 0 auto; }
.nav-more > summary { list-style: none; display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 10px; color: rgba(255,255,255,.85); font-weight: 500; cursor: pointer; white-space: nowrap; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary .caret { font-size: 11px; opacity: .8; }
.nav-more > summary:hover, .nav-more[open] > summary, .nav-more.active > summary { background: #fff; color: var(--primary-2); }
.nav-more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: flex; flex-direction: column; min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.nav-more-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text); font-weight: 500; white-space: nowrap; }
.nav-more-menu a:hover { background: var(--surface-2); }
.nav-more-menu a.active { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); font-weight: 700; }
@media (min-width: 1024px) and (max-width: 1279px) { .topbar .theme-btn .lbl { display: none; } .topbar .theme-btn { width: 34px; padding: 0; justify-content: center; } }
/* Bảng xếp chồng dạng khối (ô nhiều dòng: nhãn ở trên, nội dung ở dưới) */
@media (max-width: 699px) {
  .table.stack.stack-block td { display: block; text-align: left; }
  .table.stack.stack-block td::before { display: block; margin-bottom: 4px; font-weight: 600; }
}
/* Bảng số liệu rộng (cuộn ngang trên điện thoại): ghim cột đầu + tiêu đề thẻ; left âm = phần đệm 14px của thẻ để cột ghim sát mép, chữ cột khác không lộ ra */
.table.sticky-col tr > :first-child { --sc-bg: var(--surface); position: sticky; left: -14px; z-index: 1; background: var(--sc-bg); box-shadow: 1px 0 0 var(--border); }
.table.sticky-col .total > :first-child { --sc-bg: var(--surface-2); }
/* cột tên (chi nhánh / nhân viên) không bị ép còn 1 chữ mỗi dòng trên màn hẹp — bảng cuộn ngang thay vì bóp cột (06/10/2026) */
.table.sticky-col tr > :first-child { min-width: 128px; }
@media (max-width: 699px) { .table.sticky-col:not(.stack) tr > :first-child { min-width: 112px; max-width: 46vw; } .table.stack.sticky-col tr > :first-child { min-width: 0; } }
.rev-daily.sticky-col .today-row > td:first-child { --sc-bg: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.card.table-wrap > .card-title, .card:has(> .table.sticky-col) > .card-title { position: sticky; left: 0; }

/* Nút chọn kiểu xem (Tháng / Tuần) */
.peek-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 8px 10px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 12px; }
.peek-note { color: var(--muted); }
.peek-pick { margin-left: auto; }
.peek-pick select { min-width: 220px; max-width: 100%; }
@media (max-width: 600px) { .peek-pick { margin-left: 0; width: 100%; } .peek-pick select { width: 100%; } }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 10px; }
.seg a { padding: 6px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.seg a.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

/* Lịch làm việc dạng tháng (01/10/2026): ô ngày tô màu theo tình trạng + ký hiệu ca, bấm xem chi tiết */
:root { --absent: #b91c1c; }
.mcal .mcal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 17px; }
.mcal-nav { font-size: 20px; line-height: 1; padding: 4px 12px; color: var(--accent); }
.mcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mcal-wd { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 0 4px; letter-spacing: .3px; }
.mcal-wd.sun { color: var(--accent); }
.mcal-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; padding: 4px 2px; border: 0; border-radius: 8px; font: inherit; cursor: pointer; background: var(--off-bg); color: var(--muted); position: relative; }
.mcal-cell.blank { background: transparent; cursor: default; }
.mcal-cell .d { font-weight: 700; font-size: 15px; line-height: 1.1; }
.mcal-cell .io { display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
.mcal-cell .bal { font-size: 10.5px; font-weight: 700; line-height: 1.25; padding: 0 4px; border-radius: 4px; white-space: nowrap; margin-top: 1px; font-variant-numeric: tabular-nums; }
.mcal-cell .bal.b-neg, .mcal-cell .bal.b-pos, .mcal-cell .bal.b-absent { background: rgba(0,0,0,.24); }
.mcal-cell.s-off .bal, .mcal-cell.s-none .bal { background: var(--surface); color: var(--text); }
.mcal-cell .pend, .chip-io .pend { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 1.5px rgba(0,0,0,.28); }
.chip-io .pend { position: static; display: inline-block; vertical-align: middle; margin-left: 4px; width: 7px; height: 7px; }
.pend-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 1.5px rgba(0,0,0,.28); margin-right: 6px; vertical-align: middle; }
.mcal-io-note { margin-top: 6px; color: var(--muted); }
.badge.bal-badge { background: var(--surface-2); color: var(--text); } .badge.bal-badge.b-ok { background: var(--ok-bg); color: var(--okt-fg); } .badge.bal-badge.b-neg, .badge.bal-badge.b-absent { background: var(--danger-bg); color: var(--neg-fg); } .badge.bal-badge.b-pos { background: var(--late-bg); color: var(--pos-fg); }
.bal-t { font-weight: 600; } .bal-t.b-ok { color: var(--okt-fg); } .bal-t.b-neg { color: var(--neg-fg); } .bal-t.b-pos { color: var(--pos-fg); }
.chip-io { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .95; white-space: nowrap; }
.chip-io b.b-neg { color: #b42318; } .chip-io b.b-pos { color: #6d28d9; }
.chip-emp .chip-io { display: block; font-weight: 500; } .chip-emp .chip-io b.b-neg { color: var(--neg-fg); } .chip-emp .chip-io b.b-pos { color: var(--pos-fg); }
.mcal-cell .io .miss { background: rgba(0,0,0,.28); border-radius: 3px; padding: 0 2px; letter-spacing: .3px; }
:root { --neg-fg: #b42318; --pos-fg: #6d28d9; --okt-fg: #15803d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --neg-fg: #ff8a80; --pos-fg: #c4b5fd; --okt-fg: #4ade80; } }
:root[data-theme="dark"] { --neg-fg: #ff8a80; --pos-fg: #c4b5fd; --okt-fg: #4ade80; }
.mcal-daymode { color: var(--text); }
/* Bảng công chi nhánh: ô như lịch tháng */
.matrix td.mx-td { padding: 2px; min-width: 54px; vertical-align: top; }
.mx-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 50px; padding: 3px 2px; border-radius: 6px; background: var(--off-bg); color: var(--muted); line-height: 1.15; text-decoration: none; }
.mx-cell:hover { filter: brightness(1.06); text-decoration: none; }
.mx-cell .code { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mx-cell:has(.pend) .code { padding: 0 7px; }
.mx-cell .io { display: flex; flex-direction: column; align-items: center; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-cell .io .miss { background: rgba(0,0,0,.28); border-radius: 3px; padding: 0 2px; }
.mx-cell .bal { font-size: 10px; font-weight: 700; padding: 0 3px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mx-cell .bal.b-neg, .mx-cell .bal.b-pos, .mx-cell .bal.b-absent { background: rgba(0,0,0,.24); }
.mx-cell.s-off .bal, .mx-cell.s-none .bal { background: var(--surface); color: var(--text); }
.mx-cell .pend { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 1.5px rgba(0,0,0,.28); }
.mx-cell.today { outline: 2px solid var(--text); outline-offset: 1px; }
.matrix td .mx-short { display: block; font-weight: 600; }
.mcal-legend .sw.s-off { border: 1px solid var(--border); }
.shift-notes.muted { color: var(--muted); }
@media (max-width: 640px) {
  .matrix .sticky { min-width: 104px; width: 112px; max-width: 112px; white-space: normal; font-size: 12px; line-height: 1.25; } /* min-width: trước 0 → cột tên bị bóp còn ~50px (06/10/2026) */
  .matrix .sticky b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
}
.mx-legend { margin: 0 0 6px; padding-top: 0; border-top: 0; }
.mx-note { margin: 0 0 10px; }
.shift-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
@media (min-width: 640px) { .mcal-cell .io { flex-direction: row; font-size: 11px; } .mcal-cell .io span + span::before { content: '–'; margin: 0 2px; } .mcal-cell .bal { font-size: 11px; } }
.mcal-cell .code { font-size: 12.5px; font-weight: 600; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcal-cell:not(.blank):hover { filter: brightness(1.06); }
.mcal-cell.today::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: currentColor; opacity: .85; }
.mcal-cell.today { padding-bottom: 9px; } /* chừa chỗ cho vạch hôm nay, không che dòng Đủ / thiếu */
.mcal-cell.sel { outline: 3px solid var(--text); outline-offset: 1px; }
.s-ok { background: var(--ok); color: #fff; } .s-late { background: var(--warn); color: #fff; } .s-missing { background: var(--pending); color: #fff; }
.s-absent { background: var(--absent); color: #fff; } .s-sched { background: var(--upcoming); color: #fff; } .s-working { background: var(--working); color: #fff; }
.s-leave { background: var(--late); color: #fff; } .s-off, .s-none { background: var(--off-bg); color: var(--muted); }
.mcal-cell.s-none .code { font-weight: 500; }
.mcal-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.mcal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mcal-legend .sw { display: inline-block; width: 26px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.mcal-legend .sw.s-none { border: 1px solid var(--border); }
.mcal-codes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; }
.mcal-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.badge.mcal-badge { color: #fff; } .badge.mcal-badge.s-off, .badge.mcal-badge.s-none { color: var(--muted); }
.mcal-extra { margin: -4px 0 10px; padding: 6px 10px; background: var(--surface-2); border-radius: 8px; }
.mcal-leave { border-bottom: 0; }
@media (max-width: 380px) { .mcal-grid { gap: 3px; } .mcal-cell { min-height: 48px; } .mcal-cell .d { font-size: 14px; } .mcal-cell .code { font-size: 11px; } .mcal-cell .io { font-size: 9.5px; } .mcal-cell .bal { font-size: 9.5px; padding: 0 2px; } .mcal-cell .pend { top: 3px; right: 3px; width: 7px; height: 7px; } .mcal-legend { grid-template-columns: 1fr 1fr; } }
@media (max-width: 340px) { .mcal-cell .io, .mcal-cell .bal { font-size: 8.5px; letter-spacing: -.2px; } .mcal-cell .bal { padding: 0 1px; } .mcal-cell .pend { top: 2px; right: 2px; width: 6px; height: 6px; } }
@media (min-width: 900px) { .mcal-cell { min-height: 64px; } .mcal-cell .d { font-size: 16px; } }

/* Phép năm, người phụ thuộc */
.leave-card .lv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.leave-card .lv-stats div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.leave-card .lv-stats small { display: block; color: var(--muted); }
.leave-card .lv-stats b { font-size: 20px; }
@media (max-width: 480px) { .leave-card .lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dòng "Phép năm còn lại" ở tab Lịch làm việc / Đăng ký lịch (06/10/2026) */
.lv-line { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 10px; font-size: 14px; }
.lv-line.lv-empty { border-left-color: var(--muted); }
.lv-ic { flex: 0 0 auto; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.lv-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lv-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lv-main b { font-size: 17px; }
.lv-sub { font-size: 12.5px; }
.lv-go { flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) { .lv-line { padding: 8px 10px; gap: 8px; } .lv-txt { flex-direction: column; align-items: flex-start; } }
.lb-input { width: 80px; text-align: right; }
.dep-list .row-item { grid-template-columns: 1fr auto; }
.extra-day { margin-top: 10px; }
.extra-day > .card-title { font-size: 14px; }

/* logo sáng / tối */
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none !important; } :root:not([data-theme="light"]) .logo-dark { display: block !important; } }
:root[data-theme="dark"] .logo-light { display: none !important; } :root[data-theme="dark"] .logo-dark { display: block !important; }
/* Trang đăng nhập: logo ngang mới trên thẻ trắng */
.login-logo-full { display: block; width: 100%; max-width: 300px; height: auto; margin: 4px auto 6px; }

/* ===== module: sysmon (01/10/2026) ===== */
/* Hệ thống › Máy chủ (giám sát VPS, chỉ Quản trị) — views/pages/admin/system.ejs */
.sys-head-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--ok-bg); color: var(--ok); }
.sys-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sys-live.lv-ok i { animation: sys-pulse 2s ease-in-out infinite; }
.sys-live.lv-warn { background: var(--warn-bg); color: var(--warn); }
.sys-live.lv-danger { background: var(--danger-bg); color: var(--danger); }
@keyframes sys-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sys-live.lv-ok i { animation: none; } }
#sysRefresh.is-busy { opacity: .55; pointer-events: none; }
.sys-updated { margin: -6px 0 10px; }
.sys-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sys-al { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; border-left: 4px solid var(--upcoming); background: var(--upcoming-bg); font-size: 13.5px; }
.sys-al b { color: var(--upcoming); }
.sys-al span { color: var(--text); opacity: .8; font-size: 12.5px; overflow-wrap: anywhere; }
.sys-al.lv-danger { border-left-color: var(--danger); background: var(--danger-bg); } .sys-al.lv-danger b { color: var(--danger); }
.sys-al.lv-warn { border-left-color: var(--warn); background: var(--warn-bg); } .sys-al.lv-warn b { color: var(--warn); }
.sys-al.lv-ok { border-left-color: var(--ok); background: var(--ok-bg); } .sys-al.lv-ok b { color: var(--ok); }
.sys-tiles .kpi { min-width: 0; }
.sys-tiles .kpi b { font-size: 22px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sys-tiles .kpi small { line-height: 1.35; }
@media (max-width: 699px) { .sys-tiles .kpi b { font-size: 18px; } .sys-tiles .kpi { padding: 10px 11px; } }
.sys-chart-card .card-title small { font-weight: 500; }
.sys-chart { position: relative; height: 240px; }
@media (max-width: 699px) { .sys-chart { height: 210px; } }
.sys-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.sys-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--ok); transition: width .4s; }
.sys-bar.lv-warn i { background: var(--warn); } .sys-bar.lv-danger i { background: var(--danger); }
.sys-disk { display: flex; flex-direction: column; gap: 5px; padding: 2px 0 10px; }
.sys-disk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sys-disk-h > span { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.sys-sub-title { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.sys-cap { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.sys-page .stat-row { gap: 4px 10px; align-items: center; flex-wrap: wrap; }
.sys-page .stat-row > b { margin-left: auto; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sys-ct td { vertical-align: middle; }
.sys-ct-name small { display: block; overflow-wrap: anywhere; }
.sys-mem { display: flex; flex-direction: column; gap: 4px; min-width: 120px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sys-tbl code { font-size: 12px; overflow-wrap: anywhere; }
.sys-cap-note { font-weight: 500; text-transform: none; letter-spacing: 0; }
.sys-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.sys-counts div { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.sys-counts span { font-size: 12px; color: var(--muted); }
.sys-counts b { font-variant-numeric: tabular-nums; }
.sys-info { display: grid; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 700px) { .sys-info { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.sys-info div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); min-width: 0; }
.sys-info dt { color: var(--muted); flex: 0 0 auto; }
.sys-info dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.sys-errs summary { cursor: pointer; font-weight: 600; color: var(--warn); }
.sys-errs ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.sys-note { margin: 4px 0 0; }
@media (max-width: 699px) {
  /* container trên điện thoại: dòng 1 tên + trạng thái, dòng 2 CPU + RAM */
  .sys-ct thead { display: none; }
  .sys-ct, .sys-ct tbody { display: block; width: 100%; }
  .sys-ct tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .sys-ct tr:last-child { border-bottom: 0; }
  .table.sys-ct td { display: block; padding: 0; border: 0; }
  .sys-ct .sys-ct-st { text-align: right; }
  .sys-ct .sys-ct-cpu { text-align: left; align-self: start; }
  .sys-ct .sys-ct-cpu::before, .sys-ct .sys-mem > span:first-child::before { content: attr(data-label) " "; color: var(--muted); font-size: 12.5px; }
  .sys-ct .sys-mem > span:first-child::before { content: "RAM "; }
  .sys-ct .sys-mem { min-width: 0; width: 150px; text-align: right; }
  .sys-hide-m { display: none; }
  .sys-page .stat-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
}
@media (min-width: 1000px) { .grid-2.sys-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }

/* ===== module: attendance (01/10/2026) ===== */
/* Chấm công web (01/10/2026): /cham-cong, /cham-cong/sinh-trac, /ql/cham-cong-web, /cai-dat/cham-cong-web */
.att-page .btn svg, .att-big svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
/* Đang dùng KiotViet / chưa gắn nhân viên */
.att-off { text-align: center; padding: 28px 18px; }
.att-off-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); color: var(--primary); margin-bottom: 8px; }
.att-off-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.att-off h2 { font-size: 18px; margin: 4px 0 6px; }
.att-off p { max-width: 460px; margin: 0 auto 14px; }
.att-off-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Khối chấm công chính */
.att-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 14px; }
.att-clock { display: flex; flex-direction: column; line-height: 1.1; }
.att-clock b { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.att-clock span { color: var(--muted); font-size: 13px; margin-top: 4px; }
.att-where { display: inline-flex; align-items: flex-start; gap: 6px; text-align: left; }
.att-where svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.att-where span { display: flex; flex-direction: column; gap: 2px; }
.att-where .badge { align-self: flex-start; }
.att-shift-now { font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); }
.att-big { width: 100%; max-width: 360px; min-height: 60px; font-size: 18px; border-radius: 16px; gap: 10px; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 30%, transparent); }
.att-big svg { width: 24px; height: 24px; }
.att-big.att-out { background: var(--upcoming); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--upcoming) 30%, transparent); }
.att-big.att-out:hover { filter: brightness(1.08); }
.att-switch { margin-top: -4px; }
.att-need { margin: 0; text-align: left; max-width: 420px; }
.att-last { font-size: 13px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 10px; width: 100%; }
.att-last b { color: var(--text); }
.att-hist .row-sub { overflow-wrap: anywhere; }
/* Cửa sổ camera (điện thoại: toàn màn hình theo dialog.modal) */
dialog.att-modal { width: min(520px, calc(100vw - 24px)); }
.att-cam { display: flex; flex-direction: column; max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); }
.att-frame { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 56vh; max-height: 56dvh; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #0b0f13; display: grid; place-items: center; }
.att-frame video, .att-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-frame video { transform: scaleX(-1); } /* xem trước như soi gương; ảnh gửi đi không lật */
.att-frame video[hidden], .att-frame img[hidden] { display: none; }
.att-frame-msg { position: absolute; inset: auto 10px 10px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 13.5px; text-align: center; }
.att-frame-msg[hidden] { display: none; }
.att-geo { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.att-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.att-geo[data-state="wait"] .att-dot { background: var(--upcoming); animation: att-pulse 1s ease-in-out infinite; }
.att-geo[data-state="ok"] { background: var(--ok-bg); color: var(--ok); } .att-geo[data-state="ok"] .att-dot { background: var(--ok); }
.att-geo[data-state="warn"] { background: var(--warn-bg); color: var(--warn); } .att-geo[data-state="warn"] .att-dot { background: var(--warn); }
.att-geo[data-state="bad"] { background: var(--danger-bg); color: var(--danger); } .att-geo[data-state="bad"] .att-dot { background: var(--danger); }
@keyframes att-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .att-geo[data-state="wait"] .att-dot { animation: none; } }
.att-result { margin-top: 10px; padding: 14px; border-radius: 12px; text-align: center; }
.att-result[hidden] { display: none; }
.att-result b { display: block; font-size: 17px; }
.att-result p { margin: 6px 0 0; font-size: 14px; }
.att-result.ok { background: var(--ok-bg); color: var(--ok); } .att-result.warn { background: var(--pending-bg); color: var(--pending); } .att-result.bad { background: var(--danger-bg); color: var(--danger); }
.att-result .att-flags { color: var(--text); font-size: 13px; }
.att-result .btn { margin-top: 10px; }
.att-big-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 24px; font-weight: 800; }
.att-result.warn .att-big-ico { background: var(--pending); }
.att-cam .modal-foot .btn[hidden] { display: none; }
@media (max-width: 699px) { .att-cam { height: 100%; max-height: 100%; } .att-frame { max-height: 52vh; max-height: 52dvh; } }
/* Vân tay / Face ID */
.att-steps { margin: 0 0 8px; padding-left: 20px; } .att-steps li { margin: 4px 0; }
.att-label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); }
.att-dev { grid-template-columns: 1fr auto; }
.att-dev > form { grid-area: badge; }
.att-this[hidden] { display: none; }
/* Duyệt chấm công web */
.att-day { display: flex; align-items: center; gap: 2px; }
.att-day input { min-width: 0; }
.att-day .btn { padding: 6px 8px; font-size: 18px; line-height: 1; }
.filter-bar .att-only { flex: 0 0 auto; align-self: center; margin: 0; color: var(--text); font-size: 13.5px; }
.summary-strip .att-all { display: flex; justify-content: flex-end; }
.att-thumb { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; width: 56px; height: 56px; }
.att-thumb img { width: 56px; height: 56px; object-fit: cover; display: block; background: var(--surface-2); }
.att-table td { vertical-align: middle; }
.att-cv .att-thumb { margin-left: auto; }
.att-cv b { white-space: nowrap; }
.att-table .att-row.st-flagged > td:first-child { box-shadow: inset 3px 0 0 var(--pending); }
.att-table .att-row.st-rejected { opacity: .72; }
.att-yes { color: var(--ok); font-weight: 600; } .att-no { color: var(--danger); font-weight: 600; }
.att-flag-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; color: var(--warn); }
.att-act { white-space: nowrap; }
.att-act form + form { margin-left: 4px; }
dialog.att-photo-dlg { width: min(560px, calc(100vw - 24px)); }
.att-photo-dlg .modal-body { display: grid; place-items: center; background: #0b0f13; }
.att-photo-dlg img { max-width: 100%; max-height: 72vh; border-radius: 8px; display: block; }
@media (max-width: 699px) {
  .att-table .att-row.st-flagged { border-left: 4px solid var(--pending); }
  .att-table .att-row.st-flagged > td:first-child { box-shadow: none; }
  .att-table td.att-act { justify-content: flex-end; }
  .att-table td.att-act::before { content: none; }
  .att-table td .att-flag-list { align-items: flex-end; }
  .att-table .att-cv { max-width: 64%; }
}
/* Cài đặt */
.att-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.att-switch-row { align-items: flex-start !important; gap: 10px; color: var(--text); margin: 0; }
.att-switch-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); }
.att-warn { margin-bottom: 10px; }
.att-br-table input { min-width: 90px; }
.att-ll { display: flex; gap: 6px; min-width: 220px; }
.att-ll input { flex: 1 1 0; min-width: 0 !important; }
.att-br-table input.att-r { width: 90px; }
.att-br-table select { min-width: 110px; }
.att-br-act { white-space: nowrap; }
.att-here-msg { display: block; white-space: normal; max-width: 260px; margin-top: 4px; }
.att-here-msg:empty { display: none; }
@media (max-width: 699px) {
  .att-br-table td.att-br-act { flex-wrap: wrap; justify-content: flex-end; }
  .att-br-table td.att-br-act::before { content: none; }
  .att-br-table input.att-r { width: auto; }
  .att-br-table td .att-ll { flex: 0 1 64%; min-width: 0; }
  .table.stack td .att-ll input { max-width: none; }
  .att-here-msg { max-width: none; text-align: right; }
}

/* ===== module: personal-kpi (01/10/2026) ===== */
/* KPI cá nhân (sql/38): bảng /ql/kpi-ca-nhan + cấu hình /cai-dat/kpi-ca-nhan */
.pk-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--text); }
.pk-banner-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warn); color: #fff; font-size: 14px; flex: 0 0 auto; }
.pk-banner-text { flex: 1 1 220px; min-width: 0; }
.pk-banner-text b { color: var(--warn); }
.pk-banner-text .small { color: var(--muted); margin-top: 2px; }
.pk-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pk-tools .filter-input { flex: 1 1 220px; max-width: 360px; }
.pk-card { border-left: 4px solid var(--primary); }
.pk-head { margin-bottom: 10px; }
.pk-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; }
.pk-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 2px; font-size: 13px; color: var(--muted); }
.pk-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.pk-meta b.ok { color: var(--ok); } .pk-meta b.warn { color: var(--warn); } .pk-meta b.bad { color: var(--danger); }
.pk-table td { vertical-align: middle; }
.pk-table .pk-in { width: 100%; min-width: 120px; padding: 6px 8px; text-align: right; }
.pk-table .pk-note input { min-width: 140px; padding: 6px 8px; }
.pk-table .pct-cell { min-width: 100px; }
.pk-upd { white-space: nowrap; }
.pk-foot { margin: 10px 0 0; }
@media (max-width: 699px) {
  .pk-table .pk-in { min-width: 0; }
  .pk-table .pk-note input { min-width: 0; max-width: 58%; }
  .pk-table .pk-note > span { text-align: right; }
  .pk-tools .filter-input { max-width: none; }
}
.pk-switch { align-items: flex-start !important; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text) !important; margin-bottom: 10px; }
.pk-switch input { margin-top: 3px; }
.pk-switch > span { display: flex; flex-direction: column; gap: 2px; }
.pk-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); }
.checks .pk-soon { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); cursor: not-allowed; }
.pk-fake-radio { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface-2); flex: 0 0 auto; }
.pk-cap { margin: 2px 0 6px; }
.pk-branches { margin-bottom: 10px; }
.pk-sort input { max-width: 140px; }
.pk-def { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; margin-bottom: 10px; background: var(--surface); }
.pk-def.pk-def-off { border-left-color: var(--off); }
.pk-def.pk-def-off .pk-def-name b { color: var(--muted); }
.pk-def-sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chev" "meta meta"; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; }
.pk-def-sum::-webkit-details-marker { display: none; }
.pk-def-sum:hover { background: var(--surface-2); }
.pk-def[open] > .pk-def-sum { border-bottom: 1px dashed var(--border); border-radius: 12px 12px 0 0; }
.pk-def-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pk-def-meta { grid-area: meta; }
.pk-def-sum .kpi-chev { grid-area: chev; transition: transform .15s; }
.pk-def[open] > .pk-def-sum .kpi-chev { transform: rotate(180deg); }
.pk-def > form.pk-def-form { padding: 12px 12px 0; }
.pk-def-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 12px; }
.pk-help ul { margin: 0; padding-left: 18px; color: var(--muted); }
.pk-help li { margin: 3px 0; }

/* ===== module: settings (01/10/2026) ===== */
/* ===== Cài đặt (/cai-dat, views/pages/settings) — tiền tố set- ===== */
.set-search { max-width: 280px; }
@media (max-width: 699px) { .set-search { max-width: none; } .set-page .page-head > div { flex: 1 1 100%; } }
.set-jump { margin-bottom: 4px; }
.set-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1000px) { .set-layout { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; } .set-aside { position: sticky; top: 64px; } }
.set-group { scroll-margin-top: 70px; }
.set-group[hidden], .set-card[hidden], .set-flat[hidden] { display: none !important; }
.set-gtitle { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 16px 0 8px; }
.set-gtitle h2 { font-size: 16px; margin: 0; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.set-card { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 10px 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); transition: border-color .15s; }
a.set-card:hover { border-color: var(--primary); }
a.set-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.set-card.is-soon { opacity: .75; cursor: default; box-shadow: none; border-style: dashed; }
.set-ico { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--ok-bg); color: var(--primary); }
.set-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.set-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-name { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.set-name .badge { font-size: 11px; padding: 2px 7px; }
.set-desc { font-size: 12.5px; color: var(--muted); }
.set-sum { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.set-desc + .set-sum { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); }
.set-go { flex: 0 0 auto; align-self: center; font-size: 22px; line-height: 1; color: var(--muted); }
a.set-card:hover .set-go { color: var(--primary); }
.set-aside .card { margin-bottom: 12px; }
.set-note p { margin: 0 0 12px; }
.set-crumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.set-crumb a { color: var(--muted); }
.set-crumb a:hover { color: var(--primary); }
.set-crumb span { color: var(--text); }
.set-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; align-items: start; }
@media (min-width: 1000px) { .set-two { grid-template-columns: minmax(0, 1fr) 360px; } }
.set-form textarea { resize: vertical; min-height: 70px; }
.set-form.view-mode textarea:disabled { border-color: transparent; background: var(--surface-2); color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; resize: none; }
.set-form.view-mode textarea:disabled::placeholder { color: transparent; -webkit-text-fill-color: transparent; }
.set-warn { color: var(--warn); }
.set-block { display: block; margin-top: 2px; }
.set-off td { opacity: .65; }
.set-wrap { overflow-wrap: anywhere; text-align: right; }
.set-hint { margin: -2px 0 10px; }
/* xem trước đầu phiếu lương */
.set-slip { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface); }
.set-slip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-slip-head img { height: 30px; width: auto; max-width: 58%; }
.set-logo-dark { display: none; }
:root[data-theme="dark"] .set-logo-light { display: none; }
:root[data-theme="dark"] .set-logo-dark { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .set-logo-light { display: none; } :root:not([data-theme="light"]) .set-logo-dark { display: inline; } }
.set-slip-title { text-align: right; }
.set-slip-title b { display: block; font-size: 15px; letter-spacing: .5px; }
.set-slip-title small { color: var(--muted); }
.set-slip-co { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); }
.set-slip-co b { font-size: 13.5px; }
.set-slip-co small { color: var(--muted); font-size: 11.5px; }
.set-slip-lines { display: grid; gap: 6px; padding: 10px 0; }
.set-slip-lines i { display: block; height: 7px; border-radius: 4px; background: var(--surface-2); }
.set-slip-lines i:nth-child(2) { width: 80%; }
.set-slip-lines i:nth-child(3) { width: 60%; }
.set-slip-foot { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--muted); }
.set-pre { white-space: pre-line; }
/* bảng chi nhánh, ca làm việc, biểu thuế */
.set-branch-table td, .set-shift-table td, .set-brackets td { vertical-align: middle; }
.set-branch-table input:not([type=time]) { min-width: 120px; }
.set-branch-table td:first-child, .att-br-table td:first-child { min-width: 170px; } /* máy tính bảng: cột tên chi nhánh không bị ô nhập ép còn 1 chữ / dòng (06/10/2026) */
.set-time { display: inline-flex; align-items: center; gap: 4px; }
.set-time input { width: 104px; padding: 7px 6px; }
.set-unit { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.set-unit input { width: 78px; padding: 6px 8px; text-align: right; }
.set-code { width: 76px; padding: 6px 8px; }
.set-chip { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 7px; background: var(--ok-bg); color: var(--primary); font-weight: 700; font-size: 12.5px; text-align: center; }
.set-brackets input.money-in { min-width: 120px; }
.set-brackets .set-unit input { width: 64px; }
.set-top td { background: var(--surface-2); }
.card-title .edit-only { margin-left: auto; }
@media (max-width: 699px) {
  .set-branch-table input:not([type=time]) { min-width: 0; }
  .table.stack td.set-td-time { flex-wrap: wrap; }
  .table.stack td.set-td-time::before { flex: 1 1 100%; }
  .table.stack td .set-time { display: flex; width: 100%; }
  .table.stack td .set-time input { max-width: none; width: auto; flex: 1 1 0; min-width: 0; }
  .table.stack td .set-unit input { max-width: 90px; }
  .set-brackets input.money-in { min-width: 0; }
}
/* thử tính thuế */
.set-calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.set-calc-in label { margin-bottom: 8px; }
@media (max-width: 380px) { .set-calc-in { grid-template-columns: 1fr; } }
.set-calc-rows { margin: 6px 0; }
.set-total b { color: var(--primary); font-size: 17px; }
/* nhãn "tắt / ẩn" đang dùng ở rules.ejs và views/pages/kpi/* nhưng app.css chưa có (không bắt buộc cho module này) */
.badge.st-void { background: var(--off-bg); color: var(--off); }

/* ===== module: income (01/10/2026) ===== */
/* Thu nhập của tôi (01/10/2026): số tạm tính gọn, thử thách săn tiền (thanh tiến độ màu), chương trình thưởng */
.ic .page-head { align-items: center; }
.ic-month { flex-wrap: nowrap; }
.ic-month input[type="month"] { width: 172px; }
.ic-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; overflow: visible; }
.ic-pick label { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; margin: 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.ic-pick select { flex: 1; min-width: 0; }
.card.ic-hero { padding: 0; overflow: hidden; }
.ic-top { padding: 16px 16px 14px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: var(--on-primary); }
.ic-top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.ic-chip { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ic-net { font-size: 34px; font-weight: 800; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; overflow-wrap: anywhere; }
.ic-net small { font-size: 18px; font-weight: 700; margin-left: 2px; }
.ic-top-note { font-size: 12.5px; opacity: .9; margin-top: 2px; }
.ic-rows { padding: 2px 14px; }
.ic-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.ic-row:last-child { border-bottom: 0; }
.ic-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--muted); }
.ic-dot.d-primary { background: var(--primary); } .ic-dot.d-upcoming { background: var(--upcoming); } .ic-dot.d-late { background: var(--late); }
.ic-dot.d-ok { background: var(--ok); } .ic-dot.d-danger { background: var(--danger); }
.ic-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-row-main small { color: var(--muted); }
.ic-row-main .ic-note { color: var(--pending); }
.ic-amt { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-meter { display: block; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 3px; max-width: 220px; }
.ic-meter i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.ic-actions { padding: 0 14px 14px; }
/* Thử thách săn tiền: thanh bo tròn, số nằm giữa thanh (lớp chữ trắng cắt theo phần đã đạt) */
.ic-c0 { --c: var(--late); } .ic-c1 { --c: var(--ok); } .ic-c2 { --c: var(--warn); }
.ic-hunt .card-title, .ic-progs-card .card-title { margin-bottom: 6px; }
.ic-ch { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.ic-ch:last-of-type { border-bottom: 0; }
.ic-ch-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.ic-ch-head b { font-size: 14.5px; }
.ic-tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ic-pct { margin-left: auto; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.ic-bar { position: relative; height: 30px; }
.ic-track { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); background: color-mix(in srgb, var(--c) 16%, var(--surface-2)); }
.ic-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--c); border-radius: 999px; }
.ic-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface); opacity: .7; }
.ic-now { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); opacity: .7; z-index: 1; }
.ic-txt { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 2; pointer-events: none; }
.ic-txt.ic-on { color: #fff; -webkit-clip-path: inset(0 calc(100% - var(--p)) 0 0); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ic-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.ic-hint.ok { color: var(--ok); font-weight: 600; }
.ic-legend { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ic-now-sw { display: inline-block; width: 3px; height: 14px; border-radius: 2px; background: var(--text); opacity: .7; flex: 0 0 auto; }
.ic-config { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
/* Săn thêm tiền thưởng */
.ic-progs { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .ic-progs { grid-template-columns: 1fr 1fr; } }
.ic-prog { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px; background: var(--surface); }
.ic-prog-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--c); font-weight: 800; font-size: 17px; }
.ic-prog-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ic-prog-body small { font-size: 12.5px; }
.ic-mine { font-weight: 800; color: var(--ok); white-space: nowrap; font-size: 14px; }
.ic-foot { margin: 4px 2px 12px; }
/* Thẻ tóm tắt ở trang chủ nhân viên */
a.card.ic-home { display: block; color: var(--text); border-left: 4px solid var(--primary); }
a.card.ic-home:hover { background: var(--surface-2); }
.ic-home-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ic-home-top span { color: var(--muted); font-size: 13.5px; }
.ic-home-top b { font-size: 24px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.ic-home-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.ic-home-bar .ic-meter { margin: 0; max-width: none; height: 8px; border-radius: 4px; }
.ic-home-bar .ic-meter i { background: var(--late); }
.ic-home-bar b { color: var(--text); }
.ic-home-go { margin-top: 8px; color: var(--primary); font-weight: 600; font-size: 13.5px; }
@media (max-width: 380px) { .ic-net { font-size: 30px; } .ic-month input[type="month"] { width: 164px; } .ic-bar { height: 28px; } .ic-txt { font-size: 12.5px; } .ic-prog { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 9px 10px; } .ic-prog-ico { width: 32px; height: 32px; } }

/* ---------------------------------------------------------------- chấm công web v2 (02/10/2026): camera sau, lịch sử, thiết bị */
.att-head-btns { display: flex; align-items: center; gap: 4px; }
.att-flip svg { width: 20px; height: 20px; }
.att-flip[hidden] { display: none; }
.att-frame video.rear { transform: none; }
.att-devcard .row-main svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.att-devnote[hidden] { display: none; }
.att-lookup select { max-width: 100%; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.att-item { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.att-item.st-flagged { border-color: var(--pending); background: color-mix(in srgb, var(--pending) 6%, var(--surface)); }
.att-item.st-rejected { opacity: .72; }
.att-ph { flex: 0 0 92px; width: 92px; height: 122px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.att-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-ph-none { display: grid; place-items: center; font-size: 11px; color: var(--muted); text-align: center; padding: 4px; }
.att-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.att-item-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.att-item-act { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.att-daycard .card-title { margin-bottom: 8px; }
/* ---------------------------------------------------------------- xếp lịch trên web (quản lý) */
.ro-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ro-status { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ro-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-grid .ro-td { cursor: pointer; min-width: 150px; position: relative; padding-bottom: 24px; }
.ro-grid .ro-td:hover { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.ro-chip { padding-right: 24px; }
.ro-x { position: absolute; top: 3px; right: 4px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.1); color: inherit; font-size: 11px; line-height: 18px; cursor: pointer; }
.ro-x:hover { background: var(--danger); color: #fff; }
@media (pointer: coarse) { .ro-x { width: 22px; height: 22px; line-height: 22px; font-size: 12px; } .ro-x::after { content: ''; position: absolute; inset: -7px; } } /* ngón tay dễ trúng nút bỏ ca */
.ro-off { background: var(--off-bg); color: var(--muted); border: 1px dashed var(--border); }
.ro-pend { background: var(--pending-bg); color: var(--pending); border: 1px dashed var(--pending); padding-right: 8px; }
.ro-pend-act { display: flex; gap: 4px; margin-top: 3px; }
.ro-ok, .ro-no { border: 0; border-radius: 6px; padding: 2px 9px; font-weight: 700; cursor: pointer; color: #fff; font: inherit; font-weight: 700; }
.ro-ok { background: var(--ok); } .ro-no { background: var(--danger); }
.ro-kv { background: var(--surface-2); color: var(--muted); border: 1px dotted var(--border); padding-right: 8px; }
.ro-add { position: absolute; right: 4px; bottom: 3px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px dashed var(--border); background: transparent; color: var(--muted); font-size: 14px; line-height: 18px; cursor: pointer; }
.ro-td:hover .ro-add { border-color: var(--primary); color: var(--primary); }
.ro-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.ro-day { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; }
.ro-day:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.ro-sect { margin: 10px 0; }
.ro-sect-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ro-shifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.ro-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 9px; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; cursor: pointer; text-align: left; font: inherit; }
.ro-pick:hover { filter: brightness(.96); }
.ro-pick small { opacity: .8; font-size: 11px; }
.ro-free { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ro-pick.sel { outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.ro-dlg .btn.sel { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
.ro-foot { align-items: center; }
.ro-foot .btn:disabled { opacity: .45; cursor: not-allowed; }
.ro-sum { font-size: 13px; color: var(--muted); line-height: 1.35; min-width: 0; }
.ro-sum b { color: var(--text); }
@media (max-width: 599px) { .ro-foot { flex-wrap: wrap; } .ro-sum { flex-basis: 100%; } .ro-foot .btn { flex: 1 1 0; } }
dialog.ro-dlg { width: min(640px, calc(100vw - 24px)); }
/* ---------------------------------------------------------------- nhân viên đăng ký lịch */
.rg-weeks a small { margin-left: 4px; opacity: .7; font-weight: 400; }
.rg-weeks a small::before { content: '· '; }
/* điện thoại: 3 tuần chia đều bề ngang, "mở / đóng" xuống dòng dưới (06/10/2026 — trước tràn ngang ở 360px) */
@media (max-width: 599px) {
  .rg-weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .rg-weeks a { padding: 6px 4px; text-align: center; line-height: 1.25; white-space: normal; }
  .rg-weeks a small { display: block; margin: 1px 0 0; font-size: 12px; }
  .rg-weeks a small::before { content: none; }
}
.rg-deadline { margin-top: 6px; }
.rg-sum { margin-top: 8px; }
.rg-days { display: flex; flex-direction: column; gap: 8px; }
.rg-day { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.rg-day.past { opacity: .6; }
.rg-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.rg-day-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rg-day-pick select { max-width: 100%; }
.rg-free { display: inline-flex; gap: 4px; align-items: center; }
.rg-free[hidden] { display: none; }
.rg-foot { margin-top: 10px; }
/* ---------------------------------------------------------------- Giám đốc duyệt lịch */
.ra-row { grid-template-columns: 1fr auto; }
.ra-act { display: flex; flex-wrap: wrap; gap: 6px; grid-area: badge; align-self: start; }
.ra-wait { border-left: 3px solid var(--pending); padding-left: 10px; }
/* ---------------------------------------------------------------- Thanh Lưu / Huỷ dùng chung (03/10/2026): form đang sửa → thanh nổi đáy màn hình */
.form-bar { position: sticky; bottom: 12px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 14px 0 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(16,24,40,.16); }
.form-bar[hidden] { display: none !important; }
.form-bar .fb-state { order: 1; margin-right: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form-bar .fb-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; }
.form-bar .fb-state.dirty { color: var(--warn); }
.form-bar .fb-state.dirty::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.form-bar .fb-state[hidden] { display: none; }
.form-bar .btn { order: 3; }
.form-bar .rule-cancel, .form-bar .fb-cancel { order: 4; }
.form-bar .rule-save, .form-bar .fb-save { order: 5; min-width: 110px; }
.form-bar .btn-sm { padding: 8px 16px; font-size: 14px; }
.form-bar.row-form { margin-top: 14px; }
.rule-actions:not(.form-bar):not(:has(> :not([hidden]))) { display: none; }
@media (max-width: 1023px) { body.has-sb .form-bar { bottom: calc(64px + env(safe-area-inset-bottom)); } }
@media (max-width: 599px) { .form-bar .fb-state { flex-basis: 100%; } .form-bar .rule-save, .form-bar .rule-cancel, .form-bar .fb-save, .form-bar .fb-cancel { flex: 1 1 0; } }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- Trang phân hệ "Sắp có" (/erp/*) */
.soon-card { display: flex; gap: 14px; align-items: flex-start; }
.soon-ico { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--upcoming-bg); font-size: 22px; }
.soon-main { min-width: 0; }
.soon-main p { margin: 2px 0 10px; }
.soon-plan ul { margin: 6px 0 0; padding-left: 18px; }
.soon-plan li { margin: 3px 0; }
.soon-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.soon-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface); }
.soon-tile:hover { border-color: var(--primary); }
.soon-tile.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.soon-tile small { color: var(--muted); font-size: 12px; line-height: 1.35; }

/* ---------------------------------------------------------------- Tổng quan: "Việc cần làm" gom mọi lời nhắc */
.todo-list { display: flex; flex-direction: column; }
.todo { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.todo:last-child { border-bottom: 0; }
.todo-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.todo.t-danger .todo-dot { background: var(--danger); } .todo.t-warn .todo-dot { background: var(--warn); } .todo.t-info .todo-dot { background: var(--upcoming); } .todo.t-ok .todo-dot { background: var(--ok); }
.todo-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.todo-main b { font-weight: 600; font-size: 14px; }
.todo-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.todo .btn, .todo form { flex: 0 0 auto; margin: 0; }
.todo-empty { padding: 14px 0 6px; color: var(--muted); }
.ov-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.ov-grid > .card { margin: 0; }
@media (min-width: 900px) { .ov-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Ô số liệu gọn trên điện thoại; đường dẫn trong trang chỉ còn ở điện thoại */
@media (max-width: 699px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpi { padding: 8px 9px; border-radius: 10px; }
  .kpi span { font-size: 11.5px; line-height: 1.25; }
  .kpi b { font-size: 20px; }
  .kpi small { font-size: 10.5px; line-height: 1.25; }
  /* ô tiền (doanh thu, KPI, dự báo): 2 cột, số không xuống dòng giữa chừng (06/10/2026 — trước 3 cột: "7.700.000.0 / 00") */
  .kpis.money-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-kpis .kpi b { font-size: clamp(15px, 4.6vw, 19px); white-space: nowrap; overflow-wrap: normal; }
  .money-kpis .kpi small { font-size: 11px; }
  .kpis.zalo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Nhật ký trên điện thoại: mỗi dòng là 1 thẻ — giờ · người trên cùng, hành động, chi tiết, IP bên dưới (trước 5 cột bị bóp) */
  .table.stack.tl-table td { display: block; width: auto; text-align: left; border-bottom: 0; padding: 1px 0; }
  .table.stack.tl-table td::before { content: none; }
  .table.stack.tl-table td:nth-child(1), .table.stack.tl-table td:nth-child(2) { display: inline-block; margin-right: 8px; font-weight: 600; }
  .table.stack.tl-table td:nth-child(2) br { display: none; }
  .table.stack.tl-table td:nth-child(2) small { margin-left: 4px; font-weight: 400; }
}
@media (min-width: 1024px) { .set-crumb { display: none; } }
/* ===================== Khung ERP v2 (03/10/2026) theo mẫu: thanh biểu tượng · menu phụ · dải tab · nội dung · cột phải · thanh trạng thái ===================== */
:root { --railw: 68px; --sbw: 248px; --rpw: 292px; --stbh: 28px; --abh: 56px; --rail-bg: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
body.has-sb { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--text); font: 600 11px/1.55 system-ui, sans-serif; text-align: center; }

/* thanh biểu tượng: phân hệ ở trên, tiện ích (tìm, thông báo, cài đặt, tài khoản) ghim dưới */
.rail { display: flex; flex-direction: column; align-items: center; gap: 2px; width: var(--railw); padding: 10px 0; background: var(--rail-bg); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-logo { display: block; padding: 4px; margin-bottom: 8px; border-radius: 12px; }
.rail-logo img { display: block; width: 36px; height: 36px; }
.rail-mods, .rail-util { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.rail-util { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.rail-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rail-btn:hover { color: var(--text); }
.rail-btn:hover .rail-ico { background: var(--surface-2); }
.rail-ico { position: relative; display: grid; place-items: center; width: 42px; height: 32px; border-radius: 10px; transition: background-color .15s; }
.rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn[aria-current] { color: var(--primary); }
.rail-btn[aria-current] .rail-ico { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.rail-btn.on:not([aria-current]) .rail-ico { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); }
.rail-btn .nav-count { position: absolute; top: -3px; right: -1px; margin: 0; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.rail-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user { margin-top: 6px; }
.rail-avatar { list-style: none; display: block; padding: 2px; border-radius: 50%; cursor: pointer; }
.rail-avatar::-webkit-details-marker { display: none; }
.rail .avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 800; }
.rail-user[open] .rail-avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.rail-user .menu { position: fixed; left: calc(var(--railw) + 8px); bottom: calc(var(--stbh) + 8px); top: auto; right: auto; }

/* menu phụ: mục của phân hệ đang mở (ô tiêu đề + danh sách 2 dòng) */
.sidebar { display: flex; flex-direction: column; width: var(--sbw); background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; }
.sb-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 14px; scrollbar-width: thin; }
.sb-panel[hidden] { display: none; }
.sb-box { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 9px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.sb-box-ico { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--primary); color: var(--on-primary); }
.sb-box-ico svg, .sb-collapse svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-box-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.sb-box-txt b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-box-txt small { color: var(--muted); font-size: 11.5px; }
.sb-collapse, .sb-close { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 14px; cursor: pointer; }
.sb-collapse:hover, .sb-close:hover { color: var(--text); }
.sb-close { display: none; }
.sb-list { display: flex; flex-direction: column; gap: 2px; }
.sb-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text); -webkit-tap-highlight-color: transparent; }
.sb-item:hover { background: var(--surface-2); }
.sb-ic { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.sb-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-ini { font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.sb-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.sb-lbl { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-txt small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item.active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.sb-item.active .sb-lbl { color: var(--primary); font-weight: 700; }
.sb-item.active .sb-ic { background: var(--primary); color: var(--on-primary); }
.sb-item.soon:not(.active) .sb-ic { background: var(--upcoming-bg); color: var(--upcoming); }
.sb-item .nav-count { margin-left: auto; flex: 0 0 auto; }
.sb-sec { margin: 16px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.sb-mobile-links { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); flex: 0 0 auto; }
.sb-mobile-links .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.sb-mobile-links .menu-item:hover { background: var(--surface-2); }
.sb-mobile-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.sb-mobile-links .ico { display: inline-grid; place-items: center; }
.sb-mobile-links .menu-danger, .sb-mobile-links .menu-danger svg { color: var(--danger); }
.sb-mobile-links .theme-btn .lbl { font-weight: 600; margin-left: -4px; }

/* dải tab: trang con của mục đang mở, dạng phân đoạn ở đầu vùng nội dung */
.tabbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.tabbar-in { display: flex; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tabbar-in::-webkit-scrollbar { display: none; }
.tabbar-in a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-right: 1px solid var(--border); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.tabbar-in a:last-child { border-right: 0; }
.tabbar-in a:hover { color: var(--text); background: var(--surface-2); }
.tabbar-in a.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); box-shadow: inset 0 -2.5px 0 var(--primary); }
.tabbar .nav-count { margin-left: 6px; }
.tb-btn { flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; }
.tb-btn:hover { color: var(--text); }
.tb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* cột phải: thông báo (việc chờ), mở gần đây, phím tắt */
.rpanel { display: none; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; }
.rp-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
.rp-head b { font-size: 15px; }
.rp-head .nav-count { margin: 0; }
.rp-x { margin-left: auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.rp-sec { padding: 4px 14px 14px; border-bottom: 1px solid var(--border); }
.rp-sec:last-child { border-bottom: 0; }
.rp-cap { margin: 10px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.rp-note { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.rp-note:hover { border-color: var(--primary); }
.rp-num { display: grid; place-items: center; flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 15px; background: var(--surface-2); font-size: 13px; font-weight: 800; }
.rp-note.t-danger .rp-num { background: var(--danger-bg); color: var(--danger); }
.rp-note.t-warn .rp-num { background: var(--warn-bg); color: var(--warn); }
.rp-note.t-info .rp-num { background: var(--upcoming-bg); color: var(--upcoming); }
.rp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rp-txt b { font-size: 13.5px; font-weight: 600; }
.rp-txt small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-empty { padding: 6px 0; color: var(--muted); }
.rp-recent a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-recent a:hover { background: var(--surface-2); }
.rp-keys div { display: flex; align-items: center; gap: 4px; margin: 6px 0; font-size: 12.5px; }
.rp-keys span { margin-left: 8px; color: var(--muted); }
.rp-backdrop { display: none; }

/* thanh trạng thái (máy tính) */
.statusbar { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--surface); border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.statusbar i { margin: 0 7px; font-style: normal; opacity: .6; }
.stb-l, .stb-r { overflow: hidden; text-overflow: ellipsis; }
.stb-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.stb-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.stb-pw { color: inherit; } .stb-pw:hover { color: var(--primary); text-decoration: underline; }
.stb-btn:hover { color: var(--text); }
.stb-btn kbd { font-size: 10px; padding: 0 4px; }

/* tìm nhanh (Ctrl+K) */
dialog.cmdk { width: min(620px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 80px)); margin: 10vh auto auto; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0,0,0,.35); }
dialog.cmdk::backdrop { background: rgba(8,14,20,.45); }
.cmdk-in { display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 80px)); }
.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cmdk-head svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.cmdk-head input { border: 0; padding: 8px 0; background: transparent; font-size: 16px; }
.cmdk-head input:focus { outline: none; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px; color: var(--text); cursor: pointer; }
.cmdk-item small { color: var(--muted); font-size: 12px; }
.cmdk-item.sel, .cmdk-item:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.cmdk-empty { padding: 14px; color: var(--muted); }

/* điện thoại / máy tính bảng (dưới 1024px): thanh đầu, ngăn kéo = thanh biểu tượng + menu phụ, thanh dưới */
.navpane { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; display: flex; width: min(92vw, 360px); background: var(--surface); box-shadow: 0 0 40px rgba(0,0,0,.18); transform: translateX(-104%); transition: transform .22s ease; }
body.sb-open .navpane { transform: none; }
.sb-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(15,23,32,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
body.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .navpane, .sb-backdrop { transition: none; } }
.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: var(--abh); padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
.appbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary) 0 72%, var(--accent) 72% 100%); }
.ab-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 38px; padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.ab-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-btn .nav-count { position: absolute; top: -5px; right: -5px; margin: 0; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.ab-logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.ab-logo img { height: 30px; width: auto; max-width: 48vw; }
.appbar .userbox { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 1023px) {
  .navpane .rail { flex: 0 0 auto; }
  .navpane .sidebar { flex: 1 1 auto; width: auto; min-width: 0; border-right: 0; }
  .sb-collapse, .rail-user, .tb-btn { display: none; }
  .sb-close { display: grid; }
  .tabbar { top: var(--abh); padding: 6px 8px; }
  .tabbar-in a { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
  html.rp-on .rpanel { display: flex; position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(88vw, 340px); box-shadow: 0 0 40px rgba(0,0,0,.2); }
  html.rp-on .rp-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(15,23,32,.45); }
}
@media (max-width: 479px) { .appbar { gap: 6px; padding: 0 8px; } .ab-btn { height: 36px; min-width: 36px; padding: 0 7px; } .ab-logo img { height: 26px; } }

/* máy tính (từ 1024px): thanh biểu tượng + menu phụ cố định trái, cột phải cố định phải, thanh trạng thái dưới */
@media (min-width: 1024px) {
  body.has-sb { padding: 0 0 var(--stbh) calc(var(--railw) + var(--sbw)); }
  html.sb-hide body.has-sb { padding-left: var(--railw); }
  .navpane { display: contents; }
  .rail { position: fixed; z-index: 32; left: 0; top: 0; bottom: var(--stbh); }
  .sidebar { position: fixed; z-index: 31; left: var(--railw); top: 0; bottom: var(--stbh); }
  html.sb-hide .sidebar { display: none; }
  .appbar, .sb-backdrop, .sb-close, .sb-mobile-links, .bottomnav { display: none !important; }
  .statusbar { display: flex; position: fixed; z-index: 33; left: 0; right: 0; bottom: 0; height: var(--stbh); }
  .rpanel { position: fixed; z-index: 31; top: 0; right: 0; bottom: var(--stbh); width: var(--rpw); }
  html.rp-on .rpanel { display: flex; }
  html.rp-on body.has-sb { padding-right: var(--rpw); }
  body.has-sb .form-bar { bottom: calc(var(--stbh) + 10px); }
  .rail-btn.on:not([aria-current]) .rail-ico { box-shadow: none; }
}
/* màn hình rộng (từ 1500px): cột phải mở sẵn, bấm nút để ẩn (nhớ trong trình duyệt) */
@media (min-width: 1500px) {
  html:not(.rp-off) .rpanel { display: flex; }
  html:not(.rp-off) body.has-sb { padding-right: var(--rpw); }
}

/* Phân quyền */
.perm-form { overflow: visible; }
.table-scroll { overflow-x: auto; }
.perm-table th.pc, .perm-table td.pc { text-align: center; width: 150px; }
.perm-group th { background: var(--surface-2); text-align: left; font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.perm-group th small { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.perm-yes { color: var(--ok); font-weight: 800; }
.perm-lock { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.perm-cb { display: inline-flex; cursor: pointer; }
.perm-cb input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.rule-form.view-mode .perm-cb input:disabled { opacity: 1; cursor: default; }
.perm-plus { color: var(--ok); font-weight: 600; }
.perm-minus { color: var(--danger); font-weight: 600; }
.perm-search { max-width: 260px; margin-left: auto; padding: 7px 10px; font-size: 13.5px; }
.perm-ov td { background: color-mix(in srgb, var(--upcoming) 7%, transparent); }
.perm-table select { max-width: 170px; min-width: 130px; padding: 6px 8px; } /* 12/10/2026: cột hẹp bóp ô chọn còn "Theo vai tr" */
@media (max-width: 1023px) { .rp-keys { display: none; } }
/* ---------------------------------------------------------------- Danh sách nhân viên: thanh công cụ (tìm) + chia trang (04/10/2026) */
.pg-out, .pg-hide { display: none !important; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.list-tools input[type=search] { flex: 0 1 320px; min-width: 200px; padding: 8px 11px; }
.list-tools .lt-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; font-size: 13px; color: var(--muted); }
.list-tools .lt-stats b { color: var(--text); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 2px 2px; font-size: 13.5px; color: var(--muted); }
.pg-nav { display: inline-flex; align-items: center; gap: 4px; }
.pg-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; }
.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-cur { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; }
.pg-cur input { width: 52px; padding: 5px 6px; text-align: center; -moz-appearance: textfield; }
.pg-cur input::-webkit-outer-spin-button, .pg-cur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-info { color: var(--text); font-weight: 600; }
.pg-size { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted); }
.pg-size select { width: auto; padding: 5px 8px; }
.pager.pg-one .pg-nav { opacity: .55; }
@media (max-width: 599px) { .pager { gap: 8px 10px; } .pg-size { margin-left: 0; } .list-tools input[type=search] { flex: 1 1 100%; } .list-tools .lt-stats { margin-left: 0; } }

/* menu phụ đã thu gọn: nút » ở đầu dải tab để mở lại */
.tb-expand { display: none; margin-left: 0 !important; }
.tb-expand svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { html.sb-hide .tb-expand { display: grid; } }
/* ---------------------------------------------------------------- Nút thao tác dòng "⋯" → danh sách chọn (04/10/2026) */
.row-menu { position: relative; display: inline-block; vertical-align: middle; }
.row-menu > summary { list-style: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.rm-btn { min-width: 36px; height: 32px; padding: 0 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
.rm-btn:hover, .row-menu[open] > .rm-btn { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.rm-list { position: fixed; z-index: 70; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); visibility: hidden; }
.row-menu.rm-pos > .rm-list { visibility: visible; }
.rm-list form { display: block; margin: 0; }
.rm-head { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-head b { color: var(--text); }
.rm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer; }
.rm-item:hover, .rm-item:focus-visible { background: var(--surface-2); outline: none; }
.rm-ic { flex: 0 0 20px; text-align: center; font-size: 15px; }
.rm-danger { color: var(--danger); }
.rm-sep { height: 1px; margin: 4px 2px; background: var(--border); }
.actions .row-menu, .adj-actions .row-menu { margin-left: 4px; }
/* v45 (04/10/2026): form gửi / đăng ký không mở sẵn — bấm nút mới hiện ô nhập (hộp thoại, khối gập, chế độ xem/sửa) */
@media (min-width: 700px) { dialog.modal.modal-sm { width: min(560px, calc(100vw - 24px)); } }
details.fold > summary, .explain-form > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.fold > summary::-webkit-details-marker, .explain-form > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary, .explain-form[open] > summary { display: none; }
details.fold > form { margin-top: 0; }
.explain-form[open] > form { margin-top: 0; }
.explain-form .row-form { justify-content: flex-end; }
.shift-actions .explain-form { flex: 1 1 100%; margin: 0; }
.shift-actions .explain-form[open] { padding-top: 10px; border-top: 1px dashed var(--border); }
.rg-actions { align-items: center; margin: 0 0 10px; }
.rg-form.view-mode .rg-day-pick, .rg-form.view-mode .rg-hint { display: none; }
.rg-form.view-mode .rg-day-head { margin-bottom: 0; }
.rg-form.rule-form:not(.view-mode) .rg-none { display: none; }
.rg-hint { margin: 10px 0 0; }
@media (max-width: 699px) {
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .grow { flex: 1 1 100%; }
  .rg-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- miễn vân tay + điện thoại chấm công (05/10/2026) */
.att-exempt { border-left: 3px solid var(--upcoming); }
.att-exempt p { margin: 4px 0; }
.att-exempt-box { margin: 0 0 10px; }
.dev-table .rm-item.muted { cursor: default; }

/* ---------------------------------------------------------------- Danh sách nhân viên 2 cột (05/10/2026)
   .plist > .prow: trái .prow-main (tên, mã, chi nhánh · chức danh, nhãn) · phải .prow-detail (chi tiết .pv, cột thẳng hàng giữa các dòng) · ⋯ → Chỉnh sửa mở popup (bấm dòng không mở sửa).
   Máy tính rộng: 5 cột chi tiết + dòng tiêu đề .plist-head (ẩn nhãn từng ô); vừa: 3 cột có nhãn; điện thoại: trái ở trên, chi tiết 2 cột bên dưới. */
.plist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.prow, .plist-head { display: grid; grid-template-columns: minmax(210px, 30%) minmax(0, 1fr) 40px; align-items: center; gap: 6px 16px; }
.prow { position: relative; padding: 10px 12px 10px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; box-shadow: var(--shadow); color: var(--text); }
.prow.prow-warn { border-left-color: var(--danger); }
.prow.prow-hl { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow); }
.prow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prow-name b { font-size: 15px; }
.prow-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.prow-tags .badge { font-size: 11.5px; padding: 2px 8px; }
.prow-detail { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr 1fr; gap: 6px 14px; align-items: center; min-width: 0; }
.pv { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.pv > small { color: var(--muted); font-size: 11.5px; }
.pv-v { min-width: 0; overflow-wrap: anywhere; }
.pv-money { color: var(--primary); font-size: 15px; }
.prow-go { justify-self: end; }
.plist-head { display: none; }
@media (min-width: 1100px) {
  .plist-head { display: grid; padding: 0 12px 2px 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
  .plist .pv > small { display: none; }
}
@media (max-width: 1099px) { .prow-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .prow { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
  .prow-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
  .prow-go { position: absolute; top: 8px; right: 10px; }
  .prow-name { padding-right: 44px; }
}
.empty-row { padding: 14px; text-align: center; }
.dlg-note { grid-column: 1 / -1; padding-top: 2px; }
/* Hồ sơ lương: dải "Thưởng KPI là khoản riêng" trỏ sang trang KPI */
.kpi-sep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); }
.kpi-sep > span { flex: 1 1 320px; }
/* Bảng nhân viên trên điện thoại (05/10/2026): mỗi dòng thành thẻ — tên + thông tin ở đầu thẻ, các ô xếp lưới 2 cột (3 cột từ 480px), nhãn nằm trên số.
   td.sg-head = ô tên khi không phải ô đầu · td.sg-wide = ô trải hết hàng (ghi chú, nhiều dòng) · td.sg-act = nút ⋯ ở góc phải đầu thẻ. */
@media (max-width: 699px) {
  .table.stack.stack-grid tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 12px; }
  .table.stack.stack-grid td { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; min-width: 0; padding: 0; border-bottom: 0; text-align: left; }
  .table.stack.stack-grid td::before { flex: none; font-size: 11.5px; line-height: 1.3; }
  .table.stack.stack-grid td:first-child, .table.stack.stack-grid td.sg-head { grid-column: 1 / -1; display: block; padding: 0 0 8px; border-bottom: 1px dashed var(--border); }
  .table.stack.stack-grid td.sg-head { order: -1; }
  .table.stack.stack-grid td.sg-head::before { content: none; }
  .table.stack.stack-grid tr:has(> td.sg-head) > td:first-child:not(.sg-head) { grid-column: auto; display: flex; padding: 0; border-bottom: 0; }
  .table.stack.stack-grid tr:has(> td.sg-head) > td:first-child:not(.sg-head)::before { content: attr(data-label); }
  .table.stack.stack-grid td.sg-wide { grid-column: 1 / -1; }
  .table.stack.stack-grid td.sg-act { position: absolute; top: 8px; right: 10px; width: auto; display: block; }
  .table.stack.stack-grid td.sg-act::before { content: none; }
  .table.stack.stack-grid tr:has(> td.sg-act) > td:first-child, .table.stack.stack-grid tr:has(> td.sg-act) > td.sg-head { padding-right: 46px; }
  .table.stack.stack-grid td.num, .table.stack.stack-grid .cv { text-align: left; }
  .table.stack.stack-grid td input, .table.stack.stack-grid td select, .table.stack.stack-grid .pct-cell, .table.stack.stack-grid .cv, .table.stack.stack-grid .fresh-ins { max-width: none; width: 100%; }
  .table.stack.stack-grid td input[style*="width"] { width: 100% !important; }
  .table.stack.stack-grid td .row-menu, .table.stack.stack-grid td .btn { align-self: flex-start; }
  .table.stack.sticky-col tr > :first-child { position: static; box-shadow: none; background: none; }
}
@media (min-width: 480px) and (max-width: 699px) { .table.stack.stack-grid tr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phân quyền theo vai trò trên điện thoại: tên chức năng hết hàng, 3 vai trò xếp 3 cột bên dưới (trước đây cột tên bị ép còn 1 chữ / dòng) */
@media (max-width: 699px) {
  .perm-table, .perm-table tbody { display: block; width: 100%; }
  .perm-table thead { display: none; }
  .perm-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .perm-table tr.perm-group { display: block; padding: 0; border: 0; }
  .perm-table tr.perm-group th { display: block; }
  .perm-table td { border: 0; padding: 0; }
  .perm-table td:first-child { grid-column: 1 / -1; }
  .perm-table th.pc, .perm-table td.pc { width: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .perm-table td.pc::before { content: attr(data-label); font-size: 11px; color: var(--muted); text-align: center; }
  .perm-table td.pc[colspan] { grid-column: span 2; justify-content: flex-end; }
}
@media (max-width: 699px) {
  /* ô trống (ghi chú, cập nhật, chờ duyệt) không chiếm chỗ trên thẻ; khi đang nhập (có ô nhập) thì vẫn hiện */
  .table.stack.stack-grid td.sg-empty:not(:has(input, select, textarea)), .rule-form.view-mode .table.stack.stack-grid td.sg-empty { display: none; }
  /* Thưởng · phạt: tô nền cả thẻ thay vì từng ô; nút Duyệt + ⋯ nằm ngang */
  .table.stack.stack-grid.adj-table .row-pending td { background: none; }
  .table.stack.stack-grid.adj-table tr.row-pending { background: color-mix(in srgb, var(--pending) 7%, var(--surface)); border-color: color-mix(in srgb, var(--pending) 40%, var(--border)); }
  .table.stack.stack-grid td.adj-actions { flex-direction: row; align-items: center; gap: 8px; }
  .table.stack.stack-grid td.adj-actions::before { content: none; }
}
/* ---------------------------------------------------------------- Popup trang sửa (05/10/2026): a[data-frame] mở trang trong khung ngay trên danh sách */
dialog.modal.frame-dlg { width: min(1080px, calc(100vw - 24px)); height: calc(100vh - 32px); }
.frame-dlg > .modal-inner { height: 100%; max-height: 100%; }
.frame-dlg .modal-head { padding: 10px 16px; }
.frame-dlg .fd-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-dlg .fd-acts { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.frame-dlg .fd-full { color: var(--muted); font-weight: 500; }
.frame-dlg .fd-full:hover { color: var(--primary); }
.frame-dlg .fd-body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--bg); border-radius: 0 0 16px 16px; overflow: hidden; }
.frame-dlg iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.frame-dlg .fd-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }
.frame-dlg .fd-wait[hidden] { display: none; }
@media (max-width: 699px) { dialog.modal.frame-dlg { height: 100%; } .frame-dlg .fd-body { border-radius: 0; } .frame-dlg .fd-full { display: none; } }
/* Trang đang mở trong popup: ẩn khung ERP (menu, dải tab, cột phải, thanh trạng thái / thanh dưới), chỉ còn nội dung */
html.embed .navpane, html.embed .appbar, html.embed .tabbar, html.embed .rpanel, html.embed .rp-backdrop, html.embed .statusbar, html.embed .bottomnav, html.embed [data-frame-hide] { display: none !important; }
html.embed body.has-sb { padding: 0 !important; }
html.embed body.has-sb .form-bar { bottom: 10px; }
html.embed .page { padding-top: 4px; }
/* Người phụ thuộc: badge trạng thái + nút ⋯ ở góc thẻ (tên không bấm được, 05/10/2026) */
.npt-side { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Cảnh báo: làm quá giờ chuẩn ngoài lịch */
.over-card { margin-bottom: 14px; }
.over-table td { vertical-align: top; }
.over-table td.actions { width: 44px; text-align: right; }
/* Cảnh báo › giờ dư ngoài lịch: thẻ duyệt giờ dư từng ca */
.over-item .approval-head { align-items: flex-start; }
.over-shift { padding: 8px 0 0; margin-top: 8px; border-top: 1px dashed var(--border); }
.over-shift .approval-actions { margin-top: 6px; }
.over-done { margin-top: 10px; }
.over-done[open] > summary { display: none; }
/* Phiếu lương tách nhóm: Lương cơ bản · OT · KPI · khác · khấu trừ (05/10/2026) */
.slip-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.slip-sum .ss-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--border); }
.slip-sum .ss-item small { color: var(--muted); font-size: 12px; }
.slip-sum .ss-item b { font-size: 16px; font-variant-numeric: tabular-nums; }
.slip-sum .ss-base { border-left-color: var(--primary); } .slip-sum .ss-ot { border-left-color: var(--warn); } .slip-sum .ss-kpi { border-left-color: var(--upcoming); }
.slip-sum .ss-other { border-left-color: var(--muted); } .slip-sum .ss-ded { border-left-color: var(--danger); } .slip-sum .ss-ded b { color: var(--danger); }
.slip-sum .ss-net { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-left-color: var(--primary); } .slip-sum .ss-net b { color: var(--primary); }
.slip-table .slip-grp th { padding-top: 14px; background: var(--surface-2); color: var(--text); font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.slip-table .slip-grp th small { font-weight: 400; font-size: 12px; }
.slip-table .slip-it td:first-child { padding-left: 20px; }
.slip-table .slip-sub td { border-top: 2px solid var(--border); }
@media (max-width: 599px) { .slip-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slip-sum .ss-net { grid-column: 1 / -1; } .slip-table .slip-grp th small { display: block; } }

/* ===== Chấm công nhanh (05/10/2026): 2 nút VÀO CA / RA CA cạnh nhau, thẻ chấm công ở Trang chủ, nút tròn giữa thanh dưới ===== */
.att-io { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.att-io-btn { --c: var(--primary); --on: var(--on-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 108px; padding: 12px 6px; border: 2px solid color-mix(in srgb, var(--c) 55%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); color: var(--c); font: inherit; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .08s, box-shadow .15s, filter .15s; }
.att-io-btn.att-out { --c: var(--upcoming); --on: #fff; }
.att-io-btn.sug { background: var(--c); border-color: var(--c); color: var(--on); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 34%, transparent); }
.att-io-btn:hover { filter: brightness(1.05); text-decoration: none; }
.att-io-btn:active { transform: scale(.97); }
.att-io-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 45%, transparent); outline-offset: 2px; }
.att-io-ico { display: grid; place-items: center; }
.att-io-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.att-io-lbl { font-size: 19px; font-weight: 800; letter-spacing: .4px; line-height: 1.15; }
.att-io-time { font-size: 12.5px; font-weight: 600; opacity: .92; line-height: 1.2; }
.att-io-btn:not(.sug):not(.done) .att-io-time { opacity: .7; font-weight: 500; }
.att-hint { font-size: 13.5px; color: var(--muted); max-width: 480px; }
.att-hint b { color: var(--text); }
.att-head { margin-bottom: 10px; }
.att-hero { gap: 12px; }
/* thẻ ở Trang chủ nhân viên / Tổng quan của quản lý tự chấm */
.att-quick { padding: 14px; margin-bottom: 12px; border-color: color-mix(in srgb, var(--primary) 28%, var(--border)); }
.aq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.aq-clock { display: flex; flex-direction: column; line-height: 1.05; flex: 0 0 auto; }
.aq-clock b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.aq-clock span { margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.aq-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; padding-left: 12px; border-left: 1px solid var(--border); }
.aq-info b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-info span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-more { flex: 0 0 auto; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; padding: 2px 0; }
.aq-note { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.att-quick .att-big { display: flex; max-width: 480px; margin: 0 auto; }
/* nút tròn "Chấm công" nổi giữa thanh dưới (điện thoại) */
.bottomnav > a.nb-fab { color: var(--primary); font-weight: 700; }
.bottomnav .nb-fab .nb-ico { width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 4px var(--surface), 0 8px 18px color-mix(in srgb, var(--primary) 38%, transparent); }
.bottomnav .nb-fab.active .nb-ico { background: var(--primary-2); }
.bottomnav .nb-fab svg { width: 27px; height: 27px; stroke-width: 2; }
.bottomnav .nb-fab:active .nb-ico { transform: scale(.95); }
/* cửa sổ camera: nút chụp to, dễ bấm bằng ngón cái */
.att-cam .modal-foot { gap: 10px; }
.att-cam .modal-foot .btn { min-height: 52px; border-radius: 14px; font-size: 15.5px; }
.att-cam .modal-foot .att-shoot { flex: 2 1 0; font-size: 16.5px; font-weight: 700; }
.att-cam .modal-foot .btn-outline { flex: 1 1 0; }
.att-thumb img, .att-ph img { object-position: left bottom; } /* giữ dòng đóng dấu giờ ở góc dưới trái khi cắt ảnh thu nhỏ */
/* Điện thoại: hộp thoại có đặt bề rộng riêng vẫn phải phủ kín màn hình (trước đây hở 24px bên phải, lệch trái) */
@media (max-width: 699px) {
  dialog.modal.modal-wide, dialog.modal.att-modal, dialog.modal.att-photo-dlg, dialog.modal.ro-dlg, dialog.modal.frame-dlg { width: 100vw; max-width: 100vw; }
  .att-frame { max-height: 54vh; max-height: 54dvh; }
  .att-io-btn { min-height: 116px; }
}
@media (max-width: 359px) { .att-io-lbl { font-size: 17px; } .aq-clock b { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .att-io-btn { transition: none; } }

/* Điện thoại: ngăn kéo Menu = cột biểu tượng phân hệ (trái) + danh sách mục con của MỘT phân hệ (phải). 10/10/2026 khách: "bấm vào tên menu
   nào chỉ hiển thị list mục con kèm theo, không hiển thị full cả cây nữa" (05/10 từng hiện mọi nhóm thành một cây). Mở Menu = phân hệ đang xem;
   bấm biểu tượng phân hệ khác = đổi danh sách bên phải (phân hệ chỉ 1 mục thì mở thẳng). Nút Đóng nằm cuối cột trái (luôn thấy). */
.rail-close { display: none; }
@media (max-width: 1023px) {
  .navpane .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .navpane .sb-panel { display: flex; flex: 0 0 auto; min-height: auto; overflow: visible; padding: 10px 10px 2px; }
  .navpane .sb-panel[hidden] { display: none; }
  .navpane .sb-mobile-links { order: 2; margin-top: 10px; }
  .navpane .sb-panel .sb-close { display: none; }
  .navpane .sb-box { margin-bottom: 6px; padding: 6px 8px 6px 9px; }
  .navpane .sb-panel .sb-list { margin: 0 0 4px; }
  .navpane .sb-panel .sb-item { padding: 8px 8px; gap: 10px; }
  .navpane .sb-panel .sb-ic { width: 32px; height: 32px; }
  .navpane .sb-panel .sb-ic svg { width: 17px; height: 17px; }
  /* phân hệ đang chọn trong ngăn kéo: tô nền biểu tượng; phân hệ của trang đang mở (khác) chỉ còn vạch trái */
  .navpane .rail-btn.on { color: var(--primary); }
  .navpane .rail-btn.on .rail-ico { background: color-mix(in srgb, var(--primary) 16%, transparent); box-shadow: none; }
  .navpane .rail-btn[aria-current]:not(.on) { color: var(--muted); }
  .navpane .rail-btn[aria-current]:not(.on) .rail-ico { background: none; }
  .navpane .rail-close { display: flex; }
  .navpane .rail-close .rail-ico { font-size: 17px; }
}

/* ---------------------------------------------------------------- Màu giao diện /giao-dien (06/10/2026) */
.seg button { padding: 6px 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; }
.seg button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pf-sw { --sw: #448127; position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-sw:hover { border-color: var(--sw); }
.pf-dot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }
:root[data-theme="dark"] .pf-dot { background: var(--sw-d); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-dot { background: var(--sw-d); } }
.pf-name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.25; }
.pf-tick { display: none; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 13px; line-height: 22px; text-align: center; }
.pf-sw.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.pf-sw.on .pf-tick { display: block; }
.pf-preview .pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf-tabs { display: inline-flex; margin-bottom: 12px; }
.pf-bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .pf-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
@media (max-width: 420px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-sw { padding: 8px 10px; gap: 8px; } .pf-dot { width: 26px; height: 26px; } }

/* ---------------------------------------------------------------- Hộp thoại lưu ảnh về máy (06/10/2026, app.js [data-save-img]) */
dialog.img-dlg { width: min(560px, calc(100vw - 24px)); }
.img-dlg .modal-body { max-height: calc(100dvh - 170px); overflow: auto; }
.img-list { display: grid; gap: 10px; }
.img-list.many { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.img-it { margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.img-it img { display: block; width: 100%; height: auto; -webkit-touch-callout: default; }
.img-list.many .img-it img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.img-it figcaption { padding: 4px 8px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-wait { display: grid; place-items: center; min-height: 160px; font-size: 13px; color: var(--muted); }
.img-st { margin-bottom: 8px; }
.img-hint { margin: 10px 0 0; }
.img-dlg .modal-foot .btn[hidden] { display: none; }
@media (max-width: 699px) { dialog.img-dlg { width: 100vw; max-width: 100vw; } }

/* ---------------------------------------------------------------- Mã QR chấm công (06/10/2026) */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.qr-card { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.qr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.qr-head b { font-size: 15px; line-height: 1.3; }
.qr-img { width: 100%; max-width: 240px; margin: 4px auto; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.qr-img svg { display: block; width: 100%; height: auto; }
.qr-off .qr-img { opacity: .45; }
.qr-url code { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; text-align: center; }
.qr-warn { color: var(--warn); margin: 0; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: auto; }
.qr-actions form { margin: 0; }
.qr-rot { color: var(--danger); }
/* Chấm công nhiều chi nhánh: nơi đang đứng, hỏi Vào / Ra ngay trên camera, xin quyền 1 lần */
.att-site { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.att-site .badge { font-size: 11.5px; }
.att-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.att-ask[hidden] { display: none; }
.att-ask .att-io-btn { min-height: 86px; }
.att-ask .att-io-lbl { font-size: 18px; }
.att-ask-q { margin: 0 0 8px; text-align: center; font-weight: 700; font-size: 15px; }
.att-cam .modal-foot { flex-wrap: wrap; }
.att-cam .modal-foot .att-ask-wrap { flex: 1 1 100%; }
.att-perm .ap-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.att-perm .ap-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.att-perm .ap-chip.ok { background: var(--ok-bg); color: var(--ok); }
.att-perm .ap-chip.no { background: var(--danger-bg); color: var(--danger); }
.att-perm ol { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--muted); }
.att-sites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att-sitebar { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 8px; font-size: 13.5px; color: var(--muted); text-align: center; }
.att-sitebar b { color: var(--text); }
.att-sitebar svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- Điện thoại: dải mục cùng nhóm (07/10/2026) */
.sibbar { display: none; }
@media (max-width: 1023px) {
  .tabbar.has-sib { flex-wrap: wrap; row-gap: 6px; }
  .sibbar { display: flex; flex: 1 1 100%; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sibbar::-webkit-scrollbar { display: none; }
  .sibbar a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .sibbar a.active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
  .sibbar .sib-ic { display: grid; place-items: center; width: 20px; height: 20px; }
  .sibbar .sib-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .sibbar .nav-count { margin-left: 2px; }
  .sibbar a.active .nav-count { background: var(--on-primary); color: var(--primary); }
  .tabbar.has-sib.tb-single .tabbar-in { display: none; }
}

/* Cài đặt › Chi nhánh: mục Mã QR chấm công (07/10/2026) — thẻ con nhẹ hơn, điện thoại bớt lề lồng nhau */
.set-qr .qr-card { box-shadow: none; background: var(--bg); }
@media (max-width: 599px) { .card.set-qr { padding-left: 10px; padding-right: 10px; } .set-qr .qr-card { padding: 12px; } }

/* ---------------------------------------------------------------- Popup chuẩn thay hộp thoại trình duyệt (07/10/2026) */
dialog.ui-pop { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0,0,0,.35); overflow: auto; }
dialog.ui-pop::backdrop { background: rgba(8, 14, 20, .55); }
dialog.ui-pop[open] { animation: pop-in .14s ease-out; }
@keyframes pop-in { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
.ui-pop-in { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 20px 16px; }
.ui-pop-head { display: flex; align-items: flex-start; gap: 12px; }
.ui-pop-ic { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; font-size: 18px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.pop-danger .ui-pop-ic { background: color-mix(in srgb, var(--danger, #d92d20) 14%, transparent); color: var(--danger, #d92d20); }
.pop-alert .ui-pop-ic { background: color-mix(in srgb, #2563eb 14%, transparent); color: #2563eb; }
.ui-pop-t { align-self: center; font-size: 16.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.ui-pop-m { margin-left: 48px; color: var(--muted); font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ui-pop-m[hidden] { display: none; }
.ui-pop-input { margin-left: 48px; width: calc(100% - 48px); min-height: 42px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.ui-pop-input[hidden] { display: none; }
.ui-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ui-pop-foot .btn { min-width: 96px; min-height: 40px; }
.ui-pop-foot .btn[hidden] { display: none; }
@media (max-width: 599px) {
  .ui-pop-in { padding: 18px 16px 14px; }
  .ui-pop-m, .ui-pop-input { margin-left: 0; width: 100%; }
  .ui-pop-foot .btn { flex: 1 1 0; }
}
.ui-pop .pop-ok.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.ui-pop .pop-ok.btn-danger:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------- KPI cùng một khuôn (07/10/2026): hàng nút Sửa KPI · Mức riêng tháng · Xoá KPI */
.kpi-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; padding-top: 10px; border-top: 1px dashed var(--border); }
.kpi-acts .grow { flex: 1 1 auto; }
.kpi-deleted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
@media (max-width: 599px) { .kpi-acts .btn { flex: 1 1 auto; } .kpi-acts .grow { display: none; } }

/* ---------------------------------------------------------------- Bảng chấm công theo tuần (07/10/2026) — lịch tuần QL / GĐ theo mẫu giấy */
.ws-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 2px 0 8px; font-size: 14px; }
.ws-title, .ws-sign { display: none; }
.ws th.ws-day { min-width: 88px; font-weight: 600; font-size: 12px; }
.ws .ws-dnum { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; }
.ws .ws-stt { position: sticky; left: 0; z-index: 3; background: var(--surface); width: 34px; min-width: 34px; text-align: center; vertical-align: middle; color: var(--muted); }
.ws thead .ws-stt { z-index: 4; background: var(--surface-2); color: var(--text); }
.ws .sticky { left: 34px; min-width: 128px; max-width: 150px; white-space: normal; }
.ws thead tr.ws-tot-row th { top: auto; }
.ws th.ws-tot-h { text-align: center; }
.ws th.ws-tot { font-size: 11px; white-space: normal; min-width: 54px; max-width: 60px; line-height: 1.2; vertical-align: middle; padding-left: 2px; padding-right: 2px; }
.ws td.ws-tot { text-align: center; vertical-align: middle; font-size: 15px; }
.ws td.ws-tot small { display: block; font-size: 10.5px; color: var(--ok); font-weight: 600; white-space: nowrap; }
.ws .ws-cell { min-width: 88px; }
.ws .ws-chip .chip-io { white-space: normal; }
.ws .ws-chip { gap: 0; padding: 4px 14px 4px 6px; }
.ws-code { font-weight: 800; font-size: 13px; letter-spacing: .3px; }
.ws-time { font-size: 12px; white-space: nowrap; }
.ws-ot { color: #c0262d; font-weight: 800; }
.ws-abs { font-size: 11px; font-weight: 800; color: var(--danger); }
.ws-leave { margin: 2px 0; padding: 7px 6px; border-radius: 8px; font-weight: 700; font-size: 12.5px; line-height: 1.25; white-space: normal; text-align: center; border: 1px dashed currentColor; }
.ws-leave.ws-paid { color: #1d4ed8; background: color-mix(in srgb, #1d4ed8 8%, transparent); }
.ws-leave.ws-unpaid { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.ws-leave.ws-biz { color: var(--muted); }
.ws .ws-pay { color: var(--muted); }
.ws-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
.ws-legend b { color: var(--text); }
:root[data-theme="dark"] .ws-leave.ws-paid { color: #93b4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws-leave.ws-paid { color: #93b4ff; } }
@media (max-width: 699px) { .ws .ws-stt { display: none; } .ws .sticky { left: 0; min-width: 118px; } .ws th.ws-day, .ws .ws-cell { min-width: 96px; } }
@media print {
  html, body, .page { background: #fff !important; color: #000 !important; }
  .rail, .sidebar, .navpane, .tabbar, .statusbar, .bottomnav, .appbar, .rpanel, .rp-backdrop, .sb-backdrop, .ws-noprint, .ui-pop { display: none !important; }
  body.has-sb { padding: 0 !important; }
  .page, .container, .container.wide { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  .ws-head { display: block; text-align: center; margin: 0 0 4mm; font-size: 11pt; }
  .ws-head .muted { color: #000 !important; }
  .ws-title { display: block; font-size: 16pt; font-weight: 800; letter-spacing: .5px; margin-bottom: 1mm; }
  .matrix-wrap { overflow: visible !important; border: 0 !important; max-height: none !important; box-shadow: none !important; }
  .ws { font-size: 8.5pt; width: 100%; min-width: 0 !important; }
  .ws th, .ws td { border: 1px solid #444 !important; background: #fff !important; color: #000 !important; position: static !important; box-shadow: none !important; padding: 2px 3px !important; }
  .ws th.today::before { content: none !important; }
  .ws .sticky, .ws .ws-stt { min-width: 0 !important; }
  .ws .ws-cell, .ws th.ws-day { min-width: 0 !important; }
  .ws .ws-chip { background: none !important; color: #000 !important; border: 0 !important; padding: 0 !important; margin: 0 0 2px !important; opacity: 1 !important; text-align: center; }
  .ws .chip-st, .ws .pend, .ws .chip-io, .ws .ws-pay { display: none !important; }
  .ws a { color: #000 !important; text-decoration: none !important; }
  .ws-leave { border: 0 !important; background: none !important; padding: 0 !important; }
  .ws-leave.ws-paid, .ws-leave.ws-unpaid, .ws-ot { color: #c0262d !important; }
  .ws-legend { color: #000 !important; font-size: 9pt; margin-top: 3mm; }
  .ws-sign { display: block; margin-top: 4mm; font-size: 10pt; }
  .ws-date { text-align: right; font-style: italic; margin-bottom: 2mm; }
  .ws-sign-row { display: flex; justify-content: space-around; text-align: center; }
  .ws-sign-row div { display: flex; flex-direction: column; min-height: 22mm; }
  .ws-sign-row small { font-style: italic; }
  .ws tr { break-inside: avoid; }
}

/* ---------------------------------------------------------------- Bộ lọc danh sách dùng chung (07/10/2026) */
.list-tools select[data-list-filter] { flex: 0 1 auto; width: auto; min-width: 150px; max-width: 240px; padding: 7px 30px 7px 10px; font-size: 13.5px; }
.list-tools select.lf-on, .card-title select.lf-on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); font-weight: 600; }
.lf-reset { white-space: nowrap; }
.lf-reset[hidden] { display: none !important; }
.lf-empty td, div.lf-empty { padding: 14px 10px; text-align: center; }
@media (max-width: 599px) { .list-tools select[data-list-filter] { flex: 1 1 calc(50% - 8px); min-width: 0; max-width: none; } }

/* ================================================================ Bảng màu doanh nghiệp (07/10/2026, app.css v61)
   Khách: "màu sắc chuẩn doanh nghiệp lớn, hơi nhạt, chưa chuyên nghiệp" → toàn web: nền trắng, viền rõ, chữ đậm hơn, tiêu đề bảng
   nền xanh đậm chữ trắng (theo màu chủ đạo từng tài khoản), màu trạng thái đậm chuẩn (xanh lá đủ · cam trễ · đỏ vắng/thiếu · xanh dương lịch ·
   tím phép), bo góc gọn 8–10px, nút biểu tượng SVG. Ô ca: nền trắng + vạch màu loại ca bên trái + chữ đậm, góc ô có dấu tình trạng màu. */
:root { --head-bg: color-mix(in srgb, var(--primary) 70%, #0b1405); --on-head: #ffffff; --head-line: color-mix(in srgb, var(--primary) 55%, #000); --border-strong: #b6c0cc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --head-bg: color-mix(in srgb, var(--primary) 28%, #0e1418); --head-line: color-mix(in srgb, var(--primary) 20%, #0e1418); --border-strong: #3b4858; } }
:root[data-theme="dark"] { --head-bg: color-mix(in srgb, var(--primary) 28%, #0e1418); --head-line: color-mix(in srgb, var(--primary) 20%, #0e1418); --border-strong: #3b4858; }

/* chữ, tiêu đề, thẻ, nút, ô nhập */
.h1 { letter-spacing: -.2px; }
.card { box-shadow: var(--shadow); }
.card-title { font-size: 15.5px; }
.btn { border-radius: 8px; }
.btn-outline { background: var(--surface); }
.btn-outline:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.btn-primary { box-shadow: 0 1px 2px rgba(16,24,40,.18); }
.btn .bi { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
input, select, textarea { border-color: var(--border-strong); border-radius: 8px; }
.badge { font-weight: 700; }
.alert { border-left: 4px solid currentColor; border-radius: 8px; font-weight: 500; }
.summary-strip { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--muted); gap: 6px 0; padding: 8px 4px; }
.summary-strip > span { padding: 0 14px; border-right: 1px solid var(--border); }
.summary-strip > span:last-child { border-right: 0; }
.summary-strip b { font-size: 14.5px; }
.summary-strip .ss-warn b { color: var(--pending); }

/* bảng: tiêu đề nền xanh đậm chữ trắng */
.table thead th { background: var(--head-bg); color: var(--on-head); border-bottom: 0; letter-spacing: .4px; }
.table thead th a { color: inherit; }
.matrix-wrap { border-color: var(--border-strong); }
.matrix th, .matrix td { border-color: var(--border); }
.matrix thead th { background: var(--head-bg); color: var(--on-head); border-color: var(--head-line); font-weight: 700; }
.matrix thead .sticky, .ws thead .ws-stt { background: var(--head-bg); color: var(--on-head); }
.matrix thead th small { color: rgba(255,255,255,.78); }
.matrix thead th.sun { color: #ffc9c9; }
.matrix th.today { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 -4px 0 var(--accent); }
.matrix td.today { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-left: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.matrix tr.total td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border-strong); }
.matrix tbody tr:hover > td.sticky, .matrix tbody tr:hover > td.ws-stt { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* menu: mục đang mở có vạch trái + chữ đậm; thanh biểu tượng vạch trái */
.sb-item.active { background: color-mix(in srgb, var(--primary) 11%, var(--surface)); box-shadow: inset 3px 0 0 var(--primary); }
.rail-btn[aria-current]::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.tabbar-in a.active { font-weight: 700; box-shadow: inset 0 -3px 0 var(--primary); }

/* ---------------------------------------------------------------- ô lịch tuần / tháng (07/10/2026 lần 6) */
.sched-cell.past { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.sched-cell.past .chip { opacity: 1; }
.ws .ws-chip { display: flex; padding: 4px 18px 4px 7px; margin: 2px 0; border: 1px solid var(--border); border-left: 4px solid var(--sc, var(--primary)); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: 0 1px 1px rgba(16,24,40,.05); text-decoration: none; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.ws .ws-chip:hover { border-color: var(--primary); border-left-color: var(--sc, var(--primary)); box-shadow: 0 2px 8px rgba(16,24,40,.14); }
.ws .ws-chip:focus-visible, .ws-leave:focus-visible, .ws-empty:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ws .ws-chip.k-absent, .ws .ws-chip.k-created { background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.ws-code { color: var(--text); font-weight: 800; }
.ws-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws .ws-chip .chip-io { color: var(--text); font-weight: 600; margin-top: 1px; }
.ws-ot { color: #b91c1c; font-weight: 800; }
.bal-tag { display: inline-block; padding: 0 4px; border-radius: 4px; font-weight: 800; font-size: 10.5px; line-height: 1.5; vertical-align: 1px; }
b.bal-tag.b-ok { background: var(--ok-bg); color: var(--okt-fg); }
b.bal-tag.b-neg, b.bal-tag.b-absent { background: var(--danger); color: #fff; } /* b.… : thắng .chip-io b.b-neg (chữ đỏ) cũ */
b.bal-tag.b-pos { background: var(--late-bg); color: var(--pos-fg); }
.ws .chip-st { top: 3px; right: 3px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; line-height: 1; font-weight: 800; color: #fff; background: var(--off); }
.ws .k-ok .chip-st { background: var(--ok); } .ws .k-late .chip-st { background: var(--warn); } .ws .k-missing .chip-st, .ws .k-created .chip-st { background: var(--danger); } .ws .k-working .chip-st { background: var(--working); }
.k-ok-t { color: var(--ok); } .k-late-t { color: var(--warn); } .k-missing-t, .k-created-t { color: var(--danger); }
.ws .ws-chip .pend { position: static; display: inline-block; width: 8px; height: 8px; margin-left: 4px; vertical-align: 0; border-radius: 50%; background: #f5b400; box-shadow: 0 0 0 1.5px rgba(0,0,0,.3); }
.ws-abs { color: var(--danger); font-weight: 800; }
.ws-leave { display: block; margin: 2px 0; padding: 7px 6px; border: 1px solid transparent; border-left: 4px solid currentColor; border-radius: 6px; font-weight: 700; font-size: 12.5px; text-align: center; text-decoration: none; cursor: pointer; }
.ws-leave.ws-paid { color: var(--upcoming); background: var(--upcoming-bg); }
.ws-leave.ws-unpaid { color: var(--danger); background: var(--danger-bg); }
.ws-leave.ws-biz { color: var(--off); background: var(--off-bg); }
.ws-leave:hover { box-shadow: 0 2px 8px rgba(16,24,40,.14); }
.ws-empty { display: flex; align-items: center; justify-content: center; min-height: 42px; height: 100%; border: 1px dashed transparent; border-radius: 6px; color: transparent; font-size: 18px; font-weight: 700; text-decoration: none; }
.ws-cell:hover .ws-empty, .ws-empty:focus-visible { border-color: var(--border-strong); color: var(--muted); background: var(--surface); }
.ws td.ws-tot small.ws-pend { color: var(--pending); }
.ws .sticky a.link b { color: var(--text); }
.ws .sticky a.link:hover b { color: var(--primary); text-decoration: underline; }

/* lịch tháng: ô gọn, vạch đậm đầu tuần, cột chủ nhật hơi hồng */
.ws-month th.ws-day { min-width: 76px; font-size: 11.5px; padding: 3px 2px; }
.ws-month .ws-dnum { font-size: 15px; }
.ws-month .ws-cell { min-width: 76px; padding: 2px; }
.ws-month .ws-chip { padding: 3px 14px 3px 5px; }
.ws-month .ws-code { font-size: 12px; }
.ws-month .ws-time { font-size: 10.5px; }
.ws-month .ws-chip .chip-io { font-size: 10px; }
.ws-month .io-t { display: block; }
.ws-month .ws-leave { padding: 5px 2px; font-size: 11px; }
.ws-month .chip-st { width: 13px; height: 13px; font-size: 9px; }
.ws-month th.wk, .ws-month td.wk { border-left: 2px solid var(--border-strong); }
.ws-month thead th.wk { border-left-color: rgba(255,255,255,.55); }
.ws-month td.sun:not(.today) { background: color-mix(in srgb, var(--danger) 3%, var(--surface)); }
.ws-month td.sun.past:not(.today) { background: color-mix(in srgb, var(--danger) 4%, var(--surface-2)); }
.ws-month .sticky { min-width: 150px; }
@media (max-width: 699px) { .ws-month th.ws-day, .ws-month .ws-cell { min-width: 70px; } }

/* ---------------------------------------------------------------- popup ô lịch (/ql/lich/o) */
dialog.modal.frame-dlg.fd-md { width: min(780px, calc(100vw - 24px)); height: min(900px, calc(100vh - 32px)); }
@media (max-width: 699px) { dialog.modal.frame-dlg.fd-md { width: 100vw; height: 100%; } }
.dc { max-width: none; padding: 14px 16px 22px; }
.dc-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.dc-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dc-who b { font-size: 17px; }
.dc-nav { display: flex; align-items: center; gap: 4px; }
.dc-day { font-size: 15px; white-space: nowrap; }
.dc-peer { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dc-peer select { width: auto; max-width: 100%; padding: 6px 8px; font-size: 13.5px; }
.dc-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid transparent; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.tag.t-danger { background: var(--danger-bg); color: var(--neg-fg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.tag.t-warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tag.t-pending { background: var(--pending-bg); color: var(--pending); border-color: color-mix(in srgb, var(--pending) 35%, transparent); }
.tag.t-ok { background: var(--ok-bg); color: var(--okt-fg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tag.t-off { background: var(--off-bg); color: var(--off); }
.dc-shift { margin-bottom: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--sc, var(--primary)); border-radius: 10px; box-shadow: var(--shadow); }
.dc-shift.dc-empty { border-left-color: var(--border-strong); }
.dc-shift-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.dc-code { display: grid; place-items: center; flex: 0 0 auto; min-width: 42px; height: 42px; padding: 0 6px; border: 2px solid var(--sc, var(--primary)); border-radius: 8px; background: color-mix(in srgb, var(--sc, var(--primary)) 14%, var(--surface)); color: var(--text); font-weight: 800; font-size: 15px; }
.dc-shift-name { flex: 1 1 220px; min-width: 0; line-height: 1.35; }
.dc-plan { font-style: italic; }
.dc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.dc-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.dc-kv .kv { border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; }
.dc-kv .kv b { font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .dc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc-head { grid-template-columns: 1fr; } .dc-nav { justify-content: space-between; } }
.dc-note-line { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.dc-block { margin-top: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.dc-block-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dc-quote { margin: 6px 0 2px; font-style: italic; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc-chips form { display: inline; margin: 0; }
.qchip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.qchip small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.qchip:hover { border-color: var(--primary); color: var(--primary); }
.qchip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.qchip.on small { color: inherit; opacity: .85; }
.qchip.q-ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--okt-fg); }
.qchip.q-ok:hover { background: var(--ok); border-color: var(--ok); color: #fff; }
.qchip.q-no { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--neg-fg); }
.qchip.q-no:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.qchip.qradio input { width: auto; margin: 0; accent-color: var(--primary); }
.qchip.qradio:has(input:checked) { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); border-color: var(--primary); color: var(--primary); }
.qchip.qnote { font-weight: 500; }
.dc-edit { margin-top: 12px; }
.dc-edit > summary { list-style: none; }
.dc-edit > summary::-webkit-details-marker { display: none; }
.dc-edit[open] > summary { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.dc-form { margin-top: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 4px 16px rgba(16,24,40,.08); }
.dc-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.dc-grid label, .dc-note { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dc-note { margin-top: 10px; }
.dc-abs { margin-top: 10px; }
.dc-io[hidden] { display: none; }
.dc-foot { display: flex; gap: 8px; margin-top: 12px; }
.dc-revert { margin-top: 6px; }
.dc-sec { margin-top: 16px; }
.dc-sec-t { margin-bottom: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.dc-ccw { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.dc-ccw-main { flex: 1 1 200px; min-width: 0; }
.dc-ccw .dc-acts { flex: 1 1 100%; margin-top: 0; }
.dc-ph img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.dc-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
@media print {
  .ws-month { font-size: 6.5pt; }
  .ws-month .ws-code { font-size: 7pt; } .ws-month .ws-time { font-size: 6pt; }
  .ws-month th.ws-day { font-size: 6.5pt; } .ws-month .ws-dnum { font-size: 8pt; }
  .ws-month .sticky { min-width: 0 !important; }
  .ws-empty { display: none !important; }
}
/* 07/10/2026 lần 7: thiếu chấm ra = "Thiếu ra" (chưa tính đủ / thiếu giờ), giờ ngoài ca bù giờ thiếu */
.mcal-cell .bal.b-missing, .mx-cell .bal.b-missing { background: rgba(0,0,0,.24); }
b.bal-tag.b-missing { background: var(--pending-bg); color: var(--pending); }
.badge.bal-badge.b-missing { background: var(--pending-bg); color: var(--pending); }
.dc-kv .kv small { font-size: 11px; }
.dc-note-line { line-height: 1.45; }
.ws th.ws-tot-w, .ws td.ws-tot-w { min-width: 74px; max-width: none; }
.ws td.ws-tot-w small { display: block; color: var(--muted); font-weight: 500; }
.ws .ws-otm { color: #b91c1c; }

/* ================================================================ Ô lịch / bảng công theo ảnh mẫu khách (07/10/2026 lần 8, app.css v62)
   "Màu sắc dễ nhìn hơn, chữ rõ nét": ô tô màu NHẠT theo tình trạng chấm công + viền cùng màu, chữ đen đậm (thay nền đặc chữ trắng / nền trắng
   vạch màu ca); tiêu đề lưới sáng chữ đậm; ô trống khung nét đứt "+"; dải chú thích chấm màu dưới bảng (giống ứng dụng chấm công mẫu). */
:root {
  --c-ok-bg: #e6f6dc; --c-ok-bd: #4caf2a; --c-ok-tx: #1f6b0e;
  --c-late-bg: #fff3d4; --c-late-bd: #e8a317; --c-late-tx: #8a5a00;
  --c-miss-bg: #ffe2df; --c-miss-bd: #ec4d42; --c-miss-tx: #b3261e;
  --c-abs-bg: #e5e8ed; --c-abs-bd: #8a94a3; --c-abs-tx: #3d4654;
  --c-up-bg: #f7f8fa; --c-up-bd: #c4cbd5; --c-up-tx: #4b5563;
  --c-work-bg: #e2ecff; --c-work-bd: #4a7cf0; --c-work-tx: #1e4fbf;
  --c-leave-bg: #efe7ff; --c-leave-bd: #8b5cf6; --c-leave-tx: #5b2bc4;
  --c-unpaid-bg: #fbe3ea; --c-unpaid-bd: #b4234a; --c-unpaid-tx: #8f1838;
  --c-biz-bg: #dcf5f4; --c-biz-bd: #13a3a0; --c-biz-tx: #0b6e6c;
  --cell-tx: #17202c; --cell-sub: #374151; --grid-head: #eef1f5;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --c-ok-bg: #173320; --c-ok-bd: #4caf50; --c-ok-tx: #8fe08c; --c-late-bg: #3a2d10; --c-late-bd: #e0a030; --c-late-tx: #f5c96b;
  --c-miss-bg: #3e1b19; --c-miss-bd: #ef5350; --c-miss-tx: #ff9a95; --c-abs-bg: #262c34; --c-abs-bd: #7d8794; --c-abs-tx: #c4ccd6;
  --c-up-bg: #1a2129; --c-up-bd: #3b4653; --c-up-tx: #b6c0cb; --c-work-bg: #172649; --c-work-bd: #5b8def; --c-work-tx: #a9c4ff;
  --c-leave-bg: #2a1f46; --c-leave-bd: #a78bfa; --c-leave-tx: #cdbdff; --c-unpaid-bg: #3b1623; --c-unpaid-bd: #e05a7f; --c-unpaid-tx: #ff9fb9;
  --c-biz-bg: #0f302f; --c-biz-bd: #2bb8b8; --c-biz-tx: #8fe3e1; --cell-tx: #eef2f6; --cell-sub: #c9d2dc; --grid-head: #1d262e;
} }
:root[data-theme="dark"] {
  --c-ok-bg: #173320; --c-ok-bd: #4caf50; --c-ok-tx: #8fe08c; --c-late-bg: #3a2d10; --c-late-bd: #e0a030; --c-late-tx: #f5c96b;
  --c-miss-bg: #3e1b19; --c-miss-bd: #ef5350; --c-miss-tx: #ff9a95; --c-abs-bg: #262c34; --c-abs-bd: #7d8794; --c-abs-tx: #c4ccd6;
  --c-up-bg: #1a2129; --c-up-bd: #3b4653; --c-up-tx: #b6c0cb; --c-work-bg: #172649; --c-work-bd: #5b8def; --c-work-tx: #a9c4ff;
  --c-leave-bg: #2a1f46; --c-leave-bd: #a78bfa; --c-leave-tx: #cdbdff; --c-unpaid-bg: #3b1623; --c-unpaid-bd: #e05a7f; --c-unpaid-tx: #ff9fb9;
  --c-biz-bg: #0f302f; --c-biz-bd: #2bb8b8; --c-biz-tx: #8fe3e1; --cell-tx: #eef2f6; --cell-sub: #c9d2dc; --grid-head: #1d262e;
}

/* tiêu đề lưới lịch / bảng công: nền sáng, chữ đậm (ảnh mẫu); hôm nay: nền xanh nhạt + vạch xanh */
.matrix thead th, .matrix thead .sticky, .ws thead .ws-stt { background: var(--grid-head); color: var(--text); border-color: var(--border); font-weight: 700; }
.matrix thead th small { color: var(--muted); font-weight: 600; }
.matrix thead th.sun { color: var(--danger); }
.matrix th.today { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary-2); box-shadow: inset 0 -3px 0 var(--primary); }
.matrix th.today small { color: inherit; }
.matrix thead { box-shadow: 0 1px 0 var(--border-strong); }
.ws-month thead th.wk { border-left-color: var(--border-strong); }
:root[data-theme="dark"] .matrix th.today { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .matrix th.today { color: var(--primary); } }

/* ô ca trên Lịch tuần / Lịch tháng: màu theo tình trạng chấm công */
.ws .ws-chip { padding: 5px 20px 5px 8px; background: var(--c-up-bg); border: 1.5px solid var(--c-up-bd); border-radius: 6px; color: var(--cell-tx); box-shadow: none; }
.ws .ws-chip:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(16,24,40,.14); }
.ws .ws-chip.k-ok { background: var(--c-ok-bg); border-color: var(--c-ok-bd); }
.ws .ws-chip.k-late { background: var(--c-late-bg); border-color: var(--c-late-bd); }
.ws .ws-chip.k-missing { background: var(--c-miss-bg); border-color: var(--c-miss-bd); }
.ws .ws-chip.k-created, .ws .ws-chip.k-absent { background: var(--c-abs-bg); border-color: var(--c-abs-bd); }
.ws .ws-chip.k-working { background: var(--c-work-bg); border-color: var(--c-work-bd); }
.ws .ws-chip.k-upcoming { background: var(--c-up-bg); border-color: var(--c-up-bd); }
.ws .ws-chip.k-off { background: var(--c-leave-bg); border-color: var(--c-leave-bd); }
.ws-code { color: var(--cell-tx); font-size: 13.5px; font-weight: 800; letter-spacing: .2px; }
.ws-time { color: var(--cell-sub); font-size: 12.5px; font-weight: 600; }
.ws .ws-chip .chip-io { color: var(--cell-tx); font-size: 12px; font-weight: 600; }
.ws .chip-st { width: 16px; height: 16px; font-size: 10.5px; }
.ws .k-late .chip-st { background: var(--c-late-bd); } .ws .k-ok .chip-st { background: var(--c-ok-bd); }
.ws .k-missing .chip-st { background: var(--c-miss-bd); } .ws .k-created .chip-st { background: var(--c-abs-bd); } .ws .k-working .chip-st { background: var(--c-work-bd); }
.ws-abs { color: var(--c-miss-tx); }
.ws-ot { color: var(--c-miss-tx); }
b.bal-tag.b-ok { background: transparent; color: var(--c-ok-tx); }
b.bal-tag.b-neg, b.bal-tag.b-absent { background: var(--c-miss-bd); color: #fff; }
b.bal-tag.b-pos { background: var(--c-leave-bd); color: #fff; }
b.bal-tag.b-missing { background: var(--c-miss-bd); color: #fff; }
.ws-leave { padding: 7px 6px; border: 1.5px solid; border-radius: 6px; font-size: 12.5px; font-weight: 700; }
.ws-leave.ws-paid { background: var(--c-leave-bg); border-color: var(--c-leave-bd); color: var(--c-leave-tx); }
.ws-leave.ws-unpaid { background: var(--c-unpaid-bg); border-color: var(--c-unpaid-bd); color: var(--c-unpaid-tx); }
.ws-leave.ws-biz { background: var(--c-biz-bg); border-color: var(--c-biz-bd); color: var(--c-biz-tx); }
:root[data-theme="dark"] .ws-leave.ws-paid { color: var(--c-leave-tx); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws-leave.ws-paid { color: var(--c-leave-tx); } }
.ws-empty { min-height: 40px; border: 1.5px dashed var(--border); color: var(--border-strong); background: transparent; }
.ws-cell:hover .ws-empty, .ws-empty:focus-visible { border-color: var(--primary); color: var(--primary); background: var(--surface); }
.sched-cell.past { background: var(--surface); }
.ws-month .ws-code { font-size: 12.5px; }
.ws-month .ws-time { font-size: 11.5px; }
.ws-month .ws-chip .chip-io { font-size: 11px; }
.ws-month .ws-chip { padding: 4px 16px 4px 6px; }
.ws-month .ws-leave { font-size: 11.5px; padding: 6px 2px; }
.ws td.ws-tot b, .ws tr.total td { color: var(--cell-tx); }

/* lịch tháng nhân viên + bảng công: cùng bảng màu nhạt, chữ đen (trước nền đặc chữ trắng) */
.mcal-cell, .mx-cell { border: 1.5px solid transparent; color: var(--cell-tx); }
.s-ok { background: var(--c-ok-bg); border-color: var(--c-ok-bd); color: var(--cell-tx); }
.s-late { background: var(--c-late-bg); border-color: var(--c-late-bd); color: var(--cell-tx); }
.s-missing { background: var(--c-miss-bg); border-color: var(--c-miss-bd); color: var(--cell-tx); }
.s-absent { background: var(--c-abs-bg); border-color: var(--c-abs-bd); color: var(--cell-tx); }
.s-sched { background: var(--c-up-bg); border-color: var(--c-up-bd); color: var(--cell-tx); }
.s-working { background: var(--c-work-bg); border-color: var(--c-work-bd); color: var(--cell-tx); }
.s-leave { background: var(--c-leave-bg); border-color: var(--c-leave-bd); color: var(--cell-tx); }
.s-off { background: var(--c-unpaid-bg); border-color: var(--c-unpaid-bd); color: var(--cell-tx); }
.s-none { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--muted); }
.mcal-cell .code, .mx-cell .code { color: var(--cell-tx); font-weight: 800; }
.mcal-cell .io, .mx-cell .io { color: var(--cell-sub); font-weight: 700; }
.mcal-cell .io .miss, .mx-cell .io .miss { background: none; color: var(--c-miss-tx); font-weight: 800; }
.mcal-cell .bal, .mx-cell .bal { background: transparent; color: var(--cell-tx); }
.mcal-cell .bal.b-ok, .mx-cell .bal.b-ok { color: var(--c-ok-tx); }
.mcal-cell .bal.b-neg, .mx-cell .bal.b-neg, .mcal-cell .bal.b-absent, .mx-cell .bal.b-absent, .mcal-cell .bal.b-missing, .mx-cell .bal.b-missing { background: var(--c-miss-bd); color: #fff; }
.mcal-cell .bal.b-pos, .mx-cell .bal.b-pos { background: var(--c-leave-bd); color: #fff; }
.mcal-cell.s-off .bal, .mcal-cell.s-none .bal, .mx-cell.s-off .bal, .mx-cell.s-none .bal { background: transparent; color: var(--cell-tx); }
.mcal-cell.s-none .d { color: var(--muted); }
.mcal-cell .d { color: var(--cell-tx); }
.mcal-cell.sel { outline: 3px solid var(--primary); outline-offset: 1px; }
.mx-cell.today { outline: 2px solid var(--primary); }
.badge.mcal-badge { color: var(--cell-tx); border: 1px solid; }
.badge.mcal-badge.s-off, .badge.mcal-badge.s-none { color: var(--cell-tx); }
.mcal-legend .sw { border-width: 1.5px; border-style: solid; }
.mcal-legend .sw.s-off { border-color: var(--c-unpaid-bd); }
.mcal-legend .sw.s-none { border: 1.5px dashed var(--border-strong); }

/* dải chú thích chấm màu dưới bảng (ảnh mẫu) */
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 2px; font-size: 13px; color: var(--text); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-legend .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; border: 2px solid; }
.dot.d-abs { background: var(--c-abs-bd); border-color: var(--c-abs-bd); } .dot.d-up { background: var(--c-up-bg); border-color: var(--c-up-bd); }
.dot.d-ok { background: var(--c-ok-bd); border-color: var(--c-ok-bd); } .dot.d-late { background: var(--c-late-bd); border-color: var(--c-late-bd); }
.dot.d-miss { background: var(--c-miss-bd); border-color: var(--c-miss-bd); } .dot.d-work { background: var(--c-work-bd); border-color: var(--c-work-bd); }
.dot.d-leave { background: var(--c-leave-bd); border-color: var(--c-leave-bd); } .dot.d-unpaid { background: var(--c-unpaid-bd); border-color: var(--c-unpaid-bd); }
.dot.d-biz { background: var(--c-biz-bd); border-color: var(--c-biz-bd); }

/* popup ô: vạch trái + ô mã ca theo tình trạng */
.dc-shift.k-ok { border-left-color: var(--c-ok-bd); } .dc-shift.k-late { border-left-color: var(--c-late-bd); } .dc-shift.k-missing { border-left-color: var(--c-miss-bd); }
.dc-shift.k-created { border-left-color: var(--c-abs-bd); } .dc-shift.k-working { border-left-color: var(--c-work-bd); } .dc-shift.k-upcoming { border-left-color: var(--c-up-bd); } .dc-shift.k-off { border-left-color: var(--c-leave-bd); }
.dc-shift.k-ok .dc-code { background: var(--c-ok-bg); border-color: var(--c-ok-bd); } .dc-shift.k-late .dc-code { background: var(--c-late-bg); border-color: var(--c-late-bd); }
.dc-shift.k-missing .dc-code { background: var(--c-miss-bg); border-color: var(--c-miss-bd); } .dc-shift.k-created .dc-code { background: var(--c-abs-bg); border-color: var(--c-abs-bd); }
.dc-shift.k-working .dc-code { background: var(--c-work-bg); border-color: var(--c-work-bd); } .dc-shift.k-upcoming .dc-code { background: var(--c-up-bg); border-color: var(--c-up-bd); }

@media print {
  .st-legend { display: none !important; }
  .ws .ws-chip { border: 0 !important; }
}
b.bal-tag { white-space: nowrap; }
.ws-month .chip-io .bal-tag { display: inline-block; margin-top: 1px; }

/* ================================================================ Lịch & chấm công gộp — bảng màu "lịch = khung trắng, công = tô nền"
   (07/10/2026 lần 9, app.css v63; khách: "tư duy lại màu cho dễ nhìn, không bị nhầm lịch làm")
   • Ca CHƯA làm (mới là lịch): nền trắng, viền nét đứt xám — không màu.  • Ô trống (không có lịch): không viền, chỉ dấu + mờ.
   • Ca ĐÃ làm tô nền theo kết quả (đèn giao thông): xanh lá đủ giờ · vàng trễ / về sớm / làm thiếu · đỏ nhạt thiếu chấm ra · đỏ vắng;
     xanh dương đang làm; tím nghỉ phép năm / công tác; xám nghỉ không phép.  • Chấm cam = giờ dư chờ duyệt.
   • Xếp lịch, ảnh lịch, chọn ca: KHÔNG dùng màu ca KiotViet nữa (khung trắng, mã ca chữ đậm) để không trùng màu tình trạng. */
:root {
  --c-ok-bg: #e2f4dc; --c-ok-bd: #3d9a2b; --c-ok-tx: #1c5c12;
  --c-late-bg: #fff4c4; --c-late-bd: #e0aa00; --c-late-tx: #6e4d00;
  --c-miss-bg: #ffe9e6; --c-miss-bd: #f0645a; --c-miss-tx: #a3161b;
  --c-abs-bg: #fdd6d2; --c-abs-bd: #d32f2f; --c-abs-tx: #8f1212;
  --c-up-bg: #ffffff; --c-up-bd: #8d99a8; --c-up-tx: #334155;
  --c-work-bg: #e1ecff; --c-work-bd: #3a72e8; --c-work-tx: #1a4cc0;
  --c-leave-bg: #efe7ff; --c-leave-bd: #8b5cf6; --c-leave-tx: #5b2bc4;
  --c-biz-bg: #efe7ff; --c-biz-bd: #8b5cf6; --c-biz-tx: #5b2bc4;
  --c-unpaid-bg: #e8ebef; --c-unpaid-bd: #7d8794; --c-unpaid-tx: #374151;
  --c-pend: #f97316;
  --late: #8f6400; --late-bg: #fff4c4; --upcoming: #64748b; --upcoming-bg: #f4f6f9; --working: #2563eb; --working-bg: #e1ecff;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --c-late-bg: #3a300c; --c-late-bd: #e6b422; --c-late-tx: #f5d36b;
  --c-miss-bg: #3a1d1b; --c-miss-bd: #f07167; --c-miss-tx: #ffaaa3;
  --c-abs-bg: #4a1717; --c-abs-bd: #e53935; --c-abs-tx: #ff8a80;
  --c-up-bg: #161d23; --c-up-bd: #66778a; --c-up-tx: #c9d2dc;
  --c-biz-bg: #2a1f46; --c-biz-bd: #a78bfa; --c-biz-tx: #cdbdff;
  --c-unpaid-bg: #262c34; --c-unpaid-bd: #7d8794; --c-unpaid-tx: #c4ccd6;
  --late: #e8b730; --late-bg: #3a300c; --upcoming: #9aa8b8; --upcoming-bg: #1a2129; --working: #6d9cf5; --working-bg: #172649;
} }
:root[data-theme="dark"] {
  --c-late-bg: #3a300c; --c-late-bd: #e6b422; --c-late-tx: #f5d36b;
  --c-miss-bg: #3a1d1b; --c-miss-bd: #f07167; --c-miss-tx: #ffaaa3;
  --c-abs-bg: #4a1717; --c-abs-bd: #e53935; --c-abs-tx: #ff8a80;
  --c-up-bg: #161d23; --c-up-bd: #66778a; --c-up-tx: #c9d2dc;
  --c-biz-bg: #2a1f46; --c-biz-bd: #a78bfa; --c-biz-tx: #cdbdff;
  --c-unpaid-bg: #262c34; --c-unpaid-bd: #7d8794; --c-unpaid-tx: #c4ccd6;
  --late: #e8b730; --late-bg: #3a300c; --upcoming: #9aa8b8; --upcoming-bg: #1a2129; --working: #6d9cf5; --working-bg: #172649;
}
/* ô lịch tuần / tháng */
.ws .ws-chip.k-upcoming { background: var(--c-up-bg); border: 1.5px dashed var(--c-up-bd); }
.ws .ws-chip.k-upcoming .ws-code, .ws .ws-chip.k-upcoming .ws-time { color: var(--c-up-tx); }
.ws .ws-chip.k-created, .ws .ws-chip.k-absent { background: var(--c-abs-bg); border-color: var(--c-abs-bd); }
.ws .ws-chip.k-missing { background: var(--c-miss-bg); border-color: var(--c-miss-bd); }
.ws .ws-chip.k-off { background: var(--c-unpaid-bg); border-color: var(--c-unpaid-bd); }
.ws .k-created .chip-st, .ws .k-absent .chip-st { background: var(--c-abs-bd); }
.ws-abs { color: var(--c-abs-tx); font-weight: 800; }
.ws-empty { min-height: 40px; border: 1.5px solid transparent; color: var(--border); background: transparent; }
.ws-cell:hover .ws-empty, .ws-empty:focus-visible { border: 1.5px dashed var(--primary); color: var(--primary); background: var(--surface); }
.sched-cell.past .ws-chip.k-upcoming { opacity: 1; }
b.bal-tag.b-pos { background: var(--c-ok-bd); color: #fff; }
b.bal-tag.b-absent { background: var(--c-abs-bd); color: #fff; }
.ws .ws-chip .pend, .mcal-cell .pend, .chip-io .pend, .mx-cell .pend, .pend-sw { background: var(--c-pend); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.35); }
/* lịch tháng nhân viên, bảng công (mcal / mx) */
.s-sched { background: var(--c-up-bg); border: 1.5px dashed var(--c-up-bd); color: var(--c-up-tx); }
.s-absent { background: var(--c-abs-bg); border-color: var(--c-abs-bd); }
.s-missing { background: var(--c-miss-bg); border-color: var(--c-miss-bd); }
.s-none { background: transparent; border: 1.5px solid transparent; color: var(--muted); }
.mcal-cell .bal.b-pos, .mx-cell .bal.b-pos { background: var(--c-ok-bd); color: #fff; }
.mcal-cell .bal.b-absent, .mx-cell .bal.b-absent { background: var(--c-abs-bd); color: #fff; }
.mcal-legend .sw.s-sched { border: 1.5px dashed var(--c-up-bd); background: var(--c-up-bg); }
.mcal-legend .sw.s-none { border: 1.5px solid var(--border); background: transparent; }
/* chú giải chấm màu */
.dot.d-up { background: var(--c-up-bg); border: 2px dashed var(--c-up-bd); }
.dot.d-abs { background: var(--c-abs-bd); border-color: var(--c-abs-bd); }
.dot.d-miss { background: var(--c-miss-bg); border-color: var(--c-miss-bd); }
.st-legend .dot.d-pend { width: 9px; height: 9px; background: var(--c-pend); border: 0; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0,0,0,.35); }
.st-legend .st-sep { width: 1px; height: 14px; background: var(--border); }
/* popup ô: không còn vạch màu ca */
.dc-shift { border-left-color: var(--c-up-bd); }
.dc-shift .dc-code { background: var(--c-up-bg); border-color: var(--c-up-bd); }
.dc-shift.k-upcoming .dc-code { border-style: dashed; }
.dc-shift.k-off { border-left-color: var(--c-unpaid-bd); } .dc-shift.k-off .dc-code { background: var(--c-unpaid-bg); border-color: var(--c-unpaid-bd); }
/* huy hiệu / thẻ ca / chấm trạng thái dùng chung (bảng công NV, tổng quan, duyệt): "không chấm" = đỏ vắng, "sắp tới" = xám lịch */
.sw.st-created { background: var(--c-abs-bd); } .sw.st-missing { background: var(--c-miss-bd); } .sw.st-late { background: var(--c-late-bd); }
.sw.st-off { background: var(--c-unpaid-bd); } .sw.st-upcoming { background: var(--c-up-bg); box-shadow: inset 0 0 0 1.5px var(--c-up-bd); } .sw.st-ok { background: var(--c-ok-bd); }
.badge.st-created { background: var(--c-abs-bg); color: var(--c-abs-tx); } .badge.st-late { background: var(--c-late-bg); color: var(--c-late-tx); }
.badge.st-missing { background: var(--c-miss-bg); color: var(--c-miss-tx); } .badge.st-upcoming { background: var(--c-up-bg); color: var(--c-up-tx); box-shadow: inset 0 0 0 1px var(--c-up-bd); }
.badge.st-working { background: var(--c-work-bg); color: var(--c-work-tx); } .badge.st-ok { background: var(--c-ok-bg); color: var(--c-ok-tx); }
.shift-card.st-created, .chip-emp.st-created { border-left-color: var(--c-abs-bd); } .shift-card.st-late, .chip-emp.st-late { border-left-color: var(--c-late-bd); }
.shift-card.st-upcoming, .chip-emp.st-upcoming { border-left-color: var(--c-up-bd); border-left-style: dashed; }
.day-shift.st-created { background: var(--c-abs-bg); border-left-color: var(--c-abs-bd); } .day-shift.st-late { background: var(--c-late-bg); border-left-color: var(--c-late-bd); }
.day-shift.st-upcoming { background: var(--c-up-bg); border-left-color: var(--c-up-bd); border-left-style: dashed; }
.lg.st-created { border-color: var(--c-abs-bd); } .lg.st-late { border-color: var(--c-late-bd); } .lg.st-upcoming { border-color: var(--c-up-bd); border-style: dashed; }
.dot.st-created { background: var(--c-abs-bg); color: var(--c-abs-tx); } .dot.st-late { background: var(--c-late-bg); color: var(--c-late-tx); }
/* Xếp lịch: ca = khung trắng viền xám, tên ca chữ đậm (bỏ màu ca KiotViet); đăng ký chờ duyệt = nét đứt vàng nhạt */
.ro-chip { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong, #9aa5b1); }
.ro-chip .chip-time { color: var(--muted); opacity: 1; }
.ro-chip.ro-off { background: var(--c-unpaid-bg); color: var(--c-unpaid-tx); border: 1.5px dashed var(--c-unpaid-bd); }
.ro-chip.ro-pend { background: color-mix(in srgb, var(--c-late-bg) 55%, var(--surface)); color: var(--c-late-tx); border: 1.5px dashed var(--c-late-bd); }
.ro-chip.ro-kv { background: var(--surface-2); color: var(--muted); border: 1.5px dotted var(--border-strong, #9aa5b1); }
.ro-pick { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong, #9aa5b1); }
.ro-pick:hover { filter: none; border-color: var(--primary); }
.ro-pick small { color: var(--muted); opacity: 1; }
.chip.sh-plain { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong, #9aa5b1); }
/* trang gộp: biểu đồ gập / mở */
.chart-fold { margin: 0 0 12px; }
.chart-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 14px; }
.chart-fold > summary::-webkit-details-marker { display: none; }
.chart-fold > summary::before { content: "\25B8"; font-size: 12px; color: var(--muted); transition: transform .15s; }
.chart-fold[open] > summary::before { transform: rotate(90deg); }
.chart-fold[open] > summary { margin-bottom: 10px; }
.ws td.ws-tot b.neg { color: var(--c-abs-tx); }
.ws td.ws-tot small.mx-short { display: block; color: var(--c-late-tx); font-weight: 700; }
@media print { .chart-fold { display: none !important; } }

/* 07/10/2026 lần 10: một khung chú giải màu cho mọi trang (partials/st-legend.ejs) — nền trắng, viền bo góc như trang nhân viên;
   cột rộng hơn để chữ ít xuống dòng; điện thoại 2 cột */
.mcal-legend { grid-template-columns: repeat(auto-fill, minmax(min(200px, calc(50% - 8px)), 1fr)); gap: 8px 16px; color: var(--text); }
.ws-page .mcal-legend, .container > .mcal-legend { margin: 12px 0 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mcal-legend span { line-height: 1.3; }

/* 08/10/2026: nút "Tải về ▾" gom PDF / ảnh / Excel / In (partials/dl-menu.ejs) — dùng khung menu nổi của nút ⋯ */
.dl-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dl-btn .dl-caret { width: 14px; height: 14px; margin: 0 -2px 0 -1px; transition: transform .15s; }
.dl-menu[open] > .dl-btn .dl-caret { transform: rotate(180deg); }
.dl-menu[open] > .dl-btn.btn-outline { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.dl-menu .rm-list { min-width: 260px; }
.dl-menu .rm-item { align-items: flex-start; padding: 9px 10px; text-decoration: none; }
.dl-menu .rm-ic { flex: 0 0 22px; padding-top: 1px; }
.dl-menu .rm-ic .bi { display: block; width: 20px; height: 20px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dl-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dl-t b { font-weight: 600; color: var(--text); }
.dl-t small { color: var(--muted); font-size: 12px; font-weight: 400; white-space: normal; line-height: 1.35; }
.rm-ic.k-pdf { color: #c8102e; } .rm-ic.k-xlsx { color: #1d7a45; } .rm-ic.k-img { color: #2563eb; } .rm-ic.k-print { color: var(--muted); }
.qr-actions .dl-menu { display: inline-block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rm-ic.k-pdf { color: #f87171; } :root:not([data-theme="light"]) .rm-ic.k-xlsx { color: #4ade80; } :root:not([data-theme="light"]) .rm-ic.k-img { color: #60a5fa; } }
:root[data-theme="dark"] .rm-ic.k-pdf { color: #f87171; } :root[data-theme="dark"] .rm-ic.k-xlsx { color: #4ade80; } :root[data-theme="dark"] .rm-ic.k-img { color: #60a5fa; }
@media print { .dl-menu { display: none !important; } }

/* ===== 09/10/2026 — bộ phận & tuỳ chọn lương, phiếu lương gọn (nhóm gập), ô lịch sắp tới xanh lá nhạt, cài đặt chi nhánh ===== */
:root { --c-up-bg: #eef8e8; --c-up-bd: #8fc876; --c-up-tx: #2f6b1e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-up-bg: #16261a; --c-up-bd: #4f8a3e; --c-up-tx: #b7e0a6; } }
:root[data-theme="dark"] { --c-up-bg: #16261a; --c-up-bd: #4f8a3e; --c-up-tx: #b7e0a6; }
.slip-folds { display: flex; flex-direction: column; gap: 6px; }
.slip-fold { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.slip-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.slip-fold > summary::-webkit-details-marker { display: none; }
.slip-fold .sf-title { flex: 1 1 auto; min-width: 0; font-weight: 600; } .slip-fold .sf-title small { display: block; font-weight: 400; }
.slip-fold .sf-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-chev { display: inline-block; color: var(--muted); font-size: 18px; line-height: 1; transform: rotate(90deg); transition: transform .15s; }
details[open] > summary .sf-chev { transform: rotate(-90deg); }
.slip-fold .slip-table { width: calc(100% - 16px); margin: 0 8px 8px; }
.slip-fold-ded .sf-amt.neg { color: var(--danger); }
.slip-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; }
.slip-line.slip-total { background: var(--surface-2); border-radius: 10px; padding: 12px; } .slip-line .sf-net { font-size: 18px; color: var(--primary); white-space: nowrap; }
.slip-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 10px; }
.slip-hint { margin: 10px 0 0; }
.pay-fields { display: flex; flex-direction: column; gap: 8px; }
.pf-fold { border: 1px dashed var(--border); border-radius: 10px; padding: 0 10px; }
.pf-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; cursor: pointer; font-weight: 600; }
.pf-fold > summary::-webkit-details-marker { display: none; } .pf-fold > summary small { font-weight: 400; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; padding: 4px 0 8px; }
.pf-grid label { margin: 0; } .pf-grid .pf-def { display: block; }
.pf-allow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.pf-note { margin: 0 0 8px; }
.dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.dept-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.dept-card .dc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .dept-card .dc-head b { font-size: 15px; }
.dept-card .grid-2 label { margin: 0; font-size: 13px; } .dept-card .checks { margin-top: 6px; }
.dept-card .dc-sum { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.badge.st-dept { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.set-td-kv select { min-width: 150px; } .set-branch-table .rule-viewonly .badge { white-space: nowrap; }
.rg-leave-warn { margin: 8px 0 0; }
.emp-fields .pay-fields { grid-column: 1 / -1; }
.set-branch-table select { min-width: 150px; }

/* Cài đặt › Chi nhánh chỉ đọc (09/10/2026): sửa từng hàng qua ⋯ → Chỉnh sửa (popup), bảng không còn ô nhập nên không tràn ngang */
.set-branch-table td.set-td-addr { min-width: 160px; max-width: 280px; }
.set-branch-table tr.row-hl > td { background: color-mix(in srgb, var(--primary) 9%, transparent); }
@media (max-width: 760px) { .set-branch-table td.set-td-addr { max-width: none; } }

/* Đăng ký chờ duyệt (09/10/2026, /ql/xep-lich/cho-duyet): nhóm chi nhánh × tuần, mỗi nhân viên một khối, mỗi ngày một dòng Duyệt / Từ chối */
.rp-group { margin-bottom: 14px; }
.rp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-emp { display: grid; grid-template-columns: minmax(180px, 26%) minmax(0, 1fr); gap: 6px 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.rp-emp:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-rows { display: flex; flex-direction: column; gap: 6px; }
.rp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rp-day { min-width: 62px; font-weight: 600; }
.rp-btns { display: inline-flex; gap: 6px; margin-left: auto; }
@media (max-width: 640px) { .rp-emp { grid-template-columns: 1fr; } .rp-btns { margin-left: 0; } }
.ro-pend-other { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-left: 3px solid var(--warn); }
/* chip là liên kết (khoảng ngày nhanh ở Cảnh báo, 09/10/2026) */
a.qchip { text-decoration: none; }

/* ===== Bề ngang máy tính (09/10/2026, khách: "trên máy tính nhiều chỗ trống") =====
   .container (760) = form / camera; .container.mid = lịch, bảng, trang thẻ; .container.wide = danh sách, bảng lớn (màn 1920 không còn trống 2 bên).
   .dt-flow: trang nhiều thẻ xếp dọc → máy tính rộng chảy 2 cột (tiêu đề, bộ lọc, thông báo trải ngang). Điện thoại / máy tính bảng giữ 1 cột. */
.container.mid { max-width: 1320px; }
.container.wide { max-width: 1480px; }
.container.wide.set-page { max-width: 1320px; } /* form cài đặt: ô nhập không kéo quá dài */
@media (min-width: 1280px) {
  .dt-flow { column-count: 2; column-gap: 16px; }
  .dt-flow > * { break-inside: avoid; }
  .dt-flow > :is(.page-head, .hero, .alert, .summary-strip, .list-tools, .filters, .tabs, .ic-tabs, .set-crumb, script, dialog) { column-span: all; }
  /* Duyệt: thẻ duyệt xếp lưới nhiều cột trong từng nhóm chi nhánh / ngày (11/10/2026: thẻ nằm trong details.appr-grp) */
  .appr-page .appr-grp-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px; align-items: start; }
  .appr-page .appr-grp-body > :not(.approval) { grid-column: 1 / -1; }
  .appr-page .appr-grp-body > .appr-sub { margin: 4px 0 0; }
  .appr-page .appr-grp-body > .appr-sub:first-child { margin-top: 0; }
  .appr-page .approval { margin-bottom: 0; }
}

/* ===== Đào tạo (09/10/2026, v71): lớp học — tài liệu PDF — bài kiểm tra =====
   Nhân viên: danh sách lớp dạng thẻ "nhãn: giá trị" như mẫu khách gửi (Từ ngày / Đến ngày, ô tìm tên lớp, Tổng lớp (N), nút Xem tài liệu);
   trình xem PDF (PDF.js) đếm trang đã lật; bài trắc nghiệm có đồng hồ, tự lưu. Giám đốc: danh sách lớp, kết quả, tài liệu, soạn câu hỏi. */
.tr-filter { display: flex; flex-direction: column; gap: 10px; }
.tr-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.tr-dates label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: var(--text); font-weight: 600; }
.tr-dates input { min-width: 0; }
.tr-go { width: 46px; height: 42px; padding: 0; }
.tr-go svg, .tr-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tr-tools > input[type="search"] { flex: 1 1 220px; }
.tr-tools > select { flex: 0 1 210px; width: auto; min-width: 0; max-width: 100%; }
.tr-total { display: flex; align-items: center; justify-content: center; padding: 10px 12px; margin: 0 0 12px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary-2); font-weight: 700; font-size: 16px; }
:root[data-theme="dark"] .tr-total { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tr-total { color: var(--primary); } }
.tr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.tr-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--trc, var(--border-strong)); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.tr-card.k-todo { --trc: var(--pending); } .tr-card.k-done { --trc: var(--ok); } .tr-card.k-over { --trc: var(--danger); } .tr-card.k-soon { --trc: var(--upcoming); }
.tr-kv { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 14px; line-height: 1.4; }
.tr-kv dt { color: var(--muted); }
.tr-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tr-kv dd b { font-weight: 700; }
.tr-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 14px; }
.tr-res > div { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .tr-res > div:last-child { justify-content: flex-end; }
.tr-res span { color: var(--muted); }
.tr-cst { font-weight: 700; } .tr-cst.k-open { color: var(--danger); } .tr-cst.k-upcoming { color: var(--upcoming); } .tr-cst.k-ended, .tr-cst.k-archived { color: var(--muted); }
.tr-pass { color: var(--ok); font-weight: 700; } .tr-fail { color: var(--danger); font-weight: 700; }
.tr-due { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--pending-bg); color: var(--pending); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tr-due.urgent { background: var(--danger-bg); color: var(--danger); }
.tr-acts { display: flex; gap: 8px; margin-top: 12px; }
.tr-acts > a, .tr-acts > button, .tr-acts > form { flex: 1 1 0; min-width: 0; }
.tr-acts > form { margin: 0; display: flex; } .tr-acts > form > .btn { flex: 1 1 auto; }
.tr-empty { text-align: center; padding: 28px 12px; }
.tr-empty b { display: block; font-size: 16px; margin-bottom: 4px; color: var(--text); }
/* trang 1 lớp (nhân viên) */
.tr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: trs; }
.tr-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.3; }
.tr-steps li::before { counter-increment: trs; content: counter(trs); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--border); color: var(--text); font-weight: 700; font-size: 13px; }
.tr-steps li.done { background: var(--ok-bg); color: var(--ok); } .tr-steps li.done::before { content: "✓"; background: var(--ok); color: #fff; }
.tr-steps li.now { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--text); font-weight: 600; } .tr-steps li.now::before { background: var(--primary); color: var(--on-primary); }
.tr-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tr-desc { white-space: pre-line; margin: 10px 0 0; line-height: 1.5; }
.tr-docs { display: flex; flex-direction: column; }
.tr-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tr-doc:last-child { border-bottom: 0; }
.tr-doc-ic { display: grid; place-items: center; width: 40px; height: 46px; border-radius: 6px; background: var(--danger-bg); color: var(--danger); font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.tr-doc-ic.read { background: var(--ok-bg); color: var(--ok); }
.tr-doc-main { min-width: 0; } .tr-doc-main b { display: block; overflow-wrap: anywhere; } .tr-doc-main small { color: var(--muted); }
.tr-doc-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tr-doc-act form { margin: 0; }
.tr-meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 5px; max-width: 220px; }
.tr-meter i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.tr-meter.ok i { background: var(--ok); }
.tr-atts { display: flex; flex-direction: column; margin-top: 8px; }
.tr-att { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 14px; }
.tr-att .grow { flex: 1 1 auto; }
.tr-exam-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.tr-exam-box form { margin: 0; }
.tr-why { margin: 8px 0 0; color: var(--warn); font-weight: 600; font-size: 13.5px; }
/* trình xem PDF */
.pdf-page-wrap { padding: 0 0 120px; }
.ex-page { padding-bottom: 80px; }
.pdf-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pdf-bar .pdf-title { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-bar .pdf-pg { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.pdf-bar .btn { min-width: 38px; min-height: 36px; padding: 5px 9px; }
.pdf-prog { height: 4px; background: var(--surface-2); }
.pdf-prog i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s; }
.pdf-prog.ok i { background: var(--ok); }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px; overflow-x: auto; }
.pdf-pg-box { position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); flex: 0 0 auto; }
.pdf-pg-box canvas { display: block; width: 100%; height: 100%; }
.pdf-pg-box .pdf-pg-n { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(15,28,45,.6); color: #fff; font-size: 11.5px; }
.pdf-pg-box.loading::after { content: "Đang tải trang…"; position: absolute; inset: 0; display: grid; place-items: center; color: #7a8594; font-size: 13px; }
.pdf-msg { max-width: 640px; margin: 24px auto; }
.pdf-done { position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; width: min(560px, calc(100vw - 20px)); padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--ok); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.pdf-done b { color: var(--ok); }
@media (min-width: 1024px) { .pdf-done { bottom: 96px; } }
.pdf-done[hidden], .tr-float[hidden], .tr-target[hidden], .tr-up [hidden] { display: none; }
.table.stack tr[hidden] { display: none !important; } /* dòng "Không có mục nào khớp bộ lọc" của bảng xếp thẻ trên điện thoại */
/* bài kiểm tra */
.ex-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* thanh nổi (đồng hồ bài kiểm tra, trang PDF): cố định đáy màn hình trên thanh menu dưới — khỏi tính chiều cao thanh đầu / dải tab */
.tr-float { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; max-width: calc(100vw - 20px); border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 8px 26px rgba(0,0,0,.18); white-space: nowrap; }
.tr-float .btn { min-width: 36px; min-height: 34px; padding: 4px 8px; border-radius: 999px; }
.tr-float .pdf-pg { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; min-width: 64px; text-align: center; }
@media (min-width: 1024px) { .tr-float { bottom: 44px; } }
.ex-bar .ex-t { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-clock { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 17px; padding: 3px 10px; border-radius: 8px; background: var(--surface-2); }
.ex-clock.warn { background: var(--danger-bg); color: var(--danger); }
.ex-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ex-saved { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ex-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.ex-q.answered { border-left: 4px solid var(--primary); }
fieldset.ex-q { min-width: 0; margin: 0 0 12px; } .ex-lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ex-qh { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.ex-qt { font-weight: 600; font-size: 15.5px; line-height: 1.45; margin-bottom: 10px; white-space: pre-line; overflow-wrap: anywhere; }
.ex-opts { display: flex; flex-direction: column; gap: 8px; }
.ex-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; line-height: 1.4; color: var(--text); -webkit-tap-highlight-color: transparent; }
.ex-opt:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.ex-opt input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.ex-opt .ex-l { flex: 0 0 auto; font-weight: 800; color: var(--muted); min-width: 16px; }
.ex-opt span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ex-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.ex-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0 24px; }
/* kết quả */
.ex-score { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ex-big { font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ex-big small { font-size: 16px; color: var(--muted); font-weight: 600; }
.ex-big.ok { color: var(--ok); } .ex-big.no { color: var(--danger); }
.ex-rev { display: flex; flex-direction: column; gap: 10px; }
.ex-rq { border: 1px solid var(--border); border-left: 4px solid var(--ok); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.ex-rq.wrong { border-left-color: var(--danger); }
.ex-rq .ex-qt { font-size: 14.5px; margin-bottom: 6px; }
.ex-ro { display: flex; gap: 8px; align-items: flex-start; padding: 4px 8px; border-radius: 6px; font-size: 14px; color: var(--muted); }
.ex-ro.chosen { color: var(--text); font-weight: 600; background: var(--surface-2); }
.ex-ro.chosen.bad { background: var(--danger-bg); color: var(--danger); }
.ex-ro.right { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.ex-ro .ex-mk { flex: 0 0 18px; text-align: center; }
.ex-note { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-style: italic; }
.ex-fold > summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--primary); }
/* Giám đốc */
.tr-prog { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.tr-prog .tr-meter { flex: 1 1 auto; margin: 0; max-width: none; min-width: 60px; }
.tr-prog b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-up { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 18px; text-align: center; background: var(--surface-2); transition: border-color .15s, background-color .15s; }
.tr-up.over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.tr-up p { margin: 6px 0 0; }
.tr-queue { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; text-align: left; }
.tr-qi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.tr-qi .tr-meter { grid-column: 1 / -1; max-width: none; margin: 0; }
.tr-qi.err { border-color: var(--danger); color: var(--danger); }
.tr-target { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tr-target .seg-radio { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tr-target .seg-radio label { flex-direction: row; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: 14px; }
.tr-tgroup { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.tr-tgroup > b { display: block; font-size: 13px; margin-bottom: 2px; color: var(--text); }
.tr-tgroup .checks { margin: 4px 0 2px; }
.tr-people { max-height: 260px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; padding: 6px 2px; }
.tr-people label { flex-direction: row !important; align-items: center; gap: 8px; margin: 0 !important; color: var(--text) !important; font-size: 13.5px !important; }
.tr-people label small { color: var(--muted); }
.tr-count { font-weight: 700; color: var(--primary); }
.tr-fold { border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; margin-bottom: 10px; }
.tr-fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; font-weight: 700; color: var(--text); }
.tr-fold > summary::-webkit-details-marker { display: none; }
.tr-fold > summary small { font-weight: 500; color: var(--muted); text-align: right; }
.tr-fold[open] > summary { border-bottom: 1px dashed var(--border); margin-bottom: 10px; }
.tr-name-link { color: var(--text); font-weight: 700; }
.tr-name-link:hover { color: var(--primary); }
/* soạn câu hỏi */
.qe-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.qe-list { display: flex; flex-direction: column; gap: 12px; }
.qe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); }
.qe-card.bad { border-color: var(--danger); }
.qe-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.qe-head b { flex: 1 1 auto; } .qe-head .btn { min-width: 32px; padding: 3px 8px; }
.qe-card textarea { min-height: 54px; resize: vertical; }
.qe-opts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.qe-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.qe-opt .qe-l { font-weight: 800; color: var(--muted); text-align: center; }
.qe-opt label { display: flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.qe-opt label:has(input:checked) { color: var(--ok); font-weight: 700; }
.qe-opt input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ok); }
.qe-opt.ok input[type="text"] { border-color: var(--ok); background: var(--ok-bg); }
.qe-x { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.qe-x:hover { background: var(--danger-bg); color: var(--danger); }
.qe-err { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 4px; }
.qe-note summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.qe-note textarea { margin-top: 6px; min-height: 40px; }
@media (max-width: 560px) {
  .tr-kv { grid-template-columns: 104px minmax(0, 1fr); font-size: 13.5px; }
  .tr-steps li { font-size: 11.5px; }
  .pdf-bar .pdf-hide-m { display: none; }
  .qe-opt { grid-template-columns: 16px minmax(0, 1fr) auto auto; gap: 4px; }
}

/* Đào tạo 10/10/2026 (v73): trang Câu hỏi xem gọn + nút Giao khoá; thời gian làm bài chip chọn nhanh + ô phút; danh sách Bớt người */
.qv-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-left: 4px solid var(--ok); }
.qv-next.qv-live { border-left-color: var(--primary); }
.qv-next b { display: block; color: var(--text); } .qv-next small { display: block; margin-top: 2px; } .qv-next form { margin: 0; }
.qv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qv-list > li { border-bottom: 1px solid var(--border); } .qv-list > li:last-child { border-bottom: 0; }
.qv-list summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 9px 2px; cursor: pointer; list-style: none; }
.qv-list summary::-webkit-details-marker { display: none; }
.qv-list details[open] > summary .qv-t { font-weight: 600; }
.qv-n { font-weight: 700; color: var(--muted); white-space: nowrap; font-size: 13px; }
.qv-t { overflow-wrap: anywhere; }
.qv-ok { color: var(--ok); font-weight: 700; white-space: nowrap; font-size: 13px; }
.qv-opts { display: flex; flex-direction: column; gap: 3px; padding: 0 0 10px; }
.tr-time { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; }
.tr-time-l { flex: 1 1 100%; font-weight: 700; color: var(--text); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.form .tr-time-in { flex-direction: row; align-items: center; gap: 6px; margin: 0; color: var(--text); white-space: nowrap; }
.tr-time-in input { width: 92px; }
.tr-time > small { flex: 1 1 100%; }
.tr-people label.tx-off { display: none !important; }
/* xem tài liệu trong popup: ẩn thanh tiêu đề của trang (popup đã có tiêu đề + nút đóng), thanh nổi sát đáy */
html.embed .pdf-bar { display: none; }
html.embed .tr-float { bottom: 14px; }
html.embed .pdf-done { bottom: 70px; }
html.embed .pdf-page-wrap { padding-bottom: 80px; }
/* Đào tạo 10/10/2026 (v74): kiểm tra lần cuối trước khi giao khoá (popup /chu/dao-tao/:id/giao) */
.pc-list { display: flex; flex-direction: column; }
.pc-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pc-item:last-child { border-bottom: 0; }
.pc-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 14px; }
.pc-ok .pc-ic { background: var(--ok-bg); color: var(--ok); }
.pc-warn .pc-ic { background: var(--pending-bg); color: var(--pending); }
.pc-bad .pc-ic { background: var(--danger); color: #fff; }
.pc-bad .pc-main b { color: var(--danger); }
.pc-main { min-width: 0; } .pc-main b { display: block; color: var(--text); } .pc-main small { display: block; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.pc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 20px; }
.pc-foot .grow { flex: 1 1 220px; }
@media (max-width: 560px) { .pc-item > .btn { grid-column: 2; justify-self: start; } }
/* Đào tạo 10/10/2026 (v75): câu TỰ LUẬN — ô viết bài, chờ chấm, Giám đốc chấm Đạt / Chưa đạt + nhận xét */
.ex-essay textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.ex-len { display: block; margin-top: 4px; text-align: right; }
.ex-big.wait { color: var(--pending); }
.tr-wait { color: var(--pending); font-weight: 700; }
.ex-rq.wait { border-left-color: var(--pending); }
.ex-ans { white-space: pre-line; overflow-wrap: anywhere; padding: 8px 10px; margin: 4px 0 6px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
.ex-cmt { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); font-size: 13.5px; }
.gr-guide { margin: 0 0 6px; }
.gr-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.gr-pick label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border: 1.5px solid var(--border-strong); border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--text); font-size: 14px; }
.gr-pick input { width: 16px; height: 16px; margin: 0; }
.gr-pick .gr-ok:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.gr-pick .gr-no:has(input:checked) { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.form .gr-note { margin: 0; }
.gr-note textarea { min-height: 44px; }
.gr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.gr-preview { flex: 1 1 260px; font-size: 14px; }
.gr-list { display: flex; flex-direction: column; }
.gr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.gr-row:last-child { border-bottom: 0; }
.gr-main { flex: 1 1 260px; min-width: 0; }
.qe-kind { width: auto; padding: 3px 26px 3px 8px; font-size: 13px; }
.qe-card.qe-essay { border-left: 4px solid var(--upcoming); }
.form .qe-guide { margin: 8px 0 0; }
.qe-guide textarea { margin-top: 4px; }
.qv-ok.qv-es { color: var(--upcoming); }

@media (max-width: 560px) { .qe-head > .muted { display: none; } .qe-head { flex-wrap: wrap; } }
/* Nhiệm vụ hằng ngày / hằng tuần 10/10/2026 (v76): thẻ như ảnh mẫu khách — khối trái giờ kết thúc, giữa tên + nút Hoàn thành (camera), phải = ca */
.tk-head { align-items: flex-start; }
.tk-date { margin: 0; }
.tk-date input { width: auto; min-width: 140px; }
.tk-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.tk-seg a { flex: 0 0 auto; padding: 7px 18px; border: 1.5px solid var(--border-strong); border-radius: 999px; color: var(--text); font-weight: 700; text-decoration: none; background: var(--surface); }
.tk-seg a small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.tk-seg a.on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.tk-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.tk-prog { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.tk-prog > span:last-child { white-space: nowrap; font-size: 13.5px; color: var(--muted); }
.tk-prog b { color: var(--text); font-variant-numeric: tabular-nums; }
.tk-bar { flex: 1 1 auto; display: block; height: 10px; min-width: 80px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.tk-bar.ok i { background: var(--ok); }
.tk-hint { margin: 2px 0 10px; }
.tk-sub { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--border); margin: 0 0 10px; }
.tk-sub button { border: 0; background: none; padding: 10px 6px; margin: 0 0 -2px; font: inherit; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; }
.tk-sub button.on { color: var(--primary); border-bottom-color: var(--primary); }
.tk-list { display: flex; flex-direction: column; gap: 10px; }
.tk-list[hidden] { display: none; }
.tk-card { display: grid; grid-template-columns: 74px minmax(0, 1fr) 78px; min-height: 84px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.tk-when { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 4px; background: var(--primary); color: var(--on-primary); text-align: center; }
.tk-when small { font-size: 11px; opacity: .92; }
.tk-when b { font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tk-overdue .tk-when, .tk-missed .tk-when { background: var(--danger); color: #fff; }
.tk-done .tk-when, .tk-late .tk-when { background: var(--surface-2); color: var(--muted); }
.tk-future .tk-when { background: var(--upcoming-bg); color: var(--upcoming); }
.tk-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 10px; }
.tk-title { font-weight: 700; color: var(--text); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.tk-desc summary { cursor: pointer; list-style: none; color: var(--upcoming); font-size: 12.5px; font-weight: 600; }
.tk-desc summary::-webkit-details-marker { display: none; }
.tk-desc p { margin: 4px 0 0; font-size: 13px; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.tk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.tk-do svg { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-thumb, .tk-thumb img { width: 44px; height: 44px; border-radius: 8px; }
.tk-thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border-left: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); color: var(--primary); font-weight: 700; font-size: 12.5px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.tk-zone small { font-weight: 500; color: var(--muted); font-size: 11px; }
.tk-note-txt { color: var(--muted); font-size: 12.5px; font-style: italic; overflow-wrap: anywhere; }
.tk-menu { margin-left: auto; }
.tk-empty { text-align: center; padding: 26px 12px; }
.tk-empty b { display: block; font-size: 15.5px; color: var(--text); }
@media (max-width: 420px) { .tk-card { grid-template-columns: 62px minmax(0, 1fr) 60px; } .tk-when b { font-size: 17px; } .tk-zone { font-size: 11.5px; } .tk-body { padding: 8px; } }
.tk-cam-task { margin: 0 0 8px; }
.tk-cam-task b { display: block; color: var(--text); }
.tk-cam-task small { color: var(--muted); }
.tk-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tk-shots[hidden] { display: none; }
.tk-shot { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.tk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.tk-shot-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 22px; cursor: pointer; }
.tk-note { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.tk-note[hidden] { display: none; }
.tk-note input { margin-top: 4px; }
.tk-home .tk-prog { margin: 0 0 8px; }
/* quản lý / Giám đốc */
.tk-head-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-filter { align-items: flex-end; }
.tk-filter .tk-days { margin: 0; }
.tk-focus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; margin: 0 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); }
.tk-sum .tk-prog { margin: 0; min-width: 180px; }
.tk-emps > summary { cursor: pointer; }
.tk-tools { margin-bottom: 10px; }
.tk-off td { opacity: .62; }
.tk-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* form tạo / sửa */
.tk-fset { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 10px; }
.tk-fset > b { color: var(--text); font-size: 14px; }
.tk-fset [hidden] { display: none !important; }
.tk-days-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tk-dows { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-dow { position: relative; flex-direction: row !important; margin: 0 !important; }
.tk-dow input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tk-dow span { display: inline-grid; place-items: center; min-width: 42px; height: 36px; padding: 0 8px; border: 1.5px solid var(--border-strong); border-radius: 10px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tk-dow input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tk-dow input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.tk-inline { flex-direction: row !important; align-items: center; gap: 8px; }
.tk-inline select { width: auto; }
.tk-shifts label[hidden] { display: none !important; }
.tk-fset .seg-radio, .tk-fset .tr-tgroup .seg-radio { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.tk-fset .seg-radio label { flex-direction: row !important; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: 14px; }
.tk-fset .seg-radio input { width: auto; margin: 0; }
.tk-fset .tr-tgroup + .tr-tgroup { margin-top: 8px; }
.tk-filter label { flex: 0 1 auto; }
.tk-filter input[type="date"], .tk-filter select { width: auto; min-width: 150px; }
.tk-filter .tk-days { align-self: flex-end; padding-bottom: 2px; }
/* Nhiệm vụ 10/10/2026 lần 2 (v77): form = danh sách thẻ như soạn câu hỏi (giờ · tên · ghi chú, + Thêm nhiệm vụ); lịch làm việc có nhiệm vụ từng ngày */
.tk-rows { display: flex; flex-direction: column; gap: 10px; }
.tk-row { padding: 8px 10px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.tk-row.bad { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
.tk-row[data-main] { border-left: 4px solid var(--primary); }
.tk-row-h { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.tk-row-h b { flex: 1 1 auto; font-size: 13.5px; color: var(--text); }
.tk-row-h small { margin-right: auto; }
.tk-row-main { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 8px; }
.tk-row-main .tk-row-title { grid-column: 1 / -1; }
.form .tk-row label { margin: 0; font-size: 12.5px; }
.tk-row label > span { display: block; margin-bottom: 3px; }
.tk-row-note textarea { min-height: 42px; resize: vertical; }
.tk-add { align-self: flex-start; }
@media (max-width: 420px) { .tk-row-main { grid-template-columns: 118px minmax(0, 1fr); gap: 6px; } }
.mcal-cell .tkn { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 1.5px var(--surface); font-style: normal; }
.mcal-cell .tkn b { display: none; }
.tkn-sw { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--primary); vertical-align: 1px; }
@media (min-width: 900px) {
  .mcal-cell .tkn { top: 3px; left: 3px; width: auto; height: 15px; min-width: 15px; padding: 0 3px; border-radius: 5px; background: var(--surface); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent); box-shadow: none; font-size: 9.5px; font-weight: 800; line-height: 13px; text-align: center; }
  .mcal-cell .tkn b { display: inline; }
}
.day-tasks { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.day-tasks-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dt-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; }
.dt-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border); }
.dt-list li:first-child { border-top: 0; }
.dt-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); padding-top: 1px; }
.dt-overdue .dt-time, .dt-missed .dt-time { color: var(--danger); }
.dt-done .dt-time, .dt-late .dt-time { color: var(--muted); }
.dt-main { min-width: 0; }
.dt-main b { display: block; color: var(--text); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.dt-main small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.dt-main .dt-note { font-style: italic; }
.day-tk { margin-top: 6px; }
.day-tk > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--primary); padding: 4px 6px; border: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent); border-radius: 8px; text-align: center; list-style: none; }
.day-tk > summary::-webkit-details-marker { display: none; }
.day-tk .day-tasks { margin: 6px 0 0; padding: 6px 8px; }
.day-tk .dt-list li { grid-template-columns: 40px minmax(0, 1fr); }
.day-tk .dt-list li .badge { grid-column: 2; justify-self: start; }
/* Nhiệm vụ 10/10/2026 lần 3 (v78): dải 7 ngày của tuần + nút Lịch (lịch tháng nhỏ) + xem trước nhiệm vụ ngày tới */
.tk-calbtn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tk-calbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-week { display: flex; align-items: stretch; gap: 4px; margin: 0 0 10px; }
.tk-wnav { flex: 0 0 auto; display: grid; place-items: center; width: 30px; border-radius: 10px; color: var(--muted); font-size: 20px; font-weight: 700; text-decoration: none; }
.tk-wnav:hover { background: var(--surface-2); color: var(--text); }
.tk-wdays { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.tk-wd { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 5px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; line-height: 1.15; min-width: 0; }
.tk-wd small { font-size: 11px; color: var(--muted); font-weight: 600; }
.tk-wd b { font-size: 16px; font-variant-numeric: tabular-nums; }
.tk-wn { font-size: 10.5px; font-weight: 700; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tk-wd.pv .tk-wn { color: var(--upcoming); }
.tk-wd.off { background: var(--surface-2); border-style: dashed; }
.tk-wd.off .tk-wn { color: var(--muted); font-weight: 500; }
.tk-wd.today { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.tk-wd.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tk-wd.on small, .tk-wd.on .tk-wn { color: var(--on-primary); opacity: .92; }
.tk-pvnote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.tk-pv .tk-when { background: var(--upcoming-bg); color: var(--upcoming); }
dialog.tk-cal-dlg { width: min(420px, calc(100vw - 24px)); }
.tk-mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tk-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tk-mw { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 2px 0; }
.tk-mc { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 9px; color: var(--muted); text-decoration: none; line-height: 1.15; border: 1.5px solid transparent; }
.tk-mc.blank { min-height: 0; }
.tk-mc b { font-size: 14.5px; }
.tk-mc small { font-size: 10.5px; font-weight: 700; min-height: 12px; }
.tk-mc.work { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--text); }
.tk-mc.work small { color: var(--primary); }
.tk-mc.work.pv { background: var(--upcoming-bg); }
.tk-mc.work.pv small { color: var(--upcoming); }
.tk-mc.alldone small { color: var(--ok); }
.tk-mc.today { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.tk-mc.on, .tk-mc.work.on, .tk-mc.work.pv.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tk-mc.on small, .tk-mc.work.on small, .tk-mc.work.pv.on small { color: var(--on-primary); }
.tk-mc:hover:not(.on):not(.blank) { border-color: var(--border-strong); }
.tk-mlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 6px; font-size: 12px; color: var(--muted); }
.tk-mlegend .sw { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.tk-mlegend .sw.work { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.tk-mlegend .sw.pv { background: var(--upcoming-bg); border: 1px solid color-mix(in srgb, var(--upcoming) 40%, transparent); }
.tk-mlegend .sw.done { background: var(--ok-bg); border: 1px solid var(--ok); }
.tk-mpick { margin: 4px 0 0; }
.tk-mpick label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; }
.tk-mpick input { width: auto; }
@media (max-width: 420px) { .tk-week { gap: 2px; } .tk-wnav { width: 22px; font-size: 18px; } .tk-wdays { gap: 3px; } .tk-wd { padding: 5px 1px 4px; border-radius: 10px; } .tk-wd b { font-size: 15px; } .tk-wn { font-size: 9.5px; } }

/* Tiền lương & phụ cấp trong Hồ sơ lương / tài khoản (10/10/2026, v79): bỏ "Theo bộ phận" — 3 nhóm Thưởng · Ngày công & tăng ca · Phụ cấp,
   mỗi dòng = tên · Có/Không · ô tiền (hoặc mức chung + ✎ Sửa mức). partials/pay-fields.ejs, pay-quick.ejs */
.pyf [hidden], .pfq [hidden] { display: none !important; }
.pyf-dept { margin-bottom: 0 !important; }
.pyf-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pyf-head .pf-sum { font-weight: 500; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.pf-fold[open] .pf-sum { display: none; }
.pyf { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 10px; }
.pyf-g { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 2px 10px; }
.pyf-gt { margin: 8px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pfq .pyf-gt { margin-top: 12px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.pyf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px dashed var(--border); }
.pyf-gt + .pyf-row { border-top: 0; }
.pyf-l { flex: 0 0 150px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pyf-own { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--pending-bg); color: var(--pending); font-size: 10.5px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.pyf-v { flex: 1 1 230px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pyf-txt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.pyf-kpi b { font-weight: 600; }
.pyf-edit { flex: 0 0 auto; white-space: nowrap; }
.pyf-hint { flex: 1 1 100%; font-size: 12px; }
.pyf-row > .pyf-hint { flex: 1 1 160px; }
.form .pyf-money, .pyf-money { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.pyf-money input { width: 130px; padding: 7px 9px; }
.pyf-money input[type="number"] { width: 80px; }
.pyf-money input.pyf-xs { width: 64px; }
.pyf-money small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pyf-sel { width: auto; min-width: 0; max-width: 100%; padding: 7px 9px; }
.pyf-v input[type="date"] { width: auto; padding: 7px 9px; }
.seg.pyf-seg { flex: 0 0 auto; }
.form .seg.pyf-seg label, .seg.pyf-seg label { position: relative; display: inline-flex; flex-direction: row; align-items: center; margin: 0; padding: 5px 13px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.seg.pyf-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg.pyf-seg label.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.seg.pyf-seg label.on:last-child { color: var(--danger); }
.seg.pyf-seg label:focus-within { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 1px; }
.pyf-note { margin: 0; }
.pyf-flash { animation: pyfFlash 1.6s ease-out; border-radius: 4px; }
@keyframes pyfFlash { 0% { background: color-mix(in srgb, var(--primary) 30%, transparent); } 100% { background: transparent; } }
.pfq-kpi { padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.pfq-kpi:last-child { border-bottom: 0; }
.pfq-act { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.pfq .tiers-mini input { width: 120px; }
@media (max-width: 520px) {
  .pyf-l { flex: 1 1 calc(100% - 130px); }
  .pyf-v { flex-basis: 100%; }
  .pyf-row[data-k="off"] .pyf-l, .pyf-row[data-k="ot"] .pyf-l { flex-basis: 100%; }
  .pyf-money input { width: 120px; }
}
/* Nhiệm vụ 10/10/2026 lần 4 (v80): chọn kiểu xem Tuần · Tháng (thay hộp thoại Lịch), lịch tháng ngay trên trang Nhiệm vụ */
.tk-xem a { display: inline-flex; align-items: center; gap: 6px; }
.tk-xem svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-month { padding: 10px 12px; margin-bottom: 10px; }
.tk-month .tk-mc { min-height: 52px; }
.tk-month .tk-mlegend { align-items: center; margin: 10px 0 0; }
.tk-month .tk-mpick { margin: 0 0 0 auto; }
@media (min-width: 900px) { .tk-month .tk-mgrid { gap: 6px; } .tk-month .tk-mc { min-height: 62px; } .tk-month .tk-mc b { font-size: 16px; } .tk-month .tk-mc small { font-size: 11.5px; } }
.tk-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 8px; }
.tk-dayhead b { font-size: 16px; color: var(--text); }
/* 11/10/2026: lần chấm công web chờ duyệt — dấu trên ô lịch (cả ngày chưa có ca), trang Duyệt chấm công web chế độ "Chờ duyệt" mọi ngày,
   gợi ý lần Vào sớm trước ca sẽ gắn vào ca khi duyệt */
.ws-ccw { display: block; margin-top: 3px; padding: 4px 6px; border: 1.5px dashed var(--pending); border-radius: 6px; background: var(--pending-bg); color: var(--pending); font-size: 11.5px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; }
.ws-ccw:first-child { margin-top: 0; }
/* 12/10/2026: dòng tóm tắt lần chấm chờ duyệt trong ô lịch (giờ · muộn · cách xa) */
.ws-ccw-t { display: block; }
.ws-ccw-i { display: block; margin-top: 2px; font-weight: 600; color: var(--text); font-size: 11px; line-height: 1.3; }
.ws-ccw-i em { font-style: normal; white-space: nowrap; }
.ws-ccw-i i { font-style: normal; color: var(--muted); font-weight: 500; }
.ws-ccw-i .ccw-bad, .ccw-bad { color: var(--danger); font-weight: 700; }
.ws-month .ws-ccw-i { font-size: 10px; }
.ccw-facts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.ws-ccw:hover, .ws-ccw:focus-visible { border-style: solid; outline: none; }
.ws-month .ws-ccw { padding: 3px 2px; font-size: 10.5px; }
@media print { .ws-ccw { display: none !important; } }
.att-xem { margin: 0 0 12px; }
.att-other-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 12px; }
.filter-bar .att-pend-note { align-self: center; }
.att-wd { color: var(--text); font-weight: 600; }
.att-early { margin-top: 4px; padding: 4px 8px; text-align: left; border-left: 3px solid var(--pending); border-radius: 0 6px 6px 0; background: var(--pending-bg); color: var(--text); line-height: 1.35; }
.appr-ccw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.appr-ccw .btn { margin-left: auto; }
/* ===== Duyệt nhóm theo chi nhánh / ngày + bộ lọc đầy đủ (11/10/2026, v82) =====
   Khách: "nhóm lại theo chi nhánh các thông báo kiểu này, có lọc đầy đủ". Mỗi nhóm = details.appr-grp (tên · số ca · tổng dư · nút Duyệt cả chi nhánh),
   trong nhóm chi nhánh có dòng ngày .appr-sub; chip Mức dư / Kiểu ở mục Giờ dư; ngày nhanh + Nhóm theo dưới thanh lọc. */
.appr-filter label { flex: 1 1 150px; }
.appr-filter > .btn { align-self: flex-end; }
.appr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -2px 0 14px; }
.appr-bar .dc-chips { margin: 0; }
.appr-nhom { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.appr-nhom .seg a { padding: 5px 12px; font-size: 13.5px; }
.appr-tools { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.appr-tools form { margin: 0; }
.appr-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 10px; }
.appr-fg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.appr-fl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.appr-more-btn { display: none !important; }
.appr-grp { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.appr-grp + .appr-grp, .card-title + .appr-grp, .empty + .appr-grp { margin-top: 10px; }
.appr-grp > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.appr-grp > summary::-webkit-details-marker { display: none; }
.appr-grp > summary::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 2px 0 3px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.appr-grp[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.appr-grp > summary:hover { background: var(--surface-2); }
.appr-grp > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 1px; }
.appr-grp[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.appr-grp-t { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.appr-grp-t b { font-size: 15px; color: var(--text); }
.appr-grp > summary .btn { flex: 0 0 auto; }
.appr-big { color: var(--neg-fg); font-weight: 600; }
.appr-grp-body { padding: 10px 12px 12px; }
.appr-grp-body > .approval:last-child { margin-bottom: 0; }
.appr-sub { margin: 10px 0 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--border); font-size: 13px; font-weight: 600; color: var(--text); }
.appr-sub:first-child { margin-top: 0; }
.appr-sub[hidden] { display: none; }
.appr-page section[data-appr] > p.muted.small:last-of-type { margin-top: 10px; }
@media (max-width: 520px) {
  .appr-filter label { flex: 1 1 calc(50% - 8px); }
  /* điện thoại: Mục · Sắp xếp · Từ–Đến · Lọc gập sau nút "Lọc thêm (n)", mở sẵn khi đang lọc */
  .filter-bar label.appr-more-btn { display: inline-flex !important; flex: 0 0 auto; flex-direction: row; color: var(--text); font-size: 14px; }
  .appr-filter .appr-adv { display: none; }
  .appr-more-cb:checked ~ label.appr-adv { display: flex; }
  .appr-more-cb:checked ~ .btn.appr-adv { display: inline-flex; }
  .appr-more-cb:checked + .appr-more-btn { background: var(--surface-2); }
  .appr-filter .appr-adv1 { order: 1; }
  .appr-filter .appr-adv2 { order: 2; }
  .appr-nhom { margin-left: 0; }
  .appr-grp > summary { padding: 10px; }
  .appr-grp-body { padding: 8px; }
  .appr-grp > summary .btn { flex: 1 1 100%; }
}

/* ===== Tổng quan (dashboard) Nhiệm vụ · Đào tạo (12/10/2026, v84) — đầu tab Kết quả nhiệm vụ / Khoá đào tạo, gập được (nhớ theo máy) =====
   Màu biểu đồ: trạng thái đã kiểm (dataviz validate_palette): xanh = xong / đúng giờ, tím = trễ / chưa đạt, đỏ = bỏ lỡ / quá hạn,
   xanh dương = đang học, vàng đất = chờ chấm, xám = chưa xong / chưa bắt đầu (trung tính, luôn kèm chú giải + số). */
:root { --ch-ok: #15803d; --ch-late: #6d28d9; --ch-miss: #c8102e; --ch-open: #94a3b8; --ch-learn: #1d4ed8; --ch-wait: #b7791f; --warnt-fg: #b45309; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ch-ok: #2fa35a; --ch-late: #8b5cf6; --ch-miss: #ef4444; --ch-open: #64748b; --ch-learn: #3b82f6; --ch-wait: #c08516; --warnt-fg: #fbbf24; } }
:root[data-theme="dark"] { --ch-ok: #2fa35a; --ch-late: #8b5cf6; --ch-miss: #ef4444; --ch-open: #64748b; --ch-learn: #3b82f6; --ch-wait: #c08516; --warnt-fg: #fbbf24; }
.dash { margin: 0 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.dash > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; cursor: pointer; list-style: none; border-radius: 12px; }
.dash > summary::-webkit-details-marker { display: none; }
.dash > summary::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.dash[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.dash > summary:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface-2)); }
.dash > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 1px; }
.dash[open] > summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.dash-ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1 1 260px; min-width: 0; }
.dash-ttl b { font-size: 16.5px; }
.dash-ttl small { color: var(--muted); font-size: 13px; }
.dash-sum-stat { font-size: 13.5px; color: var(--muted); }
.dash-sum-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.dash b.ok { color: var(--okt-fg); } .dash b.warn { color: var(--warnt-fg); } .dash b.bad { color: var(--neg-fg); }
.dash-body { padding: 12px; }
.dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.dash-range, .dash-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dash-pick { position: relative; }
.dash-pick > summary { list-style: none; }
.dash-pick > summary::-webkit-details-marker { display: none; }
.dash-pick-form { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.16); }
.dash-pick-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); }
.dash-filter { margin: 0; }
.dash-filter label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.dash-filter select { min-width: 150px; }
.dash-kpis { margin-bottom: 12px; }
.dash-kpis .kpi { min-width: 0; }
.dash-kpis .kpi b { font-variant-numeric: tabular-nums; }
.dash-empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; }
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid > .dash-wide { grid-column: 1 / -1; } }
.dash-card { margin-bottom: 0; }
.dash-grid + .dash-card { margin-top: 12px; }
.dash-card .card-title small { font-weight: 500; }
.dash-chart { height: 230px; }
.dash-tbl { margin-top: 8px; font-size: 13px; }
.dash-tbl > summary { cursor: pointer; color: var(--primary); font-weight: 600; width: max-content; }
.dash-tbl .table { margin-top: 6px; }
/* thanh chồng (stacked bar) bằng CSS: mỗi đoạn flex-grow = số lượng, khe 2px màu nền giữa các đoạn */
.dash-stack { display: flex; gap: 2px; height: 12px; min-width: 60px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.dash-stack i { display: block; min-width: 3px; height: 100%; }
.dash-stack.dash-none { background: none; height: auto; align-items: center; }
.s-ok, .s-done { background: var(--ch-ok); } .s-late, .s-fail { background: var(--ch-late); } .s-miss, .s-over { background: var(--ch-miss); }
.s-open, .s-fresh { background: var(--ch-open); } .s-learn { background: var(--ch-learn); } .s-grading { background: var(--ch-wait); }
.dash-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.dash-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* danh sách xếp hạng: số thứ tự · tên · thanh · % */
.dash-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dash-rank li { display: grid; grid-template-columns: 26px minmax(0, 1.1fr) minmax(70px, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 4px; border-bottom: 1px dashed var(--border); }
.dash-rank li:last-child { border-bottom: 0; }
.dash-tasks li { grid-template-columns: minmax(0, 1.3fr) minmax(70px, 1fr) auto; }
.dash-classes li { grid-template-columns: minmax(0, 1.4fr) minmax(90px, 1fr) auto auto; }
.dash-classes li.dr-soon { background: color-mix(in srgb, var(--warn) 7%, transparent); border-radius: 8px; }
.dr-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-rank li:nth-child(1) .dr-no { background: color-mix(in srgb, var(--ch-ok) 18%, var(--surface)); color: var(--okt-fg); }
.dr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text); }
.dash-tasks .dr-name { white-space: nowrap; }
.dash-rank a.dr-name, .dr-name a { color: var(--text); text-decoration: none; }
.dash-rank a.dr-name:hover, .dr-name a:hover { color: var(--primary); text-decoration: underline; }
.dash-classes .dr-name small { font-weight: 500; white-space: normal; }
.dash-classes .dr-name .badge { font-size: 11px; padding: 1px 6px; }
.dr-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 64px; }
.dr-val b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dr-val small { color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dr-act { margin: 0; }
.dr-act .btn { white-space: nowrap; }
.dash-bins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-bins li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 13px; }
.dash-bins li > span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-bins b { text-align: right; font-variant-numeric: tabular-nums; }
.db-track { display: block; height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.db-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dash-hard { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
.dash-hard li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.dh-txt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dash-hard b { font-variant-numeric: tabular-nums; }
.dash-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-tags .badge { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-emps > summary { cursor: pointer; list-style: none; justify-content: flex-start; margin-bottom: 0; }
.dash-emps > summary::-webkit-details-marker { display: none; }
.dash-emps > summary::after { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 4px 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.dash-emps:not([open]) > summary::after { transform: rotate(-45deg); }
.dash-emps[open] > summary { margin-bottom: 10px; }
.dash-emp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dash-emp-tools input[type=search] { flex: 1 1 220px; max-width: 360px; }
.dash-emps .list-tools { margin-bottom: 6px; }
.tk-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 4px 0 6px; scroll-margin-top: 70px; }
.tk-detail-head .filter-bar { margin: 0; }
.dash-h2 { font-size: 17px; margin: 0; font-weight: 700; }
#tong-quan, #nv-xep { scroll-margin-top: 70px; }
@media (max-width: 640px) {
  .dash > summary { padding: 10px; }
  .dash-body { padding: 8px; }
  .dash-rank li { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .dash-rank li .dash-stack { grid-column: 2 / -1; grid-row: 2; }
  .dash-tasks li, .dash-classes li { grid-template-columns: minmax(0, 1fr) auto; }
  .dash-tasks li .dash-stack, .dash-classes li .dash-stack { grid-column: 1 / -1; grid-row: 2; }
  .dash-classes li .dr-act { grid-column: 1 / -1; grid-row: 3; }
  .dash-classes li .dr-act .btn { width: 100%; }
  .dash-chart { height: 200px; }
  .dash-pick-form { position: static; margin-top: 6px; box-shadow: none; }
  .dash-filter, .dash-filter label { width: 100%; }
  .dash-filter select { flex: 1 1 auto; }
}
/* 12/10/2026: thông báo đẩy như app — khung "Thông báo trên điện thoại" trong ô Thông báo (public/app.js [data-push]) */
.rp-push { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--primary); border-radius: 10px; background: var(--surface); }
.rp-push[hidden] { display: none; }
.rp-push-t { font-weight: 700; font-size: 13.5px; }
.rp-push-s { margin: 4px 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.rp-push-a { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-push-a [hidden] { display: none; }

/* Bảng công tháng · Tất cả chi nhánh (13/10/2026): dòng tiêu đề nhóm chi nhánh */
.ws-month tr.ws-grp > td { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-top: 2px solid var(--primary); padding: 6px 8px; height: auto; }
.ws-month tr.ws-grp > td.sticky { --sc-bg: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.ws-month tr.ws-grp > td.sticky small { display: block; color: var(--muted); font-weight: 500; }
@media print { .ws-month tr.ws-grp > td { background: #eef3ea !important; } }