/* ===== OneCAD Portal — Hệ nhận diện BEI Nexus P0, khung theo BEI Nexus (nexus.dssvn.com) =====
   Phông Be Vietnam Pro (kèm máy chủ, SIL OFL). Thanh trên 56px, cột menu 240px và dải tiêu đề cùng nền navy
   #0d2542 → #12355d có lưới bản vẽ 24px (#ffffff0e), nền cố định nên liền một khối. Nội dung nền #f2f5f9,
   thẻ trắng bo 10 viền #dce5ef không bóng, KHÔNG đè lên đầu màn. ≤850px menu thu thành thanh biểu tượng 64px,
   ≤600px menu là ngăn kéo mở bằng nút trên thanh trên. */
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-700.woff2) format("woff2");font-weight:700 900;font-display:swap}

:root{
  --navy:#0d2542; --navy-2:#12355d; --mint:#8ee0b8;
  --blue:#0665ed; --blue-hover:#0753bc;
  --bg:#f2f5f9; --card:#fff; --card-border:#edf1f6; --line:#dde5ef;
  --ink:#20334d; --muted:#56687f;
  --danger:#b42318; --danger-bg:#fdecea; --danger-line:#f3c9c4;
  --warn:#8a5a00; --warn-bg:#fff5df;
  --ok:#167548; --ok-bg:#e8f5ee;
  --design:#6941c6; --design-bg:#f4f0ff;
  --build:#0665ed; --build-bg:#edf4ff;
  --neutral:#56687f; --neutral-bg:#eef2f7;
  --fs-title:27px; --fs-section:16px; --fs-body:14.5px; --fs-sub:12.5px; --fs-label:11.5px;
  --radius:10px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(13,37,66,.04),0 6px 20px rgba(13,37,66,.06);
  --sky:#8fd3ff; --card-edge:#dce5ef; --hair:#eef2f7;
  --blueprint:linear-gradient(#ffffff0e 1px,transparent 1px) 0 0/24px 24px,
              linear-gradient(90deg,#ffffff0e 1px,transparent 1px) 0 0/24px 24px,
              linear-gradient(135deg,var(--navy),var(--navy-2));
  --topbar:56px; --sidebar:240px;
  --font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.5 var(--font)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hidden{display:none!important}
.mb-12{margin-bottom:12px}
.num,table td.num,table th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.mt-4{margin-top:4px} .mt-12{margin-top:12px}
.pill svg,th svg{width:13px;height:13px;vertical-align:-2px}
table.data.kv{margin-top:12px} table.data.kv td{padding:9px 0;border-bottom:1px solid var(--card-border)} table.data.kv td:first-child{padding-left:0;width:42%} table.data.kv tbody tr:hover{background:none}
.checklist{display:grid;gap:2px}
.checklist .check{min-height:40px;gap:10px} .checklist .pill{margin-left:auto}
.tnum{font-variant-numeric:tabular-nums}
.sub{font-size:var(--fs-sub);color:var(--muted)}
.label{font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Khung: thanh trên + cột menu + nội dung ---------- */
.blueprint{background:var(--blueprint);background-color:var(--navy);background-attachment:fixed}
.topbar{position:sticky;top:0;z-index:40;height:var(--topbar);display:flex;align-items:center;gap:12px;padding:0 22px;color:#fff}
.topbar .sp{flex:1}
.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:600;letter-spacing:-.2px;color:#fff;white-space:nowrap}
.brand:hover{text-decoration:none}
/* Logo bản nền tối (chữ "cad viet nam" trắng) đặt thẳng lên navy, vạch mảnh ngăn với chữ Portal */
.brand-logo{display:block;height:38px;width:auto;flex:none}
.brand-name{padding-left:12px;border-left:1px solid #ffffff38;line-height:22px;color:#e6eef8}
.login-logo{display:block;height:84px;width:auto;margin-bottom:20px;align-self:flex-start}
.demo-flag{font-size:var(--fs-label);font-weight:700;color:var(--navy);background:var(--mint);border-radius:999px;padding:4px 12px;white-space:nowrap}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:none;color:#fff;cursor:pointer;flex:none}
.icon-btn:hover{background:#ffffff24;text-decoration:none}
.icon-btn svg{width:22px;height:22px}
.icon-btn i{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e8590c;font:700 10.5px/17px var(--font);font-style:normal;text-align:center}
.me{display:flex;align-items:center;gap:9px;padding:3px 10px 3px 3px;border-radius:22px;color:#fff;min-width:0}
.me:hover{background:#ffffff24;text-decoration:none}
.avatar{width:32px;height:32px;border-radius:50%;background:#2b7be9;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.me b{display:block;font-size:13px;font-weight:600;line-height:1.15;white-space:nowrap}
.me small{display:block;font-size:11px;opacity:.75;white-space:nowrap}
.menu-btn{display:none}

.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:calc(100vh - var(--topbar))}
.sidebar{color:#fff;font-size:14px;z-index:30}
.sidebar-inner{position:sticky;top:var(--topbar);max-height:calc(100vh - var(--topbar));overflow-y:auto;padding:10px 10px 12px;display:flex;flex-direction:column;gap:2px}
.nav-section{font-size:10.5px;letter-spacing:.6px;color:#7f95b1;font-weight:700;padding:16px 12px 6px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-sm);color:#b8c6d8;line-height:1.2;white-space:nowrap}
.nav-item svg{width:20px;height:20px;flex:none;stroke:#9fb2ca}
.nav-item:hover{background:#ffffff12;color:#fff;text-decoration:none}
.nav-item:hover svg,.nav-item.active svg{stroke:#fff}
.nav-item.active{background:#ffffff1a;color:#fff;font-weight:600;box-shadow:inset 3px 0 var(--sky)}
.nav-item .badge{margin-left:auto;background:#e5484d;color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;font-weight:600;line-height:1.5}
/* Menu phương án A (góp ý 003 mục 3): nút "Lập đề nghị chi", nhóm Quản trị thu gọn */
.nav-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;margin:6px 2px 2px;border-radius:var(--radius-sm);background:var(--blue);color:#fff;font-weight:600;white-space:nowrap}
.nav-cta svg{width:19px;height:19px;stroke:#fff;flex:none}.nav-cta:hover{background:var(--blue-hover);text-decoration:none;color:#fff}
.nav-cta.active{box-shadow:0 0 0 2px #8fd3ff}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-toggle{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;letter-spacing:.6px;color:#7f95b1;font-weight:700;padding:16px 12px 6px;text-transform:uppercase;border-radius:8px}
.nav-toggle:hover{color:#fff}.nav-toggle:focus-visible{outline:2px solid var(--sky)}
.nav-count{display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0;font-weight:600;font-size:11.5px}
.nav-count svg{width:14px;height:14px;stroke:currentColor;transition:transform .15s}
.nav-group:not(.closed) .nav-count svg{transform:rotate(90deg)}
.nav-group.closed .nav-item{display:none}

.scrim{display:none}
.main{min-width:0;display:flex;flex-direction:column}
/* Dải tiêu đề phẳng liền thanh trên */
.page-head{color:#fff;display:flex;align-items:flex-end;gap:14px 20px;flex-wrap:wrap;padding:12px 28px 16px}
.page-head .crumbs{width:100%;font-size:var(--fs-label);color:#8fa4bf;margin-bottom:-6px;overflow-wrap:anywhere}
.page-head .head-text{min-width:0;flex:1 1 360px}
.page-head h1{font-size:var(--fs-title);font-weight:650;line-height:1.25;margin:0;letter-spacing:-.3px}
.page-head .summary{color:#a9bad0;max-width:760px;margin:4px 0 0;font-size:14px}
.page-head .summary b{color:#fff;font-weight:600}
.page-head .head-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.page-body{padding:20px 28px 40px;display:flex;flex-direction:column;gap:20px;position:relative}
.page-tools+.page-body{padding-top:12px}

/* ---------- Bộ lọc dạng chip, trên nền sáng dưới dải tiêu đề ---------- */
.page-tools{padding:20px 28px 0;display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.chip-bar{display:inline-flex;gap:8px;flex-wrap:wrap}
.chip-bar button{height:30px;padding:0 12px;border:1px solid var(--card-edge);border-radius:15px;background:#fff;color:var(--ink);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip-bar button:hover{border-color:#b9cde8}
.chip-bar button.on{border-color:var(--blue);background:var(--build-bg);color:var(--blue);font-weight:600}
.chip-bar .count{font-size:11px;opacity:.75}
.filter-input{height:34px;border-radius:10px;border:1px solid var(--card-edge);background:#fff;padding:0 12px;min-width:220px;font-size:13.5px}
.filter-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(6,101,237,.15)}
@media (pointer:coarse){.chip-bar button{height:40px;border-radius:20px;padding:0 14px;font-size:13px}.filter-input{height:44px}}

/* ---------- Thẻ ---------- */
.card{background:var(--card);border:1px solid var(--card-edge);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden;min-width:0}
.card.flush{padding:0}
/* Việc cần xử lý: vạch màu 6px ở mép trên thẻ (như thẻ dự án Nexus) */
.card.todo{padding-top:24px}
.card.todo::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--accent,var(--blue))}
.card.todo.danger{--accent:var(--danger)} .card.todo.warn{--accent:var(--warn)} .card.todo.ok{--accent:var(--ok)}
.card-head{display:flex;align-items:center;gap:8px 12px;margin-bottom:14px;flex-wrap:wrap}
.card.flush .card-head{padding:18px 22px 0}
.card-head h2{font-size:var(--fs-section);font-weight:700;margin:0}
.card-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.grid{display:grid;gap:20px;align-items:start}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Ô biểu tượng màu nhạt */
.icon-tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--build-bg);color:var(--build)}
.icon-tile svg{width:22px;height:22px}
.icon-tile.danger{background:var(--danger-bg);color:var(--danger)} .icon-tile.warn{background:var(--warn-bg);color:var(--warn)}
.icon-tile.ok{background:var(--ok-bg);color:var(--ok)} .icon-tile.design{background:var(--design-bg);color:var(--design)}
.icon-tile.navy{background:#e8edf4;color:var(--navy)}

/* Chỉ số */
.stat{display:flex;gap:14px;align-items:flex-start}
.stat .value{font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.stat .value small{font-size:14px;font-weight:600;color:var(--muted)}
.stat .caption{font-size:var(--fs-sub);color:var(--muted);margin-top:2px}

/* ---------- Nhãn trạng thái viên thuốc ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:var(--fs-label);font-weight:700;line-height:18px;white-space:nowrap;background:var(--neutral-bg);color:var(--neutral)}
.pill.danger{background:var(--danger-bg);color:var(--danger)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.design{background:var(--design-bg);color:var(--design)}
.pill.build{background:var(--build-bg);color:var(--build)} .pill.navy{background:#e8edf4;color:var(--navy)}
.pill.lock{background:var(--navy);color:#fff}
.pill.wrap{white-space:normal;line-height:1.35;padding-top:3px;padding-bottom:3px}

/* ---------- Nút ---------- */
.btn{min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;text-decoration:none!important}
.btn:hover{background:#f7f9fc}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(6,101,237,.25)}
.btn.primary:hover{background:var(--blue-hover)}
.btn.reject{background:#fff;border-color:var(--danger-line);color:var(--danger)}
.btn.reject:hover{background:var(--danger-bg)}
.btn.locked{opacity:.55}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.ghost-light{background:transparent;border-color:#ffffff40;color:#fff;min-height:40px}
.btn.ghost-light:hover{background:#ffffff14}
.btn.sm{min-height:36px;padding:0 12px;border-radius:10px;font-size:13.5px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Bảng ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--card-border);background:#fafbfd;white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--card-border);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#fafcff}
table.data tr.clickable{cursor:pointer}
table.data td:first-child,table.data th:first-child{padding-left:22px}
table.data td:last-child,table.data th:last-child{padding-right:22px}
.cell-strong{font-weight:600;white-space:nowrap}
table.data td .btn-row{flex-wrap:nowrap;gap:6px}
.empty{padding:36px 22px;text-align:center;color:var(--muted)}

/* ---------- Biểu mẫu ---------- */
.form{display:grid;gap:14px}
.form.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.span-2{grid-column:1/-1}
.field>span{font-size:var(--fs-label);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.input,.field input,.field select,.field textarea{min-height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:10px 14px;width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(6,101,237,.15)}
.field .hint{font-size:var(--fs-sub);color:var(--muted)}
.check{display:flex;align-items:center;gap:10px;min-height:44px}
.check input{width:20px;height:20px}
.alert{border-radius:12px;padding:12px 14px;font-size:14px;background:var(--build-bg);color:var(--build)}
.alert.danger{background:var(--danger-bg);color:var(--danger)} .alert.warn{background:var(--warn-bg);color:var(--warn)} .alert.ok{background:var(--ok-bg);color:var(--ok)}

/* ---------- Hộp thoại + thông báo ---------- */
dialog.modal{border:0;border-radius:20px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:hidden;box-shadow:0 24px 64px rgba(13,37,66,.3);color:var(--ink)}
dialog.modal::backdrop{background:rgba(13,37,66,.45)}
/* Thân hộp tự cuộn; tiêu đề (có ✕) và thanh nút đáy luôn thấy — góp ý 003 mục 1 */
dialog.modal>form{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.modal-head{padding:20px 22px 0;display:flex;align-items:center;gap:12px;flex:none}
.modal-head h3{margin:0;font-size:18px;flex:1;min-width:0}
.modal-x{flex:none;width:34px;height:34px;margin:-4px -8px -4px 0;border:0;border-radius:10px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.modal-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.modal-x:hover{background:var(--card-edge);color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.modal-body{padding:18px 22px;overflow:auto;min-height:0;flex:1 1 auto}
.modal-foot{padding:12px 22px 16px;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;flex:none;border-top:1px solid var(--card-edge)}
.modal-discard{flex:1 1 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13.5px}
.modal-discard span{flex:1;min-width:150px;font-weight:600}
.toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none}
.toast{background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:0 8px 24px rgba(13,37,66,.3);font-weight:500;pointer-events:auto;max-width:min(520px,calc(100vw - 32px))}
.toast.danger{background:var(--danger)}

/* ---------- Phân trang ---------- */
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--card-border)}

/* ---------- Trang đăng nhập ---------- */
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,520px)}
.login-hero{color:#fff;padding:48px 56px;display:flex;flex-direction:column}
.login-hero .eyebrow{font-size:var(--fs-sub);font-weight:600;color:var(--mint);letter-spacing:.02em}
.login-hero h1{font-size:36px;line-height:1.2;margin:auto 0 12px;max-width:520px}
.login-hero p{color:rgba(255,255,255,.78);max-width:520px;margin:0 0 8px}
.login-panel{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:32px 20px}
.login-card{width:100%;max-width:420px}
.demo-box{margin-top:18px}
.demo-list{display:grid;gap:6px;margin-top:10px;max-height:340px;overflow-y:auto}
.demo-list button{display:flex;align-items:center;gap:10px;text-align:left;min-height:44px;padding:6px 12px;border-radius:12px;border:1px solid var(--card-border);background:#fff;cursor:pointer}
.demo-list button:hover{border-color:var(--blue)}
.demo-list b{font-weight:600;font-size:13.5px;display:block}
.demo-list small{color:var(--muted);font-size:var(--fs-sub)}
.demo-list .pill{margin-left:auto}

/* ---------- Điện thoại ---------- */
@media (max-width:1300px){.grid.cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Menu thu thành thanh biểu tượng 64px */
@media (max-width:850px){
  .shell{grid-template-columns:64px minmax(0,1fr)}
  .sidebar-inner{padding:10px 6px}
  .nav-item{justify-content:center;padding:0 2px;position:relative}
  .nav-item span,.nav-section{display:none}
  .nav-item .badge{display:block;position:absolute;top:2px;right:2px;padding:0 5px;font-size:10px}
  .nav-cta{padding:0;margin:4px 0}.nav-cta span{display:none}
  .nav-group.closed .nav-item{display:flex}
  .me>span:last-child{display:none}
  .me{padding:3px}
}
/* Điện thoại: menu là ngăn kéo dưới thanh trên, mở bằng nút ☰ */
@media (max-width:600px){
  .topbar{padding:0 8px 0 4px;gap:4px}
  .brand{font-size:16px;gap:9px}.brand-logo{height:32px}.brand-name{padding-left:9px}
  .demo-flag{display:none}
  .menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:none;color:#fff;flex:none;cursor:pointer}
  .menu-btn svg{width:24px;height:24px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:var(--topbar);bottom:0;width:min(280px,84vw);transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.35);overflow-y:auto}
  .sidebar-inner{position:static;max-height:none;padding:10px 10px 24px}
  .nav-item{justify-content:flex-start;padding:0 12px}
  .nav-item span,.nav-section{display:block}
  .nav-toggle{display:flex}.nav-cta{padding:0 12px;margin:6px 2px 2px}.nav-cta span{display:inline}
  .nav-group.closed .nav-item{display:none}
  .nav-item .badge{position:static;margin-left:auto;padding:1px 8px;font-size:11px}
  .shell.nav-open .sidebar{transform:none}
  .scrim{position:fixed;inset:var(--topbar) 0 0 0;background:rgba(13,37,66,.45);z-index:20}
  .shell.nav-open .scrim{display:block}
}
@media (max-width:900px){
  .page-head{padding:12px 16px 14px}
  .page-head h1{font-size:22px}
  .page-head .head-text{flex-basis:100%}
  .page-head .head-actions{margin-left:0}
  .page-tools{padding:16px 16px 0}
  .page-body{padding:16px 16px 32px;gap:14px}
  .card{padding:16px}
  .card.todo{padding-top:22px}
  .card.flush .card-head{padding:14px 16px 0}
  table.data td:first-child,table.data th:first-child{padding-left:16px}
  table.data td:last-child,table.data th:last-child{padding-right:16px}
  .grid,.grid.cols-2,.grid.cols-3{grid-template-columns:1fr;gap:14px}
  .grid.cols-4,.grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .form.cols-2{grid-template-columns:1fr}
  .filter-input{min-width:0;width:100%}
  .chip-bar{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .chip-bar button{flex:none}
  .login-page{grid-template-columns:1fr}
  .login-hero{padding:28px 20px 24px}
  .login-hero h1{font-size:26px;margin-top:24px}
  .stat .value{font-size:22px}
  /* Bảng dạng thẻ trên điện thoại: mỗi dòng là một khối */
  table.data.stack thead{display:none}
  table.data.stack,table.data.stack tbody,table.data.stack tr,table.data.stack td{display:block;width:100%}
  table.data.stack tr{padding:12px 16px;border-bottom:1px solid var(--card-border)}
  table.data.stack td{border:0;padding:3px 0!important;text-align:left}
  table.data.stack td[data-label]::before{content:attr(data-label);display:inline-block;min-width:110px;font-size:var(--fs-label);font-weight:700;color:var(--muted);text-transform:uppercase}
}

/* ---------- Nhập Excel ---------- */
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--muted);padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg)}
.step span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-size:12.5px}
.step.on{background:var(--build-bg);color:var(--blue)} .step.on span{background:var(--blue);color:#fff;border-color:var(--blue)}
.step.done{color:var(--ok)} .step.done span{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:180px;border:2px dashed var(--line);border-radius:16px;background:#fafbfd;cursor:pointer;text-align:center;padding:20px;margin-bottom:12px}
.dropzone svg{width:32px;height:32px;color:var(--blue)}
.dropzone input{position:absolute;opacity:0;width:1px;height:1px}
.dropzone.over{border-color:var(--blue);background:var(--build-bg)}
.dropzone.busy{opacity:.6;pointer-events:none}
table.mapping select{min-width:220px}
.text-danger{color:var(--danger)} .text-warn{color:var(--warn)}

/* ---------- Duyệt chi ---------- */
.sub>svg{width:13px;height:13px;vertical-align:-2px}
.amount{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.amount.lg{font-size:30px}
.req-list{display:grid;gap:14px}
.req-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:start}
.req-card .req-main{min-width:0}
.req-card h3{margin:6px 0 2px;font-size:var(--fs-section);font-weight:700;line-height:1.35}
.req-card h3 a{color:var(--ink)}
.req-card .req-side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.req-card .req-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end;margin-top:8px;padding-top:12px;border-top:1px solid var(--card-border)}
.req-meta{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--neutral-bg);color:var(--muted);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);z-index:1}
.timeline .dot svg{width:15px;height:15px}
.timeline li.done .dot{background:var(--ok-bg);color:var(--ok);box-shadow:0 0 0 1px transparent}
.timeline li.done::before{background:var(--ok)}
.timeline li.current .dot{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(6,101,237,.18)}
.timeline li.rejected .dot{background:var(--danger);color:#fff;box-shadow:none}
.timeline li.skipped .dot{background:#fff;color:var(--muted)}
.timeline li.pending .t-label{color:var(--muted);font-weight:500}
.timeline .t-label{font-weight:600}
.timeline .t-note{margin-top:6px;padding:8px 12px;border-radius:10px;background:var(--bg);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.timeline li.rejected .t-note{background:var(--danger-bg);color:var(--danger)}
.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.files li{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px 6px 12px;border:1px solid var(--card-border);border-radius:12px}
.files .f-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .f-name small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-sub)}
.files li>svg{width:20px;height:20px;color:var(--muted);flex:none}
.preview-box{min-height:200px;display:grid;place-items:center}
.preview-box img{max-width:100%;max-height:70vh;border-radius:8px}
.preview-box iframe{width:100%;height:70vh;border:0;border-radius:8px;background:var(--bg)}
.prose{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.action-bar{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:12px 16px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow)}
.action-bar .grow{margin-right:auto;align-self:center}
@media (max-width:900px){
  .req-card{grid-template-columns:minmax(0,1fr)}
  .req-card .req-actions{flex-wrap:wrap}
  .req-card .req-actions a.btn{flex-basis:100%;order:2}
  .req-card .req-side{text-align:left;align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .req-card .req-actions .btn,.action-bar .btn{flex:1}
  .action-bar{bottom:8px}
  .action-bar .grow{flex-basis:100%}
  .amount.lg{font-size:26px}
}

/* ---------- Dashboard ---------- */
.card.stat-card{padding:16px 18px}
.bars{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px}
.bar-row .b-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .b-val{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:right;min-width:28px}
.bar-row .b-val small{font-weight:400;color:var(--muted);font-size:var(--fs-sub)}
.bar-track{display:block;height:10px;border-radius:999px;background:var(--neutral-bg);overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--blue)}
.bar-fill.design{background:var(--design)} .bar-fill.ok{background:var(--ok)} .bar-fill.warn{background:#d39a1c} .bar-fill.navy{background:var(--navy)}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch}
.flow-step{border:1px solid var(--card-border);border-radius:12px;padding:12px 14px;background:#fafbfd;display:flex;flex-direction:column;gap:2px;min-width:0}
.flow-step .f-count{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.flow-step.has{background:var(--warn-bg);border-color:transparent} .flow-step.has .f-count{color:var(--warn)}
.flow-step.pay.has{background:var(--build-bg)} .flow-step.pay.has .f-count{color:var(--build)}
.flow-step.done{background:var(--ok-bg);border-color:transparent} .flow-step.done .f-count{color:var(--ok)}
.flow-split{display:grid;gap:10px}
.mini-list{list-style:none;margin:0;padding:0;display:grid}
.mini-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--card-border);min-width:0}
.mini-list li:last-child{border-bottom:0}
.mini-list .m-date{flex:none;min-width:48px;font-weight:700;font-variant-numeric:tabular-nums}
.mini-list .m-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{border:1px solid var(--card-border);border-radius:12px;padding:12px 14px;min-width:0}
.tile b{display:block;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.3}
@media (max-width:900px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-split{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .bar-row{grid-template-columns:minmax(0,42%) minmax(0,1fr) auto;gap:8px}
}

/* ---------- Ký số: hợp đồng (giống bản Word: Times New Roman 13, khổ A4) ---------- */
.fp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.02em;overflow-wrap:anywhere}
.contract-card{padding:24px}
.contract-doc{max-width:820px;margin:0 auto;font:400 15px/1.55 "Times New Roman",Times,serif;color:#111;text-align:justify}
.contract-doc h1{font-size:19px;text-align:center;margin:18px 0 4px;letter-spacing:.02em}
.contract-doc h2{font-size:15.5px;margin:16px 0 6px}
.contract-doc h3{font-size:15px;margin:10px 0 4px;font-style:italic}
.contract-doc p{margin:6px 0}
.contract-doc ul{margin:4px 0 8px;padding-left:26px}
.contract-doc li{margin:2px 0}
.c-head{display:flex;justify-content:space-between;gap:16px;text-align:center}
.c-head>div{display:flex;flex-direction:column}
.c-head small{font-size:13px}
.c-no,.c-sub{text-align:center}
.c-salary{white-space:nowrap}
.c-sigs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 8px;text-align:center}
.c-sig{display:flex;flex-direction:column;align-items:center;gap:2px}
.c-sig small{font-style:italic}
.c-sig-box{min-height:96px;width:100%;max-width:260px;display:grid;place-items:center;margin:8px 0}
.c-annex{margin-top:36px;padding-top:24px;border-top:1px dashed var(--line)}
.stamp{border:2px solid #b42318;color:#b42318;border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;gap:1px;
  font:600 12.5px/1.35 var(--font);transform:rotate(-2deg);background:#fff}
.stamp b{font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.stamp .fp{font-size:11px;color:#b42318}
@media (max-width:600px){
  .contract-card{padding:14px 12px}
  .contract-doc{font-size:14px;text-align:left}
  .c-head{flex-direction:column}
  .c-sigs{grid-template-columns:1fr}
}
/* In: chỉ in nội dung hợp đồng */
@media print{
  @page{size:A4;margin:18mm 16mm}
  body{background:#fff}
  .topbar,.sidebar,.scrim,.page-head,.page-tools,.action-bar,.no-print,.page-body>:not(.contract-card):not(.es-lay){display:none!important}
  .shell{display:block}.page-body{padding:0}
  .contract-card{border:0;padding:0}
  .contract-doc{max-width:none;font-size:13pt}
  .c-annex{break-before:page;border-top:0}
}

/* ---------- Ô số bấm được (dashboard → danh sách đã lọc) ---------- */
a.link-card{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
a.link-card:hover{border-color:#9fbde6;box-shadow:0 0 0 3px rgba(6,101,237,.08);text-decoration:none}
a.link-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.stat-card.link-card{position:relative}
.stat-card .go{position:absolute;right:14px;bottom:12px;color:#9fb2ca;transition:color .15s,transform .15s}
.stat-card .go svg{width:16px;height:16px}
.stat-card.link-card:hover .go{color:var(--blue);transform:translateX(2px)}
.tile.link-card:hover b{color:var(--blue)}
.filter-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-note .btn{margin-left:auto}
a.flow-step.link-card{display:flex}


/* ===== Thiết kế góp ý 001 (anh Tâm duyệt 01/10/2026): hồ sơ nhân sự, lập đề nghị chi, trường thông tin ===== */
.muted-val{color:#9aa8ba;font-style:italic}
.add-link{font-size:12.5px;font-weight:600;margin-left:6px}

/* ---------- Hồ sơ: đầu trang ---------- */
.profile-band{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.avatar-xl{width:88px;height:88px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 30px/1 var(--font);color:#fff;
  background:linear-gradient(135deg,#2b7be9,#2bd0dc);box-shadow:0 0 0 4px #ffffff26;position:relative}
.avatar-xl .cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.avatar-xl .cam svg{width:16px;height:16px}
.profile-band .who h1{margin:0}
.profile-band .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;color:#a9bad0;font-size:13.5px}
.profile-band .meta span{display:inline-flex;align-items:center;gap:6px}
.profile-band .meta svg{width:15px;height:15px}
.profile-band .pills{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.pill.on-dark{background:#ffffff1f;color:#fff}
.pill.on-dark.ok{background:#167548;color:#fff}
.pill.on-dark.warn{background:#d39a1c;color:#20334d}

/* ---------- Hồ sơ: bố cục 2 cột ---------- */
.profile-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.side-col{display:flex;flex-direction:column;gap:20px;position:sticky;top:76px}
.id-card{text-align:center;padding:20px}
.id-card .qr{width:168px;height:168px;display:block;margin:4px auto 10px;padding:10px;background:#fff;border:1px solid var(--card-edge);border-radius:10px}
.id-card .caption{font-size:12.5px;color:var(--muted)}
.id-card .btn-row{justify-content:center;margin-top:12px}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--hair);font-size:13.5px;align-items:flex-start}
.facts li:first-child{border-top:0;padding-top:0}
.facts svg{width:16px;height:16px;color:#7f95b1;flex:none;margin-top:2px}
.facts .k{color:var(--muted);font-size:12px;display:block}
.facts .v{font-weight:600;overflow-wrap:anywhere}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--card-edge);margin:-4px 0 18px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 14px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue)}
.tabs a .pill{padding:0 7px;line-height:17px}
.tabs svg{width:14px;height:14px}

.todo-strip{display:grid;gap:10px}
.todo-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid var(--card-edge);background:#fff}
.todo-item.danger{border-color:var(--danger-line);background:#fff8f7}
.todo-item.warn{border-color:#f0d9a6;background:#fffbf1}
.todo-item .t{flex:1;min-width:0}
.todo-item .t b{display:block}
.todo-item .t span{font-size:12.5px;color:var(--muted)}

.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hair);font-size:14px}
.dl dt{color:var(--muted);margin:0}
.dl dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.section-title{display:flex;align-items:center;gap:10px;margin:22px 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.section-title:first-child{margin-top:0}
.section-title .line{flex:1;height:1px;background:var(--hair)}

/* Hợp đồng hiện tại: thanh thời gian */
.term{margin-top:6px}
.term-bar{height:8px;border-radius:999px;background:var(--neutral-bg);overflow:hidden;margin:10px 0 6px}
.term-bar i{display:block;height:100%;border-radius:999px;background:var(--blue)}
.term-bar i.over{background:var(--danger)}
.w-100{width:100%}.w-62{width:62%}.w-35{width:35%}.w-58{width:58%}
.term-legend{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}

/* Mức độ hoàn thiện hồ sơ */
.ring{width:92px;height:92px;flex:none}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:var(--neutral-bg)}
.ring .fg{stroke:#d39a1c;stroke-linecap:round}
.ring text{font:700 20px var(--font);fill:var(--ink)}
.completion{display:flex;gap:18px;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip-missing{font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-bg);border-radius:999px;padding:3px 10px}
.chip-done{font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:3px 10px}
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini-stat{border:1px solid var(--card-edge);border-radius:10px;padding:12px 14px}
.mini-stat b{display:block;font-size:20px;line-height:1.25;font-variant-numeric:tabular-nums}
.mini-stat span{font-size:12.5px;color:var(--muted)}

/* ---------- Lập đề nghị chi ---------- */
.form-types{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.form-type{border:1px solid var(--card-edge);border-radius:10px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0}
.form-type:hover{border-color:#9fbde6}
.form-type.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(6,101,237,.12);background:#f7faff}
.form-type .no{font-size:11.5px;font-weight:700;color:var(--muted)}
.form-type b{font-size:14px;line-height:1.3}
.form-type span{font-size:12px;color:var(--muted);line-height:1.4}
.form-type .icon-tile{width:34px;height:34px;border-radius:10px}
.form-type .icon-tile svg{width:18px;height:18px}

.exp-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.summary-col{position:sticky;top:76px;display:flex;flex-direction:column;gap:20px}
.lines{width:100%;border-collapse:collapse;font-size:14px}
.lines th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--card-edge)}
.lines td{padding:6px;border-bottom:1px solid var(--hair);vertical-align:middle}
.lines input,.lines select{width:100%;min-height:38px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff;font-size:13.5px}
.lines .num input{text-align:right;font-variant-numeric:tabular-nums}
.lines .stt{width:34px;color:var(--muted);text-align:center}
.lines .inv{width:56px;text-align:center}
.lines .del{width:40px}
.lines .del button{border:0;background:none;color:#9aa8ba;cursor:pointer;width:32px;height:32px;border-radius:8px}
.lines .del svg{width:16px;height:16px}
.lines tfoot td{border-bottom:0;padding-top:12px}
.total-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.in-words{font-size:13px;color:var(--muted);font-style:italic}
.payee-toggle{display:inline-flex;border:1px solid var(--card-edge);border-radius:10px;padding:3px;gap:3px;margin-bottom:12px}
.payee-toggle span{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.payee-toggle .on{background:var(--build-bg);color:var(--blue)}
.custom-tag{font-size:10.5px;font-weight:700;color:var(--design);background:var(--design-bg);border-radius:6px;padding:1px 6px;margin-left:6px;text-transform:none;letter-spacing:0}
.route{list-style:none;margin:0;padding:0}
.route li{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hair);font-size:13.5px}
.route li:first-child{border-top:0}
.route .n{width:22px;height:22px;border-radius:50%;background:var(--neutral-bg);color:var(--muted);display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}
.route b{display:block;font-size:13.5px}
.route small{color:var(--muted)}
.req-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.req-list li{display:flex;gap:8px;align-items:center}
.req-list svg{width:16px;height:16px;flex:none}
.req-list .ok{color:var(--ok)}.req-list .no{color:#c0cad6}
.big-total{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}

/* ---------- Trường thông tin tự tạo ---------- */
.field-list{width:100%;border-collapse:collapse;font-size:14px}
.field-list th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;padding:10px 14px;background:#fafbfd;border-bottom:1px solid var(--card-border)}
.field-list td{padding:11px 14px;border-bottom:1px solid var(--card-border);vertical-align:middle}
.field-list .grp td{background:#f7f9fc;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:8px 14px}
.field-list .drag{color:#c0cad6;width:28px}
.field-list .drag svg{width:16px;height:16px}
.type-pill{font-size:11.5px;font-weight:600;border-radius:6px;padding:2px 8px;background:var(--neutral-bg);color:var(--neutral);white-space:nowrap}
.switch{display:inline-block;width:36px;height:20px;border-radius:999px;background:#cfd8e3;position:relative;vertical-align:middle}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch.on{background:var(--blue)}
.switch.on::after{left:18px}
.suggest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.suggest{border:1px dashed #c6d3e3;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;background:#fbfcfe}
.suggest b{font-size:14px}
.suggest span{font-size:12.5px;color:var(--muted)}
.suggest .btn{align-self:flex-start;margin-top:6px}
.mock-dialog .modal-body{display:grid;gap:14px}
.type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.type-opt{border:1px solid var(--card-edge);border-radius:10px;padding:10px;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted)}
.type-opt svg{width:18px;height:18px;display:block;margin:0 auto 4px}
.type-opt.on{border-color:var(--blue);color:var(--blue);background:var(--build-bg)}
.note-box{border-left:3px solid var(--design);background:var(--design-bg);border-radius:8px;padding:10px 14px;font-size:13.5px}

@media (max-width:1100px){
  .profile-layout,.exp-layout{grid-template-columns:minmax(0,1fr)}
  .side-col,.summary-col{position:static}
  .form-types{grid-template-columns:repeat(3,minmax(0,1fr))}
  .suggest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .dl{grid-template-columns:minmax(0,1fr)}
  .form-types{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-stats{grid-template-columns:minmax(0,1fr)}
  .suggest-grid{grid-template-columns:minmax(0,1fr)}
  .type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lines thead{display:none}
  .lines tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 0;border-bottom:1px solid var(--hair)}
  .lines td{border:0;padding:0}
  .lines .stt,.lines .del{display:none}
}
@media (max-width:1100px) and (min-width:701px){
  .side-col{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:stretch}
  .id-card .qr{width:150px;height:150px}
}
.facts .v.mail{font-size:12.5px;word-break:break-all}
.tabs a{padding:10px 12px;font-size:13.5px}
.lines .inv input{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--blue)}
.lines td:nth-child(4){min-width:240px}
.suggest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.switch-btn{border:0;background:none;padding:4px;cursor:pointer;border-radius:999px}
.switch-btn:disabled{cursor:not-allowed;opacity:.6}
.field-list tr.inactive td{opacity:.55}
.field-list tr.sys td{background:#fcfdfe}
.field-list tr[draggable="true"] .drag{cursor:grab}
.field-list tr.dragging{opacity:.5;background:var(--build-bg)}
label.type-opt{cursor:pointer}
label.type-opt:has(input:disabled){cursor:not-allowed}
/* Bảng trường thông tin trên màn hẹp: mỗi trường một khối */
@media (max-width:1200px){
  .field-list thead{display:none}
  .field-list tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--card-border)}
  .field-list td{border:0;padding:0}
  .field-list td:nth-child(2){flex:1 1 calc(100% - 40px);order:1}
  .field-list td.drag{order:0}
  .field-list td:nth-child(n+3){order:2}
  .field-list td:last-child{margin-left:auto}
  .field-list tr.grp{padding:8px 14px}
  .field-list tr.grp td{background:none;padding:0;flex:1 1 100%;order:0;margin:0}
  .field-list tr.sys td[colspan]{display:none}
}
/* Hồ sơ: ảnh đại diện, nút đổi ảnh, in thẻ */
.avatar-xl.has-img{background:#fff}
.avatar-xl img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar-xl button.cam{border:0;cursor:pointer;padding:0}
.avatar-xl button.cam:hover{background:var(--build-bg)}
.page-head .head-text:has(.profile-band){flex-basis:100%}
.ring .fg.done{stroke:var(--ok)}
.term-bar i{width:0}
.name-card .nc-face{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:10px}
.name-card .nc-face img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 6px 18px rgba(13,37,66,.16)}
.name-card .btn-row{justify-content:center;margin-top:14px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--build-bg);border-radius:8px;padding:2px}
.seg button{border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--muted);padding:3px 10px;border-radius:6px;cursor:pointer}
.seg button.on{background:var(--card);color:var(--blue);box-shadow:0 1px 2px rgba(13,37,66,.12)}
.qr-big .qr{width:min(320px,70vw);height:auto;display:block;margin:0 auto 8px}
.center{text-align:center}
/* Lập đề nghị: thẻ chọn mẫu và nút người nhận là <button> */
button.form-type{font:inherit;color:inherit;text-align:left;cursor:pointer}
.payee-toggle button{border:0;background:none;font:inherit;padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.payee-toggle button.on{background:var(--build-bg);color:var(--blue)}
.req-side .in-words{max-width:260px;text-align:right}
@media (max-width:900px){.req-side .in-words{text-align:left}}
.lines{min-width:760px}
.lines select{min-width:120px}
@media (max-width:700px){.lines{min-width:0}}

/* ===== Tổng quan (theo phác thảo đã duyệt public/design/tong-quan.html) ===== */
.kpi{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:16px 18px 0;color:inherit}
.kpi .stat{gap:12px}
.kpi-main{min-width:0;flex:1}
.kpi .caption{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 2px}
.kpi .value{font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi-foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.kpi .spark{display:block;width:calc(100% + 36px);height:34px;margin:4px -18px 0}
.kpi-row{align-items:stretch}
.delta{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.delta.up-good,.delta.down-good{background:var(--ok-bg);color:var(--ok)}
.delta.up-bad,.delta.down-bad{background:var(--danger-bg);color:var(--danger)}
.delta.neutral{background:var(--neutral-bg);color:var(--muted)}
.legend{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:-4px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.l-ok{background:#167548}.l-danger{background:#b42318}.l-build{background:#0665ed}.l-design{background:#6941c6}.l-navy{background:#0d2542}.l-mint{background:#8ee0b8}
.l-f01{background:#0665ed}.l-f02{background:#6941c6}.l-f03{background:#8ee0b8}.l-f04{background:#0d2542}.l-f05{background:#d39a1c}
.legend i.l-line{height:3px;width:16px;background:#0665ed}
.legend i.l-dash{height:12px;width:0;border-left:2px dashed #20334d;border-radius:0}
.card>svg:not(.spark){display:block;width:100%;height:auto}
.insights{list-style:none;margin:0;padding:0}
.insights li{position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--hair);font-size:14px;line-height:1.5}
.insights li:first-child{border-top:0;padding-top:2px}
.insights li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.insights li:first-child::before{top:10px}
.insights li.bad::before{background:#b42318}.insights li.warn::before{background:#d39a1c}.insights li.good::before{background:#167548}
.page-tools .tools-right{margin-left:auto}
.mini-list .m-name{white-space:normal}
@media (max-width:1100px){.kpi-row.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Góp ý 002 — hộp thoại kéo được (ui.js draggable) */
.modal-head.drag-handle{cursor:move;user-select:none;touch-action:none;background:var(--soft-bg,#f7f9fc);border-bottom:1px solid var(--card-edge);padding:14px 22px;border-radius:20px 20px 0 0}
.modal-head .grip{width:10px;height:16px;flex:none;background:radial-gradient(circle,#a3b1c4 1.2px,transparent 1.6px) 0 0/5px 5px;opacity:.9}
dialog.modal.dragging{box-shadow:0 30px 80px rgba(13,37,66,.38)}
/* Thanh tab có công cụ bên phải (Nhóm chi & dự án) */
.tab-bar{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--card-edge);flex-wrap:wrap}
.tab-bar .tabs{border-bottom:0;margin:0}
.tab-tools{margin-left:auto;display:flex;gap:8px;align-items:center;padding:8px 0}
.tab-tools .filter-input{min-width:240px}
.w-grip{width:28px;color:#a3b1c4}
td.drag{cursor:grab}
tr.dragging{opacity:.5;background:var(--build-bg)}
.card-foot{padding:10px 16px;margin:0;border-top:1px solid var(--card-edge);display:flex;gap:6px;align-items:center}
.card-foot svg{width:14px;height:14px}
.budget-bar{height:5px;border-radius:3px;background:#e8edf4;overflow:hidden;margin-left:auto;max-width:140px}
.budget-bar i{display:block;height:100%;background:var(--blue)}.budget-bar i.warn{background:var(--warn)}.budget-bar i.bad{background:var(--danger)}
.date-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:600px){.tab-tools{width:100%;margin-left:0}.tab-tools .filter-input{flex:1;min-width:0}}
/* Quản trị › Pháp nhân */
.co-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.co-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--card-edge);border-radius:12px;padding:12px 14px;color:var(--ink)}
.co-card:hover{text-decoration:none;border-color:#b9cbe3}
.co-card.on{border:2px solid var(--blue);padding:11px 13px}
.co-card.off{opacity:.65}
.co-card .row{display:flex;gap:6px;flex-wrap:wrap}
.co-card b{font-size:13px;line-height:1.3}
.co-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:16px;align-items:start}
.co-hero{display:flex;gap:16px;align-items:center;padding:18px 20px;background:linear-gradient(120deg,#f4f8ff,#fff);border-radius:12px 12px 0 0;flex-wrap:wrap}
.co-hero h2{margin:0;font-size:17px}
.co-hero .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.co-hero .grow{flex:1;min-width:220px}
.co-logo{width:56px;height:56px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.5px;flex:none}
.co-age{text-align:right}
.co-age b{display:block;font-size:26px;color:var(--blue);letter-spacing:-.8px;line-height:1.1}
.co-alert{margin:0 20px 6px}
.co-tabs{padding:0 14px;margin:0}
.co-body{padding:6px 20px 18px}
.timeline{list-style:none;display:flex;gap:0;padding:0;margin:8px 0 0;overflow-x:auto}
.timeline li{flex:1;min-width:120px;position:relative;padding-top:22px;display:flex;flex-direction:column;gap:1px}
.timeline li::before{content:"";position:absolute;top:7px;left:8px;right:-8px;height:3px;background:#cfe0fb}
.timeline li:last-child::before{display:none}
.timeline li i{position:absolute;top:0;left:0;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-sizing:border-box}
.timeline li span{font-size:13px}.timeline li small{color:var(--muted);font-size:11.5px}
.timeline .icon-btn{position:absolute;top:-4px;left:22px;opacity:0}
.timeline li:hover .icon-btn{opacity:1}
.stat-box{display:flex;flex-direction:column;gap:2px;background:#f7f9fc;border-radius:10px;padding:10px;text-align:center;color:var(--ink)}
.stat-box b{font-size:20px}.stat-box span{font-size:12px;color:var(--muted)}
a.stat-box:hover{text-decoration:none;background:var(--build-bg)}
.stat-box.warn b{color:var(--warn)}
.danger-zone{border-color:var(--danger-line)}
button.link{background:none;border:0;padding:0;font:inherit;color:var(--blue);cursor:pointer;text-align:left}
button.link:hover{text-decoration:underline}
@media (max-width:1000px){.co-layout{grid-template-columns:minmax(0,1fr)}.co-age{text-align:left}}
.co-side{display:flex;flex-direction:column;gap:16px}
.signer-list{list-style:none;margin:10px 0 0;padding:0}
.signer-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair)}
.signer-list .pill.navy{min-width:52px;justify-content:center}
.signer-list .grow{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
/* Tổng quan — thời tiết + câu mỗi ngày (góp ý 002 mục 11) */
/* Thời tiết + Câu mỗi ngày: rộng bằng nhau, cao bằng nhau (anh Tâm góp ý 01/10/2026) */
.widget-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.widget-row>.weather-card{display:flex;flex-direction:column}.widget-row>.weather-card>.wx-main{flex:1}
.widget-row>.quote-card .quote-kinds{margin-top:auto}
.widget-row:has(.weather-card.hidden){grid-template-columns:minmax(0,1fr)}
.weather-card{padding:0;overflow:hidden;background:linear-gradient(135deg,#1e6fe0,#0d3a7a);color:#fff;border:0}
.wx-main{display:flex;gap:20px;padding:16px 20px;align-items:center;flex-wrap:wrap}
.wx-city{display:inline-flex;align-items:center;gap:6px;color:#cfe0fb;font-size:12.5px}
.wx-city svg{width:15px;height:15px}
.wx-city select{background:transparent;border:0;color:#fff;font:inherit;font-weight:600;padding:0;cursor:pointer}
.wx-city select option{color:var(--ink)}
.wx-now{display:flex;align-items:center;gap:14px;margin-top:6px}
.wx-ico svg{width:54px;height:54px;color:#ffd166}
.wx-temp{font-size:44px;font-weight:700;line-height:1;letter-spacing:-2px}
.wx-text{color:#cfe0fb;white-space:nowrap}
.wx-facts{list-style:none;margin:0 0 0 auto;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:8px 20px;font-size:12.5px}
.wx-facts li{display:flex;gap:7px;align-items:center}
.wx-facts svg{width:15px;height:15px}.wx-facts span{color:#cfe0fb}
.wx-days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(0,0,0,.14)}
.wx-days li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-left:1px solid rgba(255,255,255,.1);text-align:center}
.wx-days li:first-child{border-left:0}
.wx-days span{font-size:12px;color:#cfe0fb}.wx-days svg{width:20px;height:20px}.wx-days small{font-size:11px;color:#cfe0fb}
.wx-tip{display:flex;gap:8px;align-items:center;padding:8px 20px;font-size:12.5px;background:rgba(0,0,0,.2)}
.wx-tip svg{width:16px;height:16px;flex:none}.wx-tip small{margin-left:auto;color:#cfe0fb;white-space:nowrap}
.wx-tip.quiet{background:transparent;padding-top:0}
.quote-card{background:linear-gradient(160deg,#fffaf0,#fff);border-color:#f1e2c0;display:flex;flex-direction:column}
.icon-tile.lotus{background:#fdf1d6;color:#a16207}
.quote-kind{background:#fdf1d6;color:#a16207}
.quote-card blockquote{margin:6px 2px 8px;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.45;color:#3b2a0a}
.quote-src{color:var(--muted);font-size:12.5px;margin-left:2px}
.quote-kinds{display:flex;gap:6px;margin-top:auto;padding-top:14px}
.quote-kinds button{border:1px solid #ecdcb8;background:#fff;border-radius:999px;padding:3px 11px;font:inherit;font-size:12px;font-weight:600;color:#7a5410;cursor:pointer}
.quote-kinds button.on{background:#a16207;border-color:#a16207;color:#fff}
.icon-btn.on{color:#be185d}
@media (max-width:900px){.widget-row{grid-template-columns:minmax(0,1fr)}.wx-facts{margin-left:0}}
@media (max-width:600px){.wx-days{grid-template-columns:repeat(3,1fr)}.wx-days li:nth-child(n+4){display:none}.quote-card blockquote{font-size:17px}}
.signer-list .grow .pill{align-self:flex-start}
.w-grip svg{width:16px;height:16px;display:block}
@media (max-width:900px){table.data.stack td.w-grip{display:none}}
/* Quản trị › Khối & phòng (cây + khung sửa) */
/* Khối & phòng: các khối nằm ngang thành hàng cột ở trên, ô sửa phòng/khối rộng bên dưới (bố cục duyệt 01/10/2026) */
.org-layout{display:flex;flex-direction:column;gap:16px}
#org-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
#org-list .org-div{margin-bottom:0}
.org-tools .filter-input{max-width:320px}
.org-tree{padding:12px}
.org-tools{padding:2px 4px 10px}.org-tools .filter-input{width:100%}
.org-div{border:1px solid var(--card-edge);border-radius:10px;margin-bottom:8px;overflow:hidden;background:#fff}
.org-div.on{border-color:var(--blue)}
.org-div.dragging,.org-dept.dragging{opacity:.5}
.org-div-head{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#f7f9fc}
.org-div-name{font-weight:700;color:var(--ink)}
.org-depts{list-style:none;margin:0;padding:0;min-height:8px}
.org-dept{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 30px;border-top:1px solid var(--hair);cursor:pointer}
.org-dept:hover{background:#f8fbff}
.org-dept.on{background:#eef5ff;box-shadow:inset 3px 0 var(--blue)}
.org-empty{padding:8px 30px;border-top:1px dashed var(--card-edge)}
.org-tree .grow,.people .grow{flex:1;min-width:0}
.drag{color:#a3b1c4;cursor:grab;display:inline-flex}.drag svg{width:15px;height:15px}
.org-off{padding:6px 6px 0}.org-off ul{list-style:none;padding:6px 0 0;margin:0;display:grid;gap:4px}
.dchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--c,var(--blue));background:color-mix(in srgb,var(--c,var(--blue)) 10%,#fff);border-radius:6px;padding:2px 8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dchip i{width:7px;height:7px;border-radius:2px;background:var(--c,var(--blue));flex:none}
.org-panel .card-head h2{margin-left:4px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.swatch{width:28px;height:28px;border-radius:8px;border:0;background:var(--c);cursor:pointer}
.swatch.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.motifs{display:flex;gap:8px;flex-wrap:wrap}
.motif{width:40px;height:40px;border-radius:9px;border:1px solid var(--card-edge);background:#fff;color:var(--c,var(--navy));display:grid;place-items:center;cursor:pointer;padding:6px}
.motif svg{width:26px;height:26px}
.motif.on{background:var(--c,var(--navy));color:#fff;border-color:transparent}
.people{list-style:none;margin:0;padding:0}
.people li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--hair)}
.people li:first-child{border-top:0}
.people .grow{display:flex;flex-direction:column}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.btn-row.end{justify-content:flex-end}
@media (max-width:700px){#org-list{grid-template-columns:minmax(0,1fr)}}
/* Cài đặt của tôi — cỡ chữ, mật độ (áp toàn Portal qua thuộc tính trên <html>) */
html[data-font="sm"] body{zoom:.93}
html[data-font="lg"] body{zoom:1.08}
html[data-density="compact"] table.data td{padding-top:6px;padding-bottom:6px}
html[data-density="compact"] .card{padding:14px 16px}
/* Cài đặt của tôi: thanh mục nằm ngang ở trên (dính khi cuộn), nội dung rộng bên dưới (bố cục duyệt 01/10/2026) */
.settings-layout{display:flex;flex-direction:column;gap:16px}
.settings-nav{padding:6px;position:sticky;top:calc(var(--topbar) + 8px);z-index:5;display:flex;flex-direction:row;flex-wrap:wrap;gap:2px}
.settings-nav a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--ink);font-weight:600;font-size:13.5px}
.settings-nav a:hover{background:var(--build-bg);text-decoration:none}
.settings-nav svg{width:16px;height:16px;color:var(--muted)}
.settings-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.settings-main>section{scroll-margin-top:80px}
.set-row{display:flex;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--hair);flex-wrap:wrap}
.set-row>div:first-child{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.set-select{height:34px;border-radius:9px;border:1px solid var(--card-edge);padding:0 10px;font:inherit;min-width:200px;background:#fff}
.seg-ctl{display:inline-flex;background:var(--hair);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg-ctl button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:5px 12px;border-radius:7px;cursor:pointer}
.seg-ctl button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(13,37,66,.12)}
.theme-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.theme-card{border:1px solid var(--card-edge);border-radius:10px;padding:10px;background:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.theme-card.on{border:2px solid var(--blue);padding:9px}
.theme-card i{display:block;width:100%;height:44px;border-radius:7px;border:1px solid var(--card-edge);background:#f1f4f9}
.theme-card.t-dark i{background:#0f1b2d}
.theme-card.t-auto i{background:linear-gradient(90deg,#f1f4f9 50%,#0f1b2d 50%)}
.theme-card svg{width:16px;height:16px}
.deleg-list{list-style:none;margin:0;padding:0}
.deleg-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair)}
.deleg-list li:first-child{border-top:0}
.deleg-list .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.forced-pw{max-width:520px}
@media (max-width:700px){.settings-nav{flex-wrap:nowrap;overflow-x:auto}.settings-nav a{white-space:nowrap}}
/* Không gian OneCAD */
.ws-kpis{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.ws-kpis .caption{display:flex;gap:8px;align-items:center}.ws-kpis .caption svg{width:16px;height:16px;color:var(--muted)}
.ws-kpis .value small{font-size:14px;color:var(--muted);font-weight:600}
.ws-kpis .value.sm{font-size:17px}
.ws-bar{max-width:none;margin:6px 0 4px}
.ws-main{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.ws-todo{list-style:none;margin:0;padding:0}
.ws-todo li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.ws-todo li:first-child{border-top:0}
.ws-todo .grow{flex:1;display:flex;flex-direction:column;gap:2px}
.ws-todo a{font-weight:600;font-size:13px}
.ws-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ws-tile{display:flex;gap:10px;border:1px solid var(--card-edge);border-radius:10px;padding:12px;color:var(--ink)}
.ws-tile:hover{text-decoration:none;border-color:#b9cbe3;background:#f8fbff}
.ws-tile>span:last-child{display:flex;flex-direction:column;gap:2px}
.rules-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
.rules-grid .rule{background:#f7f9fc;border-radius:10px;padding:12px}
.rules-grid .rule.wide{grid-column:span 2}
.rule-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.input-unit{display:flex;align-items:center;gap:8px}.input-unit input{flex:1;min-width:0}.input-unit span{color:var(--muted);font-size:12.5px;white-space:nowrap}
@media (max-width:1100px){.ws-main{grid-template-columns:minmax(0,1fr)}.rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rules-grid{grid-template-columns:minmax(0,1fr)}.rules-grid .rule.wide{grid-column:auto}}
/* Bản in A4 đúng mẫu TCKT (exp-print.js) */
.a4{position:relative;width:794px;min-height:1123px;background:#fff;color:#111;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:13px;line-height:1.5;padding:40px 46px 70px;box-shadow:0 10px 30px rgba(13,37,66,.18);overflow:hidden}
.a4 p{margin:5px 0}
.a4 .watermark{position:absolute;inset:0;display:grid;place-items:center;font-size:110px;font-weight:800;color:rgba(13,37,66,.05);transform:rotate(-28deg);pointer-events:none}
.a4-foot{position:absolute;left:46px;right:46px;bottom:22px;border-top:1px solid #e3e9f1;padding-top:7px;font-size:9.5px;color:#56687f}
/* Bản in số hoá đề nghị chi (duyệt 02/10/2026): logo + QR, dấu duyệt điện tử */
.p-band{position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,#0a7bd8,#2fa66f 55%,#38b1a6);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.p-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.p-brand{display:flex;gap:14px;align-items:center;min-width:0}
.p-brand img{height:56px;width:auto}
.p-co{border-left:1px solid #d5deea;padding-left:14px;font-size:11px;line-height:1.45;color:#3d4b5c}
.p-co b{display:block;color:#0d2542;font-size:12.5px;letter-spacing:.02em}
.p-qr{display:flex;gap:10px;align-items:center;border:1px solid #d5deea;border-radius:10px;padding:7px 10px 7px 7px;min-width:210px}
.p-qr.empty{justify-content:center;flex-direction:column;align-items:flex-end;min-height:60px;border-style:dashed}
.p-qr-img{width:82px;height:82px;flex:none}.p-qr-img svg{width:100%;height:100%;display:block}
.p-qr small{display:block;font-size:9px;color:#56687f;line-height:1.35}
.p-qr b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:#0d2542;margin:2px 0}
.p-qr .p-url{word-break:break-all;max-width:150px}
.p-nation{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:12px;padding-top:9px;border-top:1px solid #edf1f6;font-size:11px;color:#3d4b5c}
.p-nation .m{text-align:center;color:#111;display:flex;flex-direction:column}.p-nation .m b{font-size:11.5px}.p-nation .m u{font-size:11.5px}
.p-title{text-align:center;margin:18px 0 2px}
.p-title h1{margin:0;font-family:inherit;font-size:20px;letter-spacing:.03em;color:#0d2542}
.p-meta{font-size:11px;color:#56687f;margin-top:3px}
.p-st{display:inline-block;padding:1px 9px;border-radius:10px;font-weight:700;margin-left:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.p-st.ok{background:#e8f5ee;color:#167548}.p-st.wait{background:#fff5df;color:#8a5a00}.p-st.bad{background:#fdecea;color:#b42318}
.p-kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;margin-top:14px;font-size:12.5px}
.p-kv>div{display:flex;gap:8px;border-bottom:1px dotted #c9d6e6;padding:4px 0}
.p-kv span{color:#56687f;white-space:nowrap}.p-kv b{font-weight:600}.p-kv .full{grid-column:1/3}
.p-part{font-weight:700;margin-top:12px!important;color:#0d2542}
.p-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px;color:#111}
.p-table th{background:#0d2542;color:#fff;font-weight:600;padding:6px 8px;text-align:left;font-size:11px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.p-table td{border-bottom:1px solid #e3e9f1;padding:6px 8px;height:16px}
.p-table .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.p-table .c{text-align:center}
.p-table tr.sum td{border-top:2px solid #0d2542;border-bottom:0;font-weight:700;font-size:13px}
.p-total{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-top:12px;background:#f2f6fb;border-radius:10px;padding:10px 14px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.p-total small{display:block;color:#56687f;font-size:11px}.p-total i{font-size:12px}
.p-total .big{font-size:21px;font-weight:700;color:#0d2542;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-pay{margin-top:10px;font-size:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-pay>div{border:1px solid #e3e9f1;border-radius:8px;padding:5px 10px;min-width:0;overflow-wrap:anywhere}.p-pay small{display:block;color:#56687f;font-size:10px}
.p-note{font-size:11.5px;font-style:italic;color:#3d4b5c}.p-desc{font-size:12px}
.p-signs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}
.p-sg{border:1px solid #e3e9f1;border-radius:10px;padding:8px 6px 9px;text-align:center;min-height:112px;display:flex;flex-direction:column;align-items:center;break-inside:avoid}
.p-sg h4{margin:0;font-size:10px;letter-spacing:.03em;color:#3d4b5c;text-transform:uppercase}
.p-seal{margin:8px 0 6px;width:86px;min-height:44px;border:2px solid #167548;border-radius:8px;color:#167548;font-size:8.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;transform:rotate(-4deg)}
.p-seal b{font-size:10px}
.p-seal.bad{border-color:#b42318;color:#b42318}
.p-seal.wait{border:1.5px dashed #c9d6e6;color:#9aa8ba;transform:none;font-weight:600}
.p-seal.skip{border:1.5px solid #d5deea;color:#9aa8ba;transform:none;font-weight:600}
.p-sg .nm{font-size:11px;font-weight:600;margin-top:auto}.p-sg .tm{font-size:9.5px;color:#56687f}
.p-att{margin-top:12px;font-size:11px;color:#3d4b5c}.p-att b{color:#0d2542}
.p-foot{display:flex;justify-content:space-between;gap:16px}.p-foot>span:last-child{white-space:nowrap}.p-foot .mono{font-family:ui-monospace,Menlo,monospace;color:#0d2542}
.a4-wrap{background:#e9eef5;border-radius:12px;padding:12px;overflow:hidden}
.a4-wrap.mini .a4{zoom:.48;box-shadow:0 6px 16px rgba(13,37,66,.14)}
.a4-wrap.big{display:flex;justify-content:center;overflow:auto;max-height:calc(100vh - 220px)}
.a4-wrap.big .a4{zoom:.9;flex:none}
#print-root{display:none}
@media print{
  @page{size:A4;margin:10mm}
  body.printing>*:not(#print-root){display:none!important}
  body.printing #print-root{display:block}
  body.printing #print-root .a4{zoom:1;box-shadow:none;width:auto;min-height:0;padding:8px 0 0}
  body.printing #print-root .a4-foot{position:static;margin-top:20px}
}
/* Lập đề nghị v2 (góp ý 002 mục 8) */
.stepper{list-style:none;margin:0;padding:10px 14px;display:flex;gap:6px;flex-wrap:wrap}
.stepper li{flex:1;min-width:150px;display:flex;gap:10px;align-items:center;padding:4px}
.stepper .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--hair);color:#8a99ad;flex:none}
.stepper .n svg{width:14px;height:14px}
.stepper li>span:last-child{display:flex;flex-direction:column;line-height:1.25}
.stepper small{color:var(--muted);font-size:11.5px}
.stepper .done .n{background:var(--ok);color:#fff}
.stepper .warn .n{background:var(--warn-bg);color:var(--warn)}
.stepper .ready .n{background:var(--blue);color:#fff}
.stepper .ready b{color:var(--blue)}
.exp-layout.v2{grid-template-columns:minmax(0,1fr) 400px}
.exp-layout.v2 .summary-col{position:sticky;top:76px}
.form.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.total-box{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.total-box .big-total{color:var(--blue)}
.total-row .btn-row{align-self:flex-start}
.docs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px}
.preview-card{padding:12px 14px}
button.a4-wrap{border:0;width:100%;cursor:zoom-in;display:block;text-align:left;padding:10px}
.a4-wrap.mini{max-height:520px}
.check-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.check-list li{display:flex;gap:8px;align-items:center;font-size:13.5px}
.check-list svg{width:16px;height:16px;flex:none}
.check-list .ok svg{color:var(--ok)}.check-list .warn svg{color:var(--warn)}.check-list .bad{color:var(--danger);font-weight:600}
@media (max-width:1200px){.exp-layout.v2{grid-template-columns:minmax(0,1fr)}.exp-layout.v2 .summary-col{position:static}.a4-wrap.mini .a4{zoom:.6}.a4-wrap.mini{max-height:420px}}
@media (max-width:700px){.form.cols-3,.docs-grid{grid-template-columns:minmax(0,1fr)}.stepper li{min-width:45%}.a4-wrap.mini .a4,.a4-wrap.big .a4{zoom:.42}
  table.stack-lines thead{display:none}table.stack-lines,table.stack-lines tbody,table.stack-lines tr,table.stack-lines td{display:block;width:100%}
  table.stack-lines tr{border:1px solid var(--card-edge);border-radius:10px;padding:8px;margin-bottom:8px;position:relative}
  table.stack-lines td{padding:3px 0;border:0}table.stack-lines td.stt{font-weight:700}
  table.stack-lines td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase}
  table.stack-lines td.del{position:absolute;top:6px;right:6px;width:auto}}
/* Bảng điều khiển Duyệt chi + Ký số (góp ý 002 mục 5, 9) */
.exp-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.exp-kpis .kpi,.ws-kpis .kpi{padding:14px 16px;justify-content:flex-start;gap:4px}
.exp-kpis .caption svg{width:15px;height:15px}
.exp-kpis .value small{font-size:14px;color:var(--muted);font-weight:600}
.kpi.accent{background:linear-gradient(135deg,#0a5bd3,#0d2542);color:#fff;border:0}
.kpi.accent .caption,.kpi.accent .sub,.kpi.accent .value small{color:#c8d8f0}
.kpi.warn{border-color:#f0d8a8;background:#fffaf0}
.text-danger{color:var(--danger)}
.exp-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.exp-main.rev{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.stack-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.w-check{width:32px}
.person-cell{display:flex;align-items:center;gap:10px}
.person-cell>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.avatar-sm[data-c]{background:var(--c)}
.pie-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.legend-list{list-style:none;margin:0;padding:0;flex:1;min-width:180px;display:flex;flex-direction:column;gap:7px;font-size:13px}
.legend-list li{display:flex;gap:8px;align-items:center}
.legend-list i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.legend-list span{flex:1}
.bar-fill[data-c]{background:var(--c)}
.track-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.track-list>li>a{display:block;border:1px solid var(--card-edge);border-radius:10px;padding:12px;color:var(--ink)}
.track-list>li>a:hover{text-decoration:none;border-color:#b9cbe3;background:#f8fbff}
.track-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.track-head .sub{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{list-style:none;display:flex;margin:12px 0 6px;padding:0}
.track li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;text-align:center}
.track li::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--card-edge)}
.track li:first-child::before{display:none}
.track li.done::before,.track li.now::before{background:var(--ok)}
.track li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--hair);color:#8a99ad;position:relative;z-index:1}
.track li span svg{width:12px;height:12px}
.track li.done span{background:var(--ok);color:#fff}
.track li.now span{background:#fff;color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.track small{font-size:11px;color:var(--muted)}
@media (max-width:1200px){.exp-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.exp-main,.exp-main.rev{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.exp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pipe{display:flex;gap:6px;flex-wrap:wrap}
.pipe-step{flex:1;min-width:110px;display:flex;flex-direction:column;gap:2px;padding:10px 18px 10px 12px;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 9%,#fff);color:var(--ink);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.pipe-step:hover{text-decoration:none;background:color-mix(in srgb,var(--c) 15%,#fff)}
.pipe-step.on{background:color-mix(in srgb,var(--c) 20%,#fff)}
.pipe-step span{font-size:12px;font-weight:600;color:var(--c)}.pipe-step b{font-size:22px}
.pipe-trend{display:flex;gap:14px;align-items:flex-end;margin-top:14px;height:84px}
.pipe-trend>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;width:36px;height:100%}
.pipe-trend i{display:block;width:16px;border-radius:4px 4px 0 0;background:#15803d;opacity:.75}
.pipe-trend b{font-size:11px}.pipe-trend small{font-size:10.5px;color:var(--muted)}
.pipe-trend>.sub{align-self:center;margin-left:8px}
.track.mini{margin:0;min-width:120px}.track.mini li span{width:18px;height:18px;font-size:10px}.track.mini li::before{top:8px}
/* Hồ sơ nhân sự — thẻ bìa theo màu phòng (góp ý 002 mục 10) */
.cover-card{padding:0;overflow:hidden;margin-bottom:20px}
.cover{height:104px;position:relative;overflow:hidden;background:linear-gradient(110deg,var(--c,#0a5bd3),#0d2542 72%)}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/20px 20px}
.cover-motif{position:absolute;right:48px;top:-24px;width:170px;height:170px;opacity:.28}
.cover-main{display:flex;gap:20px;align-items:center;padding:10px 24px 12px;flex-wrap:wrap}
.cover-main .avatar-xl{margin-top:-62px;border:5px solid #fff;box-shadow:0 6px 16px rgba(13,37,66,.2);flex:none;background:var(--c,#0a5bd3)}
.cover-who{flex:1;min-width:260px}
.cover-who .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cover-who h2{margin:0;font-size:22px}
.cover-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px;color:var(--muted);font-size:13.5px}
.cover-stats{display:flex;gap:22px;align-items:center;text-align:center}
.cover-stats>div{display:flex;flex-direction:column}
.cover-stats b{font-size:16px}.cover-stats span{font-size:12px;color:var(--muted)}
.ring.sm{width:64px;height:64px}
.cover-tabs{padding:0 18px;margin:0;border-top:1px solid var(--hair)}
.info-cards{display:flex;flex-direction:column;gap:16px}
.info-card .card-head{flex-wrap:wrap}
.miss-list{list-style:none;margin:0;padding:0}
.miss-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--hair);font-size:13.5px}
.miss-list li:first-child{border-top:0}
.peers{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:6px}
.peer{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;overflow:hidden}
.peer:first-child{margin-left:0}.peer img{width:100%;height:100%;object-fit:cover}
.peer:hover{text-decoration:none;transform:translateY(-2px)}
.peers .sub{margin-left:8px}
@media (max-width:900px){.cover-stats{width:100%;justify-content:space-between}.cover-motif{right:8px}}
/* Danh sách nhân sự (góp ý 002 mục 10) */
.hr-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.seg-ctl a{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;color:var(--muted);padding:5px 11px;border-radius:7px}
.seg-ctl a:hover{text-decoration:none;color:var(--ink)}
.seg-ctl a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(13,37,66,.12)}
.seg-ctl a svg{width:14px;height:14px}
.avatar-sm.has-img{background:none;overflow:hidden}.avatar-sm img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.person-cell small{display:block}
.pct-bar{display:inline-flex;align-items:center;gap:8px;min-width:120px}
.pct-bar .budget-bar{flex:1;margin:0;max-width:none;height:6px}
.pct-bar b{font-size:12px;width:36px}
.budget-bar i.ok{background:var(--ok)}
.contact-icons{display:inline-flex;gap:10px}.contact-icons a{color:var(--muted)}.contact-icons a:hover{color:var(--blue)}.contact-icons svg{width:16px;height:16px}
.emp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.emp-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 14px 14px;text-align:center;color:var(--ink);overflow:hidden}
.emp-card:hover{text-decoration:none;border-color:#b9cbe3}
.emp-band{display:block;height:44px;margin:0 -14px 0;width:calc(100% + 28px);background:linear-gradient(110deg,var(--c),#0d2542)}
.emp-card .avatar-sm{width:58px;height:58px;font-size:18px;margin-top:-30px;border:3px solid #fff}
.emp-foot{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px;width:100%}
.org-chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start}
.org-col{display:flex;flex-direction:column;gap:10px}
.org-box{border:1px solid var(--card-edge);border-left:4px solid var(--c);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.org-box-head{display:flex;justify-content:space-between;gap:8px}
.org-box .peer{background:var(--c)}
.bulk-bar{position:sticky;bottom:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px rgba(13,37,66,.3);z-index:5}
.bulk-bar #bulk-n{margin-right:auto;font-weight:600}
@media (max-width:1300px){.hr-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.hr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Giao diện tối (Cài đặt của tôi › Giao diện — góp ý 002). Bật bằng html[data-mode="dark"] (app.js: "Tối" hoặc "Theo máy" khi máy để tối).
   Bản in A4 và danh thiếp giữ nền trắng như giấy. */
html[data-mode="dark"]{color-scheme:dark;
  --bg:#0b1524; --card:#111e31; --card-border:#1d2c43; --line:#24354f; --ink:#e3ebf5; --muted:#93a4bb;
  --danger:#f87171; --danger-bg:#3a1a1a; --danger-line:#5c2a2a; --warn:#f0b754; --warn-bg:#36290f; --ok:#4ade80; --ok-bg:#10301f;
  --design:#a78bfa; --design-bg:#251b3d; --build:#5aa2ff; --build-bg:#12294a; --neutral:#93a4bb; --neutral-bg:#1a2a40;
  --blue:#4d94ff; --blue-hover:#6aa6ff; --card-edge:#22334d; --hair:#1a2a40;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25)}
html[data-mode="dark"] :is(.chip-bar button,.filter-input,.input,.field input,.field select,.field textarea,.demo-list button,.todo-item,.form-type,
  .lines input,.lines select,.co-card,.quote-kinds button,.org-div,.motif,.set-select,.theme-card,.track li.now span,.files li,.ws-tile,.emp-card,.org-box,.dropzone){background:var(--card);color:var(--ink);border-color:var(--card-edge)}
html[data-mode="dark"] :is(.btn:hover,.field-list .grp td,.stat-box,.org-div-head,.rules-grid .rule,table.data th,.modal-head.drag-handle){background:#0f1c2e}
html[data-mode="dark"] :is(.org-dept:hover,.ws-tile:hover,.track-list>li>a:hover,.org-dept.on){background:#13243c}
html[data-mode="dark"] :is(.seg-ctl button.on,.seg-ctl a.on,.seg button.on,.payee-toggle button.on){background:#24395a;color:var(--ink)}
html[data-mode="dark"] .btn{background:var(--card);color:var(--ink);border-color:var(--card-edge)}
html[data-mode="dark"] .btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
html[data-mode="dark"] .btn.reject{background:var(--card);color:var(--danger);border-color:var(--danger-line)}
html[data-mode="dark"] .btn.ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)}
html[data-mode="dark"] dialog.modal{background:var(--card);color:var(--ink)}
html[data-mode="dark"] .co-hero{background:linear-gradient(120deg,#13243c,var(--card))}
html[data-mode="dark"] .quote-card{background:linear-gradient(160deg,#241b0a,var(--card));border-color:#3d2f12}
html[data-mode="dark"] .quote-card blockquote{color:#f3e6c8}
html[data-mode="dark"] .kpi.warn{background:#2a200c;border-color:#4a3a14}
html[data-mode="dark"] .a4-wrap{background:#0b1524}
html[data-mode="dark"] .dchip{background:color-mix(in srgb,var(--c,var(--blue)) 22%,var(--card));color:color-mix(in srgb,var(--c,var(--blue)) 55%,#fff)}
html[data-mode="dark"] .cover-main .avatar-xl,html[data-mode="dark"] .peer,html[data-mode="dark"] .emp-card .avatar-sm{border-color:var(--card)}
html[data-mode="dark"] .ring text{fill:var(--ink)}
html[data-mode="dark"] svg text[fill="#16273d"]{fill:var(--ink)}
html[data-mode="dark"] .pipe-step{background:color-mix(in srgb,var(--c) 18%,var(--card))}
html[data-mode="dark"] .theme-card.on{border-color:var(--blue)}
html[data-mode="dark"] .alert{background:#13243c;color:var(--ink)}
html[data-mode="dark"] .alert.warn{background:var(--warn-bg);color:#f5d9a0}
html[data-mode="dark"] .alert.danger{background:var(--danger-bg);color:#fbc4c4}
.hr-table .person-cell{min-width:230px}.hr-table td[data-label="Phòng"] .dchip{max-width:220px}
/* Quản trị › Pháp nhân v2 (thiết kế duyệt 01/10/2026) */
.pn{display:flex;flex-direction:column;gap:18px}
.pn-strip .filter-input{width:260px;max-width:100%}
.tcard.pn-co{flex-direction:row;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.tcard.pn-co:hover{text-decoration:none}
.tstrip-row .tcard.add{min-height:72px}
.pn-rail{padding:12px;position:sticky;top:76px}
.pn-rail .filter-input{width:100%;margin-bottom:10px}
.pn-list{display:flex;flex-direction:column;gap:2px}
.pn-co .t{flex:1;min-width:0;display:flex;flex-direction:column}.pn-co b{font-size:12.5px;line-height:1.3}.pn-co small{color:var(--muted);font-size:11.5px}
.pn-mono{display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));color:#fff;font-weight:800;letter-spacing:.4px;flex:none;width:40px;height:40px;font-size:11px}
.pn-mono.lg{width:68px;height:68px;border-radius:14px;font-size:18px}
.pn-ring .bg{fill:none;stroke:var(--hair);stroke-width:3.5}.pn-ring .fg{fill:none;stroke:var(--blue);stroke-width:3.5;stroke-linecap:round}
.pn-ring .fg.ok{stroke:var(--ok)}.pn-ring .fg.warn{stroke:#d39a1c}
.pn-ring text{font:700 9px var(--font);fill:var(--ink);text-anchor:middle}
.pn-rail-foot{border-top:1px solid var(--card-edge);margin-top:10px;padding:10px 6px 2px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.pn-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.pn-hero{padding:0}
.pn-hero-top{display:flex;gap:18px;align-items:center;padding:22px 24px 18px;background:radial-gradient(120% 140% at 100% 0%,var(--build-bg) 0%,var(--card) 55%);flex-wrap:wrap}
.pn-hero-top h2{margin:0;font-size:21px;letter-spacing:-.2px}
.pn-hero-top .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pn-hero-top .grow{flex:1;min-width:260px}
.pn-sub{margin-top:4px;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.pn-hero-top .acts{display:flex;gap:8px;align-self:flex-start;flex-wrap:wrap;max-width:100%}
.pn-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--card-edge)}
.pn-facts>div{padding:14px 24px;border-left:1px solid var(--card-edge);display:flex;flex-direction:column;gap:2px;min-width:0}
.pn-facts>div:first-child{border-left:0}
.pn-facts span{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pn-facts b{font-size:18px;letter-spacing:-.3px}.pn-facts small{color:var(--muted);font-size:12px}
.pn-complete{display:flex;gap:18px;align-items:center;border:1px solid #f1e2c0;background:linear-gradient(90deg,#fffaf0,var(--card));border-radius:var(--radius);padding:14px 18px;flex-wrap:wrap}
.pn-complete .pn-ring .fg{stroke:#d39a1c}
.pn-complete-t{display:flex;flex-direction:column;gap:3px;min-width:260px}
.pn-bar{display:block;height:8px;border-radius:5px;background:#f3e7cc;overflow:hidden;width:220px;margin-top:4px}.pn-bar i{display:block;height:100%;background:linear-gradient(90deg,#d39a1c,#e8b64a)}
.pn-needs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.pn-need{display:inline-flex;align-items:center;gap:5px;border:1px dashed #d8b868;color:#7a5410;background:var(--card);border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.pn-need:hover{background:#fff5df}.pn-need svg{width:13px;height:13px}
.pn-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.pn-kv{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--hair);font-size:13.5px}
.pn-kv>span:first-child{width:150px;flex:none;color:var(--muted)}.pn-kv b{flex:1;font-weight:600;overflow-wrap:anywhere}
.pn-kv .icon-btn{width:26px;height:26px}
.pn-kv .add{color:#93a3b8;display:inline-flex;gap:5px;align-items:center;font-size:13px}.pn-kv .add:hover{color:var(--blue)}.pn-kv .add svg{width:13px;height:13px}
.pn-addr{display:flex;gap:10px;padding:10px 12px;background:#f7f9fc;border-radius:10px;margin:2px 0 8px;font-size:13.5px;line-height:1.45;width:100%;border:0;text-align:left;font-family:inherit;color:var(--ink)}
.pn-addr>svg{width:16px;height:16px;color:var(--blue);margin-top:2px;flex:none}
.pn-addr small{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
button.pn-addr.blank{cursor:pointer;border:1px dashed var(--card-edge);color:#93a3b8}
.pn-people{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pn-person{display:flex;gap:12px;align-items:center;border:1px solid var(--card-edge);border-radius:12px;padding:14px}
.pn-person .grow{flex:1;display:flex;flex-direction:column;min-width:0}
.pn-person small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.pn-person b{font-size:14px}
.avatar-sm.big{width:44px;height:44px;font-size:14px}.avatar-sm.none{background:var(--hair);color:#93a3b8}.avatar-sm.none svg{width:18px;height:18px}
.pn-banks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pn-bank{border-radius:12px;padding:14px;color:#fff;min-height:118px;display:flex;flex-direction:column;position:relative}
.pn-bank .bn{font-weight:700;font-size:13px;padding-right:70px}
.pn-bank .tag{font-size:10px;font-weight:700;background:rgba(255,255,255,.18);border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.pn-bank .no{font-family:ui-monospace,Menlo,monospace;font-size:17px;letter-spacing:1.5px;margin-top:auto}
.pn-bank .nm{font-size:11.5px;opacity:.82;margin-top:3px}
.pn-bank .bacts{position:absolute;top:10px;right:8px;display:flex;gap:2px;opacity:.75}
.pn-bank .bacts button{border:0;background:none;color:#fff;cursor:pointer;padding:3px}.pn-bank .bacts svg{width:15px;height:15px}
.pn-bank:hover .bacts{opacity:1}
.pn-empty{width:100%;border:1.5px dashed var(--card-edge);border-radius:12px;background:none;padding:18px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit;color:var(--muted)}
.pn-empty svg{width:22px;height:22px}
.pn-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pn-doc{display:flex;gap:10px;align-items:center;border:1px solid var(--card-edge);border-radius:10px;padding:10px 12px;min-width:0}
.pn-doc .ft{width:34px;height:40px;border-radius:6px;background:#fde8e8;color:#b42318;display:grid;place-items:center;font-size:9.5px;font-weight:800;flex:none}
.pn-doc .ft.img{background:#e6f0ff;color:var(--blue)}.pn-doc .ft.doc{background:#e8f0fb;color:#1d4f8f}
.pn-doc .grow{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--ink)}.pn-doc b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pn-doc small{color:var(--muted);font-size:11.5px}
.pn-doc.add{border:1.5px dashed var(--card-edge);color:var(--muted);justify-content:center;font-weight:600;cursor:pointer;min-height:62px}
.pn-doc.add svg{width:16px;height:16px}
.pn-tl{list-style:none;display:flex;margin:6px 0 0;padding:0;overflow-x:auto}
.pn-tl li{flex:1;min-width:120px;position:relative;padding-top:24px;display:flex;flex-direction:column}
.pn-tl li::before{content:"";position:absolute;top:8px;left:9px;right:-9px;height:2px;background:#d6e4fb}.pn-tl li:last-child::before{display:none}
.pn-tl i{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--card);border:3px solid var(--blue);box-sizing:border-box}
.pn-tl li.now i{background:var(--blue)}
.pn-tl b{font-size:13px}.pn-tl span{font-size:12px;color:var(--muted)}
.pn-tl .icon-btn{position:absolute;top:-4px;left:22px;opacity:0}.pn-tl li:hover .icon-btn{opacity:1}
.pn-quiet{display:flex;align-items:center;gap:12px;padding:12px 18px;border:1px solid var(--card-edge);border-radius:var(--radius);background:var(--card);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pn-quiet>svg{width:16px;height:16px;flex:none}.pn-quiet .grow{flex:1;min-width:240px}
@media print{body.print-company #sidebar,body.print-company #topbar,body.print-company .pn-strip,body.print-company .pn-quiet,body.print-company .acts,body.print-company .pn-need,body.print-company .head-actions{display:none!important}
}

@media (max-width:900px){.pn-two,.pn-people{grid-template-columns:minmax(0,1fr)}.pn-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.pn-facts>div:nth-child(3){border-left:0}}
html[data-mode="dark"] .pn-addr{background:#13243c}
html[data-mode="dark"] .pn-complete{background:linear-gradient(90deg,#2a200c,var(--card));border-color:#4a3a14}
html[data-mode="dark"] .pn-need{color:#f0c674;border-color:#7a5f22}
/* Lập đề nghị — Quy trình phê duyệt đầu trang */
.appr-card{padding:14px 18px}
.appr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.appr-head h2{margin:0;font-size:15px}
.appr-head .sub{margin-left:auto}
.appr{list-style:none;margin:0;padding:0;display:flex;gap:0;overflow-x:auto}
.appr li{flex:1;min-width:170px;display:flex;gap:10px;align-items:flex-start;position:relative;padding-right:22px}
.appr li::after{content:"";position:absolute;right:6px;top:13px;width:10px;height:10px;border-top:2px solid #b9c6d8;border-right:2px solid #b9c6d8;transform:rotate(45deg)}
.appr li:last-child::after{display:none}
.appr .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:13px;background:var(--build-bg);color:var(--blue);border:2px solid var(--blue)}
.appr .n svg{width:15px;height:15px}
.appr .t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.appr small{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.appr b{font-size:13.5px}
.appr .sub{font-size:12px}
.appr .me .n{background:var(--ok);border-color:var(--ok);color:#fff}
.appr .final .n{background:var(--blue);color:#fff}
.appr .pay .n{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.appr .skip{opacity:.55}.appr .skip .n{border-style:dashed;background:none;color:var(--muted);border-color:var(--muted)}
.appr .warn .n{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.appr .miss{color:var(--warn)}
.appr .deleg{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;color:var(--design);margin-top:2px}.appr .deleg svg{width:12px;height:12px}
@media (max-width:900px){.appr{flex-direction:column;gap:10px}.appr li::after{display:none}.appr-head .sub{margin-left:0;width:100%}}
/* Hàng thẻ chọn nằm ngang ở trên + vùng làm việc rộng bên dưới (anh Tâm duyệt 01/10/2026, áp cho các màn danh sách + chi tiết) */
.tstrip{padding:14px 16px}
.tstrip-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tstrip-head h2{margin:0;font-size:var(--fs-section);display:flex;gap:8px;align-items:center}.tstrip-head h2 svg{width:18px;height:18px}
.tstrip-head .sub{margin-left:auto}
.tstrip-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tcard{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:left;border:1px solid var(--card-edge);border-radius:12px;padding:12px;background:var(--card);cursor:pointer;font:inherit;color:inherit;min-width:0}
.tcard:hover{border-color:#b9c9de}
.tcard.on{border:2px solid var(--blue);padding:11px;background:color-mix(in srgb,var(--blue) 5%,var(--card))}
.tcard.off{opacity:.7}
.tcard-top{display:flex;gap:8px;align-items:center;justify-content:space-between}.tcard-top{align-items:flex-start}.tcard-top b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.35}.tcard-top .pill{flex:none}
.tcard .sub{font-size:12px}
.tcard-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}.tcard-meta span{display:inline-flex;gap:4px;align-items:center}.tcard-meta svg{width:14px;height:14px}
/* Thẻ quy trình: nút xoá góc dưới phải, hiện rõ khi rê chuột / chọn (góp ý 003 mục 11) */
.qt-card{position:relative;padding-bottom:12px}
.qt-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.qt-card-del{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;opacity:.55}
.qt-card-del svg{width:16px;height:16px}
.qt-card:hover .qt-card-del,.qt-card.on .qt-card-del,.qt-card-del:focus-visible{opacity:1}
.qt-card-del:hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.qt-card-del.locked:hover{background:var(--neutral-bg);border-color:var(--card-edge);color:var(--muted)}
.qt-card .tcard-meta{padding-right:34px}
.tcard.add{border:1.5px dashed #c9d3e0;align-items:center;justify-content:center;text-align:center;color:var(--muted);min-height:110px}
.tcard.add b{color:var(--ink)}.tcard.add svg{width:18px;height:18px}
@media (max-width:700px){.tstrip-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.tstrip-row .tcard{min-width:240px;scroll-snap-align:start}.tstrip-head .sub{margin-left:0}}

/* Duyệt chi › Quy trình duyệt */
.qt-forms{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.qt-forms i{font-style:normal;font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 6px;background:var(--neutral-bg);color:var(--muted)}
.qt-forms i.on{background:var(--build-bg);color:var(--blue)}
.qt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;margin-top:18px}
.qt-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:76px}
.qt-canvas{overflow:hidden}
.qt-head{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--card-edge);flex-wrap:wrap}
.qt-head h2{margin:0;font-size:17px}.qt-head .grow{flex:1;min-width:200px}.qt-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qt-scope{display:flex;gap:6px 18px;padding:11px 20px;background:var(--hair);border-bottom:1px solid var(--card-edge);font-size:12.5px;flex-wrap:wrap}
.qt-flow{padding:18px 20px 22px;display:flex;flex-direction:column}
.qt-node{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--card-edge);border-radius:12px;padding:12px 14px;background:var(--card);position:relative}
.qt-node .grow{flex:1;min-width:0}.qt-node b{font-size:14px}.qt-node .sub{display:block;margin-top:2px}
.qt-n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;background:var(--build-bg);color:var(--blue);border:2px solid var(--blue)}
.qt-n svg{width:16px;height:16px}
.qt-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.qt-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:6px;padding:2px 8px;background:var(--neutral-bg);color:var(--muted)}
.qt-tag svg{width:12px;height:12px}
.qt-tag.cond{background:var(--warn-bg);color:var(--warn)}.qt-tag.sla{background:var(--build-bg);color:var(--blue)}.qt-tag.skip{background:var(--design-bg);color:var(--design)}.qt-tag.ok{background:var(--ok-bg);color:var(--ok)}
.qt-who{display:flex;align-items:center;gap:8px;margin:0 96px 0 auto;align-self:center;font-size:12.5px;color:var(--muted);max-width:260px}
.qt-who .avatar-sm{background:var(--blue)}
.qt-tools{position:absolute;right:8px;top:6px;display:flex;gap:2px;align-items:center;color:#a3b1c4}
.qt-tools .icon-btn{width:30px;height:30px;color:var(--muted)}.qt-tools .icon-btn:hover{background:var(--hair);color:var(--ink)}.qt-tools svg{width:15px;height:15px}
.qt-grip{cursor:grab;display:grid;place-items:center;width:22px}.qt-grip svg{width:15px;height:15px}
.qt-node.dragging{opacity:.45}.qt-node.drop{outline:2px dashed var(--blue);outline-offset:2px}
.qt-node.start,.qt-node.end{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.qt-node.start .qt-n{background:var(--ok);border-color:var(--ok);color:#fff}.qt-node.end .qt-n{background:var(--card);border-color:var(--ok);color:var(--ok)}
.qt-node.branch{border-style:dashed;border-color:#e6c27a;background:color-mix(in srgb,var(--warn-bg) 55%,var(--card))}
.qt-link{display:flex;align-items:center;justify-content:center;height:34px;position:relative}
.qt-link::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px dashed var(--line)}
.qt-add{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;background:var(--card);border:1.5px solid #b9c6d8;display:grid;place-items:center;color:var(--muted);cursor:pointer;padding:0}
.qt-add:hover{border-color:var(--blue);color:var(--blue)}.qt-add svg{width:13px;height:13px}
.qt-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.qt-lab{font-size:11px;font-weight:800;color:var(--warn);letter-spacing:.4px;margin:0 0 6px 4px;text-transform:uppercase}
.qt-sim .form{margin-top:4px}
.qt-sim-out{margin-top:12px;border-top:1px solid var(--card-edge);padding-top:8px}
.qt-sim-out ol{list-style:none;margin:0;padding:0}
.qt-sim-out li{display:flex;gap:10px;align-items:center;padding:7px 0}
.qt-sim-out .k{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--build-bg);color:var(--blue);flex:none}
.qt-sim-out .k svg{width:13px;height:13px}.qt-sim-out .grow{flex:1;min-width:0}.qt-sim-out b{display:block;font-size:13px}.qt-sim-out small{color:var(--muted);font-size:11.5px}
.qt-sum{display:flex;justify-content:space-between;gap:8px;background:var(--hair);border-radius:10px;padding:10px 12px;margin-top:8px;font-size:12.5px}
.qt-ver ul{list-style:none;margin:0;padding:0}
.qt-ver li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--hair);font-size:12.5px}.qt-ver li:first-child{border-top:0}
.qt-ver .grow{flex:1;min-width:0}.qt-ver .sub{display:block}
.qt-note{font-size:12px;background:var(--build-bg);border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);color:var(--ink);border-radius:10px;padding:9px 12px;display:flex;gap:8px;margin-top:10px}
.qt-note svg{width:16px;height:16px;flex:none;color:var(--blue)}
/* hộp Sửa bước */
.qt-dlg{display:flex;flex-direction:column;gap:16px}
.qt-lbl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px}
.qt-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qt-opt{border:1px solid var(--card-edge);border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.qt-opt.on{border:2px solid var(--blue);padding:9px 11px;background:color-mix(in srgb,var(--blue) 5%,var(--card))}
.qt-opt input{margin-top:3px;accent-color:var(--blue)}.qt-opt b{display:block;font-size:13px}.qt-opt small{color:var(--muted);font-size:11.5px;line-height:1.35;display:block}
.qt-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qt-cond{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qt-cond-body{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.qt-cond-body select,.qt-cond-body input[name=value]{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--card)}
.qt-cond-body input[name=value]{flex:1;min-width:200px}
.qt-cond-body.qt-users{display:grid}
.qt-users{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 12px;max-height:220px;overflow:auto}
.qt-users.row{max-height:none}
.qt-users .check{min-height:36px;font-size:13px;line-height:1.3}.qt-users .check small{display:block}.qt-users .check input{width:16px;height:16px}
.qt-checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.qt-checks .check{align-items:flex-start;font-size:13px;min-height:0;padding:4px 0}.qt-checks .check input{width:16px;height:16px;margin-top:2px;accent-color:var(--blue)}
.qt-checks small,.form .check small{display:block;color:var(--muted);font-size:11.5px}
.qt-dlg-del{border-top:1px solid var(--card-edge);padding-top:12px}
@media (max-width:1200px){.qt{grid-template-columns:minmax(0,1fr)}.qt-side{position:static;display:grid;grid-template-columns:1fr 1fr}}
@media (max-width:760px){.qt-side{grid-template-columns:1fr}.qt-who{display:none}.qt-opts,.qt-grid3,.qt-checks{grid-template-columns:1fr}.qt-node{padding-right:96px}}
html[data-mode="dark"] :is(.tcard.add,.qt-add){border-color:var(--card-edge)}
html[data-mode="dark"] .qt-node.branch{border-color:#5a4718}
.settings-main>section{scroll-margin-top:calc(var(--topbar) + 72px)}
/* HĐ ký số chia trang A4 cố định + QR từng trang (duyệt 01/10/2026 — ảnh 15). 1 trang = 210 × 297 mm (794 × 1123 px). */
.es-lay{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.es-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
.es-viewer .c-pages{background:#e9edf3;border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;overflow:hidden}
.c-page{width:794px;height:1123px;background:#fff;box-shadow:0 2px 10px rgba(13,37,66,.18);position:relative;padding:76px 57px 0 113px;overflow:hidden;flex:none;color:#111}
.c-page-body.contract-doc{max-width:none;font-size:13pt;line-height:1.55}
.c-page-body.contract-doc>:first-child{margin-top:0}
.c-page-body ul.c-cont{margin:0;padding-left:26px}.c-page-body ul.c-cont+:not(ul){margin-top:8px}
.c-page-mark{position:absolute;right:46px;top:26px;font:700 11px var(--font);color:var(--ok);border:1.5px solid var(--ok);border-radius:5px;padding:2px 7px;background:#f3fbf6}
.c-page-foot{position:absolute;left:113px;right:57px;bottom:14px;height:86px;border-top:1px solid #cfd6df;display:flex;gap:12px;align-items:center;padding:8px 0 0;font-family:var(--font)}
.c-page-foot .qr{width:72px;height:72px;flex:none}
/* Logo OneCAD ở chân mỗi trang HĐ (bản in số hoá 02/10/2026) — nằm ngoài nội dung đã khoá nên không ảnh hưởng mã trang / chữ ký */
.c-page-foot .c-foot-logo{height:34px;width:auto;flex:none;padding-right:12px;border-right:1px solid #cfd6df}
.c-page-foot .t{flex:1;min-width:0;font-size:10.5px;color:#41556f;line-height:1.5}.c-page-foot .t b{color:#0d2542;font-size:11.5px}
.c-page-foot .pg{font-size:14px;font-weight:800;color:#0d2542;text-align:right;white-space:nowrap}.c-page-foot .pg small{display:block;font-size:10px;font-weight:600;color:#5d6f86}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.4px}
.es-pages{list-style:none;margin:0;padding:0}
.es-pages li{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--hair);font-size:13px}.es-pages li:first-child{border-top:0}
.es-pages .k{width:26px;height:26px;border-radius:6px;background:var(--build-bg);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none}
.es-pages .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1200px){.es-lay{grid-template-columns:minmax(0,1fr)}.es-side{position:static}}
@media print{
  body.print-paged{background:#fff}
  @page{size:A4;margin:0}
  body.print-paged .es-lay{display:block}
  body.print-paged .es-viewer{border:0;padding:0;box-shadow:none}
  body.print-paged .es-viewer .c-pages{background:none;padding:0;gap:0;border-radius:0;display:block}
  body.print-paged .c-page{zoom:1!important;width:210mm;height:297mm;box-shadow:none;break-after:page;page-break-after:always;padding:18mm 16mm 0}
  body.print-paged .c-page:last-child{break-after:auto;page-break-after:auto}
  body.print-paged .c-page-foot{height:26mm;padding:3mm 12mm 3mm 10mm}
  body.print-paged .c-page-foot .qr{width:20mm;height:20mm}
  body.print-paged .c-page-foot .c-foot-logo{height:9mm}
  .c-page-mark,.c-page-foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
html[data-mode="dark"] .es-viewer .c-pages{background:#0b1524}
/* Hồ sơ nhân sự › Hợp đồng: thẻ HĐ ký số đã ký (ảnh 18) */
.hd-signed{border:1px solid var(--card-edge);border-radius:12px;padding:14px;margin:0 16px 12px}
.hd-signed.on{border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok-bg) 45%,var(--card))}
.hd-signed .hl{display:flex;gap:12px;align-items:center}.hd-signed .hl b{display:block;font-size:14px}.hd-signed .hl small{color:var(--muted)}
.hd-signed .hm,.hd-signed .hb{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0 52px;align-items:center}
@media (max-width:600px){.hd-signed .hm,.hd-signed .hb{margin-left:0}}
.tcard-meta.ar-n b{font-size:15px;color:var(--ink)}.mono.sm{font-size:12px}
.c-page-body p.c-ln{margin:0}.c-page-body p.c-ln.end{margin-bottom:6px}.c-page-body p.c-ln+p:not(.c-ln){margin-top:6px}
.hd-hint{margin:0 16px 12px;display:flex;gap:6px;align-items:flex-start}.hd-hint svg{width:15px;height:15px;flex:none;margin-top:2px}.signer-box .form{margin-top:8px}

/* Yêu cầu cập nhật hồ sơ (góp ý 003 mục 7) */
.chg-card{margin-bottom:12px}.chg-card.on{border:2px solid var(--blue)}
.chg-card h2 a{color:inherit}
.req-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--neutral-bg);font-size:14px}
.req-note svg{width:16px;height:16px;flex:none;margin-top:2px}
.req-acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px}
/* Chức vụ (góp ý 003 mục 5) */
.pos-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pos-list li{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--card-edge);border-radius:12px}
.pos-list li .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.pos-list small{font-size:12.5px;color:var(--muted)}.pos-list small.text-ok{color:var(--ok)}
.cover-meta .pill svg{width:13px;height:13px}
/* Việc chờ tôi (góp ý 003 mục 3) */
.todo-sec{margin-bottom:14px}
.todo-rows{display:flex;flex-direction:column}
.todo-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--hair);color:var(--ink)}
.todo-row:hover{background:#f6f9ff;text-decoration:none}
.todo-row .grow{flex:1;display:flex;flex-direction:column;min-width:0}.todo-row .grow b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo-row small{color:var(--muted);font-size:12.5px}
.todo-side{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none}
.todo-row>svg{width:16px;height:16px;stroke:#a5b3c5;flex:none}
.todo-empty{padding:0 18px 16px}
@media (max-width:600px){.todo-row{flex-wrap:wrap}.todo-side{align-items:flex-start;text-align:left;width:100%;padding-left:46px}}
/* Danh sách nhân sự v2 (góp ý 003 mục 4 + 9, ảnh 20) */
.hr-kpis-v2{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hr-kpis-v2 .kpi{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px}
.hr-kpis-v2 .kpi .value{font-size:21px}.hr-kpis-v2 .kpi .value small{font-size:13px;font-weight:600}
.hr-kpis-v2 .kpi.accent{flex-direction:column;align-items:flex-start;gap:0}
.hr-kpis-v2 .kpi .sub{font-size:12px}
@media (max-width:1300px){.hr-kpis-v2{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.hr-kpis-v2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hr-v2{overflow:visible}
.list-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--hair)}
.list-tools .tools-right{margin-left:auto}
.grow-input{flex:1 1 240px;min-width:200px;max-width:360px}
.toggle-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--card-edge);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600;cursor:pointer;background:var(--card)}
.toggle-chip svg{width:16px;height:16px}.toggle-chip input{accent-color:var(--blue)}
.menu-wrap{position:relative;display:inline-flex}
.drop-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;background:var(--card);color:var(--ink);border:1px solid var(--card-edge);border-radius:12px;box-shadow:0 18px 40px rgba(13,37,66,.2);padding:6px;display:flex;flex-direction:column}
.drop-menu a{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;color:var(--ink)}
.drop-menu a:hover{background:var(--hair);text-decoration:none}.drop-menu a svg{width:18px;height:18px;margin-top:2px;flex:none}
.drop-menu a span{display:flex;flex-direction:column}.drop-menu small{color:var(--muted);font-size:12px;font-weight:400}
.cols-menu{left:0;right:auto;min-width:180px;padding:8px 10px;gap:4px}.cols-menu .check{padding:4px 2px}
.chip-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:#f8fafc;border-bottom:1px solid var(--hair)}
.chip-count{margin-left:auto}
.fchip{display:inline-flex;gap:6px;align-items:center;background:var(--card);border:1px solid #bcd3f5;color:#0b3f8f;border-radius:999px;padding:3px 4px 3px 11px;font-size:12.5px;font-weight:600}
.fchip button{width:20px;height:20px;border-radius:50%;border:0;background:#e3edfc;color:#0b3f8f;display:grid;place-items:center;cursor:pointer;padding:0}
.fchip button svg{width:12px;height:12px}
.hr-table th{position:relative;white-space:nowrap}
.th-in{display:inline-flex;align-items:center;gap:2px}
.th-sort,.th-filter{border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:3px 4px;border-radius:6px}
.th-sort:hover,.th-filter:hover{background:var(--hair)}
.th-sort svg,.th-filter svg{width:13px;height:13px;opacity:.4}
th.sorted,th.sorted .th-sort svg{color:var(--blue);opacity:1}
th.filtered .th-filter{color:var(--blue)}th.filtered .th-filter svg{opacity:1;fill:#cfe0fb}
.th-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:40;width:310px;background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:0 18px 40px rgba(13,37,66,.22);padding:12px;
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--ink);white-space:normal;cursor:default}
.pop-sort{display:flex;gap:6px;margin-bottom:8px}
.pop-sort button{flex:1;white-space:nowrap;display:inline-flex;gap:5px;align-items:center;justify-content:center;border:1px solid var(--card-edge);background:var(--card);border-radius:8px;padding:6px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.pop-sort button.on{border-color:var(--blue);color:var(--blue);background:#edf4ff}.pop-sort svg{width:14px;height:14px}
.pop-search{width:100%;margin-bottom:6px}
.pop-list{max-height:320px;overflow:auto;display:flex;flex-direction:column}
.pop-group{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;padding:8px 4px 2px}
.pop-opt{display:flex;gap:9px;align-items:center;padding:6px 4px;border-radius:8px;cursor:pointer}
.pop-opt:hover{background:var(--hair)}.pop-opt input{accent-color:var(--blue);width:16px;height:16px}
.pop-opt span{flex:1}.pop-opt small{color:var(--muted)}
.pop-foot{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--hair);margin-top:8px;padding-top:10px}
.hr-table td{padding-top:9px;padding-bottom:9px}
.hr-table .d2{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.doc-ok{display:inline-flex;gap:4px;align-items:center;color:var(--ok);font-weight:600;font-size:13px}.doc-ok svg{width:15px;height:15px}
.doc-ring{display:inline-flex;gap:7px;align-items:center;font-size:13px}
.doc-ring svg{width:22px;height:22px;fill:none;stroke-width:5}.doc-ring .bg{stroke:#e6ecf3}.doc-ring .fg{stroke:var(--blue);stroke-linecap:round}.doc-ring .fg.low{stroke:#c2410c}
.row-end{width:1%;white-space:nowrap;text-align:right}
.row-end>svg{width:16px;height:16px;stroke:#a5b3c5;vertical-align:middle}
.row-qa{display:inline-flex;gap:4px;margin-right:6px;opacity:0;transition:opacity .12s}
.hr-table tr:hover .row-qa,.row-qa:focus-within{opacity:1}
.row-qa a,.row-qa button{width:30px;height:30px;border-radius:8px;border:0;background:#edf4ff;color:var(--blue);display:inline-grid;place-items:center;cursor:pointer;padding:0}
.row-qa svg{width:16px;height:16px}
.grp-row td{background:#f3f6fa;padding:7px 16px!important;border-bottom:1px solid var(--card-edge)}
.grp-btn{border:0;background:none;font:inherit;display:inline-flex;gap:10px;align-items:center;cursor:pointer;color:var(--ink);padding:0}
.grp-btn>svg{width:16px;height:16px;color:var(--muted);transition:transform .15s}.grp-row.closed .grp-btn>svg{transform:rotate(-90deg)}
.list-foot{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;color:var(--muted);font-size:12.5px}
html[data-mode="dark"] :is(.chip-row,.grp-row td){background:#0f1c2e}
html[data-mode="dark"] .fchip{background:var(--card);color:#9cc0f5;border-color:#2b4a74}
@media (max-width:600px){
  .row-qa{opacity:1}
  .grow-input{max-width:none}
  .chip-count{margin-left:0;width:100%}
  .th-pop{position:fixed;left:0!important;right:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0;max-height:75vh;overflow:auto}
}
.mobile-only{display:none}
@media (max-width:600px){.mobile-only{display:inline-flex}.list-tools .toggle-chip,.list-tools .menu-wrap{display:none}}
/* Hồ sơ · Tổng quan v2 (góp ý 003 mục 10, ảnh 21): bỏ cột trái, lưới 3 cột cân đối */
.profile-main{min-width:0}
.cover-contact{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cover-contact .btn svg{width:15px;height:15px;color:var(--blue)}
.ov-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;align-items:stretch}
.ov-grid-b{grid-template-columns:1fr 1fr 1.15fr;margin-top:16px}
.ov-grid>.card{margin:0;min-width:0}
.ov-need .ring.sm{width:44px;height:44px}
.ov-ban{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;margin-bottom:10px;font-size:13.5px}
.ov-ban>svg{width:18px;height:18px;flex:none}.ov-ban>span{flex:1}
.ov-ban.danger{background:var(--danger-bg);color:var(--danger)}.ov-ban.warn{background:var(--warn-bg);color:var(--warn)}
.ov-todo{list-style:none;margin:0;padding:0}
.ov-todo li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:14px}.ov-todo li:last-child{border-bottom:0}
.ov-todo .k{font-size:11.5px;color:var(--muted);width:70px;flex:none}.ov-todo .t{flex:1;min-width:0}
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--hair);font-size:13.5px}
.kv-row span{color:var(--muted)}.kv-row b{text-align:right;font-weight:600}
.ov-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.ov-stat{display:flex;gap:12px;align-items:center;padding:14px 16px;margin:0;color:var(--ink)}
.ov-stat:hover{text-decoration:none;border-color:#bcd3f5}
.ov-stat b{display:block;font-size:17px}.ov-stat small{color:var(--muted);font-size:12.5px}
.ov-mgr{display:flex;gap:10px;align-items:center}.ov-mgr>span:last-child{display:flex;flex-direction:column}
.ov-tl{list-style:none;margin:0;padding:0}
.ov-tl li{display:flex;gap:10px;padding:7px 0;font-size:13.5px}.ov-tl i{width:9px;height:9px;border-radius:50%;background:var(--blue);margin-top:6px;flex:none}
.ov-tl small{display:block;color:var(--muted);font-size:12px}
.nc-tpl{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tpl-opt{display:flex;flex-direction:column;gap:6px;padding:8px;border:2px solid var(--card-edge);border-radius:12px;cursor:pointer}
.tpl-opt:has(input:checked){border-color:var(--blue);background:#edf4ff}
.tpl-opt input{position:absolute;opacity:0;pointer-events:none}
.tpl-opt img{width:100%;aspect-ratio:450/275;border-radius:8px;background:var(--hair);box-shadow:0 4px 12px rgba(13,37,66,.15)}
.tpl-name{display:flex;justify-content:space-between;align-items:center}
.tpl-sw{display:inline-flex;gap:3px}.tpl-sw i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}
html[data-mode="dark"] .tpl-opt:has(input:checked){background:#0f1c2e}
@media (max-width:1100px){.ov-grid,.ov-grid-b{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.ov-grid,.ov-grid-b,.ov-mini{grid-template-columns:minmax(0,1fr)}}
/* Nhận định trên Tổng quan: mỗi dòng bấm được → danh sách đúng nhóm đang đếm */
.insights li.has-link{display:flex;gap:12px;align-items:baseline}
.insights .ins-t{flex:1;min-width:0}
.insights .ins-t a{color:inherit}.insights .ins-t a:hover{color:var(--blue)}
.insights a.ins-sub{color:var(--blue);font-weight:600}
.insights .ins-go{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.insights .ins-go svg{width:14px;height:14px}

/* Thể thức NĐ 30/2020/NĐ-CP trong trang HĐ: quốc hiệu, tiêu ngữ, địa danh ngày tháng, ý liệt kê "-", số trang từ trang 2 */
.c-page-body.contract-doc{font-size:13pt;line-height:1.4;text-align:justify}
.c-page-body .c-head{display:grid;grid-template-columns:42% 58%;gap:0;text-align:center;margin:0}
.c-page-body .c-head>div{display:flex;flex-direction:column;align-items:center}
.c-page-body .c-org b,.c-page-body .c-nation b:first-child{font-size:12.5pt;line-height:1.3}
.c-page-body .c-nation b.u{font-size:13.5pt;line-height:1.35}
.c-page-body .c-head .u{display:inline-block;padding-bottom:1px;border-bottom:1px solid #111}
.c-page-body .c-date{text-align:right;font-style:italic;margin:8px 0 0}
.c-page-body h1{font-size:14pt;margin:14px 0 0}
.c-page-body .c-no{margin:0 0 8px}
.c-page-body ul,.c-page-body ul.c-cont{list-style:none;margin:0;padding:0}
.c-page-body li{text-indent:1cm;margin:0 0 2px}.c-page-body li::before{content:"- "}
.c-page-body h2{font-size:13pt;margin:8px 0 3px}.c-page-body h3{font-size:13pt;margin:6px 0 2px}
.c-page-body p{margin:0 0 4px}
.c-page-no{position:absolute;top:38px;left:113px;right:57px;text-align:center;font:13pt "Times New Roman",Times,serif;color:#111}
.c-page-wm{position:absolute;inset:0;display:grid;place-items:center;font:700 92px var(--font);color:rgba(180,35,24,.07);transform:rotate(-30deg);pointer-events:none;letter-spacing:.06em}
@media print{
  body.print-paged .c-page{padding:20mm 15mm 0 30mm}
  body.print-paged .c-page-foot{left:30mm;right:15mm;bottom:4mm;height:22mm;padding:2mm 0 0}
  body.print-paged .c-page-foot .qr{width:19mm;height:19mm}
  body.print-paged .c-page-no{top:10mm;left:30mm;right:15mm}
  .c-page-wm{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Soạn HĐ ký số › Người ký phía công ty: 2 lựa chọn rõ ràng (ảnh 22) */
.sg-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--card-edge);border-radius:12px;padding:12px 14px;margin-top:8px;cursor:pointer}
.sg-opt.on{border:2px solid var(--blue);padding:11px 13px;background:color-mix(in srgb,var(--blue) 5%,var(--card))}
.sg-opt.off{opacity:.55;cursor:not-allowed}
.sg-opt>input{margin-top:3px;accent-color:var(--blue)}.sg-opt b{display:block}.sg-opt small{display:block;color:var(--muted)}.sg-opt .grow{flex:1;min-width:0}.sg-opt>.pill{margin-left:auto}
/* Hộp Gửi điền lương: chọn đích danh một người */
.pp-list{display:grid;gap:8px}
.pp-opt{display:flex;gap:12px;align-items:center;border:1px solid var(--card-edge);border-radius:12px;padding:10px 12px;cursor:pointer}
.pp-opt.on{border:2px solid var(--blue);padding:9px 11px;background:color-mix(in srgb,var(--blue) 5%,var(--card))}
.pp-opt.off{opacity:.5;cursor:not-allowed}.pp-opt>input{accent-color:var(--blue)}
.pp-opt .grow{flex:1;min-width:0}.pp-opt b{display:block}.pp-opt small{color:var(--muted)}
/* Hồ sơ › Danh thiếp: dải 5 mẫu dưới thẻ (ảnh 24) */
.nc-strip-head{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 6px}
.nc-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.nc-tp{border:1px solid var(--card-edge);border-radius:9px;padding:4px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:stretch;font:600 10.5px var(--font);color:var(--muted)}
.nc-tp img{width:100%;aspect-ratio:1.75;object-fit:cover;border-radius:5px;background:var(--hair)}
.nc-tp.on{border:2px solid var(--blue);padding:3px;color:var(--blue)}
.nc-tp:hover{border-color:var(--blue)}
.alert.no-number{display:flex;gap:10px;align-items:flex-start}.alert.no-number svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--blue)}

/* Lương che sẵn — bấm Xem (quy tắc lương 01/10/2026) */
.salary-reveal,#salary-box{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* App 1.0 — vùng làm việc: bảng rộng + khung chi tiết bên phải (dưới hàng thẻ .tstrip) */
.ws{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
.ws.has-detail{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}
.ws-detail{position:sticky;top:72px;max-height:calc(100vh - 88px);overflow:auto}
table.data tr.on td{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.clip-cell{max-width:420px}
@media (max-width:1100px){.ws.has-detail{grid-template-columns:minmax(0,1fr)}.ws-detail{position:static;max-height:none;order:-1}}
/* Trao đổi (góp ý, phiếu IT) */
.thread{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.msg{max-width:88%;border:1px solid var(--card-edge);border-radius:12px;padding:8px 12px;background:var(--card)}
.msg.mine{align-self:flex-end;background:color-mix(in srgb,var(--blue) 7%,var(--card))}
.msg.theirs{align-self:flex-start}
.msg.sys{align-self:center;border-style:dashed;font-size:12.5px;color:var(--muted)}
.msg-meta{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.msg-body{white-space:pre-wrap;word-break:break-word}
.fb-reply{display:flex;gap:8px;align-items:flex-end}.fb-reply textarea{flex:1;min-width:0;border:1px solid var(--card-edge);border-radius:10px;padding:8px 10px;font:inherit;background:var(--card);color:var(--ink)}
.fb-list{list-style:none;margin:0;padding:0}.fb-list li{border-bottom:1px solid var(--card-border);padding:10px 0}.fb-list summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.secret-box{padding:12px;border:1px dashed var(--blue);border-radius:10px;word-break:break-all;user-select:all;font-size:15px}
/* Hỗ trợ IT */
.stars{color:#d39a1c;letter-spacing:1px;white-space:nowrap}
.att-list{list-style:none;margin:8px 0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.file-btn{cursor:pointer}
.rate{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--card-border);padding-top:12px}
.star-pick{display:flex;gap:6px;flex-wrap:wrap}.star-pick label{cursor:pointer}.star-pick input{position:absolute;opacity:0}
.star-pick span{display:inline-block;padding:4px 10px;border:1px solid var(--card-edge);border-radius:14px;font-size:13px}
.star-pick input:checked+span{border-color:#d39a1c;background:#fdf3dc;color:#8a5a00;font-weight:700}
.star-pick input:focus-visible+span{outline:2px solid var(--blue)}
/* Tài sản: nhập phiếu khai, in tem QR (decal A4 24 tem 70×37 mm, 3 × 8) */
tr.row-bad td{background:color-mix(in srgb,var(--danger) 4%,transparent)}
.btn-row.pad{padding:12px 22px}
.tem-lay{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
@media (max-width:1100px){.tem-lay{grid-template-columns:minmax(0,1fr)}}
.tem-pick{max-height:70vh;overflow:auto}
.tem-preview{margin-top:14px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;overflow:auto}
.tem-preview .tem-sheet{zoom:.5;box-shadow:0 4px 16px rgba(13,37,66,.18);background:#fff}
.tem-sheet{width:210mm;height:297mm;box-sizing:border-box;padding:0.5mm 0;display:grid;grid-template-columns:repeat(3,70mm);grid-template-rows:repeat(8,37mm);background:#fff;color:#0d2542}
.tem{box-sizing:border-box;padding:2.5mm 3mm;display:flex;gap:2.5mm;align-items:center;overflow:hidden;border:0.2mm dashed #d5deea}
.tem.empty{border-color:#eef2f7}
.tem-qr{flex:none;width:30mm;height:30mm}.tem-qr svg{width:30mm;height:30mm;display:block}
.tem-text{display:flex;flex-direction:column;min-width:0;gap:0.6mm;font-family:Arial,Helvetica,sans-serif}
.tem-brand{font-size:6.5pt;font-weight:700;letter-spacing:.6pt;color:#0665ed}
.tem-code{font-size:17pt;line-height:1.05;font-weight:800;letter-spacing:.4pt}
.tem-type{font-size:7pt;line-height:1.2;color:#20334d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tem-holder{font-size:7pt;font-weight:700;color:#20334d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tem-root{display:none}
@page tem{size:A4;margin:0}
@media print{
  body.printing-tem>*:not(#tem-root){display:none!important}
  body.printing-tem{background:#fff}
  body.printing-tem #tem-root{display:block}
  body.printing-tem .tem-sheet{page:tem;break-after:page;page-break-after:always}
  body.printing-tem .tem-sheet:last-child{break-after:auto;page-break-after:auto}
  body.printing-tem .tem{border:0}
  .tem-sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Giấy tờ nhân sự tự nộp — HR / trưởng phòng xác nhận (ảnh 25) */
.mb-16{margin-bottom:16px}
.ef-prog{display:flex;gap:10px;align-items:center;margin:2px 0 10px}.ef-prog .bar-track{flex:1;height:8px;border-radius:5px;background:var(--hair);overflow:hidden}.ef-prog .bar-fill{display:block;height:100%;background:var(--blue);border-radius:5px}
.ef-list{list-style:none;margin:0;padding:0}
.ef-list li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}.ef-list li:first-child{border-top:0}
.ef-list .grow{flex:1;min-width:0}.ef-list b{display:block;font-size:13.5px}.ef-list small{color:var(--muted);font-size:12px;display:block;overflow-wrap:anywhere}
.ef-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}.ef-ic svg{width:17px;height:17px}
.ef-ic.ok{background:var(--ok-bg);color:var(--ok)}.ef-ic.wait{background:var(--warn-bg);color:var(--warn)}.ef-ic.bad{background:var(--danger-bg);color:var(--danger)}.ef-ic.none{background:var(--hair);color:var(--muted)}
.ef-rej{display:block;font-size:12px;color:var(--danger);margin-top:2px}
.ef-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ef-hint{display:flex;gap:6px;align-items:flex-start;margin:10px 0 0}.ef-hint svg{width:15px;height:15px;flex:none;margin-top:2px}
.ef-card .section-title .btn{margin-left:10px}
.ef-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}.ef-img{max-width:100%;max-height:70vh;display:block;margin:0 auto;border-radius:8px}
@media (max-width:700px){.ef-list li{flex-wrap:wrap}.ef-acts{width:100%;justify-content:flex-start}}
/* Giấy tờ chờ duyệt */
.fr-lay{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.fr-list{display:flex;flex-direction:column;max-height:76vh;overflow:auto}
.fr-it{display:flex;gap:10px;align-items:center;padding:11px 14px;border:0;border-bottom:1px solid var(--hair);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.fr-it.on{background:color-mix(in srgb,var(--blue) 6%,var(--card));box-shadow:inset 3px 0 var(--blue)}.fr-it .grow{flex:1;min-width:0}.fr-it b{display:block}.fr-it small{color:var(--muted)}
.fr-pv{height:56vh;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--hair);overflow:hidden}
.fr-pv iframe{width:100%;height:100%;border:0;background:#fff}.fr-pv img{max-width:100%;max-height:100%}
.fr-acts{justify-content:flex-end}
@media (max-width:900px){.fr-lay{grid-template-columns:minmax(0,1fr)}.fr-list{max-height:none}}

/* Bổ nhiệm chức vụ (ảnh 26) */
.ap-who{display:flex;align-items:center;gap:10px;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--card-edge)}.ap-who .sub{margin-left:2px}
.ap-sec{display:grid;grid-template-columns:28px 1fr;gap:10px;margin-bottom:16px}.ap-sec h4{margin:2px 0 10px;font-size:14px}.ap-sec h4 .sub{font-weight:500}
.ap-n{width:24px;height:24px;border-radius:50%;background:var(--build-bg);color:var(--blue);font-weight:800;font-size:12px;display:grid;place-items:center}
.ap-eff{display:flex;gap:10px;align-items:flex-start;margin-top:10px;background:color-mix(in srgb,var(--blue) 7%,var(--card));border:1px solid color-mix(in srgb,var(--blue) 22%,transparent);border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.45}
.ap-eff svg{width:16px;height:16px;flex:none;color:var(--blue);margin-top:2px}
.ap-opts{display:flex;gap:8px;flex-wrap:wrap}.ap-opts .sg-opt{margin-top:0;flex:1 1 140px;padding:9px 12px}.ap-opts .sg-opt.on{padding:8px 11px}
.ap-err{color:var(--danger);font-size:12px;font-weight:600}
.field input.invalid{border-color:var(--danger-line);background:var(--danger-bg)}
.ap-chips{margin-top:8px}.ap-chips button{height:26px;font-size:12px}
.mt-8{margin-top:8px}
.ap-sum{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--muted) 8%,var(--card));font-size:13px;font-weight:600}.ap-sum.bad{color:var(--danger);background:var(--danger-bg)}
.field .ap-opts input[type=radio]{width:auto;min-height:0;padding:0;margin-top:3px;flex:none}

/* Chức vụ lãnh đạo (ảnh 27): Ban TGĐ vàng · quản lý khối/phòng navy · quản lý nhóm xám */
:root{--ld-gold:#b8893b;--ld-gold-ink:#7a5717;--ld-gold-bg:#f7ecd6;--ld-gold-soft:#fffaf0;--ld-navy:#0d2542;--ld-navy-bg:#e3e9f3;--ld-navy-soft:#f4f7fb}
:root[data-mode=dark]{--ld-gold:#d6a85a;--ld-gold-ink:#f0d39c;--ld-gold-bg:#3a2e17;--ld-gold-soft:#2a2316;--ld-navy:#a9c1e6;--ld-navy-bg:#1d2b40;--ld-navy-soft:#172233}
.ld-stars{display:inline-flex;gap:1px}.ld-stars svg{width:11px;height:11px;fill:var(--ld-gold);stroke:var(--ld-gold)}
.ld-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ld-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;border-radius:6px;padding:2px 8px;letter-spacing:.1px;white-space:nowrap;background:var(--ld-navy-bg);color:var(--ld-navy)}
.ld-badge>svg{width:11px;height:11px}.ld-badge.bgd{background:var(--ld-gold-bg);color:var(--ld-gold-ink)}.ld-badge.nhom{background:color-mix(in srgb,var(--muted) 12%,var(--card));color:var(--muted)}
.ld-ring{display:inline-flex;border-radius:50%;flex:none}.ld-ring.bgd{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ld-gold)}.ld-ring.ql{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ld-navy)}
.hr-table tr.ld-row.bgd>td{background:linear-gradient(90deg,var(--ld-gold-soft),transparent 55%)}.hr-table tr.ld-row.bgd>td:first-child{box-shadow:inset 3px 0 var(--ld-gold)}
.hr-table tr.ld-row.ql>td{background:linear-gradient(90deg,var(--ld-navy-soft),transparent 55%)}.hr-table tr.ld-row.ql>td:first-child{box-shadow:inset 3px 0 var(--ld-navy)}
.hr-table tr.ld-grp>td{padding:7px 14px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--ld-navy);background:var(--ld-navy-soft)}
.hr-table tr.ld-grp.bgd>td{color:var(--ld-gold-ink);background:var(--ld-gold-soft)}.hr-table tr.ld-grp.ns>td{color:var(--muted);background:color-mix(in srgb,var(--muted) 6%,var(--card))}
.hr-table tr.ld-grp td svg{width:12px;height:12px;fill:var(--ld-gold);stroke:var(--ld-gold);margin-right:6px;vertical-align:-1px}.hr-table tr.ld-grp .sub{margin-left:8px;text-transform:none;letter-spacing:0;font-weight:600}
/* hồ sơ */
.cover-card.lead-bgd .avatar-xl{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--ld-gold)}.cover-card.lead-ql .avatar-xl{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--ld-navy)}
.ld-crest{position:absolute;right:18px;top:14px;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#f3dfb5;background:#0d254299;border:1px solid #f3dfb544;border-radius:999px;padding:4px 11px;z-index:1}
.ld-crest svg{width:12px;height:12px;fill:#e7c27a;stroke:#e7c27a}.cover-card.lead-ql .ld-crest{color:#dbe6f7}.cover-card.lead-ql .ld-crest svg{fill:none;stroke:#dbe6f7}
.cover-ranks{margin:4px 0 6px}.cover-ranks .ld-badge{font-size:12.5px;padding:3px 10px}
.ld-tile.bgd{background:var(--ld-gold-bg);color:var(--ld-gold-ink)}.ld-tile.bgd svg{fill:var(--ld-gold);stroke:var(--ld-gold)}.ld-tile.ql{background:var(--ld-navy-bg);color:var(--ld-navy)}
/* hộp bổ nhiệm */
.ap-held{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--muted) 7%,var(--card));margin-bottom:14px}
.pc-tier{margin-bottom:12px}.pc-th{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px;color:var(--muted)}
.pc-th svg{width:14px;height:14px}.pc-th .ln{flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.3}
.pc-th.bgd{color:var(--ld-gold-ink)}.pc-th.bgd svg{fill:var(--ld-gold);stroke:var(--ld-gold)}.pc-th.ql{color:var(--ld-navy)}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pc{position:relative;text-align:left;display:flex;flex-direction:column;gap:5px;align-items:flex-start;border:1.5px solid var(--card-edge);border-radius:12px;padding:11px 12px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.pc:hover:not(:disabled){border-color:color-mix(in srgb,var(--ld-navy) 45%,var(--card-edge))}
.pc b{font-size:13.5px;color:var(--ld-navy)}.pc small{font-size:11.5px;color:var(--muted);line-height:1.35}
.pc-tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 7px;background:var(--ld-navy-bg);color:var(--ld-navy)}
.pc-hold{font-size:11px;color:var(--muted)}
.pc.bgd{background:linear-gradient(160deg,var(--ld-gold-soft),var(--card) 60%);border-color:color-mix(in srgb,var(--ld-gold) 40%,var(--card-edge))}.pc.bgd .pc-tag{background:var(--ld-gold-bg);color:var(--ld-gold-ink)}
.pc.on{border:2px solid var(--ld-navy);padding:10.5px 11.5px;box-shadow:0 6px 16px color-mix(in srgb,var(--ld-navy) 18%,transparent)}
.pc.bgd.on{border-color:var(--ld-gold);box-shadow:0 6px 16px color-mix(in srgb,var(--ld-gold) 25%,transparent)}
.pc.on::after{content:'✓';position:absolute;top:9px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--ld-navy);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}.pc.bgd.on::after{background:var(--ld-gold)}
.pc.held{border-style:dashed}.pc.off{opacity:.5;cursor:not-allowed}
.pc.add{border-style:dashed;align-items:center;justify-content:center;flex-direction:row;color:var(--blue);font-weight:700;font-size:12.5px;min-height:80px}.pc.add svg{width:15px;height:15px}
.pc-lock{display:flex;gap:6px;align-items:center;margin:6px 0 0;font-size:11.5px;color:var(--ld-gold-ink)}.pc-lock svg{width:12px;height:12px}
.ap-eff.gold{background:var(--ld-gold-soft);border-color:color-mix(in srgb,var(--ld-gold) 35%,transparent)}.ap-eff.gold svg{color:var(--ld-gold)}
/* thư chúc mừng */
.an-letter{position:relative;border-radius:14px;padding:18px 20px;background:linear-gradient(150deg,var(--ld-gold-soft),var(--card));border:1px solid color-mix(in srgb,var(--ld-gold) 35%,transparent)}
.an-letter.ql,.an-letter.nhom{background:linear-gradient(150deg,var(--ld-navy-soft),var(--card));border-color:var(--ld-navy-bg)}
.an-letter h3{margin:0 0 6px;font-size:19px;color:var(--ld-navy);padding-right:70px}.an-letter p{margin:6px 0;line-height:1.55;max-width:520px}
.an-kicker{font-size:11px!important;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ld-gold-ink);margin:0 0 4px!important}
.an-seal{position:absolute;right:18px;top:16px;width:58px;height:58px;border-radius:50%;border:2px solid var(--ld-gold);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--ld-gold-ink);font-size:9px;font-weight:800;line-height:1.1}
.an-letter .sub svg{width:13px;height:13px;vertical-align:-2px}
.pos-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.an-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ap-scope{margin:-2px 0 14px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--ld-navy);background:var(--ld-navy-soft)}.ap-scope .field>span{color:var(--ld-navy)}