/* Màu theo logo EasyGoing: gradient vàng #F3EB35 (dưới trái) → #F7B62A → cam #F99C24 (trên phải).
   Chữ/đường dẫn dùng cam đậm (--accent) cho đủ tương phản trên nền sáng; nút chính dùng đúng gradient của logo, chữ nâu đậm. */
:root {
  --brand-yellow: #f3eb35;
  --brand-mid: #f7b62a;
  --brand-orange: #f99c24;
  --brand-grad: linear-gradient(45deg, #f3eb35 0%, #f7b62a 50%, #f99c24 100%);
  --brand-line: linear-gradient(90deg, #f3eb35, #f7b62a 45%, #f99c24);
  --on-brand: #2b1900;
  /* 4 vùng: menu (--side-bg) · thanh trên (--topbar-bg) · nền nội dung (--bg) · thẻ/bảng (--panel) */
  --bg: #ebe5db;
  --panel: #fffdf9;
  --panel-2: #f7f0e6;
  --topbar-bg: #fff8ec;
  --th-bg: #f3e9da;
  --row-alt: #f8efe2;
  --text: #231d16;
  --muted: #6a5f52;
  --border: #ddd2c2;
  --side-bg: #f9ecd3;
  --side-text: #3a3026;
  --side-muted: #7f6f58;
  --side-active: #f6d79c;
  --side-active-text: #6e3300;
  --side-hover: #f4e2c1;
  --side-line: #ead8b6;
  --accent: #b45309;
  --accent-line: #f2a227;
  --accent-soft: #fdebcc;
  --ok: #15803d;
  --ok-soft: #e1f2e6;
  --high: #d23b3b;
  --high-soft: #fbe3e3;
  --medium: #b86400;
  --medium-soft: #fbead2;
  --low: #3a7bd5;
  --low-soft: #e2ebf9;
  --chip: #ece4d8;
  --shadow: 0 1px 3px rgba(70, 45, 10, .08);
  /* Biểu đồ (đã chạy kiểm tra tương phản + mù màu): cam đậm = thu nhập, xanh = BHXH công ty / vào làm, đỏ = nghỉ việc */
  --viz-income: #c47700; --viz-insure: #2a78d6; --viz-in: #2a78d6; --viz-out: #e34948; --viz-line: #c26a00;
  --viz-grid: #ece3d4; --viz-axis: #cdbfab; --tip-bg: #2b241c; --tip-text: #f6f0e8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #302a24; --panel: #3d352c; --panel-2: #4a4136; --topbar-bg: #383129; --th-bg: #4b4237; --row-alt: #453c32;
    --text: #f6f0e8; --muted: #c2b7a7; --border: #5a4e41;
    --side-bg: #262119; --side-text: #eee5d8; --side-muted: #a89b88; --side-active: #573e1b; --side-active-text: #ffc666; --side-hover: #332c24; --side-line: #3e362d;
    --accent: #f7ae42; --accent-line: #f7a531; --accent-soft: #46331a; --ok: #5bcb8c; --ok-soft: #1e3a29;
    --high: #f27474; --high-soft: #482424; --medium: #f2b54e; --medium-soft: #47351a;
    --low: #7aacf2; --low-soft: #283a54; --chip: #50463a; --shadow: 0 1px 3px rgba(0, 0, 0, .25); --viz-income: #c98500; --viz-insure: #3987e5; --viz-in: #3987e5; --viz-out: #e66767; --viz-line: #c98500; --viz-grid: #4a4136; --viz-axis: #5e5244; --tip-bg: #f6f0e8; --tip-text: #231d16;
  }
}
:root[data-theme="dark"] {
  --bg: #302a24; --panel: #3d352c; --panel-2: #4a4136; --topbar-bg: #383129; --th-bg: #4b4237; --row-alt: #453c32;
  --text: #f6f0e8; --muted: #c2b7a7; --border: #5a4e41;
  --side-bg: #262119; --side-text: #eee5d8; --side-muted: #a89b88; --side-active: #573e1b; --side-active-text: #ffc666; --side-hover: #332c24; --side-line: #3e362d;
  --accent: #f7ae42; --accent-line: #f7a531; --accent-soft: #46331a; --ok: #5bcb8c; --ok-soft: #1e3a29;
  --high: #f27474; --high-soft: #482424; --medium: #f2b54e; --medium-soft: #47351a;
  --low: #7aacf2; --low-soft: #283a54; --chip: #50463a; --shadow: 0 1px 3px rgba(0, 0, 0, .25); --viz-income: #c98500; --viz-insure: #3987e5; --viz-in: #3987e5; --viz-out: #e66767; --viz-line: #c98500; --viz-grid: #4a4136; --viz-axis: #5e5244; --tip-bg: #f6f0e8; --tip-text: #231d16;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg); color: var(--text); display: flex;
}
a { color: var(--accent); }

/* Sidebar */
.sidebar {
  width: 230px; flex: none; background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-line);
  display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px; border-bottom: 1px solid var(--side-line); text-decoration: none; color: inherit; }
.brand-logo { width: 74px; height: auto; flex: none; display: block; }
.brand-title { font-weight: 700; font-size: 16px; line-height: 1.25; }
.brand-sub { font-size: 11.5px; color: var(--side-muted); line-height: 1.3; margin-top: 2px; }
nav { padding: 8px 10px; flex: 1; }
.nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); padding: 14px 8px 6px; }
nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 6px; color: var(--side-text); text-decoration: none; cursor: pointer;
}
nav a:hover { background: var(--side-hover); }
nav a.active { background: var(--side-active); color: var(--side-active-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-orange); }
nav a.soon { opacity: .45; cursor: default; }
nav a.soon:hover { background: none; }
.badge { background: var(--high); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 7px; font-weight: 600; }
.badge.warn { background: var(--medium); }
.badge:empty { display: none; }
.theme-btn {
  margin: 12px; padding: 8px; border-radius: 6px; border: 1px solid var(--side-line);
  background: transparent; color: var(--side-muted); cursor: pointer; font: inherit; font-size: 12px;
}

/* Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 24px 10px;
  background: var(--brand-line) top / 100% 3px no-repeat, var(--topbar-bg); /* vạch màu logo trên cùng */
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
}
.scan-info { flex: 1; color: var(--muted); font-size: 13px; }
.scan-info b { color: var(--text); }
.menu-btn { display: none; background: none; border: 0; font-size: 20px; color: var(--text); cursor: pointer; }
.btn {
  border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; font: inherit; white-space: nowrap;
}
.btn:hover { border-color: var(--accent-line); }
.btn.primary { background: var(--brand-grad); border-color: var(--accent-line); color: var(--on-brand); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.05) saturate(1.05); }
.btn:disabled { opacity: .6; cursor: wait; }
.error-bar { background: var(--high-soft); color: var(--high); padding: 10px 24px; border-bottom: 1px solid var(--border); }
main { padding: 22px 24px 40px; max-width: 1200px; width: 100%; }
h1 { font-size: 22px; margin: 0 0 2px; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: 13px; }

/* Chips + filters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px;
}
.chip b { margin-left: 4px; }
.chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.filters label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
input, select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent-line); }

/* Task cards */
.task {
  display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--border);
  border-left: 4px solid var(--low); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.task.cao { border-left-color: var(--high); }
.task.trung_binh { border-left-color: var(--medium); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; }
.task-title .type { color: var(--muted); font-weight: 500; }
.task-title a { color: var(--text); text-decoration: none; }
.task-title a:hover { text-decoration: underline; }
.id { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 4px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--chip); color: var(--muted); margin-left: 6px; font-weight: 500; }
.task-detail { color: var(--muted); font-size: 13px; margin: 4px 0 6px; }
.task-detail strong { color: var(--high); }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.src { font-size: 11px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); text-decoration: none; background: var(--panel-2); }
a.src:hover { border-color: var(--accent); color: var(--accent); }
.task-when { text-align: right; white-space: nowrap; font-size: 12px; color: var(--muted); }
.task-when b { display: block; font-size: 14px; color: var(--text); }
.task.cao .task-when b { color: var(--high); }
.empty { text-align: center; color: var(--muted); padding: 40px; background: var(--panel); border: 1px dashed var(--border); border-radius: 8px; }

/* Tiles + panels */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); }
.tile .label { color: var(--muted); font-size: 12px; }
.tile .value { font-size: 26px; font-weight: 700; }
.tile.high .value { color: var(--high); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.panel h2 { font-size: 15px; margin: 0 0 10px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 36px; gap: 10px; align-items: center; margin: 6px 0; font-size: 13px; }
.bar { height: 10px; background: var(--chip); border-radius: 5px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand-line); border-radius: 5px; }
.bar-row .n { text-align: right; font-weight: 600; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--th-bg); }
tbody tr.click { cursor: pointer; }
table.report tbody tr:nth-child(even), #empRows tr:nth-child(even) { background: var(--row-alt); } /* sọc xen kẽ cho dễ dóng hàng */
tbody tr.click:hover, table.report tbody tr.click:hover, #empRows tr.click:hover { background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th .arrow { margin-left: 4px; font-size: 10px; opacity: .4; }
th.sorted { color: var(--accent); }
th.sorted .arrow { opacity: 1; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--chip); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--high-soft); color: var(--high); }
.pill.warn { background: var(--medium-soft); color: var(--medium); }
.muted { color: var(--muted); }

/* Drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--bg);
  z-index: 21; overflow-y: auto; padding: 20px 22px; border-left: 1px solid var(--border);
}
.drawer .close { float: right; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

/* Settings form */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; max-width: 720px; }
.form-grid label { font-size: 13px; }
.form-grid small { display: block; color: var(--muted); font-size: 12px; }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .menu-btn { display: block; }
  .topbar { padding: 10px 16px; }
  main { padding: 16px; }
  .filters, .grid2, .form-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .task { flex-direction: column; gap: 6px; }
  .task-when { text-align: left; }
  .bar-row { grid-template-columns: 110px 1fr 30px; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
}

/* ---------- Đăng nhập + phân quyền ---------- */
[hidden] { display: none !important; }
body:not([data-role="hr"]) [data-role="hr"] { display: none !important; }
body[data-salary="0"] [data-need="salary"] { display: none !important; }
body.logged-out .sidebar, body.logged-out .main { visibility: hidden; }
input[type="checkbox"] { width: auto; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--accent); }
.bad-text { color: var(--high) !important; }

.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.link-btn.danger { color: var(--high); }

.user-box { margin: 0 12px; padding: 10px 8px 0; border-top: 1px solid var(--side-line); font-size: 12px; }
.user-email { color: var(--side-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { color: var(--side-muted); margin-bottom: 4px; }
.user-box .link-btn { color: var(--side-muted); font-size: 12px; }
.user-box .link-btn:hover { color: var(--side-text); }

.login {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 12% 88%, rgba(243, 235, 53, .22), transparent 42%),
              radial-gradient(circle at 88% 12%, rgba(249, 156, 36, .22), transparent 42%), var(--bg);
}
.login-card {
  width: min(400px, 100%); border: 1px solid var(--border); border-radius: 12px;
  background: var(--brand-line) top / 100% 4px no-repeat, var(--panel); /* vạch màu logo trên đầu thẻ */
  padding: 28px 26px 22px; box-shadow: 0 10px 34px rgba(80, 50, 0, .10);
}
.login-brand { text-align: center; margin-bottom: 8px; }
.login-logo { width: 116px; height: auto; display: block; margin: 0 auto 10px; }
.login-app { font-weight: 700; font-size: 15px; }
.login-app span { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.login-card h1 { text-align: center; margin-top: 10px; }
.login-card label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
#loginCode { font-size: 22px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.login-msg { min-height: 20px; font-size: 13px; color: var(--muted); margin: 12px 0; }
.login-submit { width: 100%; padding: 9px 12px; }
.login-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; }

.field-label { font-size: 13px; margin: 16px 0 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 10px; max-width: 720px; }
.check { border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; background: var(--panel-2); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check-line { display: block; font-size: 13px; margin-top: 12px; cursor: pointer; }
.form-grid .check-line { align-self: end; }
.form-actions { margin: 16px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-actions { white-space: nowrap; }
.row-actions .link-btn + .link-btn { margin-left: 12px; }
.check-line small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 0 22px; }
#loginCode::placeholder { letter-spacing: normal; font-size: 14px; }
td.wrap { white-space: normal; min-width: 120px; }
td.user-cell { white-space: normal; word-break: break-all; min-width: 180px; }

/* ---------- File Google Sheets theo năm ---------- */
.panel h3 { font-size: 13px; margin: 16px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.year-group + .year-group { border-top: 1px solid var(--border); }
.sheet-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.sheet-row + .sheet-row { border-top: 1px dashed var(--border); }
.sheet-main { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.sheet-main a { word-break: break-word; }
.sheet-year { font-size: 12px; color: var(--muted); }
.sheet-year select { display: block; margin-top: 2px; }
.sheet-add { border-top: 1px solid var(--border); margin-top: 12px; }
.form-grid .wide { grid-column: span 1; }
.share-hint { font-size: 13px; margin: 10px 0 0; max-width: 720px; }
.share-hint code { word-break: break-all; }
.year-chips { align-items: center; }
.chips-label { font-size: 13px; color: var(--muted); margin-right: 2px; }
.panel .note { font-size: 12px; margin: -4px 0 8px; }

/* ---------- Quá trình làm việc ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 104px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { display: grid; grid-template-columns: 92px 1fr; gap: 24px; padding: 6px 0; position: relative; font-size: 13px; }
.tl-item::before { content: ""; position: absolute; left: 99px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); box-sizing: border-box; }
.tl-item.tl-cv::before, .tl-item.tl-phong_van::before { border-style: dashed; }
.tl-item.tl-nghi::before { border-color: var(--high); }
.tl-item.future::before { border-color: var(--medium); }
.tl-item.future .tl-body b { color: var(--medium); }
.tl-date { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.tl-body .src { display: inline-block; margin-top: 3px; }
@media (max-width: 860px) {
  .timeline::before { left: 5px; }
  .tl-item { grid-template-columns: 1fr; gap: 0; padding-left: 22px; }
  .tl-item::before { left: 0; }
  .tl-date { text-align: left; }
}
.login-card .remember { margin-top: 10px; }
.google-login { margin: 16px 0 4px; }
.google-btn { display: flex; justify-content: center; min-height: 44px; }
.login-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 12px; color: var(--muted); }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.src.muted-link { opacity: .75; }

/* ---------- Trang tổng hợp (Hợp đồng, Chấm công, Nghỉ phép, Bảng lương) ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.page-head .btn { margin-top: 4px; }
table.report th.num, table.report td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.report tfoot td { border-top: 2px solid var(--border); background: var(--th-bg); }
.report-count { font-size: 12px; margin: 0 0 6px; }
.warn-text { color: var(--medium); font-weight: 600; }
.page-head > div { flex: 1 1 320px; min-width: 0; }

/* ---------- Đánh dấu việc: đã xử lý / nhắc lại sau / ghi chú ---------- */
.task-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.task-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mini-btn { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.mini-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.mini-btn.ok:hover { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.task-status { font-size: 12.5px; margin: 0 0 6px; padding: 4px 8px; border-radius: 6px; background: var(--chip); }
.task-status.done { background: var(--ok-soft); color: var(--ok); }
.task-status.snooze { background: var(--low-soft); color: var(--low); }
.task-status.note { background: var(--accent-soft); color: var(--accent); }
.task-status .muted { color: var(--muted); }
.task-note { color: var(--text); }
.task.st-done, .task.st-snooze { border-left-color: var(--border); }
.task.st-done .task-title a, .task.st-done .task-detail { opacity: .75; }
.task-form { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.task-form-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.task-form textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; resize: vertical; }
.task-form textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent-line); }
.snooze-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.snooze-row input[type=date] { width: auto; padding: 4px 8px; }
.task-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--panel); }
.seg-btn { border: 0; background: none; color: var(--muted); padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn b { margin-left: 6px; color: var(--text); }
.seg-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
textarea { font: inherit; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); resize: vertical; }
@media (max-width: 860px) { .task-side { align-items: flex-start; } .task-actions { justify-content: flex-start; } }

/* ---------- Biểu đồ ở Bảng điều khiển ---------- */
.dash-h { font-size: 17px; margin: 26px 0 10px; }
.dash-h + .sub { margin-top: -6px; }
.tile-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.viz-box { width: 100%; min-height: 230px; position: relative; }
svg.viz { display: block; font: 11.5px 'Segoe UI', system-ui, sans-serif; overflow: visible; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-grid.base { stroke: var(--viz-axis); }
.viz-ax { fill: var(--muted); font-variant-numeric: tabular-nums; }
.viz-val { fill: var(--text); font-weight: 600; font-size: 12px; }
.viz-bar.v-income { fill: var(--viz-income); } .viz-bar.v-insure { fill: var(--viz-insure); }
.viz-bar.v-in { fill: var(--viz-in); } .viz-bar.v-out { fill: var(--viz-out); }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.v-line { stroke: var(--viz-line); }
.viz-dot { stroke: var(--panel); stroke-width: 2; }
.viz-dot.v-line { fill: var(--viz-line); }
.viz-cross { stroke: var(--viz-axis); stroke-width: 1; }
.viz-hit { fill: transparent; cursor: crosshair; outline: none; }
.viz-hit:hover, .viz-hit:focus { fill: var(--text); fill-opacity: .04; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin: -4px 0 8px; }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.viz-sw.line { height: 2px; border-radius: 1px; }
.v-income.viz-sw, .viz-key.v-income { background: var(--viz-income); }
.v-insure.viz-sw, .viz-key.v-insure { background: var(--viz-insure); }
.v-in.viz-sw, .viz-key.v-in { background: var(--viz-in); }
.v-out.viz-sw, .viz-key.v-out { background: var(--viz-out); }
.viz-key.v-line { background: var(--viz-line); }
.viz-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--tip-bg); color: var(--tip-text); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); min-width: 150px; }
.viz-tip-title { font-weight: 600; margin-bottom: 4px; opacity: .85; }
.viz-tip-row { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.viz-tip-row b { font-variant-numeric: tabular-nums; }
.viz-tip-row span { opacity: .8; }
.viz-key { width: 10px; height: 2px; border-radius: 1px; flex: none; background: transparent; }
.viz-table { margin-top: 8px; font-size: 13px; }
.viz-table summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
.viz-table .table-wrap { margin-top: 8px; box-shadow: none; }
.viz-note { font-size: 12px; margin: 6px 0 0; }
a.btn { text-decoration: none; display: inline-block; }

/* ---------- Soát bảng lương ---------- */
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.check-head h2 { margin: 0; }
.check-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.check-note { font-size: 12.5px; margin: 6px 0 10px; }
.check-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.check-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.check-item.lv-loi { border-left-color: var(--high); }
.check-item.lv-canh_bao { border-left-color: var(--medium); }
.check-item.lv-luu_y { border-left-color: var(--low); }
.check-item.is-done { opacity: .8; }
.check-main { flex: 1; min-width: 0; }
.check-title { font-size: 13px; }
.check-title .id { color: var(--muted); font-size: 12px; margin-left: 5px; }
.check-detail { font-size: 12.5px; color: var(--muted); margin: 2px 0 4px; }
.check-side { flex: none; }
.check-flag { font-size: 11px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; background: var(--chip); color: var(--muted); white-space: nowrap; }
.check-flag.lv-loi { background: var(--high-soft); color: var(--high); }
.check-flag.lv-canh_bao { background: var(--medium-soft); color: var(--medium); }
@media (max-width: 640px) { .check-item { flex-direction: column; } }

/* ---------- Tìm nhanh (Ctrl+K) ---------- */
.search-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.search-btn:hover { border-color: var(--accent-line); color: var(--text); }
.search-btn kbd { margin-left: auto; }
.search-btn kbd, .quick-foot kbd { font: 11px/1.5 inherit; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--chip); color: var(--muted); }
.quick-foot kbd + kbd { margin-left: 2px; }
.quick { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.quick-box { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); overflow: hidden; }
.quick-box input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 16px; font: inherit; font-size: 15px; background: transparent; color: var(--text); outline: none; }
.quick-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.quick-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.quick-item.sel, .quick-item:hover { background: var(--accent-soft); }
.quick-main { min-width: 0; }
.quick-main .id { color: var(--muted); font-size: 12px; margin-left: 6px; }
.quick-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.quick-empty { padding: 18px; color: var(--muted); text-align: center; }
.quick-foot { border-top: 1px solid var(--border); padding: 7px 12px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) { .search-btn { min-width: 0; } .search-btn span, .search-btn kbd { display: none; } .quick-foot { display: none; } }