/* ==========================================================================
   WZ FinOps, mockup stylesheet
   Tokens lấy nguyên từ Workzone Design System v2 (design-tokens.json)
   ========================================================================== */

:root{
  /* surface */
  --paper:#ffffff; --mist:#f6f9fc; --band:#eef3fa;
  /* line */
  --line:#dce5f0; --line-strong:#c4d2e6;
  /* brand */
  --navy:#1c3d6e; --azure:#2f7fd1; --blue:#2b7cd3; --blue-deep:#14264a;
  --sky:#6fa8e0; --sky-tint:#dceaf9;
  /* text */
  /* Hai màu chữ mờ đã ĐO lại theo chuẩn đọc WCAG AA, mức tối thiểu 4,5:1.
     Bản cũ muted #6b7890 chỉ đạt 4,45:1 và faint #9aa6ba đạt 2,46:1, tức là
     trên màn hình văn phòng chói thì đọc không ra ngày duyệt, ngày chi và số
     đếm ở thanh trái. Số mới đo trên cả nền trắng lẫn nền mist:
       muted #5f6d85  5,23:1 trên trắng, 4,95:1 trên mist
       faint #667389  4,80:1 trên trắng, 4,54:1 trên mist */
  --t-head:#0e1c33; --t-body:#3d4a60; --t-muted:#5f6d85; --t-faint:#667389;
  /* semantic, tách khỏi brand blue */
  --ok:#0f7b52;      --ok-bg:#e4f4ec;
  --warn:#a86a10;    --warn-bg:#fdf1dd;
  --bad:#b3352f;     --bad-bg:#fbe9e8;
  --neutral:#5f7085; --neutral-bg:#eef1f5;
  /* type */
  --f-sans:"Geist","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono","SF Mono","JetBrains Mono",ui-monospace,monospace;
  /* space */
  --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  /* radius */
  /* QUY ƯỚC BO GÓC, chốt 04/09/2026:
       --r-sm   mọi Ô NHẬP (input, select, textarea)
       --r-btn  mọi NÚT
       --r-xs   ô nhập và nút NHỎ nằm trong bảng hoặc trong thanh
       --r-md   hộp và khung bên trong thẻ
       --r-card thẻ và cửa sổ
       --r-chip ô và nhãn hình viên thuốc
     Ngoại lệ CÓ CHỦ Ý: ô nhập trong tờ phiếu in để vuông góc cho trùng khung
     bảng của tờ giấy, và cả khối in dùng mm với pt nên không theo thang này.

     --r-sm CHƯA TỪNG được khai, phát hiện 04/09/2026. Ba chỗ gọi nó là ô đăng
     nhập, khung báo lỗi đăng nhập, và MỌI ô nhập .fld-lon trong app. Biến không
     có thì trình duyệt bỏ qua cả dòng border-radius, nên bấy lâu nay mọi ô nhập
     đều vuông góc, lệch hẳn với thẻ và nút vốn đã bo tròn. */
  --r-xs:6px; --r-sm:10px; --r-btn:10px; --r-md:14px; --r-card:20px; --r-chip:999px;
  /* shadow */
  --sh-soft:0 10px 28px -14px rgba(28,61,110,.14);
  --sh-hover:0 14px 40px -16px rgba(28,61,110,.22),0 4px 12px -6px rgba(28,61,110,.10);
  --sh-pop:0 26px 60px -24px rgba(28,61,110,.24),0 2px 8px -4px rgba(28,61,110,.10);
  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.4,0,.2,1);
  --d-fast:200ms; --d-base:300ms;
  /* layout */
  --side-w:248px; --side-w-min:64px; --top-h:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-sans); font-size:14px; line-height:1.6;
  color:var(--t-body); background:var(--mist);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{margin:0;color:var(--t-head);line-height:1.25}
table{border-collapse:collapse;width:100%}

/* ---------- utility ---------- */
.mono{font-family:var(--f-mono)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.muted{color:var(--t-muted)}
.faint{color:var(--t-faint)}
.b{font-weight:600}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-muted)}
.row{display:flex;align-items:center;gap:var(--s2)}
.grow{flex:1}
.neg{color:var(--bad)}

/* ==========================================================================
   SHELL
   ========================================================================== */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.app.collapsed{grid-template-columns:var(--side-w-min) 1fr}

/* ---------- sidebar ---------- */
.side{background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
.side-brand{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);min-height:var(--top-h)}
/* Logo FinOps ở góc thanh trái, 32px. Đo thật trên màn Retina: ở cỡ này vẫn
   thấy rõ tam giác, gấp khúc và vòng cung. Mức 96px ghi trong bộ nhận diện 2.0
   là suy từ phép thử favicon 16px, quá chặt, đã sửa lại. */
.side-brand .logo{width:32px;height:29px;flex:none;object-fit:contain;display:block}
.side-brand .logo.toi{display:none}
:root[data-theme="dark"] .side-brand .logo{display:none}
:root[data-theme="dark"] .side-brand .logo.toi{display:block}
.side-brand .nm{font-weight:700;color:var(--t-head);letter-spacing:-.01em}
.side-brand .nm small{display:block;font-weight:400;font-size:11px;color:var(--t-muted);letter-spacing:.02em}
.side-nav{flex:1;overflow-y:auto;padding:10px 8px 20px}
.nav-group{margin-top:14px}
.nav-group>.eyebrow{padding:0 10px 6px;display:block;font-size:.66rem}
.nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-btn);
  color:var(--t-body);cursor:pointer;position:relative;font-size:13.5px;
  transition:background var(--d-fast) var(--e-io)}
.nav-i:hover{background:var(--mist)}
.nav-i.on{background:var(--sky-tint);color:var(--azure);font-weight:600}
.nav-i.on:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--azure)}
.nav-i .ic{width:18px;text-align:center;flex:none;opacity:.85}
.nav-i .badge{margin-left:auto;background:var(--bad);color:#fff;border-radius:var(--r-chip);
  font-size:11px;font-weight:700;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}
.side-foot{border-top:1px solid var(--line);padding:8px}
.app.collapsed .side .nm,.app.collapsed .nav-i span:not(.ic):not(.badge),
.app.collapsed .nav-group>.eyebrow{display:none}
.app.collapsed .nav-i{justify-content:center}

/* ---------- topbar ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.top{height:var(--top-h);background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:30}
.crumb{color:var(--t-muted);font-size:13px}
.crumb b{color:var(--t-head);font-weight:600}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;
  background:var(--mist);border:1px solid var(--line);border-radius:var(--r-btn);padding:7px 11px}
.search input{border:0;background:none;outline:none;width:100%;font-size:13px}
.search kbd{font-family:var(--f-mono);font-size:11px;color:var(--t-faint);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px}
.search .ic{color:var(--t-faint);font-size:12px;flex:none}
.search:focus-within{border-color:var(--azure);box-shadow:0 0 0 3px var(--sky-tint);background:var(--paper)}
/* Bỏ nút x mặc định của type=search trên Safari, nó đè lên phím tắt ⌘K */
.search input::-webkit-search-cancel-button{display:none}

/* Khung kết quả neo theo CHÍNH ô tra, không theo toạ độ cứng của thanh trên.
   Neo cứng thì thu thanh trái hay đổi bề rộng cửa sổ là khung lệch khỏi ô. */
.search{position:relative}
.tim-xo{position:absolute;top:calc(100% + 6px);left:0;width:min(560px,calc(100vw - 40px));
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);z-index:60;max-height:min(60vh,460px);overflow-y:auto;padding:6px}
.tim-xo .nhom{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-muted);padding:8px 10px 4px}
.tim-xo .d{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-btn);cursor:pointer}
.tim-xo .d:hover,.tim-xo .d.chon{background:var(--sky-tint)}
.tim-xo .d .chinh{flex:1;min-width:0}
.tim-xo .d .chinh b{display:block;color:var(--t-head);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tim-xo .d .chinh span{color:var(--t-muted);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tim-xo .d .phai{color:var(--t-head);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.tim-xo .trong{padding:14px 12px;color:var(--t-muted);font-size:13px}
.tim-xo .day{border-top:1px solid var(--line);margin-top:6px;padding:9px 10px;
  color:var(--azure);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--r-btn)}
.tim-xo .day:hover,.tim-xo .day.chon{background:var(--sky-tint)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.who{font-size:12.5px;line-height:1.3}
.who b{display:block;color:var(--t-head)}
.who span{color:var(--t-muted);font-size:11.5px}
.content{padding:var(--s4) var(--s5) var(--s6);max-width:1440px;width:100%}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--t-head);padding:8px 14px;border-radius:var(--r-btn);
  font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background var(--d-fast) var(--e-io),border-color var(--d-fast) var(--e-io)}
.btn:hover{background:var(--mist);border-color:var(--line-strong)}
.btn.pri{background:var(--azure);border-color:var(--azure);color:#fff}
.btn.pri:hover{background:var(--blue)}
.btn.danger{color:var(--bad);border-color:#e6bbb8}
.btn.danger:hover{background:var(--bad-bg)}
.btn.ghost{border-color:transparent;background:none;color:var(--t-muted)}
.btn.ghost:hover{background:var(--mist);color:var(--t-head)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:focus-visible{outline:2px solid var(--azure);outline-offset:2px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-soft)}
.card-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:15px}
.card-b{padding:18px 20px}

.chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-chip);
  padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.neu{background:var(--neutral-bg);color:var(--neutral)}
.chip.info{background:var(--sky-tint);color:var(--navy)}
.chip.dot:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto}

/* Link mở toàn văn bản gốc, đứng cạnh số hiệu văn bản. */
.lk-goc{font-family:var(--f-sans);font-size:11.5px;font-weight:600;color:var(--azure);
  white-space:nowrap;margin-left:4px}
.lk-goc:hover{text-decoration:underline}

/* Tiêu đề cột bấm được để sắp xếp. */
.th-sap{cursor:pointer;user-select:none;white-space:nowrap}
.th-sap:hover{color:var(--t-head)}
.th-sap.dang{color:var(--azure)}
.th-sap:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}

/* Cột trạng thái gộp: chip ở trên, ngày ở dòng phụ bên dưới. */
.tt-gom{display:flex;flex-direction:column;gap:3px}
.tt-gom .nho{font-size:11.5px;white-space:nowrap}

/* Ô trống của bảng: có câu giải thích và MỘT nút để đi tiếp, không bỏ người
   dùng đứng trước cái bảng rỗng không biết làm gì. */
.trong-bang{text-align:center;padding:34px 16px}
.trong-bang .btn{margin-top:10px}
/* Dòng bảng bấm được thì phải đi tới được bằng bàn phím, và phải thấy rõ đang
   đứng ở dòng nào. Chỉ có cursor:pointer thì người dùng bàn phím không vào được. */
.tbl tr[tabindex]:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}
.tbl tr[tabindex]:hover{background:var(--mist)}
table.tbl{font-size:13.5px}
table.tbl th{position:sticky;top:0;background:var(--band);color:var(--t-muted);
  font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:2}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:hover{background:var(--mist)}
table.tbl tfoot td{background:var(--band);font-weight:700;color:var(--t-head);border-bottom:0}
table.tbl th.num,table.tbl td.num{text-align:right}
tr.flag-bad{box-shadow:inset 3px 0 0 var(--bad)}
tr.flag-warn{box-shadow:inset 3px 0 0 var(--warn)}

/* ---------- filter bar ---------- */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);padding:9px 12px}
.filters .fsearch{flex:1;min-width:200px;display:flex;align-items:center;gap:7px}
.filters .fsearch input{border:0;outline:none;background:none;width:100%;font-size:13.5px}
.sel{border:1px solid var(--line);background:var(--paper);border-radius:8px;
  padding:6px 9px;font-size:13px;color:var(--t-body);cursor:pointer}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--s3)}
/* Xóa dáng mặc định của thẻ button. Mọi màn đang dùng div, nhưng ai lỡ dùng
   button thì trình duyệt vẽ nút xám viền nổi, nhìn như giao diện hỏng. Đã dính
   đúng lỗi này ở màn Kho ngày 03/09/2026. */
.tab{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--t-muted);
  cursor:pointer;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  background:none;font-family:inherit;line-height:inherit}
.tab:hover{color:var(--t-head)}
.tab.on{color:var(--azure);border-bottom-color:var(--azure)}
.tab .cnt{font-size:11.5px;color:var(--t-faint);margin-left:5px}

/* ---------- kpi ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;position:relative;overflow:hidden}
.kpi .lab{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-muted)}
.kpi .val{font-size:26px;font-weight:700;color:var(--t-head);letter-spacing:-.02em;
  margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:12.5px;color:var(--t-muted);margin-top:4px}
.kpi .up{color:var(--ok);font-weight:600}
.kpi .down{color:var(--bad);font-weight:600}
.kpi.alert{border-color:#e6bbb8;background:linear-gradient(180deg,#fff,var(--bad-bg))}
.kpi.watch{border-color:#e8cfa0}
/* Thẻ số trên màn Tổng quan bấm được, nên phải trông như bấm được. */
.kpi.bam{cursor:pointer;transition:border-color var(--d-fast) var(--e-io),box-shadow var(--d-fast) var(--e-io)}
.kpi.bam:hover{border-color:var(--azure);box-shadow:var(--sh-hover)}
.kpi.bam:focus-visible{outline:2px solid var(--azure);outline-offset:2px}
.spark{position:absolute;right:14px;bottom:12px;opacity:.5}

/* ---------- progress ---------- */
.bar{height:7px;border-radius:var(--r-chip);background:var(--band);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .used{background:var(--azure)}
.bar .committed{background:repeating-linear-gradient(45deg,var(--sky),var(--sky) 4px,#cfe2f6 4px,#cfe2f6 8px)}
.bar.warn .used{background:var(--warn)}
.bar.bad .used{background:var(--bad)}

/* ---------- misc ---------- */
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:var(--s3)}
.grid11{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pagehead{display:flex;align-items:flex-end;gap:14px;margin-bottom:var(--s3);flex-wrap:wrap}
.pagehead h1{font-size:22px;letter-spacing:-.02em}
.pagehead .sub{color:var(--t-muted);font-size:13px}
.empty{text-align:center;padding:44px 20px;color:var(--t-muted)}
.empty .ill{font-size:34px;opacity:.35;margin-bottom:10px}
.list-task{display:flex;flex-direction:column}
.task-i{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.task-i:last-child{border-bottom:0}
.task-i .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--sky-tint);color:var(--navy);flex:none;font-size:14px}
.task-i .tx{flex:1;min-width:0}
.task-i .tx b{display:block;color:var(--t-head);font-size:13.5px}
.task-i .tx span{font-size:12px;color:var(--t-muted)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.strip a{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);
  padding:11px 13px;display:block;color:var(--t-body);font-size:13px}
.strip a:hover{border-color:var(--azure);background:var(--sky-tint)}
.strip b{display:block;color:var(--t-head);font-size:15px;margin-top:2px}

/* chart (pure CSS bars) */
.chart{display:flex;align-items:flex-end;gap:14px;height:190px;padding-top:10px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:6px;height:100%}
.chart .stack{width:100%;max-width:46px;display:flex;flex-direction:column-reverse;
  border-radius:6px 6px 0 0;overflow:hidden}
.chart .stack i{display:block}
.chart .lb{font-size:11.5px;color:var(--t-muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--t-muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* screens */
.screen{display:none}
.screen.on{display:block}

/* ==========================================================================
   S3, FORM PHIẾU
   ========================================================================== */
.form-2col{display:grid;grid-template-columns:1fr 340px;gap:var(--s3);align-items:start}
.sheet{padding:26px 30px;font-size:13.5px}
.sheet-head .co{font-weight:700;font-size:15px;color:var(--t-head);letter-spacing:-.01em}
.sheet-head .co-sub{color:var(--t-muted);font-size:12.5px}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:14px;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fld{display:flex;flex-direction:column;gap:3px}
.fld label{font-size:11.5px;color:var(--t-muted)}
.fld input,.fld select,.fld-row input,.fld-row select,.fld-row textarea,
table.detail input{border:1px solid transparent;background:var(--mist);border-radius:var(--r-sm);
  padding:6px 9px;font-size:13.5px;outline:none;width:100%;transition:box-shadow var(--d-fast)}
.fld input:hover,.fld-row input:hover,table.detail input:hover{background:#eef3f9}
.fld input:focus,.fld select:focus,.fld-row input:focus,.fld-row select:focus,
.fld-row textarea:focus,table.detail input:focus{background:#fff;box-shadow:0 0 0 2px var(--azure)}
.sheet-title{text-align:center;font-weight:700;font-size:19px;letter-spacing:.01em;
  color:var(--t-head);margin:20px 0 3px;text-transform:uppercase}
.sheet-no{text-align:center;color:var(--t-muted);font-size:12.5px;margin-bottom:16px}
.fld-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.fld-row.top{align-items:flex-start}
.fld-row>label{flex:none;width:190px;color:var(--t-body);font-size:13px}
.fld-row textarea{resize:vertical;line-height:1.5}
.hint{font-size:11.5px;color:var(--t-faint)}
table.detail{margin-top:4px;font-size:13px}
table.detail th{background:var(--band);border:1px solid var(--line-strong);
  text-transform:none;font-size:12px;letter-spacing:0;position:static}
table.detail td{border:1px solid var(--line-strong);padding:0}
table.detail td.c{text-align:center;padding:6px}
table.detail td input{border-radius:0;background:transparent}
table.detail td.num{padding-right:9px;font-weight:600}
table.detail tfoot td{background:var(--band);padding:8px 9px}
.addrow{margin-top:8px;border-style:dashed;color:var(--azure);background:transparent}
.byword{margin-top:10px;font-size:13.5px}
.ck-box{border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin-top:16px;background:var(--mist)}
.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px;text-align:center;font-size:12.5px}
.signs b{display:block;color:var(--t-head)}
.signs i{display:block;font-size:10.5px;color:var(--t-muted)}
.signs .sp{height:46px}
.signs span{font-weight:600;color:var(--t-head)}

.drop{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:18px;
  text-align:center;color:var(--t-muted);font-size:13px;background:var(--mist);cursor:pointer}
.drop:hover{border-color:var(--azure);color:var(--azure);background:var(--sky-tint)}
.att-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.att{border:1px solid var(--line);border-radius:var(--r-xs);padding:7px;position:relative;
  text-align:center;cursor:pointer;background:var(--paper)}
.att:hover{border-color:var(--azure)}
.att .th{height:74px;display:grid;place-items:center;font-size:26px;background:var(--band);border-radius:5px}
.att .th.pdf{background:#f3eef1}
.att .nm{font-size:11px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t-body)}
.att .x{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;
  background:var(--bad);color:#fff;font-size:11px;display:grid;place-items:center}
.tl{position:relative;padding-left:18px}
.tl-i{position:relative;padding:0 0 16px}
.tl-i:last-child{padding-bottom:0}
.tl-i:before{content:"";position:absolute;left:-18px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-strong)}
.tl-i:after{content:"";position:absolute;left:-14px;top:16px;bottom:0;width:1px;background:var(--line)}
.tl-i:last-child:after{display:none}
.tl-i.done:before{background:var(--ok);border-color:var(--ok)}
.tl-i.now:before{background:var(--azure);border-color:var(--azure);
  box-shadow:0 0 0 4px var(--sky-tint)}
.tl-i b{display:block;font-size:13px;color:var(--t-head)}
.tl-i span{font-size:11.5px;color:var(--t-muted)}
.link-i{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:13px;cursor:pointer}
.link-i:last-child{border-bottom:0}
.link-i:hover{color:var(--azure)}

/* ==========================================================================
   S4, DUYỆT CHI
   ========================================================================== */
.approve-2col{display:grid;grid-template-columns:340px 1fr;gap:var(--s3);align-items:start}
.qcard{background:var(--paper);border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:var(--r-md);padding:13px 15px;cursor:pointer;transition:box-shadow var(--d-fast)}
.qcard:hover{box-shadow:var(--sh-hover)}
.qcard.on{border-color:var(--azure);border-left-color:var(--azure);background:#fbfdff}
.qcard.warn{border-left-color:var(--warn)}
.qcard.bad{border-left-color:var(--bad)}
.prev-scroll{max-height:560px;overflow-y:auto;background:var(--mist)}
.prev-sheet{background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);
  padding:26px 30px;font-family:"Times New Roman",Times,serif;font-size:13pt;line-height:1.6}
.prev-sheet .co{font-weight:700;font-size:13pt}
.prev-sheet .co-sub{font-size:10.5pt;color:#444}
.prev-title{text-align:center;font-weight:700;font-size:16pt;margin:18px 0 2px;text-transform:uppercase}
.prev-no{text-align:center;font-size:10.5pt;margin-bottom:14px}
.prev-row{margin:6px 0}
.prev-row span{color:#555}
table.prev-tbl{margin-top:10px;font-size:11pt}
table.prev-tbl th,table.prev-tbl td{border:1px solid #000;padding:5px 7px;position:static;
  background:none;text-transform:none;letter-spacing:0;color:#111}
table.prev-tbl th{background:#eaf0f7;font-weight:700}
table.prev-tbl tfoot td{background:#f2f6fb;font-weight:700}
.prev-ck{border:1px solid #999;border-radius:5px;padding:9px 11px;margin-top:14px;font-size:11pt}
.approve-bar{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);
  background:var(--paper);border-radius:0 0 var(--r-card) var(--r-card)}

/* ==========================================================================
   S5, ĐỐI CHIẾU
   ========================================================================== */
.src-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.src{background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:12px 14px}
.src b{display:block;color:var(--t-head);font-size:13.5px}
.src span{font-size:12px;color:var(--t-muted)}
.src.ok{border-style:solid;border-color:var(--ok);background:linear-gradient(180deg,#fff,var(--ok-bg))}
.sum-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:12px}
.sumcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;cursor:pointer;transition:border-color var(--d-fast)}
.sumcard:hover{border-color:var(--line-strong)}
.sumcard.on{border-color:var(--azure);box-shadow:0 0 0 1px var(--azure)}
.sumcard .n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.sumcard .l{font-size:12.5px;color:var(--t-muted);margin-top:2px}
.banner{display:block;border-radius:var(--r-md);
  padding:12px 15px;font-size:13px;margin-bottom:8px;line-height:1.55}
.banner>b:first-child{display:inline}
.banner.warn{background:var(--warn-bg);color:#6d4508;border:1px solid #e8cfa0}
.banner.bad{background:var(--bad-bg);color:#7d221d;border:1px solid #e6bbb8}
.banner.info{background:var(--sky-tint);color:var(--navy);border:1px solid #b9d6f2}
.diff-head{display:grid;grid-template-columns:1fr 1fr 200px;gap:0;background:var(--band);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-muted);padding:8px 16px;border-bottom:1px solid var(--line)}
.diff-row{display:grid;grid-template-columns:1fr 1fr 200px;gap:0;border-bottom:1px solid var(--line);
  padding:12px 16px;font-size:13px;align-items:center}
.diff-row .side-a,.diff-row .side-b{padding-right:14px}
.diff-row .side-b.empty{color:var(--t-faint);font-style:italic}
.diff-row.left{background:#f4f9ff}
.diff-row.right{background:var(--warn-bg)}
.diff-row.diff{background:var(--bad-bg)}
.diff-row.ok{background:var(--paper);color:var(--t-muted)}
.diff-row .acts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.diff-row.collapsed-note{background:#eef5fd;font-style:italic}

/* ==========================================================================
   S9, SOÁT TỜ KHAI
   ========================================================================== */
.stepper{display:flex;gap:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.step{flex:1;display:flex;align-items:center;gap:9px;padding:13px 16px;
  border-right:1px solid var(--line);font-size:13px;color:var(--t-muted)}
.step:last-child{border-right:0}
.step i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:11.5px;font-weight:700;background:var(--band);color:var(--t-muted);flex:none}
.step.done{color:var(--t-body)} .step.done i{background:var(--ok);color:#fff}
.step.now{color:var(--azure);font-weight:600;background:var(--sky-tint)}
.step.now i{background:var(--azure);color:#fff}

/* ==========================================================================
   S10, BỘ HỒ SƠ
   ========================================================================== */
.lab-s{font-size:11px;color:var(--t-muted);font-family:var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.doss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:16px}
.doss{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px;text-align:center;transition:border-color var(--d-fast)}
.doss .tag{font-size:11.5px;color:var(--t-muted);font-weight:600;margin-bottom:9px;text-align:left}
.doss .th{height:92px;display:grid;place-items:center;font-size:32px;border-radius:8px;background:var(--band)}
.doss .fn{font-size:12.5px;margin-top:8px;color:var(--t-head);font-weight:600}
.doss.have{border-color:var(--line)}
.doss.have:hover{border-color:var(--azure);box-shadow:var(--sh-hover);cursor:pointer}
.doss.have.auto .th{background:var(--sky-tint)}
.doss.miss{border-style:dashed;border-color:var(--warn);background:#fffdf8;cursor:pointer}
.doss.miss .th{background:transparent;color:var(--warn);border:1.5px dashed #e8cfa0}
.doss.miss .fn{color:var(--warn)}
.doss.opt{opacity:.6}
.doss.opt .th{background:transparent;border:1.5px dashed var(--line-strong);color:var(--t-faint)}
.dots{display:inline-flex;gap:3px;vertical-align:-1px;margin-right:6px}
.dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-strong);display:block}
.dots i.f{background:var(--ok);border-color:var(--ok)}
.dots i.o{border-style:dotted;opacity:.5}

/* ==========================================================================
   S7, P&L
   ========================================================================== */
table.pnl td:first-child,table.pnl th:first-child{position:sticky;left:0;background:var(--paper);z-index:1}
table.pnl th:first-child{background:var(--band)}
table.pnl tr.sum td{background:var(--mist);font-weight:700;color:var(--t-head)}
table.pnl tr.sum td:first-child{background:var(--mist)}
table.pnl .tot{background:var(--band);font-weight:700;color:var(--t-head)}
table.pnl td .d{display:block;font-size:10.5px;font-style:normal;font-weight:600;margin-top:1px}
table.pnl td .d.up{color:var(--ok)} table.pnl td .d.down{color:var(--bad)}
.hbars{display:flex;flex-direction:column;gap:9px}
.hb{display:grid;grid-template-columns:86px 1fr 74px;align-items:center;gap:10px;font-size:12.5px}
.hb i{height:16px;border-radius:4px;display:block}
.hb i.pos{background:var(--azure)}
.hb i.negb{background:var(--bad);opacity:.8;justify-self:end}
.hb b{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- S15 lịch chấm công ---------- */
table.att-cal th{text-align:center;min-width:34px}
table.att-cal td.d{padding:0;text-align:center}
table.att-cal td.d:after{content:"";display:block;width:20px;height:20px;border-radius:5px;margin:0 auto;background:var(--band)}
table.att-cal td.d.ok:after{background:var(--ok);opacity:.75}
table.att-cal td.d.warn:after{background:var(--warn);opacity:.8}
table.att-cal td.d.sky:after{background:var(--sky)}
table.att-cal td.d.half:after{background:linear-gradient(90deg,var(--ok) 50%,var(--band) 50%);opacity:.85}
input[readonly]{background:var(--band);color:var(--t-muted);cursor:not-allowed}

/* ==========================================================================
   MODALS / OVERLAY
   ========================================================================== */
.ov{position:fixed;inset:0;background:rgba(14,28,51,.5);display:none;align-items:center;
  justify-content:center;z-index:80;padding:24px;backdrop-filter:blur(2px)}
.ov.show{display:flex}
.ov.dark{background:rgba(8,15,24,.93);backdrop-filter:none}
.modal{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-pop);
  width:100%;max-width:520px;max-height:86vh;display:flex;flex-direction:column;
  animation:pop var(--d-base) var(--e-out)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:15.5px;flex:1}
.modal-h .x{border:0;background:none;color:var(--t-muted);font-size:15px;cursor:pointer;
  padding:5px 9px;border-radius:var(--r-xs)}
.modal-h .x:hover{background:var(--mist);color:var(--t-head)}
.modal-b{padding:18px 20px;overflow-y:auto}
.modal-b textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:9px 11px;font-size:13.5px;resize:vertical;outline:none}
.modal-b textarea:focus{border-color:var(--azure);box-shadow:0 0 0 2px var(--sky-tint)}
.modal-f{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);
  background:var(--mist);border-radius:0 0 var(--r-card) var(--r-card)}
.modal-f .btn:last-child{margin-left:auto}
.modal-f .grow+.btn{margin-left:0}
.ncc-list{display:flex;flex-direction:column;gap:8px}
.ncc-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--r-btn);padding:10px 13px;cursor:pointer}
.ncc-row:hover{border-color:var(--azure);background:var(--sky-tint)}
.ncc-row .info{flex:1;min-width:0}
.ncc-row .info b{font-size:13.5px;color:var(--t-head);display:block}
.ncc-row .info small{color:var(--t-muted);font-size:12px;font-variant-numeric:tabular-nums}
.ck-line{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-xs);
  font-size:13.5px;cursor:pointer}
.ck-line:hover{background:var(--mist)}
.ck-line.dis{color:var(--t-faint);cursor:not-allowed}
.ck-line i{font-style:italic;color:var(--warn)}
.light-wrap{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:92vw}
.light-img{background:#fff;border-radius:var(--r-md);width:min(560px,88vw);height:min(66vh,620px);
  display:grid;place-items:center;font-size:64px;color:var(--t-faint);text-align:center}
.light-bar{display:flex;align-items:center;gap:12px;color:#fff;font-size:13px;width:100%}

/* ---------- Ngăn hướng dẫn ----------
   Trượt từ phải vào, phủ mờ phần còn lại. Không phải một màn trong app vì đổi
   màn là mất chỗ đang gõ, cũng không phải thẻ mới vì đổi thẻ cũng vậy. */
.hd-nen{position:fixed;inset:0;background:rgba(14,28,51,.34);z-index:70;
  animation:hdMo var(--d-fast) var(--e-io)}
@keyframes hdMo{from{opacity:0}to{opacity:1}}
.hd-ngan{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(760px,92vw);
  background:var(--paper);border-left:1px solid var(--line);
  box-shadow:-18px 0 48px -24px rgba(14,28,51,.4);
  display:flex;flex-direction:column;animation:hdTruot var(--d-base) var(--e-out)}
@keyframes hdTruot{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
.hd-ngan-dau{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--band)}
.hd-ngan-dau b{color:var(--t-head);font-size:14.5px}
.hd-ngan iframe{flex:1;width:100%;border:0;background:var(--paper)}
@media print{ .hd-nen,.hd-ngan{display:none !important} }

/* ---------- toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(24px);
  background:var(--blue-deep);color:#fff;padding:11px 14px 11px 18px;border-radius:var(--r-btn);
  box-shadow:var(--sh-pop);display:flex;align-items:center;gap:14px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s var(--e-out);z-index:90}
.toast.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.toast .btn:hover{background:rgba(255,255,255,.28)}

/* ==========================================================================
   STATES: loading / empty / error
   ========================================================================== */
.sk{background:linear-gradient(90deg,var(--band) 25%,#e6edf6 37%,var(--band) 63%);
  background-size:400% 100%;animation:shim 1.4s ease infinite;border-radius:6px;height:13px}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk.lg{height:26px}.sk.sm{height:10px}
.state-demo{display:flex;gap:8px;align-items:center;margin-bottom:14px;
  background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--r-btn);padding:9px 13px}
.state-demo .lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-muted)}
.err-box{text-align:center;padding:40px 20px}
.err-box .ic{font-size:34px;margin-bottom:10px}
.err-box b{display:block;color:var(--t-head);font-size:15px;margin-bottom:4px}
.err-box .code{font-family:var(--f-mono);font-size:11px;color:var(--t-faint);margin-top:10px}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1439px){
  .content{padding:20px 24px 40px}
  .kpis{gap:12px}
  .col-hide-lg{display:none}
}
@media (max-width:1200px){
  .app{grid-template-columns:var(--side-w-min) 1fr}
  .app .side .nm,.app .nav-i span:not(.ic):not(.badge),.app .nav-group>.eyebrow{display:none}
  .app .nav-i{justify-content:center}
  .form-2col,.approve-2col{grid-template-columns:1fr}
  .grid2,.grid11{grid-template-columns:1fr}
  .doss-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .sum-row,.src-row,.strip{grid-template-columns:1fr 1fr}
  .stepper{flex-wrap:wrap}
  .step{flex:1 1 46%}
  .who{display:none}
}
@media (max-width:767px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  /* Nút ≡ mở thanh trái dạng lớp phủ. Thiếu khối này thì trên điện thoại bấm ≡
     không ra gì, vì .side bị display:none mà không có chỗ nào mở lại. */
  .side.mo{display:flex;position:fixed;inset:0 auto 0 0;width:min(280px,86vw);
    z-index:60;box-shadow:var(--sh-pop);overflow-y:auto}
  /* :not(:empty) là chốt quan trọng. Không có nó thì ô đếm rỗng ở đầu nhóm bị
     bật lại thành khối đỏ tròn, trông như đang có việc chờ mà thật ra không có. */
  .side.mo .nav-i span:not(.ic):not(:empty){display:inline}
  .side.mo .nav-i{justify-content:flex-start}
  .top{padding:0 14px;gap:10px}
  /* Thanh trên không đủ chỗ cho ô tra. Ẩn cả ô lẫn khung kết quả, người dùng
     vào Tra cứu qua mục trong nhóm Cài đặt. */
  .search{display:none}
  /* Ngăn hướng dẫn chiếm hết bề ngang trên điện thoại. */
  .hd-ngan{width:100vw}
  .tim-xo{display:none !important}
  .content{padding:16px 14px 80px}
  .kpis,.sum-row,.src-row,.strip,.doss-grid{grid-template-columns:1fr}
  .pagehead h1{font-size:19px}
  /* bảng → thẻ */
  .m-cards table.tbl thead{display:none}
  .m-cards table.tbl,.m-cards table.tbl tbody,.m-cards table.tbl tfoot,
  .m-cards table.tbl tr,.m-cards table.tbl td,.m-cards table.tbl th{display:block;width:100%}
  .m-cards table.tbl tr{border:1px solid var(--line);border-radius:var(--r-md);
    margin-bottom:10px;padding:10px 12px;background:var(--paper)}
  .m-cards table.tbl td,.m-cards table.tbl tfoot th{border:0;padding:3px 0;
    display:flex;justify-content:space-between;gap:12px;text-align:left}
  .m-cards table.tbl td:before{content:attr(data-l);color:var(--t-muted);font-size:12px;
    flex:none;max-width:45%}
  /* Ô rỗng thì chỉ còn cái nhãn trơ ra, giấu luôn cho thẻ khỏi dài vô ích. */
  .m-cards table.tbl td:empty{display:none}
  /* KHÔNG giấu tfoot. Dòng tổng là thứ người dùng tìm đầu tiên trên điện thoại,
     giấu đi là mất hẳn con số quan trọng nhất của bảng. */
  .m-cards table.tbl tfoot tr{background:var(--band);font-weight:600}
  .m-cards table.tbl td.num,.m-cards table.tbl td .num{text-align:right}
  .desk-only{display:none!important}
  .mobile-note{display:block!important}

  /* chống tràn ngang trên điện thoại */
  body,.app,.content{overflow-x:hidden;max-width:100vw}
  .pagehead{flex-wrap:wrap;gap:8px}
  .pagehead .btn{font-size:12.5px;padding:7px 11px}
  .card-h{flex-wrap:wrap;gap:6px}
  .card-h h3{font-size:14.5px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex:none}
  .banner{font-size:12.5px;padding:11px 13px;word-break:break-word}
  /* mọi bảng đều cuộn ngang được, kể cả bảng không bọc tbl-wrap */
  .tbl-wrap,.card-b{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:480px}
  .m-cards table.tbl{min-width:0}
  /* con của lưới mặc định min-width:auto nên không co nhỏ hơn nội dung, phải ép về 0 */
  .app>*,.content,.content>*,.card,.card-b,.tbl-wrap,.banner,section.screen,
  .grid11,.grid11>*,.approve-2col,.approve-2col>*{min-width:0;max-width:100%}
  /* thanh trên cùng: cho xuống dòng, ẩn bớt thứ không cần khi duyệt */
  .top{flex-wrap:wrap;row-gap:6px}
  .top .sel,.top .crumb{display:none}
  .row{flex-wrap:wrap}
  .approve-2col{grid-template-columns:1fr}

  /* vùng bấm đủ lớn cho ngón tay */
  .btn{min-height:40px}
  /* Thanh lọc phải cao theo nút, nếu không hai nút ngày cao 40 còn mấy ô kia 34
     và cả hàng trông như ghép tạm. */
  select.sm,input.sm,.loc-hang .btn.sm{height:40px;min-height:40px}
  .qcard{padding:12px}
  .qcard .btn{min-height:44px;flex:1}

  /* thanh duyệt nổi dưới màn hình */
  .m-approve-bar{display:flex!important}
}

/* thanh duyệt cố định dưới đáy, chỉ hiện trên điện thoại */
.m-approve-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -3px 14px rgba(28,61,110,.10)}
.m-approve-bar .btn{flex:1;min-height:46px;font-size:14px;font-weight:600}
.mobile-note{display:none;background:var(--warn-bg);border:1px solid #e8cfa0;color:#6d4508;
  border-radius:var(--r-md);padding:12px 15px;font-size:13px;margin-bottom:14px}

/* ---------- owner cell (người phụ trách) ---------- */
.own{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.av-s{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em}
.av-s.c1{background:#1c3d6e}.av-s.c2{background:#2f7fd1}.av-s.c3{background:#0f7b52}
.av-s.c4{background:#a86a10}.av-s.c5{background:#6b4fa8}.av-s.c6{background:#b3352f}
.own .n{font-size:12.5px;line-height:1.25}
.own .n b{display:block;color:var(--t-head);font-weight:600}
.own .n span{color:var(--t-muted);font-size:11px}
.own-mini{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t-muted);margin-top:3px}
.av-xs{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:8.5px;font-weight:700;color:#fff}

/* ---------- command palette (⌘K) ---------- */
.ov.top{align-items:flex-start;padding-top:12vh}
.cmdk{width:100%;max-width:560px;background:var(--paper);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);overflow:hidden;animation:pop var(--d-base) var(--e-out)}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-in input{border:0;outline:none;font-size:15px;width:100%}
.cmdk-list{max-height:52vh;overflow-y:auto;padding:8px}
.cmdk-sec{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-muted);padding:8px 10px 4px}
.cmdk-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-btn);cursor:pointer;font-size:13.5px}
.cmdk-i:hover,.cmdk-i.sel{background:var(--sky-tint)}
.cmdk-i .ic{width:22px;text-align:center}
.cmdk-i .meta{margin-left:auto;font-size:11.5px;color:var(--t-muted);font-variant-numeric:tabular-nums}
.cmdk-f{border-top:1px solid var(--line);padding:8px 14px;font-size:11.5px;color:var(--t-muted);
  display:flex;gap:14px;background:var(--mist)}
.cmdk-f kbd{font-family:var(--f-mono);border:1px solid var(--line-strong);border-radius:4px;padding:0 4px}

/* ---------- notification panel ---------- */
.notif{position:absolute;top:calc(var(--top-h) - 4px);right:20px;width:376px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-pop);display:none;z-index:60}
.notif.show{display:block;animation:pop var(--d-fast) var(--e-out)}
.notif-h{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.notif-h b{flex:1;font-size:14px;color:var(--t-head)}
.notif-b{max-height:400px;overflow-y:auto}
.n-sec{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-muted);padding:10px 16px 5px;background:var(--mist)}
.n-i{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.n-i:hover{background:var(--mist)}
.n-i .dot{width:7px;height:7px;border-radius:50%;background:var(--azure);margin-top:6px;flex:none}
.n-i .dot.off{background:transparent}
.n-i .tx{flex:1;min-width:0}
.n-i .tx b{display:block;font-size:13px;color:var(--t-head);font-weight:600}
.n-i .tx span{font-size:12px;color:var(--t-muted)}
.n-i .tm{font-size:11px;color:var(--t-faint);white-space:nowrap}

/* ---------- no permission ---------- */
.noperm{text-align:center;padding:70px 20px;max-width:440px;margin:0 auto}
.noperm .ic{font-size:44px;opacity:.4;margin-bottom:14px}
.noperm b{display:block;font-size:17px;color:var(--t-head);margin-bottom:6px}

/* ==========================================================================
   FILE ACTIONS, tải lên / xem trước / tải về / in
   ========================================================================== */
.fa{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.fa button{width:28px;height:28px;padding:0;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r-xs);cursor:pointer;font-size:12.5px;line-height:1;color:var(--t-body);
  display:grid;place-items:center;transition:.12s var(--e-io)}
.fa button:hover{border-color:var(--azure);color:var(--azure);background:var(--sky-tint)}
.fa button:disabled{opacity:.35;cursor:not-allowed}
.fa button:disabled:hover{border-color:var(--line);color:var(--t-body);background:var(--paper)}
.fa .up{border-style:dashed;color:var(--warn);border-color:#e8cfa0}
.fa .up:hover{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.file-cell{display:flex;align-items:center;gap:8px}
.file-cell .fname{font-size:12px;color:var(--t-body);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.file-cell .none{font-size:12px;color:var(--t-faint);font-style:italic}

/* cột Tệp ghim bên phải để luôn thấy khi bảng rộng */
table.tbl th:last-child.col-file,table.tbl td:last-child.col-file{position:sticky;right:0;
  background:var(--paper);box-shadow:-6px 0 10px -8px rgba(28,61,110,.25);z-index:1}
table.tbl th:last-child.col-file{background:var(--band);z-index:3}
table.tbl tbody tr:hover td:last-child.col-file{background:var(--mist)}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
:root[data-theme="dark"]{
  --paper:#131c28; --mist:#0d151f; --band:#1b2734;
  --line:#24344a; --line-strong:#33475f;
  --navy:#8fb8e8; --azure:#4c93e8; --blue:#5c9ff0; --blue-deep:#0a121c;
  --sky:#6fa8e0; --sky-tint:#17293e;
  --t-head:#e8eef7; --t-body:#b3c1d4; --t-muted:#8496ab; --t-faint:#5f7189;
  --ok:#3fb883;      --ok-bg:#122b22;
  --warn:#d9a441;    --warn-bg:#2e2416;
  --bad:#e2726b;     --bad-bg:#2e1817;
  --neutral:#8496ab; --neutral-bg:#1c2733;
  --sh-soft:0 10px 28px -14px rgba(0,0,0,.55);
  --sh-hover:0 14px 40px -16px rgba(0,0,0,.65),0 4px 12px -6px rgba(0,0,0,.4);
  --sh-pop:0 26px 60px -24px rgba(0,0,0,.7),0 2px 8px -4px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .prev-sheet{background:#f4f6f9;color:#111}
:root[data-theme="dark"] .prev-sheet .co-sub{color:#444}
:root[data-theme="dark"] table.prev-tbl th{background:#e3ebf5}
:root[data-theme="dark"] table.prev-tbl tfoot td{background:#eaf0f8}
:root[data-theme="dark"] .prev-scroll{background:var(--band)}
:root[data-theme="dark"] .doss.miss{background:#241d10}
:root[data-theme="dark"] .diff-row.left{background:#131f2e}
:root[data-theme="dark"] .src.ok{background:linear-gradient(180deg,var(--paper),#122a22)}
:root[data-theme="dark"] .kpi.alert{background:linear-gradient(180deg,var(--paper),#2a1615)}
:root[data-theme="dark"] .sk{background:linear-gradient(90deg,#1b2734 25%,#243244 37%,#1b2734 63%);
  background-size:400% 100%}
:root[data-theme="dark"] .light-img{background:#e9edf2}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color:var(--t-body)}
:root[data-theme="dark"] .att .th{background:var(--band)}
:root[data-theme="dark"] .att .th.pdf{background:#2a2230}
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .sc{background:var(--paper)}

/* ==========================================================================
   PRINT, in trực tiếp từng màn
   ========================================================================== */
@media print{
  @page{size:A4 landscape;margin:10mm}
  .side,.top,.notif,.ov,.toast,.state-demo,.filters,.tabs,.addrow,
  .btn,.fa,.approve-bar,.mobile-note,.col-file{display:none!important}
  .app{display:block}
  .content{padding:0;max-width:none}
  body{background:#fff}
  .screen{display:none!important}
  .screen.on{display:block!important}
  .card{box-shadow:none;border-color:#999;break-inside:avoid}
  .kpi{border-color:#999}
  table.tbl th{background:#eef3fa!important;color:#111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.tbl td,table.tbl th{border-color:#999}
  .chip{border:1px solid #999;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pagehead{border-bottom:2px solid #333;padding-bottom:8px}
  .pagehead:after{content:"CÔNG TY CỔ PHẦN CÔNG NGHỆ WORK ZONE · MST 0318818615 · In "attr(data-print);
    display:block;width:100%;font-size:10px;color:#666;margin-top:6px}
  tr{break-inside:avoid}
  .form-2col,.approve-2col,.grid2,.grid11{grid-template-columns:1fr!important}
}

/* ---------- bộ chọn loại phiếu ---------- */
.ftype-bar{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-btn);padding:9px 13px;margin-bottom:var(--s3);flex-wrap:wrap}
.ftype-bar .lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted)}
.ft{border:1px solid var(--line-strong);background:var(--paper);color:var(--t-body);
  padding:7px 13px;border-radius:var(--r-btn);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--f-sans)}
.ft:hover{background:var(--mist)}
.ft.on{background:var(--sky-tint);border-color:var(--azure);color:var(--azure)}
/* mẫu 04-TT */
.qt-mau{font-size:11px;text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-xs);
  padding:7px 11px;line-height:1.4;flex:none;max-width:250px;color:var(--t-body)}
.qt-mau i{font-size:10px;color:var(--t-muted)}
.qt-d{width:56px;text-align:center;border:1px solid transparent;background:var(--mist);
  border-radius:var(--r-xs);padding:3px 6px;font-size:13px}
table.qt-tbl tr.qt-sec td{background:var(--band);font-weight:700;color:var(--t-head)}

/* ---------- menu Biểu mẫu (có submenu) ---------- */
.nav-parent .caret{margin-left:auto;font-size:12px;line-height:1;transition:transform .18s var(--e-io);color:var(--t-muted)}
.nav-parent.open .caret{transform:rotate(180deg)}
.nav-sub{display:none;margin:2px 0 4px 10px;padding-left:8px;border-left:1px solid var(--line)}
.nav-sub.open{display:block}
.nav-i.sub{font-size:13px;padding:6px 10px}
.nav-nhom{margin-bottom:2px}
/* Nhóm lồng trong nhóm: thụt thêm một bậc để nhìn ra thứ bậc, và cái gạch dọc
   bên trái nhạt hơn cấp trên. */
.nav-sub .nav-nhom>.nav-sub{margin-left:8px;border-left-style:dotted}
.nav-parent .cnt{margin-left:auto;background:var(--bad);color:#fff;border-radius:var(--r-chip);
  font-size:11px;font-weight:700;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}
.nav-parent .cnt:empty{display:none}
.nav-parent .cnt + .caret{margin-left:6px}
.nav-i.sub .cnt{margin-left:auto;color:var(--t-faint);font-size:11.5px;font-weight:600}
.app.collapsed .nav-sub{display:none!important}

/* ---------- menu Tạo phiếu ---------- */
.newmenu{position:relative}
.newmenu-list{position:absolute;top:calc(100% + 6px);right:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-pop);
  min-width:230px;padding:6px;display:none;z-index:40}
.newmenu-list.open{display:block;animation:pop var(--d-fast) var(--e-out)}
.nm-i{padding:9px 11px;border-radius:var(--r-btn);cursor:pointer;font-size:13.5px}
.nm-i:hover{background:var(--sky-tint);color:var(--azure)}

/* ---------- dropzone ---------- */
.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:16px;
  background:var(--mist);cursor:pointer;transition:.15s var(--e-out)}
.dropzone:hover{border-color:var(--azure);background:var(--sky-tint)}
/* Mọi ô chọn tệp đều nhận kéo thả, xem batKeoTha trong app.js */
/* flex-wrap để nhãn kéo thả xuống hàng riêng thay vì chen vào giữa các cột */
/* Hàng bộ lọc màn danh sách phiếu */
.loc-hang{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
/* MỌI ô lọc trong app, ở màn nào cũng vậy, dùng chung một dáng: bo tròn như nút,
   chữ in đậm, cùng cỡ chữ, cùng chiều cao. Đánh dấu bằng class sm, nên thêm ô lọc
   mới ở màn khác là tự có dáng đúng, khỏi chép lại CSS. */
select.sm,input.sm,.loc-hang .btn.sm{
  border:1px solid var(--line-strong);background:var(--paper);color:var(--t-head);
  border-radius:var(--r-btn);padding:0 10px;font-size:12.5px;font-weight:600;
  font-family:inherit;line-height:1;height:34px;box-sizing:border-box}
select.sm:hover,input.sm:hover{background:var(--mist)}
input.sm::placeholder{font-weight:600;color:var(--t-muted)}
select.sm:focus-visible,input.sm:focus-visible{outline:2px solid var(--azure);outline-offset:2px}

/* Ô lọc tự hiện tên trường khi chưa lọc, không cần nhãn riêng bên trên. */
.loc-o{display:inline-flex}

.loc-ngay-o{position:relative;display:inline-block}
.loc-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:230px;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:0 12px 28px rgba(15,23,42,.16);padding:12px;display:flex;flex-direction:column;gap:6px}
.loc-pop label{font-size:12px;color:var(--t-muted)}
/* Danh sách chọn tự dựng: nằm hẳn DƯỚI ô, không đè lên như select gốc */
.loc-danh-sach{padding:6px;min-width:0;gap:0}
.loc-muc{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:7px 10px;border-radius:var(--r-btn);font-size:12.5px;font-weight:600;
  color:var(--t-head);font-family:inherit;white-space:nowrap}
.loc-muc:hover{background:var(--mist)}
.loc-muc.dang{background:var(--azure);color:#fff}
.loc-pop input[type=date]{width:100%}
.loc-pop .btn{width:100%;justify-content:center;margin-top:4px}
.loc-hang #lcTim{min-width:220px}

.o-keo{position:relative;border-radius:var(--r-md);transition:background .12s,box-shadow .12s;
  flex-wrap:wrap}
.o-keo .o-keo-nhan{flex:0 0 100%;width:100%}
.o-keo.dang-keo{background:var(--sky-tint);box-shadow:0 0 0 2px var(--azure) inset}
.o-keo-nhan{font-size:11.5px;color:var(--t-muted);margin-top:4px}
.o-keo.dang-nham{box-shadow:0 0 0 1.5px var(--azure) inset}
.dropzone.dang-nham{border-color:var(--azure)}
.o-keo.dang-keo .o-keo-nhan{color:var(--azure);font-weight:600}
.dropzone.over{border-color:var(--azure);background:var(--sky-tint);
  box-shadow:0 0 0 3px rgba(47,127,209,.18);transform:scale(1.01)}
.dz-in{display:flex;align-items:center;gap:13px;justify-content:center;color:var(--t-muted);font-size:12.5px}
.dz-ic{width:36px;height:36px;border-radius:50%;background:var(--azure);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:700;flex:none}
.dz-in b{color:var(--t-head);font-size:13.5px}

/* thao tác tệp trên thumbnail chứng từ */
.att{position:relative}
.att-fa{display:flex;gap:3px;justify-content:center;margin-top:6px}
.att-fa button{width:26px;height:24px;border:1px solid var(--line);background:var(--paper);
  border-radius:var(--r-xs);cursor:pointer;font-size:11px;padding:0;color:var(--t-body)}
.att-fa button:hover{border-color:var(--azure);color:var(--azure);background:var(--sky-tint)}

/* checkbox nhãn, dùng ở khoản chi không hóa đơn */
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t-body)}
.chk input{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}

/* ---------- bổ sung cho bản chạy thật ---------- */
/* Logo chính trên màn đăng nhập. Đây là chỗ DUY NHẤT trong app dùng logo đủ
   màu, vì chỉ ở đây mới đủ 96px trở lên theo luật cỡ nhỏ nhất. */
.dn-logo{display:block;margin:0 auto 14px;height:108px;width:auto}
/* Nền tối thì đổi sang bản âm bản trắng. Logo navy trên nền tối là điều mục 7
   bộ nhận diện cấm. */
.dn-logo.toi{display:none}
:root[data-theme="dark"] .dn-logo{display:none}
:root[data-theme="dark"] .dn-logo.toi{display:block}

.dn-wrap{min-height:100vh;display:grid;place-items:center;background:var(--mist);padding:20px}
.dn{width:100%;max-width:390px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);padding:28px;box-shadow:0 4px 20px rgba(28,61,110,.07)}
/* Tên app và dòng phụ canh GIỮA cho thẳng trục với logo phía trên. Lệch trái
   thì logo ở giữa mà chữ dạt sang một bên, nhìn như bị rơi. */
.dn h1{font-size:19px;margin:0 0 4px;color:var(--navy);text-align:center}
.dn .sub{color:var(--t-muted);font-size:13px;margin-bottom:20px;text-align:center}
.dn label{display:block;font-size:12.5px;color:var(--t-muted);margin:12px 0 5px}
.dn input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:14px}
.dn input:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 3px var(--sky-tint)}
.dn .btn{width:100%;margin-top:18px;min-height:44px;justify-content:center}
.dn .err{background:var(--bad-bg);border:1px solid #e6bbb8;color:#7d221d;border-radius:var(--r-sm);
  padding:10px 12px;font-size:13px;margin-top:14px;display:none}
.dn .err.on{display:block}
.dn .goi-y{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--t-muted);line-height:1.7}
.hidden{display:none!important}
.dong-nhap-row td{padding:5px 6px}
.dong-nhap-row input,.dong-nhap-row select{width:100%;border:1px solid transparent;background:transparent;
  padding:6px;border-radius:var(--r-xs);font:inherit;font-size:13px}
.dong-nhap-row input:hover,.dong-nhap-row select:hover{border-color:var(--line);background:#fff}
.dong-nhap-row input:focus,.dong-nhap-row select:focus{outline:none;border-color:var(--azure);background:#fff}
.dong-nhap-row .num{text-align:right;font-variant-numeric:tabular-nums}
.fld-lon{display:grid;gap:5px;margin-bottom:12px}
.fld-lon label{font-size:12.5px;color:var(--t-muted)}
.fld-lon input,.fld-lon select,.fld-lon textarea{padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:13.5px;width:100%}
.fld-lon input:focus,.fld-lon select:focus,.fld-lon textarea:focus{outline:none;border-color:var(--azure);
  box-shadow:0 0 0 3px var(--sky-tint)}
.loi-list{background:var(--bad-bg);border:1px solid #e6bbb8;color:#7d221d;border-radius:var(--r-md);
  padding:12px 15px;font-size:13px;margin-bottom:12px}
.loi-list ul{margin:6px 0 0;padding-left:20px}

/* Cài đặt biểu mẫu: lưới ô nhập co theo bề ngang, không tràn trên điện thoại */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;min-width:0;
  align-items:start}
.form-grid>*{min-width:0}
/* Chốt chặn bố cục: ô nào trong lưới quên class fld-lon thì nhãn và ô nhập vẫn
   xếp dọc, không nằm cùng một dòng rồi đè lên nhau. Đã lỗi một lần ở form sửa
   tài khoản, nhãn "Vai trò" dính vào ô chọn và hàng dưới bị chồng. */
.form-grid>div:not(.fld-lon){display:grid;gap:5px;align-content:start}
.form-grid>div:not(.fld-lon)>label{font-size:12.5px;color:var(--t-muted)}
/* Form ĐỌC TUẦN TỰ thì ép một cột, không cho lưới tự chia hai.
   Lỗi thấy ngày 04/09/2026 ở màn đổi mật khẩu: thẻ rộng 520px vừa đúng hai cột
   nên ba ô xếp thành 2 rồi 1, "Nhập lại mật khẩu mới" bị đẩy sang hàng khác cột
   khác so với "Mật khẩu mới", còn ô trái thì hở một khoảng trống to vì ô phải
   cao hơn do có dòng gợi ý. Mắt phải nhảy chữ Z trên đúng màn không được nhầm. */
.form-grid.mot-cot{grid-template-columns:1fr;max-width:420px}
/* Một cột thì khoảng cách giữa các ô đã do gap lo, để thêm margin của fld-lon
   nữa là cộng dồn thành 24px, nhìn rời rạc. */
.form-grid.mot-cot>.fld-lon{margin-bottom:0}
.row-btn{display:flex;gap:10px;margin:14px 0}

/* Gợi ý lấy từ phiếu cũ, không phải AI. Bấm vào là điền. */
.goi-y{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.goi-y-nhan{font-size:11.5px;color:var(--t-muted);flex:0 0 100%}
.chip-goi-y{display:inline-flex;gap:6px;align-items:baseline;max-width:100%;
  padding:4px 9px;border:1px solid var(--line);border-radius:14px;background:#fff;
  font:inherit;font-size:12.5px;color:var(--t-body);cursor:pointer;text-align:left}
.chip-goi-y:hover{background:#eef3f9;border-color:var(--azure)}
.chip-goi-y .muted{font-size:11.5px;color:var(--t-muted);white-space:nowrap}

/* Cờ cảnh báo phải nói rõ làm gì, không chỉ nói sai gì */
.viec-can-lam{margin-top:6px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08);
  font-size:12.5px;line-height:1.55}
.viec-can-lam b{font-weight:650}

/* Ô tài liệu trong bộ hồ sơ. Ô thiếu vẽ nét đứt để nhìn là biết còn trống. */
.o-tai-lieu{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 12px;margin-bottom:8px;border-radius:var(--r-btn)}
.o-tai-lieu.co{border:1px solid var(--line);background:var(--paper)}
.o-tai-lieu.thieu{border:1.5px dashed var(--warn);background:#fffdf6}

/* Ô tra cứu: to, rõ, gõ là thấy ngay */
.tim-lon{width:100%;padding:13px 16px;font-size:16px;border:1px solid var(--line-strong);
  border-radius:var(--r-btn);background:var(--mist)}
.tim-lon:focus{outline:none;background:#fff;border-color:var(--azure);box-shadow:0 0 0 3px var(--sky-tint)}
.nho{font-size:11.5px;color:var(--t-muted)}

/* Bảng lãi lỗ: dòng tổng đậm, ô số bấm được để tra ngược */
table.pnl .dong-dam td{background:var(--mist);font-weight:650}
table.pnl .o-so{cursor:pointer}
table.pnl .o-so:hover{background:var(--sky-tint);outline:1px solid var(--azure)}

/* Hàng nhãn và giá trị trong hộp chi tiết. Trước đây lớp này chưa hề được
   định nghĩa nên hai span dính vào nhau, ra "TênGiảm thuế". */
.f-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.f-row:last-child{border-bottom:0}
.f-row>span:first-child{flex:0 0 auto;color:var(--t-muted);font-size:12.5px}
.f-row>span:last-child,.f-row>b:last-child{text-align:right;min-width:0;word-break:break-word}

/* ==========================================================================
   TRÌNH BÀY DỄ NẮM: kết luận trước, biểu đồ sau, bảng cuối
   ========================================================================== */

/* Câu kết luận, thứ đầu tiên mắt chạm tới */
.ket-luan{padding:16px 20px;border-radius:var(--r-card);margin:14px 0;border-left:5px solid}
.ket-luan .kl-chinh{font-size:19px;font-weight:650;line-height:1.35}
.ket-luan .kl-phu{margin-top:5px;font-size:13.5px;line-height:1.55;opacity:.85}
.ket-luan.kl-tot{background:var(--ok-bg,#eefaf3);border-color:#12703a;color:#0d5c30}
.ket-luan.kl-canh{background:var(--warn-bg,#fff8e8);border-color:#b8860b;color:#7a5b06}
.ket-luan.kl-xau{background:var(--bad-bg,#fdeeef);border-color:#be1e2d;color:#8f1721}

/* Hàng số lớn */
.so-lon-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0}
.so-lon{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:13px 15px}
.so-lon .sl-nhan{font-size:11.5px;color:var(--t-muted);margin-bottom:5px}
.so-lon .sl-so{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.15}
.so-lon .sl-so.am{color:var(--bad)}
.so-lon .sl-so.thu{color:#12703a}
.so-lon .sl-so.chi{color:#b8860b}
.so-lon .btn{margin-top:8px}

/* Biểu đồ dòng tiền */
.bd-dongtien{width:100%;height:auto;display:block}
.bd-dongtien .c-thu{fill:#3fa06b}
.bd-dongtien .c-chi{fill:#d98b8b}
.bd-dongtien .truc0{stroke:var(--t-muted);stroke-width:1}
.bd-dongtien .vung-am{fill:#fdeeef}
.bd-dongtien .d-chacchan{fill:none;stroke:var(--navy,#1c3d6e);stroke-width:2.4;stroke-linejoin:round}
.bd-dongtien .d-dukien{fill:none;stroke:var(--azure,#3b7ddd);stroke-width:1.8;stroke-dasharray:5 4}
.bd-dongtien .tr-nhan{font-size:11px;fill:var(--t-body);text-anchor:middle;font-weight:600}
.bd-dongtien .tr-nhan.am{fill:var(--bad)}
.bd-dongtien .tr-nho{font-size:9.5px;fill:var(--t-muted);text-anchor:middle}
.bd-dongtien .tr-nho.am{fill:var(--bad)}

.chu-giai{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;font-size:12px;color:var(--t-muted)}
.chu-giai i{display:inline-block;width:16px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
.chu-giai .k-thu{background:#3fa06b}
.chu-giai .k-chi{background:#d98b8b}
.chu-giai .k-cc{height:0;border-top:2.4px solid var(--navy,#1c3d6e)}
.chu-giai .k-dk{height:0;border-top:1.8px dashed var(--azure,#3b7ddd)}

td.thu,.num.thu{color:#12703a}
td.chi,.num.chi{color:#b8860b}
tr.hang-am td{background:#fdeeef}

/* Thanh so lợi nhuận từng sản phẩm, mốc 0 ở giữa */
.thanh-sp{display:grid;grid-template-columns:150px 1fr 130px;gap:12px;align-items:center;
  padding:6px 0}
.thanh-sp .ts-ten{font-size:13px;font-weight:600}
.thanh-sp .ts-truc{position:relative;height:20px;background:var(--mist);border-radius:4px}
.thanh-sp .ts-giua{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-strong)}
.thanh-sp .ts-bar{position:absolute;top:3px;bottom:3px;border-radius:3px;min-width:2px}
.thanh-sp .ts-bar.duong{background:#3fa06b}
.thanh-sp .ts-bar.am{background:#d1596a}
.thanh-sp .ts-so{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px}
.thanh-sp .ts-so.am{color:var(--bad)}

/* ---------- thanh kéo giả định trên màn Dòng tiền ---------- */
.keo-hang{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.keo{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:12.5px}
.keo>span{color:var(--t-muted);font-weight:600}
/* Trị số phải nằm CẠNH nhãn, không tụt xuống dưới thanh kéo: thẻ input đứng
   giữa trong HTML nên tự động nhảy hàng nếu không ghim vị trí. */
.keo>b{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums;font-size:13.5px;
  text-align:right;min-width:66px}
.keo>input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--azure);cursor:pointer}
@media (max-width:760px){.keo-hang{grid-template-columns:1fr}}

/* ==========================================================================
   CÀI ĐẶT BIỂU MẪU: sửa ngay trên tờ giấy
   Tờ giấy ở đây phải trông GIỐNG bản in, nên dùng đúng phông và cỡ chữ của bản
   in (Times New Roman 13pt) chứ không dùng phông giao diện. Khác phông là người
   sửa canh chữ theo màn hình rồi in ra lệch.
   ========================================================================== */
.bm-khung{display:flex;justify-content:center;padding:8px 0 30px;overflow-x:auto}
.bm-giay{width:210mm;max-width:100%;background:#fff;color:#111;box-shadow:var(--sh-pop);
  border-radius:2px;padding:14mm 15mm 12mm;box-sizing:border-box;
  font-family:"Times New Roman",Times,serif;font-size:13pt;line-height:1.42}
.bm-o{border:1px solid var(--azure-25,#bcd4f0);background:#f2f7fd;color:#111;
  font:inherit;padding:1px 5px;border-radius:3px;width:100%;box-sizing:border-box;outline:none}
.bm-o:hover:not(:disabled){background:#e7f0fb}
.bm-o:focus{background:#fff;box-shadow:0 0 0 2px var(--azure)}
.bm-o:disabled{border-color:var(--line);background:transparent;cursor:default}
.bm-o.to{font-weight:700;font-size:13.5pt;text-transform:uppercase}
.bm-o.nho{font-size:11pt}
.bm-o.giua{text-align:center}
.bm-o.phai{text-align:right}
.bm-o.dam{font-weight:700}
.bm-o.hep{width:auto;min-width:70px;display:inline-block}
.bm-vd{color:#8a949f}                  /* dữ liệu ví dụ, không sửa được */
.bm-nhan{color:#333}
.bm-dong{margin:5px 0}
.bm-dong.nho{font-size:11pt}
.bm-meta{display:flex;flex-wrap:wrap;gap:4px 26px;border-top:1px solid #999;
  border-bottom:1px solid #999;padding:6px 0;margin-top:6px;font-size:10.5pt}
.bm-meta>div{display:flex;align-items:center;gap:6px}
.bm-tieu-de{margin:14px 0 2px}
.bm-tieu-de .bm-o{font-size:18pt;font-weight:700;text-transform:uppercase;text-align:center}
.bm-sub{text-align:center;font-size:10.5pt;margin-bottom:10px}
.bm-tong-nhan{display:flex;justify-content:space-between;align-items:center;font-weight:700;gap:12px}
.bm-tong-nhan .nho{font-weight:400;font-size:10pt;display:flex;align-items:center;gap:6px}
table.bm-bang{width:100%;border-collapse:collapse;margin-top:6px;font-size:11pt;border:1.2pt solid #000}
table.bm-bang th,table.bm-bang td{border:.8pt solid #000;padding:3px 5px}
table.bm-bang th{background:#eef2f7;padding:2px 3px}
table.bm-bang td.c{text-align:center}
table.bm-bang td.r{text-align:right}
.bm-ky{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;
  text-align:center;font-size:11pt}
.bm-cho-ky{height:52px}
.bm-dau-qt{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.bm-dau-qt>div:first-child{flex:1}
.bm-o-mau{width:74mm;font-size:10.5pt;text-align:center}
.bm-o-mau .bm-o{font-style:italic}
.bm-no-co{text-align:right;font-size:11pt;margin:6px 0 10px}
.bm-no-co .bm-o{margin-left:4px}
@media (max-width:900px){
  .bm-giay{width:100%;padding:12px 14px;font-size:12pt}
  .bm-ky{grid-template-columns:repeat(2,1fr)}
}
/* Gương soi của ô dùng chung: nhìn giống chữ in, không phải ô nhập, vì trường
   này chỉ có MỘT ô thật ở khối chữ ký đầu tiên. */
.bm-guong{color:#111;padding:1px 5px;border:1px dashed var(--line);border-radius:3px;
  background:transparent}
.bm-guong.nho{font-size:11pt}
.bm-guong.giua{text-align:center}

/* ---------- Tạo phiếu trình bày theo biểu mẫu ---------- */
/* Chữ biểu mẫu ở màn này CHỈ ĐỌC: in đúng như bản in, không viền, không nền.
   Ô nhập là chỗ điền dữ liệu phiếu, có gạch chân để nhìn ra ngay đâu là chỗ điền.
   Không được cho sửa chữ biểu mẫu tại đây, đó là việc của màn Cài đặt biểu mẫu. */
.tp-giay{padding-bottom:18mm}
.tp-mau{color:#111}
.tp-mau.to{font-weight:700;font-size:13.5pt;text-transform:uppercase}
.tp-mau.nho{font-size:11pt}
.tp-mau.dam{font-weight:700}
.tp-mau.giua{text-align:center}
.tp-auto{color:#8a949f}                /* app tự điền, không sửa ở đây */
.tp-dong{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin:6px 0}
.tp-dong>.bm-nhan{flex:none}
.tp-o{flex:1;min-width:150px;border:0;border-bottom:1px solid #b9c6d6;background:#f7fafd;
  font:inherit;color:#111;padding:2px 6px;border-radius:3px 3px 0 0;outline:none}
.tp-o:focus{background:#fff;border-bottom:1.6px solid var(--azure)}
.tp-o.hep{flex:none;min-width:120px}
textarea.tp-o{resize:vertical;min-height:2.6em;line-height:1.4}
/* table-layout fixed để cột Miêu tả lấy hết phần còn lại. Để auto thì nội dung
   mấy cột khác kéo hết chỗ và cột Miêu tả bị bóp còn một hai chữ mỗi dòng. */
table.tp-bang{font-size:11pt;table-layout:fixed}
table.tp-bang td{padding:0}
table.tp-bang td input,table.tp-bang td select{width:100%;border:0;background:transparent;
  font:inherit;color:#111;padding:4px 5px;outline:none}
table.tp-bang td input:focus,table.tp-bang td select:focus{background:#f0f6fd}
table.tp-bang th.tp-khong-in{background:#f3f4f6;color:#6b7280;font-weight:400;font-size:10pt}
.tp-ck{border:1px solid #999;border-radius:3px;padding:8px 10px;margin-top:12px}
.tp-ck-dau{font-weight:700;font-size:11pt;margin-bottom:2px}

/* Tờ giấy Tạo phiếu: khớp đúng ba bản PDF gốc của Work Zone */
.tp-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px;border-top:1px solid #999;
  border-bottom:2px solid #999;padding:6px 0;margin-top:8px;font-size:10.5pt}
.tp-meta>div{display:flex;align-items:center;gap:6px}
.tp-o-mau-vien{width:76mm;border:1px solid #333;border-radius:2px;padding:6px 8px;font-size:10.5pt}
.tp-no-co{display:grid;gap:2px;justify-content:end;text-align:right;margin:8px 0 12px;font-size:11pt}
.tp-no-co>div{display:flex;gap:8px;justify-content:flex-end;min-width:150px}
table.tp-bang-qt{table-layout:fixed;font-size:11pt}
table.tp-bang-qt tr.tp-muc td{background:#eef2f9}
table.tp-bang-qt td.tp-thut{padding-left:22px}
.tp-nhap-qt{border:1px dashed var(--line);border-radius:var(--r-md);padding:10px 12px;margin-top:14px;
  background:#fbfcfe}
/* Ba cột app dùng riêng (ĐVT, HĐ, Số HĐ) bó hẹp và tô xám nhạt, vì tờ giấy in
   chỉ có sáu cột. Đã thử ẩn hẳn bằng display:none nhưng table-layout:fixed vẫn
   giữ chỗ của chúng, cột Miêu tả không nhận được phần trống, nên bó hẹp là cách
   chạy được. */
table.tp-bang td:nth-child(7) input,table.tp-bang td:nth-child(8) select,
table.tp-bang td:nth-child(9) input{font-size:10pt;color:#4b5563}
/* Ba ô app dùng riêng nằm gọn trong ô Miêu tả, chữ nhỏ màu xám, vì tờ giấy in
   chỉ có sáu cột. Đặt thành cột riêng thì cột Miêu tả bị bóp còn vài chữ. */

/* ==========================================================================
   Ô HỎI ĐÁP
   Nút nổi góc phải, có mặt trên mọi màn. Khung trượt lên từ dưới.
   ========================================================================== */
/* Nút là mascot WZ Bot. Brand kit xếp mascot vào nhóm dùng cho avatar tròn và
   chatbot, nên đây đúng chỗ của nó.
   Dùng logo-robot/robot-head.png chứ KHÔNG dùng mascot-head.png: bản mascot-head
   có nền trắng đục, đặt vào nút tròn là lòi ra một mảng trắng vuông. */
.hd-nut-noi{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  padding:0; overflow:hidden; display:grid; place-items:center;
  background:var(--navy); line-height:0;
  box-shadow:0 4px 14px rgba(28,61,110,.28);
  transition:transform var(--d-base) var(--e-out), background var(--d-base);
}
.hd-nut-noi img{
  width:44px; height:44px; object-fit:contain; margin-top:3px;
  pointer-events:none;   /* bấm vào ảnh vẫn tính là bấm nút */
}
.hd-nut-noi:hover{ background:var(--blue-deep); transform:scale(1.06); }
/* Đang kéo thì bỏ hiệu ứng phóng to và bỏ chuyển động, nếu không nút chạy trễ
   sau con trỏ, cảm giác như bị dính. */
.hd-nut-noi.dang-keo{ transition:none; transform:none; cursor:grabbing;
  box-shadow:0 10px 26px rgba(28,61,110,.4); }
.hd-nut-noi:active{ cursor:grabbing; }
/* Không cho chọn hay kéo ảnh khi rê chuột trên nút */
.hd-nut-noi{ touch-action:none; user-select:none; -webkit-user-select:none; }
.hd-nut-noi img{ -webkit-user-drag:none; user-select:none; }
.hd-nut-noi.dang{ background:var(--azure); }

.hd-khung{
  position:fixed; right:20px; bottom:78px; z-index:60;
  width:390px; max-width:calc(100vw - 40px);
  height:min(72vh,600px); display:none; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 16px 44px rgba(14,28,51,.22); overflow:hidden;
}
.hd-khung.mo{ display:flex; animation:hdLen var(--d-base) var(--e-out); }
@keyframes hdLen{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }

.hd-dau{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:11px 14px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--band),var(--paper));
}
.hd-dau b{ font-size:14.5px; color:var(--t-head); }
.hd-ava{ width:32px; height:32px; border-radius:50%; background:var(--navy);
  object-fit:contain; padding:2px 2px 0; }

/* Dòng hội thoại. Cuộn ở đây, không cuộn cả khung, để ô nhập luôn dính đáy. */
.hd-loi{ flex:1; overflow-y:auto; padding:14px; display:flex;
  flex-direction:column; gap:12px; }

.hd-chao{ text-align:center; color:var(--t-muted); font-size:13.5px; padding:8px 0 0; }
.hd-chao p{ margin:8px 0 0; }
.hd-ava-to{ width:56px; height:56px; border-radius:50%; background:var(--navy);
  object-fit:contain; padding:3px 3px 0; }

.hd-hoi{
  align-self:flex-end; max-width:82%;
  background:var(--navy); color:#fff; font-size:14px;
  padding:8px 13px; border-radius:14px 14px 4px 14px;
}
.hd-dap{ display:flex; gap:8px; align-items:flex-start; }
.hd-ava-nho{ width:26px; height:26px; border-radius:50%; background:var(--navy);
  object-fit:contain; padding:2px 2px 0; flex:0 0 auto; }
.hd-bong{
  max-width:calc(100% - 34px);
  background:var(--mist); border:1px solid var(--line);
  border-radius:14px 14px 14px 4px; padding:10px 13px;
  font-size:14px; color:var(--t-body);
}
.hd-bong b{ color:var(--t-head); }
.hd-than-dap{ margin-top:6px; }
.hd-phu{ margin-top:6px; color:var(--t-muted); font-size:13px; }
.hd-cho{ color:var(--t-muted); font-style:italic; }
.hd-cho::after{ content:'...'; animation:hdCham 1.2s steps(4,end) infinite; }
@keyframes hdCham{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

.hd-goi{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.hd-goi .nho{ width:100%; margin-bottom:2px; }

.hd-chan{
  flex:0 0 auto; display:flex; gap:8px; align-items:center;
  padding:11px 14px; border-top:1px solid var(--line); background:var(--paper);
}
.hd-chan input{
  flex:1; min-width:0; padding:9px 12px; border:1px solid var(--line-strong);
  border-radius:var(--r-chip); font:inherit; font-size:14px; background:var(--paper);
  color:var(--t-body); outline:none;
}
.hd-chan input:focus{ border-color:var(--azure); box-shadow:0 0 0 2px var(--sky-tint); }

.hd-muc{ font-size:14px; color:var(--t-body); }
.hd-muc h4{ margin:0 0 6px; font-size:15px; color:var(--t-head); }
.hd-bong p{ margin:0 0 8px; }
.hd-bong p:last-child{ margin-bottom:0; }
.hd-bong ul{ margin:0 0 8px; padding-left:18px; }
.hd-bong li{ margin-bottom:4px; }
.hd-bong code{
  background:var(--band); padding:1px 5px; border-radius:4px;
  font-family:var(--f-mono); font-size:12.5px;
}
/* Các bước đánh số tròn, cùng dáng với trang hướng dẫn để hai chỗ không lệch nhau. */
.hd-buoc{ counter-reset:hb; list-style:none; padding-left:0; margin:0 0 8px; }
.hd-buoc li{
  counter-increment:hb; position:relative; padding-left:26px; margin-bottom:6px;
}
.hd-buoc li::before{
  content:counter(hb); position:absolute; left:0; top:1px;
  width:18px; height:18px; background:var(--azure); color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700;
}
.hd-nut{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }

@media (max-width:520px){
  .hd-khung{ right:10px; left:10px; width:auto; bottom:74px; }
  .hd-nut-noi{ right:14px; bottom:14px; }
}
/* Bản in không cần nút hỏi đáp. */
@media print{ .hd-nut-noi, .hd-khung{ display:none !important; } }

/* Hỏi đáp trên phiếu. Câu hỏi đã xong lùi về sau, câu còn mở nổi lên trước. */
.hoi-o{padding:10px 0;border-bottom:1px solid var(--line)}
.hoi-o:last-of-type{border-bottom:0}
.hoi-o.xong{opacity:.62}
.hoi-tl{margin:8px 0 0 14px;padding-left:10px;border-left:2px solid var(--line);font-size:13px}
.o-tl{flex:1}

/* Ô chọn mặt hàng kho, nằm trong ô miêu tả của dòng phiếu. Nhỏ và mờ hơn ô
   nội dung, để mắt đọc tờ giấy không bị nó cướp mất chú ý. */
.d-mh{margin-top:4px;width:100%;font-size:12px;color:var(--t-muted);
  border:1px solid var(--line);border-radius:var(--r-btn);padding:2px 4px;background:transparent}
@media print{.tp-khong-in{display:none!important}}

/* Ô nhập trong bảng kiểm kê. Đặt bề rộng ở CSS chứ không nhét style vào từng
   thẻ: 80px không đủ cho chữ "chưa đếm" nên chữ bị cắt còn "chưa đ". */
.kk-dem{width:108px;text-align:right}
.kk-ly{width:100%;min-width:180px}

/* Nhắc nạp lại khi có bản mới. Nằm góc dưới bên phải, không che nội dung, không
   chặn thao tác: người dùng vẫn làm tiếp được nếu đang dở việc. */
#nhacBanMoi{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;
  gap:10px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--warn);border-radius:var(--r-btn);
  box-shadow:0 6px 24px rgba(15,32,56,.16);font-size:13px;max-width:min(92vw,420px)}
@media print{#nhacBanMoi{display:none}}