/* ============================================================
   Hùng Cường Việt Nam Giày — App theme
   Brand: Đỏ đô #BE1E2D · Be Vietnam Pro (cả tiêu đề — bỏ font có chân Cormorant từ 30/10/2026)
   Shared by index.html (nhân viên) + admin.html (quản trị).
   Portable: tokens inlined, fonts from Google Fonts — no _ds needed.
   ============================================================ */

:root{
  /* Brand red (đỏ đô) */
  --red-50:#fbeaec; --red-100:#f6d2d6; --red-200:#eca6ad;
  --red-500:#be1e2d; --red-600:#a01825; --red-700:#82131e;
  /* Neutrals */
  --n-0:#ffffff; --n-50:#f7f6f6; --n-100:#ededed; --n-200:#dcdcdc;
  --n-300:#c4c4c4; --n-400:#9e9e9e; --n-500:#6b6b6b; --n-600:#555555;
  --n-700:#3d3d3d; --n-800:#262626; --n-900:#141414; --ink:#000000;
  /* Status */
  --green-700:#15663f; --green-500:#1f8a5b; --green-50:#e7f4ee;
  --amber-700:#94621a; --amber-500:#c9881f; --amber-50:#f8efdc;

  /* Semantic */
  --brand:var(--red-500); --brand-hover:var(--red-600); --brand-active:var(--red-700);
  --paper:var(--n-50); --card:var(--n-0); --line:var(--n-200); --line-strong:var(--n-300);
  --text:var(--n-900); --text-strong:var(--ink); --muted:var(--n-500); --faint:var(--n-400);

  /* Fonts */
  --font-body:'Be Vietnam Pro','Segoe UI',Arial,system-ui,sans-serif;
  --font-display:'Be Vietnam Pro','Segoe UI',Arial,system-ui,sans-serif;     /* tiêu đề: không chân */

  /* Radius / shadow / motion */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(20,20,20,.06);
  --sh-sm:0 1px 3px rgba(20,20,20,.08),0 1px 2px rgba(20,20,20,.05);
  --sh-md:0 4px 12px rgba(20,20,20,.08),0 2px 4px rgba(20,20,20,.05);
  --sh-lg:0 12px 28px rgba(20,20,20,.10),0 4px 8px rgba(20,20,20,.05);
  --ease:cubic-bezier(.22,1,.36,1);
  --t:200ms var(--ease);
  --focus:0 0 0 3px color-mix(in srgb,var(--red-500) 40%,transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);background:var(--paper);color:var(--text);
  line-height:1.55;min-height:100vh;padding:0 16px;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px;margin:0 auto;padding:32px 0 64px}
.wrap.wide{max-width:1080px}

/* ---------- Header ---------- */
header.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:28px;border-bottom:2px solid var(--brand);
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand img.logo{height:52px;width:auto;display:block}
.brand .divider{width:1px;height:42px;background:var(--line);flex:none}
.brand .titles{min-width:0}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
}
.brand .titles h1{
  font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1.15;
  letter-spacing:-.015em;color:var(--text-strong);margin-top:2px;
}
.brand .titles h1.sm{font-size:22px}

/* userbox */
.userbox{display:flex;align-items:center;gap:10px;font-size:13px}
.userbox img{width:34px;height:34px;border-radius:50%;border:1px solid var(--line)}
.userbox .nm{font-weight:600;color:var(--text-strong)}
.link-logout{background:none;border:none;color:var(--brand);cursor:pointer;font-size:12px;padding:0;text-decoration:underline;font-family:inherit}

/* ---------- Tabs ---------- */
.tabbar{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.tabbtn{
  background:none;border:none;border-bottom:2px solid transparent;border-radius:0;
  padding:12px 18px;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;
  margin-bottom:-1px;font-family:inherit;transition:color var(--t)}
.tabbtn:hover{color:var(--brand)}
.tabbtn.active{color:var(--brand);border-bottom-color:var(--brand)}
.tabpane{display:none}
.tabpane.active{display:block}

/* ---------- Card ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;margin-bottom:18px;box-shadow:var(--sh-xs)}
.step.locked{opacity:.45;pointer-events:none}
.step-title{font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--text-strong)}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:13px;font-weight:700;flex:none}
.step-num.alt{background:var(--ink)}
.step-num i{width:15px;height:15px}
.sect-title{font-weight:700;font-size:17px;margin-bottom:14px;color:var(--text-strong);display:flex;align-items:center;gap:8px}
.sect-title .bar{width:3px;height:18px;border-radius:2px;background:var(--brand)}
.sub{color:var(--muted);font-size:14px;margin-top:4px}

/* ---------- Drop zone ---------- */
.drop{
  border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:36px 20px;
  text-align:center;cursor:pointer;transition:var(--t);background:var(--n-50)}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--red-50)}
.drop .ic{width:36px;height:36px;color:var(--brand);margin:0 auto}
.drop .big{font-weight:600;margin-top:10px;color:var(--text-strong)}
.drop .small{color:var(--muted);font-size:13px;margin-top:4px}
.filename{margin-top:14px;font-size:14px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.filename i{width:15px;height:15px}

/* ---------- Buttons ---------- */
button{font-family:inherit;cursor:pointer;border:none;border-radius:var(--r-md);font-weight:600;font-size:15px;padding:12px 20px;transition:var(--t);display:inline-flex;align-items:center;justify-content:center;gap:8px}
button i{width:16px;height:16px}
.btn-primary{background:var(--brand);color:#fff;width:100%;box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:active{background:var(--brand-active);transform:scale(.99)}
.btn-primary:disabled{background:var(--n-300);cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:#fff;border:1px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--red-50)}
.btn-sm{font-size:13px;padding:8px 14px}

/* ---------- Inputs ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
input{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:15px;font-family:inherit;background:#fff;color:var(--text);transition:var(--t)}
input:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}

/* ---------- Alerts ---------- */
.alert{padding:12px 14px;border-radius:var(--r-md);font-size:14px;margin-top:14px;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.alert i{width:16px;height:16px;flex:none;margin-top:2px}
.alert.ok{background:var(--green-50);color:var(--green-700);border:1px solid #bfe3d0}
.alert.warn{background:var(--amber-50);color:var(--amber-700);border:1px solid #ecd9a8}
.alert.err{background:var(--red-50);color:var(--red-700);border:1px solid var(--red-100)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
th,td{text-align:left;padding:10px 11px;border-bottom:1px solid var(--line)}
thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom:2px solid var(--n-200)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background 120ms var(--ease)}
tbody tr:hover{background:var(--n-50)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.rows{color:var(--muted);font-size:12px}
.uname{font-weight:600;color:var(--text-strong)}
.muted{color:var(--faint);font-size:13px}

/* ---------- Spinner ---------- */
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner.dark{border:2px solid var(--red-200);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Downloads ---------- */
.dl-grid{display:grid;gap:10px;margin-top:6px}
.dl-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.dl-item .info{min-width:0}
.dl-item .info .nm{font-weight:600;font-size:14px;color:var(--text-strong);overflow-wrap:anywhere}
.dl-item button{flex:none}
.dl-item .info .de{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- AI card ---------- */
.ai-card{background:linear-gradient(180deg,#fff,var(--red-50));border-color:var(--red-100)}
.ai-item{padding:11px 13px;border-radius:var(--r-md);margin-top:8px;font-size:13px;line-height:1.6}
.ai-sug{background:var(--green-50);border:1px solid #bfe3d0}
.ai-warn{background:var(--amber-50);border:1px solid #ecd9a8}
.ai-head{font-weight:700;margin-top:16px;font-size:14px;display:flex;align-items:center;gap:7px;color:var(--text-strong)}
.ai-head i{width:16px;height:16px}

/* ---------- KPIs (admin) ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:2px}
.kpi .kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.kpi .ico{width:17px;height:17px;color:var(--faint)}
.kpi .val{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.kpi .sub{font-size:12px;color:var(--faint);margin-top:2px}
.kpi.money{border-color:var(--red-100);background:linear-gradient(180deg,var(--red-50),var(--card) 65%)}
.kpi.money .val{color:var(--brand)}
.kpi.money .ico{color:var(--brand)}

/* ---------- Toolbar (admin) ---------- */
.toolbar{display:flex;gap:12px;align-items:flex-end}
.toolbar .fld label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.chart-box{position:relative;height:300px}
.chart-box canvas{max-width:100%}

/* ---------- Login ---------- */
.login-center{text-align:center;padding:46px 20px}
.login-center .ic{width:42px;height:42px;color:var(--brand);margin:0 auto 12px}
.login-center .lead{font-weight:700;font-size:18px;color:var(--text-strong)}
.login-shell{min-height:60vh;display:flex;align-items:center;justify-content:center}
.login-admin{width:100%;max-width:380px;text-align:center}
.login-admin img.logo{height:46px;margin:0 auto 18px}
.login-admin h2{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--text-strong)}
.login-admin p{font-size:14px;color:var(--muted);margin:4px 0 20px}
.login-admin label{text-align:left}

/* ---------- Footer ---------- */
footer{text-align:center;color:var(--faint);font-size:12px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
footer a{color:var(--brand);text-decoration:none;font-weight:500}
footer a:hover{text-decoration:underline}

/* ---------- Segmented toggle + textarea (Haravan → Shopee) ---------- */
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--n-100);border-radius:var(--r-md);margin-bottom:16px;flex-wrap:wrap}
.seg-btn{background:none;color:var(--muted);font-size:14px;padding:8px 14px;border-radius:6px;font-weight:600}
.seg-btn:hover{color:var(--brand)}
.seg-btn.active{background:#fff;color:var(--brand);box-shadow:var(--sh-xs)}
textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:15px;font-family:inherit;background:#fff;color:var(--text);transition:var(--t);resize:vertical;line-height:1.5}
textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ---------- Danh sách chọn sản phẩm ---------- */
.pick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
label.chk{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer}
label.chk input,.pick-item input{width:17px;height:17px;padding:0;border:none;box-shadow:none;accent-color:var(--brand);flex:none;margin:0}
.pick-list{display:grid;gap:8px}
.pick-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;cursor:pointer;font-weight:400;margin:0;transition:var(--t)}
.pick-item:hover{border-color:var(--brand)}
.pick-item.warn{background:var(--amber-50);border-color:#ecd9a8}
.pick-item input{margin-top:20px}
.pick-item img,.pick-item .noimg{width:56px;height:56px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--n-50)}
.pick-item .noimg{display:flex;align-items:center;justify-content:center;color:var(--faint)}
.pick-item .pi{min-width:0;flex:1}
.pick-item .pt{font-size:14px;color:var(--text-strong);line-height:1.4}
.pick-item .pm{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.pick-item .pw{font-size:12.5px;color:var(--amber-700);margin-top:4px;display:flex;gap:6px;align-items:flex-start}
.pick-item .pw i{width:14px;height:14px;flex:none;margin-top:2px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;margin-left:4px;vertical-align:1px}
.tag.amber{color:#fff;background:var(--amber-700)}

/* ---------- Thẻ sản phẩm ở tab Duyệt SP (class z* giữ từ công cụ Dán Zalo cũ) ---------- */
a.btn-ghost{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-md);font-weight:600;text-decoration:none;transition:var(--t)}
a.btn-ghost i{width:16px;height:16px}
select.zsel{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-md);font:inherit;font-size:13px;background:#fff;color:var(--text)}
select.zsel.sm{width:auto;max-width:100%;margin-top:0}
.zitem{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:12px;background:#fff}
.zitem.warn{background:var(--amber-50);border-color:#ecd9a8}
.zitem.err{background:var(--red-50);border-color:var(--red-100)}
.zhead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px}
.zhead label.chk span{font-weight:700;color:var(--text-strong)}
.zstatus{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);text-align:right}
.zstatus i{width:15px;height:15px}
.zok{color:var(--green-700);display:inline-flex;gap:5px;align-items:center;font-weight:600}
.zbad{color:var(--red-700);display:inline-flex;gap:5px;align-items:center;font-weight:600}
.ztitle{font-size:14px;margin-top:8px;line-height:1.5;color:var(--text-strong);overflow-wrap:anywhere}
.zitem .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin-right:4px}
.zlen{font-size:12px;color:var(--muted);white-space:nowrap}
.zlen.bad{color:var(--red-700);font-weight:700}
.zerr{display:flex;gap:6px;align-items:flex-start;color:var(--red-700);font-size:13px;margin-top:8px;font-weight:600}
.zerr i{width:15px;height:15px;flex:none;margin-top:2px}
.zmatch{display:flex;gap:12px;align-items:flex-start;margin-top:10px;padding:10px;border-radius:var(--r-md);background:var(--n-50)}
.zmatch img,.zmatch .noimg{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--line);background:#fff}
.zmatch .noimg{display:flex;align-items:center;justify-content:center;color:var(--faint)}
.zmatch .pi{min-width:0;flex:1}
.zmatch .pm{font-size:12.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.zmatch .pm b{color:var(--text)}
.pw.zw{font-size:12.5px;color:var(--amber-700);margin-top:8px;display:flex;gap:6px;align-items:flex-start}
.pw.zw i{width:14px;height:14px;flex:none;margin-top:2px}
.zph-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.zph-head .lbl{flex:1 1 auto}
.zphotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.zph{position:relative;width:76px;height:76px;border-radius:6px;overflow:hidden;border:1px solid var(--line);flex:none}
.zph img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.zph.cover{border:2px solid var(--brand)}
.zbadge{position:absolute;left:4px;top:4px;font-size:10px;font-weight:700;color:#fff;background:var(--brand);padding:1px 6px;border-radius:999px}
.zx{position:absolute;right:3px;top:3px;width:20px;height:20px;padding:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1}
.zx:hover{background:var(--brand)}
.zdesc{margin-top:10px;font-size:13px}
.zdesc summary{cursor:pointer;color:var(--brand);font-weight:600}
.zdesc pre{white-space:pre-wrap;font-family:inherit;font-size:13px;background:var(--n-50);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin-top:6px;max-height:260px;overflow:auto}
.zres{display:flex;gap:6px;align-items:flex-start;margin-top:10px;padding:9px 11px;border-radius:var(--r-md);font-size:13px;background:var(--green-50);color:var(--green-700);border:1px solid #bfe3d0;overflow-wrap:anywhere}
.zres.warn{background:var(--amber-50);color:var(--amber-700);border-color:#ecd9a8}
.zres.bad{background:var(--red-50);color:var(--red-700);border-color:var(--red-100)}
.zres i{width:15px;height:15px;flex:none;margin-top:2px}
.zres a{color:inherit;font-weight:600}
.znext{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.znext:last-child{border-bottom:none}
.zn-num{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.znext .btn-primary{width:auto}
.zsteps{margin:6px 0 10px 18px;line-height:1.9}
.zsteps code{background:var(--n-100);padding:1px 6px;border-radius:4px;font-size:13px}
.zsteps .btn-sm{padding:3px 9px;font-size:12px;margin-left:4px;vertical-align:1px}
.tabbar{overflow-x:auto;scrollbar-width:none}
.tabbtn{white-space:nowrap}
@media (max-width:600px){ .tabbtn{padding:10px 11px;font-size:14px} }

.sub a{color:var(--brand)}
/* Logo xem trước (logo thật được máy chủ gắn khi đăng) */
.wm{position:absolute;top:3%;right:3%;width:18%;height:auto!important;object-fit:contain!important;pointer-events:none;border:none!important;box-shadow:none!important;background:none!important}
.gph .wm,.zph .wm{width:18%;height:auto}
.zbadge.ai{background:#7a4fa3}
.zph.ai{border:2px solid #7a4fa3}
.qbanner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px dashed #c9b3df;border-radius:var(--r-md);background:#faf6fd}
.qbanner .lbl{display:inline-flex;align-items:center;gap:5px;color:#5e3a85}
.qbanner .lbl i{width:14px;height:14px}
.qbanner.busy{color:#5e3a85;font-size:13.5px}
.qsize{width:130px;padding:7px 10px;font-size:13px}
.qbanner optgroup{font-weight:700;color:var(--muted)}
.qb-save{border-color:#c9b3df;color:#5e3a85}
.qb-save:hover{background:#f3ecfa;border-color:#7a4fa3;color:#5e3a85}
.qbanner .qb-del{font-size:12.5px;color:var(--muted);font-weight:500;align-self:center}
.qb-chg{color:#5e3a85}
.qbanner .seg.seg-sm{margin:0;padding:3px;gap:2px}
.qbanner .seg.seg-sm .seg-btn{font-size:12.5px;padding:5px 10px}
.title-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:16px;margin-bottom:6px}
.title-head label{margin:0;flex:1}
.title-head .btn-sm{flex:none;padding:6px 11px;font-size:12.5px}
.sug-list{display:grid;gap:6px;margin-top:8px}
.sug-list .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.sug{display:flex;align-items:center;gap:8px;justify-content:flex-start;text-align:left;width:100%;padding:10px 12px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-md);font-weight:500;font-size:14px;color:var(--text)}
.sug span{flex:1}
.sug small{color:var(--faint);font-weight:400;font-size:11.5px;white-space:nowrap}
.sug i{width:15px;height:15px;color:var(--brand);flex:none}
.sug:hover,.sug.on{border-color:var(--brand);background:var(--red-50)}
.grid2 .span2{grid-column:1/-1}
.hidden{display:none!important}
.ic-inline{width:15px;height:15px;vertical-align:-2px;flex:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  header.topbar{align-items:flex-start}
  .brand img.logo{height:44px}
  .brand .titles h1{font-size:24px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:430px){
  .kpis{grid-template-columns:1fr 1fr}
  .brand .divider{display:none}
}

/* ---------- Hộp đăng nhập lại (session.js) ---------- */
.hc-lightbox{position:fixed;inset:0;background:rgba(10,10,10,.85);display:none;align-items:center;justify-content:center;z-index:999;padding:16px;cursor:zoom-out}
.hc-lightbox.show{display:flex}
.hc-lightbox img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:var(--sh-lg)}

/* ---------- Trang Gửi SP (gui.html) — ưu tiên điện thoại ---------- */
.wrap.narrow{max-width:640px}
.seg.seg-full{display:flex;width:100%}
.seg.seg-full .seg-btn{flex:1}
.seg-btn i{width:16px;height:16px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;margin-left:2px}
.row-inline{display:flex;gap:8px}
.row-inline input{flex:1;min-width:0;text-transform:uppercase;font-weight:600;letter-spacing:.02em}
.row-inline button{flex:none}
details.quick{margin-top:12px;font-size:14px}
details.quick summary{cursor:pointer;color:var(--brand);font-weight:600}
details.quick textarea{margin-top:8px;font-size:14px}
.gprod{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);margin:10px 0 0;cursor:pointer;font-weight:400;background:#fff;transition:var(--t)}
.gprod.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--red-100)}
.gprod input{width:18px;height:18px;margin-top:18px;accent-color:var(--brand);flex:none;padding:0;border:none;box-shadow:none}
.gprod img,.gprod .noimg{width:56px;height:56px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--n-50)}
.gprod .noimg,.mitem .noimg{display:flex;align-items:center;justify-content:center;color:var(--faint)}
.gprod .pi,.mitem .pi{min-width:0;flex:1}
.gprod .pt,.mitem .pt{font-size:14px;color:var(--text-strong);line-height:1.4;overflow-wrap:anywhere}
.gprod .pm,.mitem .pm{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.gprod .pw{font-size:12.5px;color:var(--amber-700);margin-top:5px;display:flex;gap:6px;align-items:flex-start}
.gprod .pw i{width:14px;height:14px;flex:none;margin-top:2px}
.pick-photos{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:2px dashed var(--line-strong);border-radius:var(--r-md);background:var(--n-50);color:var(--brand);font-size:15px;font-weight:700;cursor:pointer;margin:0;transition:var(--t)}
.pick-photos:hover{border-color:var(--brand);background:var(--red-50)}
.pick-photos i{width:22px;height:22px}
.gphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
.gph{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--n-50)}
.gph.cover{border:2px solid var(--brand)}
.gph img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.gnum{position:absolute;left:4px;top:4px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:999px}
.gph .zx{width:26px;height:26px;font-size:16px;right:4px;top:4px}
.cinfo{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13.5px;color:var(--green-700);background:var(--green-50);border:1px solid #bfe3d0;border-radius:var(--r-md);padding:10px 12px}
.cinfo i{width:16px;height:16px;flex:none;margin-top:2px}
.ctitle{font-weight:700;font-size:14.5px;margin-top:18px;color:var(--text-strong)}
.ctitle .muted{font-weight:400}
.crow{border:1px solid var(--line);border-radius:var(--r-md);margin-top:8px;background:#fff;overflow:hidden}
.crow.need{border-color:#ecd9a8;background:var(--amber-50)}
.chead{width:100%;background:none;color:var(--text);padding:10px 12px;border-radius:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name state" "meta state";text-align:left;gap:2px 10px;font-weight:400}
.cname{grid-area:name;font-weight:700;font-size:15px;color:var(--text-strong)}
.cmeta{grid-area:meta;font-size:12.5px;color:var(--muted)}
.cstate{grid-area:state;display:flex;align-items:center}
.cstate img{width:48px;height:48px;border-radius:6px;object-fit:cover;border:2px solid var(--brand)}
.cneed{font-size:13px;font-weight:700;color:var(--amber-700);border:1px dashed var(--amber-500);border-radius:6px;padding:8px 10px}
.cnone{font-size:12.5px;color:var(--muted)}
.cpicker{display:flex;gap:8px;overflow-x:auto;padding:4px 12px 12px;scroll-snap-type:x proximity}
.cp{flex:none;width:72px;height:72px;padding:0;border-radius:8px;overflow:hidden;border:2px solid var(--line);background:#fff;scroll-snap-align:start}
.cp img{width:100%;height:100%;object-fit:cover;display:block}
.cp.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--red-100)}
.cp.none{font-size:11px;font-weight:600;color:var(--muted);line-height:1.3;padding:4px}
.cnt{float:right;font-weight:500;color:var(--muted);font-size:12px}
.cnt.bad{color:var(--red-700);font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
select.sel{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r-md);font:inherit;font-size:15px;background:#fff;color:var(--text)}
.auto-facts{margin-top:14px;padding:10px 12px;border-radius:var(--r-md);background:var(--n-50);border:1px solid var(--line)}
.auto-facts .lbl,.desc-head .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px;font-size:13.5px}
.facts span{display:inline-flex;align-items:center;gap:6px}
.facts i{width:15px;height:15px;color:var(--muted)}
.desc-head{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.desc-head label.chk{font-size:13px}
.desc-preview{white-space:pre-wrap;font-family:inherit;font-size:13.5px;line-height:1.6;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-top:6px;color:var(--text)}
#descEdit{margin-top:6px;font-size:14px}
.submit-bar{position:sticky;bottom:0;z-index:20;background:rgba(247,246,246,.97);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(20,20,20,.06);padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-bottom:8px}
.todo{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--amber-700);margin-bottom:8px;line-height:1.45}
.todo.ok{color:var(--green-700)}
.todo i{width:15px;height:15px;flex:none;margin-top:2px}
.done-box{text-align:center;padding:10px 4px}
.done-box .ic{width:46px;height:46px;color:var(--green-500);margin:0 auto 8px}
.done-box .lead{font-weight:700;font-size:19px;color:var(--text-strong)}
.mine-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mitem{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;margin-bottom:10px}
.mitem img,.mitem .noimg{width:60px;height:60px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--n-50)}
.mitem.st-red{border-color:var(--red-100);background:var(--red-50)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;margin-right:4px;vertical-align:1px}
.chip i{width:12px;height:12px}
.chip.amber{color:var(--amber-700);background:var(--amber-50);border:1px solid #ecd9a8}
.chip.green{color:var(--green-700);background:var(--green-50);border:1px solid #bfe3d0}
.chip.red{color:#fff;background:var(--brand)}
.chip.gray{color:var(--muted);background:var(--n-100)}
.mnote{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--red-700);margin-top:6px}
.mnote i{width:14px;height:14px;flex:none;margin-top:2px}
.mact{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.linkbtn{background:none;border:none;padding:0;color:inherit;text-decoration:underline;font-weight:700;font-size:inherit;display:inline}
@media (max-width:480px){
  .grid2{grid-template-columns:1fr}
  .card{padding:18px 16px}
  .gphotos{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Duyệt SP (index.html) ---------- */
.tabbtn .badge{vertical-align:2px;margin-left:5px}
.seg-btn .badge{margin-left:6px}
.q-actions{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.97);border-top:1px solid var(--line);margin:14px -24px -24px;padding:12px 24px 14px;border-radius:0 0 var(--r-lg) var(--r-lg)}
.qitem.done{background:var(--green-50);border-color:#bfe3d0}
.qwho{font-size:12.5px;color:var(--muted);margin-left:auto;margin-right:10px;white-space:nowrap}
.qrow{display:flex;align-items:center;gap:8px;margin-top:10px}
.qrow .lbl{flex:none}
.qtitle{flex:1;min-width:0;padding:8px 10px;font-size:14px;font-weight:600}
.qrow .zlen.bad{color:var(--red-700);font-weight:700}
.qcol{position:absolute;left:0;right:0;bottom:0;background:rgba(190,30,45,.88);color:#fff;font-size:10.5px;font-weight:700;text-align:center;padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qmap{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qact{margin-top:10px}
.qrej{margin-top:10px;padding:12px;border:1px solid var(--red-100);background:var(--red-50);border-radius:var(--r-md)}
.qreasons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.qreasons .chip{cursor:pointer;border:1px solid var(--line);padding:5px 10px;font-size:12px}
.qreasons .chip:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.qrej input{font-size:14px;padding:9px 11px}
.qrej-btns{display:flex;gap:8px;margin-top:8px}
.qrej-btns .btn-primary{width:auto}
.q-empty{display:flex;gap:12px;align-items:center;padding:18px;border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--text)}
.q-empty i{width:28px;height:28px;color:var(--faint);flex:none}
details.q-recent summary{cursor:pointer;font-weight:700;color:var(--text-strong)}
.qhist{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.qhist:last-child{border-bottom:none}
.qhist a{color:var(--brand);font-weight:600}
.qhist input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--brand)}
.qhist-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 4px}
.qhist-tools .hint{margin:0}
.sinline{display:grid;gap:10px;margin-top:10px}
.sinline .alert{margin:0}
.sinline .btn-primary{width:auto}
details.sdetail summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:13.5px}
details.sdetail[open] summary{margin-bottom:10px}
.stag{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:2px 7px;border-radius:999px;margin-left:6px;font-weight:600}
.stag.ai{color:#fff;background:var(--brand);border-color:var(--brand)}
.stag.kept{color:var(--green-700);border-color:var(--green-500);background:var(--green-50)}
.stag.cut{color:#fff;background:var(--amber-700);border-color:var(--amber-700)}
@media (max-width:480px){
  .q-actions{margin:14px -16px -18px;padding:12px 16px}
  .qwho{display:none}
}

/* ===== 👥 Nhân viên & phân quyền ===== */
.userbox .ur{font-size:11.5px;color:var(--muted);line-height:1.3}
.linkbtn{background:none;border:none;padding:0;color:inherit;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.nv-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nv-checks{border:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nv-checks legend{font-size:13px;font-weight:600;margin-bottom:8px;padding:0}
.nv-check{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px;border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.nv-check:hover{border-color:var(--brand)}
.nv-check:has(input:checked){border-color:var(--brand);background:var(--red-50)}
.nv-check input{width:17px;height:17px;padding:0;margin:2px 0 0;border:none;box-shadow:none;accent-color:var(--brand);flex:none}
.nv-check b{display:block;font-size:14px;color:var(--text-strong)}
.nv-check small{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.nv-actions{display:flex;gap:8px;margin-top:16px}
.nv-actions .btn-primary{width:auto}
.nv-listhead{justify-content:space-between;flex-wrap:wrap;gap:10px}
.nv-listhead .muted{font-weight:400}
.nv-search{max-width:240px;padding:8px 12px;font-size:14px}
.nv-table{display:flex;flex-direction:column}
.nv-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.nv-row:first-child{border-top:none}
.nv-row.owner{background:var(--paper);margin:0 -12px;padding:12px;border-radius:var(--r-md);border-top:none}
.nv-row.editing{background:var(--red-50);margin:0 -12px;padding:12px;border-radius:var(--r-md)}
.nv-who{display:flex;gap:10px;align-items:center;min-width:0}
.nv-who b{display:block;font-size:14px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-who .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-av{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--n-100);color:var(--n-700);font-weight:700;font-size:14px;object-fit:cover}
.nv-note{display:inline-block;margin-top:4px;font-size:11.5px;color:var(--amber-700);background:var(--amber-50);border:1px solid #ecd9a8;border-radius:var(--r-pill);padding:1px 8px}
.nv-roles{display:flex;flex-wrap:wrap;gap:5px}
.rchip{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--text);background:#fff;white-space:nowrap}
.rchip.r-kho{color:#1d4f7a;background:#e8f1f9;border-color:#c5dbee}
.rchip.r-ban_hang{color:var(--green-700);background:var(--green-50);border-color:#bfe3d0}
.rchip.r-quan_ly{color:var(--red-700);background:var(--red-50);border-color:var(--red-100)}
.rchip.r-chu{color:#fff;background:var(--ink);border-color:var(--ink)}
.nv-seen{font-size:13px;color:var(--muted)}
.nv-act{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.nv-act.muted{font-size:12.5px}
.nv-del.armed{background:var(--brand);border-color:var(--brand);color:#fff}
.nv-who>div{min-width:0}
.tabbtn .tshort{display:none}
@media (max-width:480px){
  .tabbar{gap:0}
  .tabbtn{padding:10px 8px;font-size:13.5px;white-space:nowrap}
  .tabbtn .tlong,.tabbtn .tico{display:none}
  .tabbtn .tshort{display:inline}
}
@media (max-width:760px){
  .nv-fields,.nv-checks{grid-template-columns:1fr}
  .nv-search{max-width:none;width:100%}
  .nv-row{grid-template-columns:1fr auto;gap:8px 10px}
  .nv-row .nv-roles{grid-column:1/-1;order:3}
  .nv-row .nv-seen{grid-column:1/-1;order:4;font-size:12.5px}
  .nv-row .nv-act{grid-column:2;grid-row:1}
}

/* ===== Khung app theo vai trò (index.html): thanh điều hướng Công việc / Quản trị ===== */
body.app{padding:0}
.shell{--appbar-h:64px;display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.shell.hidden{display:none}
.shell.solo{grid-template-columns:minmax(0,1fr)}
/* desktop: thanh bên cố định — ghi đè kiểu mặc định của popover */
/* lưu ý: "inset" phải đứng TRƯỚC "top" (inset là viết tắt của top/right/bottom/left — đứng sau sẽ xoá top:0 → thanh trôi theo trang) */
.snav{display:flex;flex-direction:column;gap:2px;inset:auto;position:sticky;top:0;align-self:start;margin:0;width:auto;height:100vh;height:100dvh;
  overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--text);border:0;border-right:1px solid var(--line);padding:0 12px 14px;box-sizing:border-box;z-index:35}
.shell.solo .snav{display:none}
.snav-logo{display:flex;align-items:center;flex:none;height:var(--appbar-h);margin:0 -12px 6px;padding:0 22px;border-bottom:1px solid var(--line)}
.snav-logo img{height:38px;display:block}
.snav-grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:16px 10px 6px}
.snav-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:40px;background:none;border:0;border-radius:var(--r-md);
  padding:8px 10px;font:inherit;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;text-decoration:none;text-align:left;box-shadow:none}
.snav-item svg{width:18px;height:18px;flex:none;color:var(--muted)}
.snav-item:hover{background:var(--paper)}
.snav-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.snav-item.active{background:var(--red-50);color:var(--brand);font-weight:700}
.snav-item.active svg{color:var(--brand)}
.snav-item .badge{margin-left:auto}
.snav-item svg.ext{margin-left:auto;width:14px;height:14px;color:var(--faint)}
.badge.amber{background:var(--amber-500)}
.snav-shade{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:59}
.main{min-width:0;display:flex;flex-direction:column}
/* thanh trên: dính đỉnh khi cuộn — tiêu đề màn hình (trái) + tài khoản (phải) */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;min-height:var(--appbar-h);padding:8px 24px 8px 32px;width:100%;box-sizing:border-box;
  background:#fff;border-bottom:1px solid var(--line)}
.appbar-titles{min-width:0;flex:1}
.appbar h1{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.015em;color:var(--text-strong);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-sub{font-size:13px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-menu{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-md);border:1px solid var(--line);background:#fff;color:var(--text);padding:0;box-shadow:none;flex:none}
.appbar-menu svg{width:20px;height:20px}
.appbar-logo{display:none;height:36px;flex:none}
.shell.solo .appbar-logo{display:block}
/* nút tài khoản góc phải (giống Haravan): tên + vai trò + ảnh đại diện → menu */
.acct-btn{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:290px;padding:4px 4px 4px 14px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--text-strong);box-shadow:none;font-size:14px;font-weight:600}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{border-color:var(--line-strong);background:var(--paper)}
.acct-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.acct-txt{display:flex;flex-direction:column;align-items:flex-end;min-width:0;line-height:1.2;text-align:right}
.acct-nm{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-role{font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.acct-av{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--brand);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-menu .um-who .acct-av{width:42px;height:42px;font-size:15px;color:#fff}
.umenu.acct-menu{inset:calc(var(--appbar-h, 64px) + 6px) 20px auto auto}
.acct-menu .um-who{flex-direction:row;align-items:center;gap:12px}
.acct-menu .um-who>div{display:flex;flex-direction:column;min-width:0}
.acct-menu .um-who .um-role{font-size:12px;color:var(--brand);font-weight:600;margin-top:2px}
.views{padding:24px clamp(20px,2.2vw,44px) 56px;width:100%;box-sizing:border-box}   /* dùng hết bề ngang (bỏ giới hạn 1300px, 30/10/2026) */
.views.full{max-width:none}
.views :is(.card,.q-detail,form,.alert){scroll-margin-top:calc(var(--appbar-h) + 12px)}
.view{display:none}
.view.active{display:block}
.view-mid{max-width:none}
.t-ic{width:18px;height:18px;color:var(--brand)}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .snav{position:fixed;inset:0 auto 0 0;height:100dvh;width:min(300px,84vw);border-right:1px solid var(--line);box-shadow:var(--sh-lg);z-index:60}
  .snav:not(.open){display:none}
  .snav::backdrop{background:rgba(0,0,0,.35)}
  .shell{--appbar-h:58px}
  .appbar{padding:8px 12px;gap:10px}
  .acct-txt{display:none}
  .acct-btn{padding:3px;gap:0}
  .umenu.acct-menu{inset:calc(var(--appbar-h, 58px) + 4px) 10px auto auto}
  .appbar-menu{display:inline-flex}
  .shell.solo .appbar-menu{display:none}
  .appbar-logo{display:block;height:28px}
  .appbar h1{font-family:var(--font-body);font-size:17px;font-weight:700}
  .appbar-sub{display:none}
  .views{padding:14px 14px 40px}
}
@supports selector(:popover-open){
  @media (max-width:900px){ .snav:popover-open{display:flex} }
}

/* ===== Xử lý hàng hoá (kho · máy tính): 2 cột ===== */
.kho-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:18px;align-items:start}
.kho-side{position:sticky;top:calc(var(--appbar-h, 0px) + 16px)}
.kho-file{display:flex;align-items:center;gap:12px;border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:12px 14px;background:var(--n-50)}
.kho-file.hidden{display:none}
.kf-ic{width:28px;height:28px;color:var(--green-500);flex:none}
.kf-info{min-width:0;flex:1}
.kf-info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong)}
#khoPick.over{outline:2px dashed var(--brand);outline-offset:4px}
.kho-check-head{justify-content:space-between}
.kho-t{display:flex;align-items:center;gap:10px}
.kho-issues{display:flex;flex-direction:column;gap:8px}
.kho-issue{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.pill-w,.pill-g{flex:none;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;margin-top:1px}
.pill-w{color:var(--amber-700);background:var(--amber-50);border:1px solid #ecd9a8}
.pill-g{color:var(--green-700);background:var(--green-50);border:1px solid #bfe3d0}
.kho-ai{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.kho-ai-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.kho-ai-head .btn-sm{flex:none}
.kho-ai .kho-issues{margin-top:10px}
.kho-fix{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.kho-fix.hidden{display:none}
#dlAllBtn{margin-bottom:8px}
#dlAllBtn.warn{background:var(--amber-700)}
#dlCard .dl-grid{margin-top:12px}
#dlCard .dl-item{padding:10px 12px}
.hist-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.hist-row:first-child{border-top:none}
.hist-info{min-width:0}
.hist-row .btn-sm{flex:none}
@media (max-width:1050px){
  .kho-grid{grid-template-columns:minmax(0,1fr)}
  .kho-side{position:static}
}
@media (max-width:600px){ .kho-ai-head{flex-direction:column;align-items:stretch} }

/* ===== Duyệt SP: danh sách | chi tiết (≥1100px) — điện thoại giữ thẻ xếp chồng ===== */
.q-layout{display:flex;flex-direction:column}
.q-side{display:contents}
.q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:16px;color:var(--text-strong)}
.q-head #qCount{color:var(--muted);font-weight:600}
.q-index{display:none}
.q-detail{min-width:0}
.q-layout .q-actions{order:3;margin:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh-md)}
.qnext{display:flex;gap:14px;align-items:center}
.qnext .qn-ic{width:30px;height:30px;color:var(--brand);flex:none}
.qnext .btn-primary{width:auto;flex:none;margin-left:auto}
@media (min-width:1100px){
  .q-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:start}
  .q-side{display:flex;flex-direction:column;position:sticky;top:calc(var(--appbar-h, 0px) + 16px);max-height:calc(100vh - var(--appbar-h, 0px) - 32px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);overflow:hidden}
  .q-head{padding:14px 14px 10px;margin:0;border-bottom:1px solid var(--line)}
  .q-index{display:block;overflow:auto;padding:8px}
  .q-layout .q-actions{position:static;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;margin:0}
  #qList .qitem:not(.sel){display:none}
  #qList .qitem{padding:20px}
  #qList .zphotos{gap:10px}
  #qList .zph{width:132px;height:132px}
  #qList .zph .wm{width:16%}
}
.qi-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r-md);border:1px solid transparent}
.qi-row+.qi-row{margin-top:4px}
.qi-row.sel{background:var(--red-50);border-color:var(--red-100)}
.qi-row.done{opacity:.6}
.qi-row input{width:17px;height:17px;margin:0;padding:0;border:none;box-shadow:none;accent-color:var(--brand);flex:none}
.qi-btn{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex:1;min-width:0;background:none;border:0;padding:4px;text-align:left;font:inherit;color:inherit;cursor:pointer;box-shadow:none;border-radius:var(--r-sm)}
.qi-btn:focus-visible{outline:2px solid var(--brand)}
.qi-btn img,.qi-noimg{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--n-100)}
.qi-txt{min-width:0;flex:1;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.qi-txt b{color:var(--text-strong);font-size:14px}
.qi-txt span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qi-st{width:17px;height:17px;flex:none}
.qi-st.ok{color:var(--green-500)}.qi-st.bad{color:var(--red-600)}.qi-st.warn{color:var(--amber-500)}
.q-index-empty{padding:8px 6px}

/* ===== Việc sau duyệt ===== */
.after-intro{margin:-4px 0 16px}
.after-day.done{background:var(--n-50)}
.after-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:15px}
.after-task{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.after-ic{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.after-ic svg{width:15px;height:15px}
.after-task.done .after-ic{background:var(--green-500)}
.after-body{min-width:0;flex:1}
.after-t{font-size:14.5px}
.after-t .muted{margin-left:4px}
.after-how{margin-top:6px;font-size:13.5px}
.after-how summary{cursor:pointer;color:var(--brand);font-weight:600}
.after-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.after-act .btn-primary{width:auto}
.after-items{margin-top:4px;border-top:1px solid var(--line);padding-top:10px;font-size:13.5px}
.after-items summary{cursor:pointer;font-weight:600;color:var(--text)}
.after-item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.after-item:last-child{border-bottom:none}
.after-item .ai-title{flex:1;min-width:160px;color:var(--muted)}

/* ===== Báo cáo + Cài đặt ===== */
.rep-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.rep-toolbar label{margin:0}
.rep-toolbar input{width:auto;padding:8px 10px}
#view-bao-cao .kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.set-link{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.set-link code{flex:1;min-width:200px;background:var(--n-100);padding:9px 12px;border-radius:var(--r-md);font-size:14px;overflow-wrap:anywhere}
.set-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:14px}
.set-row{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.set-row:first-child{border-top:none}
.set-row>span:first-child{width:130px;flex:none;color:var(--muted)}
.set-row code{background:var(--n-100);padding:1px 6px;border-radius:4px;font-size:13px}
@media (max-width:600px){ .set-cols{grid-template-columns:1fr} .set-row{flex-direction:column;gap:2px} .qnext{flex-wrap:wrap} .qnext .btn-primary{margin-left:0} }

/* ===== Gửi SP (gui.html · điện thoại): 5 bước, chạm chọn, thanh dưới cố định ===== */
body.gui{padding:0;padding-bottom:calc(150px + env(safe-area-inset-bottom))}
.gbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;background:#fff;border-bottom:1px solid var(--line);padding:8px 14px;min-height:56px;box-sizing:border-box}
.gbar-logo{height:30px;flex:none}
.gbar-t{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.gbar-t b{font-size:16px;color:var(--text-strong)}
.gbar-sub{font-size:12px;color:var(--muted)}
.gbar-user{width:38px;height:38px;border-radius:50%;padding:0;background:var(--n-100);color:var(--n-700);font-weight:700;font-size:15px;flex:none;overflow:hidden;box-shadow:none}
.gbar-user img{width:100%;height:100%;object-fit:cover}
.umenu{position:fixed;inset:60px 12px auto auto;margin:0;width:min(280px,calc(100vw - 24px));background:#fff;color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;z-index:70}
.umenu:not(.open){display:none}
@supports selector(:popover-open){ .umenu:popover-open{display:block} }
.um-who{display:flex;flex-direction:column;padding:10px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:14px}
.um-who span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.um-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;background:none;border:0;border-radius:var(--r-md);padding:11px 10px;font:inherit;font-size:14.5px;font-weight:500;color:var(--text);text-decoration:none;box-shadow:none}
.um-item:hover{background:var(--paper)}
.um-item svg{width:18px;height:18px;color:var(--muted)}
.gmain{max-width:560px;margin:0 auto;padding:14px 14px 0}
.gmain #loginCard{margin-top:12px}
.rej-banner{display:flex;align-items:center;gap:10px;background:var(--red-50);border:1px solid var(--red-100);color:var(--red-700);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px;font-size:13.5px;line-height:1.4}
.rej-banner.hidden{display:none}
.rej-banner>svg{width:18px;height:18px;flex:none}
.rej-banner>div{flex:1;min-width:0}
.rej-banner .btn-primary{width:auto;flex:none}
.gsteps{list-style:none;display:flex;gap:4px;margin:0 0 14px;padding:0}
.gsteps.hidden{display:none}
.gsteps li{flex:1;min-width:0}
.gsteps button{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;background:none;border:0;padding:4px 0;font-size:11.5px;font-weight:600;color:var(--muted);box-shadow:none;border-radius:0}
.gsteps button i{display:block;width:100%;height:4px;border-radius:2px;background:var(--n-200)}
.gsteps li.done button{color:var(--green-700)}
.gsteps li.done button i{background:var(--green-500)}
.gsteps li.cur button{color:var(--brand)}
.gsteps li.cur button i{background:var(--brand)}
.gsteps button:disabled{opacity:.55;cursor:default}
.gstep.hidden{display:none}
.gstep-t{font-size:19px;font-weight:700;color:var(--text-strong);margin:0 0 12px;outline:none}
.gstep .hint{margin-top:10px}
.gfield{margin-bottom:14px}
.glabel{display:block;font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:7px}
.glabel .muted{font-weight:400}
.gchips{display:flex;flex-wrap:wrap;gap:7px}
.gchips+input{margin-top:8px}
.gchip{min-height:38px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--text);font-size:14px;font-weight:500;box-shadow:none}
.gchip.on{border-color:var(--brand);background:var(--red-50);color:var(--brand);font-weight:700}
.gmore{margin:4px 0 14px;font-size:14px}
.gmore summary{cursor:pointer;color:var(--brand);font-weight:600}
.gmore textarea{margin-top:8px}
.grev{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.grev img{width:84px;height:84px;border-radius:8px;object-fit:cover;flex:none;border:1px solid var(--line)}
.grev-i{min-width:0;flex:1}
.grev-t{font-weight:700;font-size:15px;color:var(--text-strong);line-height:1.4}
.grev .pm{font-size:13px;color:var(--muted);margin-top:4px}
.grev-c{margin-top:6px}
.grev-edit{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:13px}
.grev-edit .linkbtn{color:var(--brand)}
.gfoot{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(20,20,20,.06)}
.gfoot.hidden{display:none}
.gnav{max-width:560px;margin:0 auto;padding:8px 14px 8px}
.gnav.hidden{display:none}
.gnav .todo{margin-bottom:6px}
.gnav .todo:empty{display:none}
.gnav-btns{display:flex;gap:8px}
.gnav-btns .btn-ghost{flex:0 0 auto;padding:12px 16px}
.gnav-btns .btn-primary{flex:1;min-height:48px}
.gnav-btns .btn-primary.dim{opacity:.55}
.todo.flash{animation:hcflash .5s 2}
@keyframes hcflash{50%{background:var(--amber-50)}}
@media (prefers-reduced-motion:reduce){ .todo.flash{animation:none;font-weight:700} }
.gtabs{display:flex;max-width:560px;margin:0 auto;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.gtab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;border-radius:0;padding:7px 0 8px;font-size:12px;font-weight:600;color:var(--muted);box-shadow:none;position:relative}
.gtab svg{width:20px;height:20px}
.gtab.active{color:var(--brand)}
.gtab .badge{position:absolute;top:4px;left:calc(50% + 8px)}
.mact .btn-ghost.armed{background:var(--brand);border-color:var(--brand);color:#fff}
@media (min-width:700px){ body.gui{background:var(--paper)} }
.kho-issues+.kho-issue{margin-top:8px}
.after-act .linkbtn{font-size:13px;font-weight:500;color:var(--muted)}

/* ===== Đăng nhập: Google hoặc tên đăng nhập/email + mật khẩu (session.js HC.mountLogin) ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hcl{text-align:left;margin-top:4px}
.hcl-g{display:flex;flex-direction:column;align-items:center;min-height:44px;justify-content:center}
.hcl-gbtn{display:flex;justify-content:center;max-width:100%}
.hcl-gnote{font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center;background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:8px 10px}
.hcl-or{display:flex;align-items:center;gap:10px;margin:18px 0 14px;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.hcl-or::before,.hcl-or::after{content:"";flex:1;height:1px;background:var(--line)}
.hcl-form label{margin-top:12px}
.hcl-form label:first-of-type{margin-top:0}
.hcl-lrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px}
.hcl-lrow label{margin:0 0 6px}
.hcl-link{background:none;border:0;padding:4px 0;box-shadow:none;font:inherit;font-size:13px;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:2px;cursor:pointer;width:auto;margin:0;display:inline}
.hcl-link:hover{color:var(--brand-hover)}
.hcl-pw{position:relative}
.hcl-pw input{padding-right:46px}
.hcl-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;margin:0;background:none;border:0;border-radius:var(--r-md);color:var(--muted);box-shadow:none}
.hcl-eye:hover{color:var(--text-strong);background:var(--paper)}
.hcl-eye svg{width:19px;height:19px}
.hcl-eye[aria-pressed="true"]{color:var(--brand)}
.hcl-submit{margin-top:16px}
.hcl-msg.alert{margin-top:12px}
.hcl-ftitle{font-weight:700;font-size:16px;color:var(--text-strong)}
.hcl .hcl-fsub{font-size:13.5px;color:var(--muted);line-height:1.5;margin:4px 0 14px}
.hcl-back{display:block;margin:14px auto 0}
.login-center .hcl{max-width:340px;margin:18px auto 0}
.login-center #loginErr{max-width:340px;margin-left:auto;margin-right:auto}
.login-admin #loginErr{margin:0 0 14px}

/* ===== Hộp thoại dùng chung: đăng nhập lại, Tài khoản & mật khẩu (<dialog class="hc-dlg">) ===== */
.hc-dlg{margin:auto;border:0;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px;width:min(400px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;color:var(--text);background:#fff}
.hc-dlg[open]:not(:modal){position:fixed;inset:12px;margin:auto;z-index:1000;height:fit-content}
.hc-dlg::backdrop{background:rgba(20,20,20,.45)}
.hc-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hc-dlg-title{font-weight:700;font-size:17px;color:var(--text-strong)}
.hc-dlg-sub{font-size:14px;color:var(--muted);margin:6px 0 14px;line-height:1.5}
.hc-dlg-x{width:38px;height:38px;padding:0;background:none;border:0;color:var(--muted);flex:none;box-shadow:none}
.hc-dlg-x:hover{background:var(--paper);color:var(--text-strong)}
.hc-dlg-x svg{width:20px;height:20px}
.hc-dlg-later{display:block;margin:14px auto 0;color:var(--muted);font-weight:500}
.hc-account .hc-dlg-body{margin-top:10px}
.hca-email{display:flex;flex-direction:column;gap:2px;background:var(--paper);border-radius:var(--r-md);padding:10px 12px;font-size:12.5px;color:var(--muted)}
.hca-email b{font-size:14.5px;color:var(--text-strong);overflow-wrap:anywhere}
.hca-note{font-size:13px;color:var(--muted);line-height:1.5;margin:10px 0 14px}
.hca-form label{margin-top:12px}
.hca-sep{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-weight:700;font-size:14.5px;color:var(--text-strong)}
.hca-sep .muted{font-weight:400;font-size:12.5px}
.hca-save{margin-top:16px}

/* ===== Nhân viên: tên đăng nhập, mật khẩu, link đặt mật khẩu ===== */
.nv-login{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:4px;font-size:11.5px}
.nv-un{font-weight:600;color:var(--text);background:var(--n-100);border-radius:var(--r-pill);padding:1px 8px}
.nv-pw{color:var(--muted);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:0 8px}
.nv-pw.ok{color:var(--green-700);border-color:#bfe3d0;background:var(--green-50)}
.nv-link{grid-column:1/-1;background:var(--amber-50);border:1px solid #ecd9a8;color:var(--amber-700);border-radius:var(--r-md);padding:10px 12px;font-size:13px;line-height:1.5}
.nv-link.ok{background:var(--green-50);border-color:#bfe3d0;color:var(--green-700)}
.nv-link-row{display:flex;gap:8px;margin-top:8px}
.nv-link-row input{flex:1;min-width:0;font-size:13px;padding:8px 10px;color:var(--text)}
.nv-link-row button{flex:none}
.nv-fields{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:760px){
  /* điện thoại: nút (Link mật khẩu / Sửa / Xoá) xuống hàng riêng để tên + email không bị ép */
  .nv-row{grid-template-columns:minmax(0,1fr)}
  .nv-row .nv-act{grid-column:1/-1;grid-row:auto;order:5;justify-content:flex-start}
  .nv-row .nv-act:empty{display:none}
  .nv-row .nv-link{order:6}
  .nv-link-row input{font-size:12.5px}
}

/* ===== Trang đặt mật khẩu (dat-mat-khau.html) ===== */
.rp-page .login-shell{min-height:100dvh;padding:16px}
.rp-card{max-width:400px}
.rp-wait{display:flex;justify-content:center;padding:20px}
.rp-form{text-align:left}
.rp-form label{margin-top:14px}
.rp-acc{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 12px;background:var(--paper);border-radius:var(--r-md);font-size:13px;color:var(--muted);margin-bottom:6px}
.rp-acc b{color:var(--text-strong);font-size:14px;overflow-wrap:anywhere;text-align:right}
.rp-btn{margin-top:18px;text-decoration:none;display:flex}
.rp-left{text-align:left}
.rp-card .rp-help{font-size:13.5px;color:var(--muted);line-height:1.5;margin:12px 0 0;text-align:left}
.nv-mailerr{margin:0 0 12px}
.set-auto{margin-left:8px;vertical-align:middle;padding:5px 12px}

/* ===== AI kiểm duyệt (thẻ Duyệt SP, Lịch sử, Cài đặt, trang Gửi SP) ===== */
.qai{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin:8px 0;background:var(--n-50);font-size:13px;line-height:1.5;color:var(--text)}
.qai.run{display:flex;gap:8px;align-items:flex-start;background:var(--amber-50);border-color:#ecd9a8;color:var(--amber-700)}
.qai.run .spinner{flex:none;margin-top:2px}
.qai.v-pass{background:var(--green-50);border-color:#bfe3d0}
.qai.v-review{background:var(--amber-50);border-color:#ecd9a8}
.qai.v-fail{background:var(--red-50);border-color:var(--red-100)}
.qai-head{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.qai-head .chip{margin-right:0}
.qai-sum{min-width:0;flex:1 1 220px;color:var(--text)}
.qai-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.qai-list li{display:flex;gap:6px;align-items:flex-start;overflow-wrap:anywhere}
.qai-list svg{width:14px;height:14px;flex:none;margin-top:3px}
.qai-list .lv-fail{color:var(--red-700)}
.qai-list .lv-review{color:var(--amber-700)}
.qai-list .lv-note{color:var(--muted)}
.qai-appeal{display:flex;gap:6px;align-items:flex-start;margin-top:8px;padding:7px 9px;border-radius:var(--r-sm);background:#fff;border:1px dashed var(--line-strong);color:var(--text-strong)}
.qai-appeal svg{width:14px;height:14px;flex:none;margin-top:3px}
.qhist.by-ai .chip svg{width:12px;height:12px}
.qhist .linkbtn{font-size:12.5px}
.set-ai>span:last-child{min-width:0;flex:1}
.set-ai .seg.seg-sm{margin:0 0 6px;padding:3px;gap:2px}
.set-ai .seg.seg-sm .seg-btn{font-size:12.5px;padding:5px 10px}
.set-ai .hint{display:block}
.set-brand{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.set-brand input{flex:1 1 200px;min-width:0}
.ai-why{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--red-700);line-height:1.5;overflow-wrap:anywhere}
.ai-why li+li{margin-top:3px}
.ai-hint{margin-top:6px;font-size:12.5px;color:var(--text);background:#fff;border:1px solid var(--red-100);border-radius:var(--r-sm);padding:7px 9px;line-height:1.5}
ul.ai-hint{padding-left:24px;margin-bottom:0}
ul.ai-hint li+li{margin-top:2px}
.qai-more{margin-top:4px;font-size:13px}
.qai-more summary{cursor:pointer;color:var(--muted)}
.after-dup{display:flex;gap:6px;align-items:flex-start;margin-top:6px}
.after-dup svg{width:14px;height:14px;flex:none;margin-top:3px}
.ai-appeal{margin-top:8px}
.ai-appeal label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.ai-appeal textarea{font-size:14px;min-height:60px}

/* ===== Công nợ NCC (congno.js · nhóm "Công nợ" trong index.html, từ 26/10/2026) ===== */
.rchip.r-ke_toan{color:var(--amber-700);background:var(--amber-50);border-color:#ecd9a8}
.cn{display:flex;flex-direction:column;gap:16px}
.cn .card{margin:0}
.cn .alert{margin-top:0}
.cn-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cn-neg{color:var(--green-700)}
.cn-red{color:var(--brand)}
.cn-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.cn-bar .cn-sync{display:inline-flex;align-items:center;gap:6px}
.cn-bar .cn-sync svg{width:15px;height:15px}
.cn-bar .btn-ghost{margin-left:auto}
.cn-mode{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--amber-50);color:var(--amber-700);border:1px solid #ecd9a8}
.cn-mode.live{background:var(--green-50);color:var(--green-700);border-color:#bfe3d0}
.cn .kpis{margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.cn .kpi .val{font-size:23px}
.cn .kpi .sub{color:var(--muted)}
.cn .kpi.alarm{border-color:var(--red-100)}
.cn .kpi.alarm .val{color:var(--brand)}
.cn-2col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.cn-2col>div{display:flex;flex-direction:column;gap:16px;min-width:0}
.cn-issues{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.cn-issue{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-radius:var(--r-md)}
.cn-issue.go{cursor:pointer}
.cn-issue.go:hover{background:var(--paper)}
.cn-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px;background:var(--n-400)}
.cn-dot.red{background:var(--brand)}
.cn-dot.amber{background:var(--amber-500)}
.cn-issue b{display:block;font-size:14px;color:var(--text-strong);font-weight:600;overflow-wrap:anywhere}
.cn-issue span{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.cn-issue>div{min-width:0;flex:1}
.cn-issue .cn-go{flex:none;width:16px;height:16px;color:var(--faint);margin-top:4px}
.cn-hbar{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px;padding:5px 0}
.cn-hbar .tr{height:10px;border-radius:var(--r-pill);background:var(--n-100);overflow:hidden}
.cn-hbar .tr i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill)}
.cn-hbar .tr i.amber{background:var(--amber-500)}
.cn-hbar .tr i.green{background:var(--green-500)}
.cn-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:14px;margin:0}
.cn-kv dt{color:var(--muted)}
.cn-kv dd{margin:0;text-align:right;font-weight:600;color:var(--text-strong);overflow-wrap:anywhere}
.cn-list{display:flex;flex-direction:column}
.cn-li{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px}
.cn-li:last-child{border-bottom:0}
.cn-li>div{min-width:0;flex:1}
.cn-li .nm{font-weight:600;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-li .mt{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.cn-li.cancel .nm,.cn-li.cancel .cn-num{text-decoration:line-through;color:var(--faint)}
.cn-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cn-tools input[type=search]{flex:1 1 220px;min-width:0}
.cn-tools select.sel{width:auto;flex:0 0 auto;padding:9px 12px;font-size:14px}
.cn-fchip{background:#fff;border:1px solid var(--line-strong);color:var(--text);font-size:13px;padding:7px 12px;border-radius:var(--r-pill);font-weight:600}
.cn-fchip[aria-pressed="true"]{background:var(--red-50);color:var(--red-700);border-color:var(--red-200)}
.cn-fchip .badge{margin-left:4px}
.cn-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cn table{margin-top:0}
.cn table td,.cn table th{padding:9px 10px}
.cn table th.r,.cn table td.r{text-align:right}
.cn table tr.sel{background:var(--red-50)}
.cn table tr.pick{cursor:pointer}
.cn table tr.qua td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.cn table tr.cancel td{color:var(--faint);text-decoration:line-through}
.cn table tfoot td{font-weight:700;border-top:2px solid var(--n-200);border-bottom:0}
.cn-nm{font-weight:600;color:var(--text-strong)}
.cn-sm{font-size:12.5px;color:var(--muted)}
.cn-ncc-cards{display:none}
.cn-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--sh-xs);color:var(--text);font-weight:400;font-size:14px}
.cn-card.qua{border-color:var(--red-100)}
.cn-card .row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.cn-card .row+.row{margin-top:8px;align-items:center}
.cn-card .row>div{min-width:0}
.cn-card .cn-nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-card .big{font-size:17px;font-weight:700;color:var(--text-strong)}
.cn-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cn-head>div:first-child{flex:1 1 260px;min-width:0}
.cn-head h2{font-size:20px;font-weight:700;color:var(--text-strong);overflow-wrap:anywhere;line-height:1.3}
.cn-head .cn-big{font-size:28px;font-weight:700;color:var(--brand);line-height:1.15}
.cn-head .cn-right{text-align:right}
.cn-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cn-acts .btn-primary{width:auto}
.cn-back{margin-bottom:-4px;align-self:flex-start}
.cn-sec{font-weight:700;font-size:15px;color:var(--text-strong);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cn-sec svg{width:17px;height:17px;color:var(--brand)}
.cn-sec .cn-sm{font-weight:500;margin-left:auto}
.cn-lot{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);white-space:nowrap}
.cn-lot.ok{background:var(--green-50);color:var(--green-700)}
.cn-lot.part{background:var(--amber-50);color:var(--amber-700)}
.cn-lot.none{background:var(--n-100);color:var(--muted)}
.cn-form{display:flex;flex-direction:column;gap:14px}
.cn-form .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cn-form .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cn-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r-md);font:inherit;font-size:15px;min-height:70px;resize:vertical}
.cn-form textarea:focus,.cn-form select:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.cn-form .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.cn-form .hint.ok{color:var(--green-700)}
.cn-form .hint.warn{color:var(--amber-700)}
.cn-form .hint.err{color:var(--red-700)}
.cn-lbl{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text)}
.cn-amt{position:relative}
.cn-amt input{font-size:24px;font-weight:700;height:56px;padding-right:40px;font-variant-numeric:tabular-nums}
.cn-amt span{position:absolute;right:14px;top:15px;font-size:17px;font-weight:600;color:var(--muted)}
.cn-picked{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.cn-picked>div{min-width:0;flex:1}
.cn-picker{position:relative}
.cn-pick-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);margin-top:6px;max-height:320px;overflow:auto;background:#fff}
.cn-pick-list button{justify-content:space-between;background:#fff;border-radius:0;border-bottom:1px solid var(--line);font-weight:500;color:var(--text);padding:11px 13px;text-align:left;font-size:14px}
.cn-pick-list button:last-child{border-bottom:0}
.cn-pick-list button:hover,.cn-pick-list button:focus-visible{background:var(--red-50)}
.cn-pick-list button span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-chips{display:flex;gap:6px;flex-wrap:wrap}
.cn-chips button{background:#fff;border:1px solid var(--line-strong);color:var(--text);font-size:14px;padding:9px 14px;min-height:40px}
.cn-chips button[aria-pressed="true"]{background:var(--red-50);color:var(--red-700);border-color:var(--red-200)}
.cn-receipt{display:flex;align-items:center;gap:12px;padding:10px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:#fff}
.cn-receipt img,.cn-receipt .ph{width:56px;height:56px;border-radius:6px;object-fit:cover;flex:none;background:var(--n-100);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cn-receipt>div{min-width:0;flex:1;font-size:13.5px}
.cn-foot{display:flex;gap:10px}
.cn-foot .btn-primary{min-height:48px;font-size:15px}
.cn-done{text-align:center;padding:24px 18px}
.cn-done .ic{width:58px;height:58px;border-radius:50%;background:var(--green-50);color:var(--green-700);display:flex;align-items:center;justify-content:center;margin:0 auto}
.cn-done .ic svg{width:28px;height:28px}
.cn-done .t{font-size:18px;font-weight:700;margin-top:10px;color:var(--text-strong);overflow-wrap:anywhere}
.cn-done .a{font-size:26px;font-weight:700;color:var(--brand);margin-top:4px}
.cn-cancel{display:flex;flex-direction:column;gap:8px}
.cn-cancel .row-inline{display:flex;gap:8px;flex-wrap:wrap}
.cn-cancel input{flex:1 1 200px;min-width:0}
.cn-arm{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}
.cn-lock{display:flex;gap:14px;align-items:flex-start}
.cn-lock>svg{width:28px;height:28px;color:var(--amber-500);flex:none}
.cn-lock .btn-primary{width:auto;margin-top:12px}
.cn-mst{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.cn-mst:last-child{border-bottom:0}
.cn-mst>div{min-width:0}
.cn-mst select.sel{padding:9px 10px;font-size:14px}
.cn-mst .btns{display:flex;gap:6px}
.cn-sug{font-size:12.5px;margin-top:3px;color:var(--muted)}
.cn-sug.high{color:var(--green-700)}
.cn-sug.mid{color:var(--amber-700)}
.cn-cov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cn-cov .box{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.cn-cov .pct{font-size:24px;font-weight:700;color:var(--text-strong)}
.cn-imp{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cn-streak{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.cn-streak i{width:16px;height:16px;border-radius:4px;background:var(--n-100);display:block}
.cn-streak i.ok{background:var(--green-500)}
.cn-streak i.bad{background:var(--brand)}
.cn-print-hide{}
@media (max-width:1100px){ .cn-2col{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .cn .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .cn-ncc-table{display:none}
  .cn-ncc-cards{display:flex;flex-direction:column;gap:10px}
  .cn-form .g2,.cn-form .g3{grid-template-columns:minmax(0,1fr)}
  .cn-head .cn-right{text-align:left}
  .cn-mst{grid-template-columns:minmax(0,1fr)}
  .cn-cov{grid-template-columns:minmax(0,1fr)}
  .cn .card{padding:16px}
  .cn-foot{position:sticky;bottom:0;background:var(--paper);padding:10px 0 6px;margin:0 -2px;z-index:5}
}
@media (max-width:430px){ .cn .kpi .val{font-size:19px} .cn .kpi{padding:14px} }
.cn-rcpt-dlg{width:min(560px,calc(100vw - 24px))}
.cn-rcpt-dlg img{display:block;width:100%;height:auto;margin-top:12px;border-radius:var(--r-md);background:var(--n-100)}

/* ===== Văn phòng ảo (office.js — chủ + Quản lý) · Việc của tôi / Lịch nghỉ (office-me.js — mọi nhân viên) ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rchip.r-nhan_vien{color:#4b4b4b;background:var(--n-100);border-color:var(--line-strong)}
.of-top{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;justify-content:space-between}
.of-kpis{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.of-kpi{display:flex;align-items:baseline;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 14px;box-shadow:var(--sh-xs)}
.of-kpi b{font-size:20px;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.of-kpi span{font-size:13px;color:var(--muted)}
.of-kpi.late b{color:var(--brand)}
.of-assign{width:auto;align-self:center}
.of-when{font-size:13px;color:var(--muted);margin:10px 0 14px}
.of-tabs{margin-bottom:14px}
.of-tabs .badge{margin-left:6px}
.of-depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.of-depts .card{margin:0}
.of-wide{grid-column:1/-1}
.of-dept{padding:16px 16px 10px}
.of-dept header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.of-dept h3{font-size:16px;font-weight:700;color:var(--text-strong);margin:0}
.of-dept header span{font-size:12.5px;color:var(--muted)}
.of-un{border-style:dashed}
.of-people{list-style:none;margin:0;padding:0;display:grid}
.of-people li+li{border-top:1px solid var(--line)}
.of-p{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;border-radius:var(--r-md);padding:8px 6px;text-align:left;color:var(--text);font-weight:400;font-size:14px;box-shadow:none}
.of-p:hover{background:var(--paper)}
.of-p:focus-visible{outline:none;box-shadow:var(--focus)}
.of-av{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:var(--n-500)}
.of-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:var(--n-400)}
.st-on .of-av,.of-av.st-on{background:var(--brand)} .st-on .of-dot{background:var(--green-500)}
.st-recent .of-av,.of-av.st-recent{background:var(--brand)} .st-recent .of-dot{background:#7cc7a1}
.st-idle .of-av,.st-seen .of-av,.of-av.st-idle,.of-av.st-seen{background:var(--n-500)} .st-idle .of-dot,.st-seen .of-dot{background:var(--amber-500)}
.st-off .of-av,.of-av.st-off{background:var(--n-300)} .st-off .of-dot{background:#fff;border-color:var(--n-400)}
.st-leave .of-av,.of-av.st-leave{background:var(--n-200);color:var(--muted)} .st-leave .of-dot{display:none}
.st-work .of-av,.of-av.st-work{background:#1d4f7a} .st-work .of-dot{background:#5b8fc4}
.of-pt{flex:1;min-width:0;display:grid}
.of-pt b{font-weight:600;font-size:14px}
.of-pt span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-leave .of-pt span{color:var(--red-700);font-weight:600}
.of-pb{flex:none;display:flex;gap:4px;align-items:center}
.of-n{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--n-100);color:var(--text);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.of-late{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;font-weight:700;display:inline-grid;place-items:center}
.of-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.of-chip{background:#fff;border:1px solid var(--line-strong);border-radius:999px;font-size:13px;font-weight:600;padding:7px 12px;color:var(--text);min-height:36px}
.of-chip span{color:var(--muted);font-weight:600;margin-left:2px}
.of-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.of-chip.on span{color:#fff}
.of-tasks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.of-task{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;display:grid;gap:5px}
.of-task.s-late{border-color:var(--red-100);box-shadow:inset 3px 0 0 var(--brand)}
.of-task.s-done{background:var(--paper)}
.of-task.s-done .of-tt b{color:var(--muted);text-decoration:line-through}
.of-tt{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.of-tt b{font-size:14.5px;line-height:1.35;color:var(--text-strong);min-width:0}
.of-td{font-size:13px;color:var(--muted);line-height:1.45}
.of-tm{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);align-items:center}
.of-tm .linkbtn{font-weight:600;color:var(--text);text-decoration:none}
.of-tm .linkbtn:hover{text-decoration:underline}
.of-src{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.of-src.auto{color:#1d4f7a;background:#e8f1f9}
.of-src.tay{color:var(--red-700);background:var(--red-50)}
.of-ta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.of-ta .btn-primary{width:auto}
.of-pill{flex:none;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.of-pill.late{background:var(--brand);color:#fff}
.of-pill.wait{background:var(--amber-50);color:var(--amber-700)}
.of-pill.doing{background:var(--green-50);color:var(--green-700)}
.of-pill.todo{background:var(--n-100);color:var(--muted)}
.of-pill.done{background:var(--green-50);color:var(--green-700)}
.of-pill.cancelled{background:var(--n-100);color:var(--muted)}
.of-del.armed{background:var(--brand);border-color:var(--brand);color:#fff}
.of-photos{display:flex;flex-wrap:wrap;gap:6px}
.of-ph{width:56px;height:56px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--n-100);box-shadow:none}
.of-ph img{width:100%;height:100%;object-fit:cover;display:block}
.of-gwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);margin-top:10px}
.of-grid{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;table-layout:fixed}
.of-grid thead th:first-child{width:150px;text-align:left;padding-left:12px}
.of-grid th,.of-grid td{border-bottom:1px solid var(--line);padding:6px;text-align:center;vertical-align:middle}
.of-grid thead th{font-size:12px;color:var(--muted);font-weight:700;background:var(--paper)}
.of-grid thead th span{display:block;font-weight:600;color:var(--text)}
.of-grid thead th em{display:block;font-style:normal;color:var(--red-700);font-size:11px}
.of-grid th.today,.of-grid td.today{background:var(--red-50)}
.of-grid th.blocked{background:var(--n-100)}
.of-grid tbody th{text-align:left;font-weight:600;white-space:nowrap;padding-left:12px}
.of-gdept th{background:var(--paper);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-strong);padding:8px 12px}
.of-gdept th span{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:500}
.of-off{display:inline-block;background:var(--brand);color:#fff;border-radius:6px;padding:3px 7px;font-size:12px;font-weight:700}
.of-off.dx{background:var(--amber-700)}
.of-off i{display:block;font-style:normal;font-size:10px;font-weight:600;opacity:.9}
.of-cell{width:100%;min-height:40px;padding:4px;background:none;border:1px dashed transparent;border-radius:6px;box-shadow:none;color:var(--faint);font-weight:600;font-size:12px}
.of-cell:hover{border-color:var(--line-strong)}
.of-cell.armed{background:var(--ink);color:#fff;border-color:var(--ink)}
.of-plus{opacity:0} .of-cell:hover .of-plus,.of-cell:focus-visible .of-plus{opacity:1}
.of-feedbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.of-feedbar .seg{margin-bottom:0}
.of-who-sel{width:auto;max-width:100%;min-width:200px}
.of-feed{list-style:none;margin:12px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.of-feed li{display:grid;grid-template-columns:48px 1fr;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.of-feed li:last-child{border-bottom:0}
.of-feed time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px;padding-top:1px}
.of-dlg .of-feed{margin-top:0}
.of-setup .card{padding:18px}
.of-dlist{display:grid;gap:8px;margin-bottom:8px}
.of-drow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.of-drow input{width:auto;flex:1 1 180px;min-width:0}
.of-drow input[type=number]{flex:0 0 76px}
.of-drow input[type=date]{flex:0 1 170px}
.of-drow .of-mo{margin:0;font-weight:500;color:var(--muted);font-size:12.5px}
.of-dbtn{display:flex;gap:6px;flex-wrap:wrap}
.of-dbtn .btn-primary{width:auto}
.of-dnew{padding-top:10px;border-top:1px dashed var(--line)}
.of-mlist{list-style:none;margin:0;padding:0;display:grid}
.of-mlist li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.of-mn{display:grid;min-width:0;flex:1 1 220px}
.of-mn span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.of-msel{width:auto;min-width:200px;flex:0 1 240px}
.of-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;align-items:end}
.of-set-act .btn-primary{width:auto}
.of-blist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.of-blist li{display:flex;gap:10px;align-items:center;font-size:13.5px}
.of-blist span{flex:1;color:var(--muted)}
.of-dlg{width:min(640px,calc(100vw - 24px))}
.of-ph-head{display:flex;gap:12px;align-items:center}
.of-ph-head .of-av{width:44px;height:44px;font-size:16px}
.of-pstate{margin:12px 0 4px;font-size:13.5px;padding:8px 12px;border-radius:var(--r-md);background:var(--paper)}
.of-pstate.st-leave{background:var(--red-50);color:var(--red-700);font-weight:600}
.of-h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px;font-weight:700}
.of-fs{border:0;padding:0;margin:14px 0 8px}
.of-fs legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
.of-pick{max-height:240px;overflow:auto;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:4px 10px}
.of-pg{padding:6px 0;border-bottom:1px solid var(--line)}
.of-pg:last-child{border-bottom:0}
.of-pgh{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:4px}
.of-pgh .linkbtn{font-size:12.5px;color:var(--brand)}
.of-pi{display:flex;font-weight:400;padding:6px 0;min-height:36px}
.of-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.of-rep{margin:0}
.of-ropt{margin:0;cursor:pointer}
.of-ropt input{position:absolute;opacity:0;width:1px;height:1px}
.of-ropt span{display:block;padding:8px 12px;border-radius:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.of-ropt input:checked+span{background:#fff;color:var(--brand);box-shadow:var(--sh-xs)}
.of-ropt input:focus-visible+span{box-shadow:var(--focus)}
.of-dact{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.of-dact .btn-primary{width:auto}
.of-dlg textarea{width:100%}
/* Việc của tôi + Lịch nghỉ (nhân viên, điện thoại trước) */
.ofm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 10px}
.ofm-head b{font-size:17px;color:var(--text-strong);display:block}
.ofm-head .sub{margin:0;font-size:12.5px}
.ofm-sec{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:16px 2px 8px}
.ofm-msg{margin:0 0 10px}
.ofm-done{display:grid;gap:8px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.ofm-done label{margin:0}
.ofm-need{font-size:13px;color:var(--amber-700)}
.ofm-pick{width:fit-content;cursor:pointer;margin:0}
.ofm-dact{display:flex;gap:8px;justify-content:flex-end}
.ofm-dact .btn-primary{width:auto}
.ofm-rules{display:flex;gap:8px;font-size:13px;line-height:1.5;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px}
.ofm-rules i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand)}
.ofm-week{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-bottom:12px}
.ofm-wh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ofm-wh .sub{margin:0;flex:1}
.ofm-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.ofm-day{display:grid;gap:1px;justify-items:center;padding:7px 2px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:#fff;color:var(--text);box-shadow:none;font-weight:600;min-height:62px;min-width:0}
.ofm-day .wd{font-size:11.5px;color:var(--muted)}
.ofm-day .dd{font-size:13.5px}
.ofm-day .st{font-size:10.5px;font-weight:700;min-height:13px}
.ofm-day.can .st{color:var(--brand)}
.ofm-day.can:hover{border-color:var(--brand);background:var(--red-50)}
.ofm-day.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ofm-day.on .wd,.ofm-day.on .st{color:#fff}
.ofm-day.dx{background:var(--amber-50);border-color:#ecd9a8;color:var(--amber-700)}
.ofm-day.no{background:var(--n-50);color:var(--faint);border-style:dashed}
.ofm-day.today{box-shadow:inset 0 -3px 0 var(--ink)}
.ofm-others{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.ofm-others i{width:14px;height:14px;flex:none;margin-top:2px}
@media (max-width:760px){
  .of-top{flex-direction:column}
  .of-assign{width:100%}
  .of-kpi{flex:1 1 calc(50% - 8px);padding:8px 12px}
  .of-depts{grid-template-columns:minmax(0,1fr)}
  .of-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%}
  .of-tabs .seg-btn{flex:none}
  .of-who-sel{min-width:0;width:100%}
  .of-msel{flex:1 1 100%}
}
@media (max-width:400px){ .ofm-day{padding:6px 0} .ofm-day .dd{font-size:12px;letter-spacing:-.02em} .ofm-day .st{font-size:9.5px} }
/* Văn phòng ảo — bản 2 (30/10/2026): định mức tháng + Phát sinh, uỷ quyền đăng ký nghỉ hộ, người không dùng app, cảnh 3D */
.of-kpi.warn b{color:var(--amber-700)}
.of-tagx{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--n-100);border-radius:999px;padding:1px 7px;margin-left:4px;white-space:nowrap;vertical-align:1px}
.of-red{color:var(--red-700)}
.of-dept h3{display:flex;align-items:center;gap:6px}
.of-dept h3 i,.of-dept h3 svg{width:16px;height:16px;color:var(--brand)}
.of-off.px{background:var(--red-700);box-shadow:0 0 0 2px var(--red-100)}
.of-gm{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.of-gm.full{color:var(--amber-700)}
.of-gm.px{color:var(--red-700)}
.of-grid tbody th .of-tagx{margin-left:0}
.of-grid th.over{background:var(--red-100)}
.of-month{margin-top:16px;padding:18px}
.of-mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.of-mnav{display:flex;gap:6px}
.of-mtab{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.of-mtab th,.of-mtab td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:middle}
.of-mtab thead th{font-size:12px;color:var(--muted);font-weight:700;background:var(--paper)}
.of-mtab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.of-mtab tr.px td.num:nth-child(4){color:var(--red-700);font-weight:700}
.of-mdays{display:flex;flex-wrap:wrap;gap:4px}
.of-mdays span{font-size:11.5px;font-weight:600;border-radius:5px;padding:1px 6px;background:var(--n-100);font-variant-numeric:tabular-nums}
.of-mdays span.px{background:var(--red-700);color:#fff}
.of-mdays span.dx{background:var(--amber-50);color:var(--amber-700)}
.of-drow select.sel{width:auto;flex:0 1 150px;min-width:0}
.of-dlim{font-size:12.5px;color:var(--muted);flex:1 1 140px}
.of-msels{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;flex:1 1 420px;justify-content:flex-end}
.of-msels>span{display:grid;gap:2px;flex:1 1 180px;max-width:260px}
.of-msels .of-mo{margin:0;font-weight:500;color:var(--muted);font-size:12px}
.of-msels .of-msel{min-width:0;width:100%;flex:none}
.of-pnew{margin-top:14px;padding:12px;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--paper)}
.of-pnh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.of-pnh i,.of-pnh svg{width:16px;height:16px;color:var(--brand);align-self:center}
.of-pnh .sub{margin:0;flex:1 1 100%;font-size:12.5px}
.of-pnf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.of-pnf label{margin-top:0}
.of-pna .btn-primary{width:auto}
.of-vbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.of-vbar .seg{margin-bottom:0}
.of-vbar .seg-btn{display:inline-flex;align-items:center;gap:6px}
.of-vbar .seg-btn svg,.of-vbar .seg-btn i{width:15px;height:15px}
.of-vbar .sub{margin:0;font-size:12.5px}
/* Lịch nghỉ nhân viên: đăng ký hộ, định mức tháng, phát sinh */
.ofm-for{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ofm-for .sub{margin:0 4px 0 0;font-size:12.5px}
.ofm-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--text);font-weight:600;font-size:13px;box-shadow:none;min-height:36px}
.ofm-chip svg,.ofm-chip i{width:15px;height:15px}
.ofm-chip.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.ofm-proxy{margin-bottom:10px}
.ofm-quota{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.ofm-q{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;font-size:13px;display:grid;gap:1px}
.ofm-q>b{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ofm-q.full{border-color:#ecd9a8;background:var(--amber-50)}
.ofm-q.over{border-color:var(--red-100);background:var(--red-50);color:var(--red-700)}
.ofm-day.px{background:var(--red-700);border-color:var(--red-700)}
.ofm-day.dx.px{color:#fff}
.ofm-day.dx.px .wd,.ofm-day.dx.px .st{color:#fff}
.ofm-day.wx{border-color:#ecd9a8;background:#fffdf7}
.ofm-day.wx .st{color:var(--amber-700)}
/* Cảnh 3D (office3d.js) */
.of3d{position:relative}
.o3-loading{display:grid;place-items:center;height:clamp(420px,62vh,720px);border:1px solid var(--line);border-radius:var(--r-lg,14px);background:#efe9e4;color:var(--muted);font-size:13px}
.o3-stage{position:relative;height:clamp(440px,64vh,760px);border-radius:var(--r-lg,14px);overflow:hidden;background:#efe9e4;border:1px solid var(--line);touch-action:none}
.o3-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.o3-stage canvas:active{cursor:grabbing}
.o3-ov{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.o3-ov>*{pointer-events:auto}
.o3-zl{position:absolute;left:0;top:0;transform:translate3d(-9999px,0,0);pointer-events:none!important;white-space:nowrap}
.o3-zl b{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);opacity:.8}
.o3-zl span{font-size:11px;color:var(--muted)}
.o3-tag{position:absolute;left:0;top:0;transform:translate3d(-9999px,0,0);display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px 3px 7px;box-shadow:0 2px 6px rgba(0,0,0,.08);font-size:12px;line-height:1.25;white-space:nowrap;max-width:190px;text-align:left;color:var(--text);font-weight:400;min-height:0}
.o3-tag:hover{border-color:var(--ink);background:#fff}
.o3-tag .o3-t{display:grid;min-width:0}
.o3-tag b{font-weight:600}
.o3-tag .o3-a{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.o3-d,.o3-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#9a9391;display:inline-block}
.st-on>.o3-d,.o3-dot.st-on{background:#1b7d51}
.st-recent>.o3-d{background:#4fa077}
.st-idle>.o3-d,.o3-dot.st-idle{background:#d39a2c}
.st-seen>.o3-d{background:#6f86a6}
.st-work>.o3-d,.o3-dot.st-work{background:#2d5c9a}
.st-off>.o3-d,.o3-dot.st-off{background:transparent;border:2px solid #9a9391}
.st-leave>.o3-d,.o3-dot.st-leave{background:var(--red-200)}
.o3-tag.st-off,.o3-tag.st-leave{opacity:.8}
.o3-tag.st-leave{background:var(--red-50);border-style:dashed}
.o3-late{display:none;font-style:normal;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;font-size:10px;line-height:16px;min-width:16px;text-align:center;padding:0 4px}
.o3-tag.late .o3-late{display:inline-block}
b.o3-late{display:inline-block}
.o3-tag.robot{background:#e5eef8;border-color:transparent;pointer-events:none}
.o3-tag.robot .o3-d{background:#2d5c9a}
.o3-ov.c1 .o3-tag .o3-a{display:none}
.o3-ov.c1 .o3-tag{font-size:11.5px;padding:2px 8px 2px 6px}
.o3-ov.c2 .o3-tag{padding:3px 6px}
.o3-ov.c2 .o3-tag .o3-t{display:none}
.o3-pend{position:absolute;left:0;top:0;transform:translate3d(-9999px,0,0);pointer-events:none!important;background:var(--brand);color:#fff;font-size:12px;font-weight:600;border-radius:8px;padding:3px 8px;white-space:nowrap}
.o3-pend.zero{background:var(--n-200);color:var(--muted)}
.o3-bub{position:absolute;left:0;top:0;transform:translate3d(-9999px,0,0);pointer-events:none!important;background:#fff;color:var(--text);border:1px solid var(--line-strong);border-radius:12px;padding:6px 10px;font-size:12px;font-weight:500;box-shadow:var(--sh-md,0 4px 14px rgba(0,0,0,.12));white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s}
.o3-bub.show{opacity:1}
.o3-bub.good{border-color:#8cc9aa}
.o3-chips{position:absolute;top:10px;left:10px;right:110px;z-index:2;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.o3-chips::-webkit-scrollbar{display:none}
.o3-chip{flex:none;padding:6px 11px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.94);font-size:12.5px;font-weight:600;color:var(--text);box-shadow:none;min-height:32px}
.o3-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.o3-zoom{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:4px}
.o3-ib{width:34px;height:34px;padding:0;border-radius:10px;border:1px solid var(--line-strong);background:rgba(255,255,255,.94);font-size:17px;font-weight:700;color:var(--text);box-shadow:none;display:grid;place-items:center}
.o3-ib:hover,.o3-chip:hover{border-color:var(--ink)}
.o3-legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.o3-legend li{display:flex;align-items:center;gap:6px}
@media (max-width:760px){
  .of-pnf{grid-template-columns:minmax(0,1fr)}
  .of-msels{justify-content:flex-start;flex-basis:100%}
  .of-msels>span{max-width:none}
  .o3-stage,.o3-loading{height:520px}
  .o3-chips{right:10px;top:auto;bottom:10px}
}

/* ===== Văn phòng ảo bản 3 (30/10/2026): thanh tab gọn, khung 3D tự vừa màn hình, chủ cửa hàng ở khu Lãnh đạo ===== */
.of-tabrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.of-tabrow .seg{margin-bottom:0}
.of-tabrow .of-tabs{margin-bottom:0}
.of-vseg{margin-left:auto}
.of-vseg .seg-btn{display:inline-flex;align-items:center;gap:6px}
.of-vseg .seg-btn svg,.of-vseg .seg-btn i{width:15px;height:15px}
.of3d .o3-stage{transition:height .15s ease}
.o3-own{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:#18181b;border-radius:999px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.o3-tag.owner{border-color:#18181b}
.o3-legend .o3-hint{margin-left:auto;color:var(--faint)}
@media (max-width:760px){
  .of-vseg{margin-left:0}
  .o3-legend .o3-hint{margin-left:0;flex-basis:100%}
}

/* ===== App cài trên điện thoại (PWA, từ 30/10/2026): chạm như app, không kéo nảy / phóng to, chừa tai thỏ ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,label,summary,[role=button],[role=tab],.seg-btn,.snav-item,.chip,.ofm-day{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}   /* iPhone không tự phóng to khi chạm ô nhập */
}
/* html.is-app = đang chạy như app đã cài (pwa.js đặt class theo display-mode standalone / navigator.standalone của iPhone) */
html.is-app,html.is-app body{overscroll-behavior:none}          /* không kéo nảy cả trang như web */
html.is-app :is(.appbar,.snav,.gbar,.gtabs,button,.seg-btn,.snav-item){-webkit-touch-callout:none}
html.is-app :is(button,.seg-btn,.snav-item,.appbar,.gbar,.gtabs,.gnav,.snav,.o3-stage,.of-tabs,.umenu){-webkit-user-select:none;user-select:none}
html.is-app img{-webkit-user-drag:none}
html.is-app .appbar{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
html.is-app .gbar{padding-top:max(8px,env(safe-area-inset-top))}
html.is-app .snav{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left)}
html.is-app .views{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
html.is-app .hc-install{display:none!important}                 /* đã cài rồi → ẩn nút Cài app */
@media (max-width:900px){
  html.is-app .appbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  html.is-app .views{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
}
.hc-offline{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:#262626;color:#fff;
  font-size:13px;font-weight:600;border-radius:999px;padding:8px 14px;box-shadow:var(--sh-lg);display:flex;gap:8px;align-items:center}
.hc-offline[hidden]{display:none}
.hc-install-bar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs);padding:10px 10px 10px 12px;margin:0 0 14px}
.hc-install-bar img{width:34px;height:34px;border-radius:8px;flex:0 0 auto;object-fit:contain}
.hc-install-bar .hib-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hc-install-bar .hib-t b{font-size:14px;color:var(--text-strong)}
.hc-install-bar .hib-t span{font-size:12px;color:var(--muted)}
.hc-install-bar .hib-go{width:auto;flex:0 0 auto}
.hc-install-bar .hib-x{background:none;color:var(--faint);padding:6px 8px;font-size:15px;flex:0 0 auto}
.hc-install-dlg .zsteps{margin:4px 0 0}

/* ===== Thông báo đẩy (30/10/2026): hộp Thông báo + thanh mời bật ===== */
.hc-push-bar .hpb-ic{width:34px;height:34px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:var(--red-50);color:var(--brand)}
.hc-push-bar .hpb-ic svg{width:18px;height:18px}
#pushBar{margin-bottom:2px}
.hc-push-dlg{width:min(440px,calc(100vw - 24px))}
.hc-push-dlg .alert{margin:0 0 12px}
.hpd-st{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-md);background:var(--n-50);border:1px solid var(--line)}
.hpd-st svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;color:var(--muted)}
.hpd-st b{display:block;font-size:14px;color:var(--text-strong)}
.hpd-st span{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}
.hpd-st.on{background:var(--green-50);border-color:#bfe3d0}.hpd-st.on svg{color:var(--green-700)}
.hpd-st.warn{background:var(--amber-50);border-color:#ecd9a8}.hpd-st.warn svg{color:var(--amber-700)}
.hpd-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hpd-acts .btn-primary{width:auto}
.hpd-sec{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}
.hpd-kind{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px 10px;margin:0}
.hpd-kind legend{font-weight:700;font-size:14px;padding:0 4px;color:var(--text-strong)}
.hpd-opt{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.45;cursor:pointer}
.hpd-opt input{width:18px;height:18px;min-height:0;padding:0;margin:2px 0 0;border:0;box-shadow:none;accent-color:var(--brand);flex:0 0 auto}
.hpd-opt span{flex:1;min-width:0}
.hpd-opt em{font-style:normal;color:var(--faint);font-size:12.5px}
.hpd-devs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hpd-devs li{display:flex;gap:8px;align-items:center;font-size:14px}
.hpd-devs svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.hpd-devs em{font-style:normal;color:var(--faint)}
.hpd-devs em.bad{color:var(--red-700)}

/* ===== Bố cục theo cỡ màn hình (30/10/2026): nội dung mọi mục DÀN KÍN bề ngang — điện thoại 1 cột, laptop 2 cột, màn rộng 2–3 cột ===== */
/* Thẻ xếp lưới tự chia cột theo bề ngang (Cài đặt, Cài đặt công nợ, Việc sau duyệt) */
/* Cài đặt / Cài đặt công nợ: xếp kiểu "tường gạch" theo cột (thẻ cao thấp khác nhau không để hở) */
#view-cai-dat.active,#cnSet{display:block;columns:460px 3;column-gap:18px}
#view-cai-dat>.card,#cnSet>.card{break-inside:avoid;margin:0 0 18px}
#cnSet>:not(.card){column-span:all;margin-bottom:18px}
/* Việc sau duyệt: mỗi ngày 1 thẻ, chia cột theo bề ngang (1 ngày thì trải hết hàng) */
#afterList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:18px;align-items:start}
#afterList>.card{margin:0}
/* Nhân viên: form thêm | danh sách */
@media (min-width:1280px){
  #view-nhan-vien.active{display:grid;grid-template-columns:minmax(380px,.85fr) minmax(0,1.15fr);gap:18px;align-items:start}
  #view-nhan-vien>.card{margin:0}
  #view-nhan-vien .nv-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
  #view-nhan-vien .nv-checks{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}
/* Ghi thanh toán: form | khoản đã ghi gần đây */
@media (min-width:1200px){
  #cnPay{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
  #cnPay>*{margin:0}
  #cnPay>:not(.card){grid-column:1/-1}
}
/* Công nợ · Tổng quan màn rộng: Việc cần xử lý | Thanh toán gần đây | Dư nợ theo nhóm + Hoá đơn */
@media (min-width:1700px){
  #cnOv .cn-2col{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
  #cnOv .cn-2col>div{display:contents}
  #cnOv .cn-2col>div:first-child>.card:first-child{grid-column:1;grid-row:1/span 2}
  #cnOv .cn-2col>div:first-child>.card:nth-child(2){grid-column:2;grid-row:1/span 2}
  #cnOv .cn-2col>div:nth-child(2)>.card:first-child{grid-column:3;grid-row:1}
  #cnOv .cn-2col>div:nth-child(2)>.card:nth-child(2){grid-column:3;grid-row:2}
}
/* Việc của tôi: thẻ việc chia cột · Lịch nghỉ: Tuần này | Tuần sau cạnh nhau */
#view-viec-cua-toi .of-tasks{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
@media (min-width:1100px){
  #view-lich-nghi .ofm-weeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  #view-lich-nghi .ofm-week{margin:0}
}
#view-lich-nghi .ofm-weeks{margin-bottom:12px}
/* Báo cáo màn rộng: biểu đồ theo ngày | chi phí 6 tháng cạnh nhau, bảng nhân viên bên dưới */
@media (min-width:1500px){
  #view-bao-cao.active{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:18px;align-items:start}
  #view-bao-cao>:nth-child(-n+3){grid-column:1/-1}
  #view-bao-cao>:nth-child(4){grid-column:1;grid-row:4}
  #view-bao-cao>:nth-child(6){grid-column:2;grid-row:4}
  #view-bao-cao>:nth-child(5){grid-column:1/-1;grid-row:5}
}
@media (min-width:1800px){ .kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} }

/* Ô số (KPI) Công nợ: cỡ số tự co theo bề ngang ô → số tiền hàng tỉ không tràn trên điện thoại */
.cn .kpi{container-type:inline-size;min-width:0}
.cn .kpi .val{font-size:clamp(13px,10.2cqi,27px);white-space:nowrap;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .cn .kpis>.kpi.money{grid-column:1/-1}                   /* Tổng dư nợ: cả hàng, số to rõ */
  .cn .kpis>.kpi:last-child{grid-column:1/-1}             /* ô cuối (≥ N ngày chưa trả) không đứng lẻ nửa hàng */
  .cn .kpis>.kpi.money .val{font-size:clamp(20px,9cqi,30px)}
}
/* Dòng thanh toán trên điện thoại: tên + chi tiết 1 hàng, nút ảnh · nhãn · số tiền xuống hàng dưới */
@media (max-width:560px){
  .cn-li{flex-wrap:wrap;row-gap:8px}
  .cn-li>div{flex:1 1 100%}
  .cn-li>b.cn-num{margin-left:auto}
}

/* ===== Trưởng gian + việc nhiều người (30/10/2026) — office.js · office-me.js · office3d.js ===== */
.of-tagx.head{color:#fff;background:#263044}
.of-dhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;margin:0 0 10px}
.of-dhead i{width:15px;height:15px;color:#263044;flex:none}
.of-rv{margin-left:auto;font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:2px 9px;white-space:nowrap}
.of-rv.off{background:var(--n-200);color:var(--muted)}
.of-drow select.of-hsel{flex:0 1 170px}
/* Việc nhiều người: thẻ gộp, chip từng người, thanh tiến độ */
.of-mates{display:flex;flex-wrap:wrap;gap:6px}
.of-mate{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--text);background:var(--n-50);border:1px solid var(--line);border-radius:999px;padding:4px 10px;min-height:30px;width:auto;box-shadow:none}
button.of-mate:hover{border-color:var(--line-strong)}
.of-mate i{font-style:normal;font-weight:700;width:14px;text-align:center;color:var(--muted)}
.of-mate em{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:#263044;border-radius:999px;padding:0 6px}
.of-mate.s-done{background:var(--green-50);border-color:#cfe6d9;color:var(--green-700)}
.of-mate.s-done i{color:var(--green-700)}
.of-mate.s-doing i{color:var(--amber-500)}
.of-mate.s-late{background:var(--red-50);border-color:var(--red-100);color:var(--red-700)}
.of-mate.s-late i{color:var(--brand)}
.of-progw{display:flex;align-items:center;gap:10px}
.of-prog{flex:1;height:6px;border-radius:999px;background:var(--n-100);overflow:hidden;max-width:320px}
.of-prog i{display:block;height:100%;background:var(--green-500);border-radius:inherit}
.of-progt{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.of-mode{font-size:11.5px;font-weight:600;border-radius:6px;padding:2px 7px}
.of-mode.each{color:#1d4f7a;background:#e8f1f9}
.of-mode.shared{color:#5b3a8a;background:#f1ebf8}
.of-redo,.ofm-rv{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.45;border-radius:var(--r-sm);padding:7px 10px}
.of-redo{background:var(--amber-50);color:var(--amber-700)}
.of-redoform{display:grid;gap:6px;width:100%;margin-top:2px}
.of-redoform label{margin:0;font-size:13px;font-weight:600}
.of-redoform .of-ta{justify-content:flex-end}
/* Cài đặt: quyền của trưởng gian + sơ đồ */
.of-powers{display:grid;gap:8px;margin-bottom:12px}
.of-power{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin:0;cursor:pointer;font-weight:400}
.of-power:has(input:checked){border-color:var(--green-500);background:var(--green-50)}
.of-power input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--green-700)}
.of-power span{display:grid;gap:2px;min-width:0}
.of-power b{font-size:14px;color:var(--text-strong)}
.of-power small{font-size:12.5px;color:var(--muted);line-height:1.45}
.of-orgs{display:grid;gap:4px}
.of-org{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px;font-size:13px;padding:6px 2px;border-top:1px solid var(--line)}
.of-org>*{min-width:0;overflow-wrap:anywhere}
/* Hộp Giao việc: cách làm khi ≥ 2 người */
.of-modefs{display:grid;gap:8px}
.of-mopt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px;margin:0;cursor:pointer;font-weight:400}
.of-mopt:has(input:checked){border-color:var(--brand);background:var(--red-50)}
.of-mopt input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--brand)}
.of-mopt span{display:grid;gap:2px;min-width:0}
.of-mopt b{font-size:14px}
.of-mopt small{font-size:12.5px;color:var(--muted);line-height:1.45}
.of-lead label{margin:4px 0 4px;font-size:13px;font-weight:600}
/* Trang nhân viên: người cùng làm, trạng thái xác nhận */
.ofm-mates{display:grid;gap:6px}
.ofm-mates .sub{margin:0;font-size:12.5px;line-height:1.45}
.ofm-rv i{width:15px;height:15px;flex:none;margin-top:2px}
.ofm-rv.wait{background:var(--amber-50);color:var(--amber-700)}
.ofm-rv.redo{background:var(--red-50);color:var(--red-700)}
.ofm-rv.ok{background:var(--green-50);color:var(--green-700)}
.ofm-headcta{margin-top:14px;flex-wrap:wrap}
.ofm-headcta .btn-ghost{margin-left:auto}
/* Bàn duyệt gian */
.ofm-rvgrid{display:grid;gap:4px 18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));align-items:start}
.ofm-rvbox{min-width:0}
.ofm-rvbox>.sub{margin:0 2px}
.ofm-sps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ofm-sp{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px}
.ofm-sp>div{min-width:0;display:grid;gap:3px}
.ofm-sp>div>.sub{margin:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ofm-sp img,.ofm-noimg{width:52px;height:52px;flex:none;border-radius:8px;object-fit:cover;background:var(--n-100);display:grid;place-items:center;color:var(--muted)}
.ofm-noimg i{width:18px;height:18px}
.ofm-ai{font-weight:600;color:var(--muted)}
.ofm-ai.v-pass{color:var(--green-700)}
.ofm-ai.v-review{color:var(--amber-700)}
.ofm-ai.v-fail{color:var(--red-700)}
.ofm-team{list-style:none;margin:0;padding:0;display:grid}
.ofm-team li{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 2px;border-top:1px solid var(--line)}
.ofm-team li>span{min-width:0;overflow-wrap:anywhere}
.ofm-team li>span:last-child{text-align:right;color:var(--text)}
.ofm-late{color:var(--brand)}
#view-ban-duyet .ofm-rvbox .of-tasks{grid-template-columns:1fr}
/* Duyệt SP của trưởng gian */
.q-scope{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;line-height:1.45;background:#eef1f7;color:#263044;border-radius:var(--r-sm);padding:7px 10px;margin-bottom:10px}
.q-scope i{width:15px;height:15px;flex:none;margin-top:1px}
/* 3D */
.o3-own.head{background:#263044}
.o3-pend.hd{background:#263044}
.o3-pend.hd.off{background:var(--n-300);color:#fff}
.o3-pend.hd.zero{background:var(--n-200);color:var(--muted)}
.of-mate.s-wait{background:var(--amber-50);border-color:#f1dfb5;color:var(--amber-700)}
.of-mate.s-wait i{color:var(--amber-700)}
.of-wlist{display:grid;gap:6px}
.of-wrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;font-size:13px;background:var(--amber-50);border-radius:var(--r-sm);padding:6px 10px}
.of-wrow>span{min-width:0}
.of-wrow .of-ta{margin:0}
.of-wrow .of-redoform{background:#fff;border-radius:var(--r-sm);padding:8px}

/* ===== Chi quầy thu ngân (chiquay.js, 31/10/2026) — tiền tố cq- ===== */
.cq .kpi{container-type:inline-size;min-width:0}
.cq .kpi .val{font-size:clamp(16px,10.5cqi,27px);white-space:nowrap;font-variant-numeric:tabular-nums}
.cq-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.cq-kwarn{border-color:#ecd9a8;background:linear-gradient(180deg,var(--amber-50),var(--card) 65%)}
.cq-kwarn .val{color:var(--amber-700)}
.cq-grid{display:grid;gap:18px;align-items:start}
@media (min-width:1100px){.cq-grid{grid-template-columns:minmax(360px,440px) minmax(0,1fr)}.cq-grid.one{grid-template-columns:minmax(0,1fr)}}
.cq-left,.cq-right{display:grid;gap:14px;min-width:0}
.cq-left>.card,.cq-right>.card{margin:0}
@media (min-width:1800px){.cq-right{grid-template-columns:repeat(auto-fill,minmax(560px,1fr));align-items:start}.cq-right>.cq-tools,.cq-right>.q-empty{grid-column:1/-1}}
.cq-req{color:var(--red-700);font-weight:500;font-size:12.5px}
.cq-guide summary,.cq-set summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--text-strong);display:flex;align-items:center;gap:8px;list-style:none}
.cq-guide summary::-webkit-details-marker,.cq-set summary::-webkit-details-marker{display:none}
.cq-guide summary svg,.cq-set summary svg{width:17px;height:17px;color:var(--brand);flex:none}
.cq-guide ol{margin:12px 0 8px;padding-left:20px;display:grid;gap:7px;font-size:13.5px;line-height:1.5}
.cq-guide .hint{font-size:12.5px;color:var(--muted)}
.cq-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.cq-tr{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cq-tr select.sel{width:auto;min-width:0;flex:0 1 auto}
.cq-day{padding:14px 16px;display:grid;gap:10px;min-width:0}
.cq-day.late{border-color:#ecd9a8;box-shadow:inset 3px 0 0 var(--amber-500)}
.cq-dh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.cq-dh>div:first-child{display:grid;min-width:0;flex:1 1 180px}
.cq-dh>div:first-child b{font-size:16px;color:var(--text-strong)}
.cq-dh .muted{font-size:12.5px}
.cq-dt{display:grid;text-align:right}
.cq-dt b{font-size:18px;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}
.cq-dt .muted{font-size:12px}
.cq-dh .chip{margin:0}
.cq-none{margin:0}
.cq-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cq-it{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 10px;background:var(--card)}
.cq-it.cancelled{background:var(--paper);opacity:.75}
.cq-it.cancelled .cq-amt{text-decoration:line-through;color:var(--muted)}
.cq-it.ask{border-color:#ecd9a8}
.cq-th{position:relative;width:58px;height:58px;border-radius:8px;overflow:hidden;padding:0;border:1px solid var(--line);background:var(--n-100);box-shadow:none;display:grid;place-items:center;color:var(--muted)}
.cq-th img{width:100%;height:100%;object-fit:cover;display:block}
.cq-th span{position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:0 5px}
.cq-th.none svg{width:20px;height:20px}
.cq-main{display:grid;gap:3px;min-width:0}
.cq-l1{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.cq-l1 .chip{margin:0}
.cq-amt{font-size:15.5px;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:2px}
.cq-cat{font-size:11.5px;font-weight:700;color:var(--red-700);background:var(--red-50);border-radius:6px;padding:2px 7px}
.cq-inv{font-size:11.5px;font-weight:600;color:var(--green-700);background:var(--green-50);border-radius:6px;padding:2px 7px}
.cq-inv.no{color:var(--muted);background:var(--n-100)}
.cq-l2{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.cq-l3{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.cq-ask{display:grid;gap:4px;font-size:13px;line-height:1.45;background:var(--amber-50);color:var(--amber-700);border-radius:var(--r-sm);padding:7px 9px;margin-top:3px;overflow-wrap:anywhere}
.cq-rep{color:var(--text)}
.cq-if{display:grid;gap:6px;margin-top:4px}
.cq-if label{margin:0;font-size:13px;font-weight:600}
.cq-if input{min-width:0}
.cq-ifa{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.cq-ifa .btn-primary{width:auto}
.cq-danger{background:var(--brand)}
.cq-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cq-addph{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin:0;font-weight:600}
.cq-del{color:var(--red-700)}
.cq-hv{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;border-radius:var(--r-md);padding:10px 12px;overflow-wrap:anywhere}
.cq-hv>svg{width:18px;height:18px;flex:none;margin-top:2px}
.cq-hv>div{min-width:0;flex:1;display:grid;gap:8px}
.cq-hv.ok{background:var(--green-50);color:var(--green-700)}
.cq-hv.todo{background:var(--amber-50);color:var(--amber-700)}
.cq-hv.bad{background:var(--red-50);color:var(--red-700)}
.cq-vl{list-style:none;margin:0;padding:0;display:grid;gap:3px;color:var(--text)}
.cq-vl li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px}
.cq-vl .linkbtn{font-size:12.5px}
.cq-vf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:end;color:var(--text)}
.cq-vf label{margin:0 0 4px;font-size:12.5px;font-weight:600}
.cq-vf input{min-width:0}
.cq-vf .btn-primary{width:auto;min-height:44px}
@media (max-width:560px){.cq-vf{grid-template-columns:1fr 1fr}.cq-vf .btn-primary{grid-column:1/-1}}
.cq-copy{display:flex;flex-wrap:wrap;gap:6px}
.cq-dact{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.cq-dact:empty{display:none}
.cq-light{flex-direction:column;gap:12px;overflow:auto;justify-content:flex-start}
.cq-light img{max-height:85vh}
.cq-warn-t{color:var(--amber-700);font-weight:600}
.o3-zl .o3-cq{display:block;font-style:normal;font-size:11px;font-weight:600;color:#6b4a1f;margin-top:1px}
.o3-zl .o3-cq.warn{color:var(--amber-700)}
.o3-ov.c1 .o3-zl .o3-cq{display:none}          /* toàn cảnh (thu nhỏ): ẩn dòng chi quầy cho đỡ che quầy — phóng to / bấm "Quầy thu ngân" mới hiện */

/* ===== Lịch nghỉ: chạm chọn ngày → thanh Xác nhận (31/10/2026) ===== */
.ofm-day.pa{background:var(--red-50);border:2px dashed var(--brand);color:var(--brand)}
.ofm-day.pa .wd,.ofm-day.pa .st{color:var(--brand)}
.ofm-day.pa.pwx{background:var(--amber-50);border-color:var(--amber-500);color:var(--amber-700)}
.ofm-day.pa.pwx .wd,.ofm-day.pa.pwx .st{color:var(--amber-700)}
.ofm-day.po,.ofm-day.on.po,.ofm-day.px.po{background:#fff;border:2px dashed var(--brand);color:var(--text)}
.ofm-day.po .wd{color:var(--muted)}
.ofm-day.po .dd{text-decoration:line-through}
.ofm-day.po .st{color:var(--brand)}
.ofm-msg{scroll-margin-top:84px}
.ofm-confirm{position:sticky;bottom:calc(var(--ofm-foot,0px) + 12px);z-index:5;margin:2px 0 12px;background:#fff;border:1px solid var(--line-strong);border-left:4px solid var(--brand);border-radius:var(--r-md);box-shadow:0 8px 28px rgba(20,20,20,.16);padding:12px 14px}
.ofm-cf-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.ofm-cf-h b{font-size:15px;color:var(--text-strong)}
.ofm-cf-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px 16px;max-height:32vh;overflow:auto}
.ofm-cf-list li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;min-width:0}
.ofm-cf-list li svg{width:16px;height:16px;flex:none}
.ofm-cf-list li.add svg{color:var(--brand)}
.ofm-cf-list li.off svg{color:var(--muted)}
.ofm-cf-note{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.ofm-cf-note.warn{color:var(--amber-700)}
.ofm-cf-btns{display:flex;gap:8px;margin-top:10px}
.ofm-cf-btns .btn-ghost{flex:0 0 auto}
.ofm-cf-btns .btn-primary{flex:1;width:auto;min-height:44px;margin:0}
@media (min-width:760px){ .ofm-cf-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} }
@media (min-width:1100px){ .ofm-cf-btns{justify-content:flex-end} .ofm-cf-btns .btn-primary{flex:0 0 auto;min-width:240px} }
/* Nghỉ nửa buổi (0,5 ngày — sáng / chiều) */
.ofm-day.half,.ofm-day.on.half,.ofm-day.px.half{background:var(--red-50);border:2px solid var(--brand);color:var(--red-700)}
.ofm-day.half .wd,.ofm-day.half .st,.ofm-day.on.half .wd,.ofm-day.on.half .st,.ofm-day.px.half .wd,.ofm-day.px.half .st{color:var(--red-700)}
.ofm-day.px.half{border-color:var(--red-700)}
.ofm-day.dx.half{background:var(--amber-50);border-color:var(--amber-500);color:var(--amber-700)}
.ofm-day.dx.half .wd,.ofm-day.dx.half .st{color:var(--amber-700)}
.ofm-cf-part{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;flex:none}
.ofm-cf-part button{background:#fff;border:0;border-radius:0;box-shadow:none;padding:5px 10px;min-height:32px;font-size:12.5px;font-weight:600;color:var(--text)}
.ofm-cf-part button+button{border-left:1px solid var(--line-strong)}
.ofm-cf-part button.on{background:var(--brand);color:#fff}
.of-off .of-pt{font-weight:600}
.of-off.half{background:var(--red-50);color:var(--red-700);border:1px solid var(--brand)}
.of-off.dx.half{background:var(--amber-50);color:var(--amber-700);border-color:var(--amber-500)}
.of-mdays em{font-style:normal;font-weight:600;font-size:11px;opacity:.85}
.of-mnav{flex-wrap:wrap}

/* ===== Nhập lịch nghỉ từ file Excel (Văn phòng ảo → Lịch nghỉ, chủ cửa hàng) ===== */
#ofImport{width:min(760px,calc(100vw - 24px))}
.of-imp{padding:4px 2px 2px}
.of-imp>.sub{line-height:1.55}
.of-imp-file{display:flex;align-items:center;gap:12px;border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:16px;margin:10px 0 12px;cursor:pointer;background:var(--paper)}
.of-imp-file:hover{border-color:var(--brand)}
.of-imp-file svg{width:28px;height:28px;color:var(--brand);flex:none}
.of-imp-file span{display:grid;gap:2px;min-width:0}
.of-imp-file small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-imp-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.of-imp-sum{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:2px 0 10px}
.of-imp-sum b{font-size:15px;color:var(--text-strong);overflow-wrap:anywhere}
.of-imp-sum span{color:var(--muted);font-size:13px}
.of-imp-list{display:grid;gap:6px;max-height:min(52vh,520px);overflow:auto;padding-right:2px}
.of-imp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px 12px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;background:#fff}
.of-imp-who{display:grid;gap:1px;min-width:0}
.of-imp-who b{color:var(--text-strong)}
.of-imp-who span{font-size:12.5px;color:var(--muted)}
.of-imp-pick{display:grid;gap:3px;min-width:0}
.of-imp-pick select{width:100%;min-height:40px}
.of-imp-st{font-size:12px;color:var(--muted)}
.of-imp-st.ok{color:var(--green-700)}
.of-imp-st.warn{color:var(--amber-700);font-weight:600}
.of-imp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.of-imp-foot .of-ta{margin-top:0}
@media (max-width:560px){ .of-imp-row{grid-template-columns:1fr} .of-imp-foot .of-ta{width:100%} .of-imp-foot .btn-primary{flex:1} }

/* ===== Trợ lý AI hỏi đáp (assist.js, từ 31/10/2026) — bubble góc phải dưới + mục Hỗ trợ nhân viên ===== */
.hca{--hca-lift:0px;position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom) + var(--hca-lift));z-index:50;transition:bottom var(--t)}
.hca[hidden]{display:none}
.hca-fab{position:relative;width:54px;height:54px;padding:0;border-radius:50%;border:none;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(190,30,45,.35),var(--sh-md);cursor:pointer;transition:transform var(--t),background var(--t)}
.hca-fab:hover{background:var(--brand-hover);transform:translateY(-1px)}
.hca-fab:focus-visible{outline:none;box-shadow:var(--focus),0 8px 22px rgba(190,30,45,.35)}
.hca-fab svg{width:26px;height:26px;flex:none}
.hca-fab[hidden]{display:none}
.hca-dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--amber-500);border:2px solid #fff}
.hca-dot[hidden]{display:none}
.hca-panel{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom) + var(--hca-lift));width:min(390px,calc(100vw - 32px));height:min(600px,calc(100dvh - 96px - var(--hca-lift)));
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 18px 50px rgba(20,20,20,.22);overflow:hidden}
.hca-panel[hidden]{display:none}
.hca-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.hca-ava{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.hca-ava i,.hca-ava svg{width:18px;height:18px}
.hca-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.hca-t b{font-size:15px;color:var(--text-strong)}
.hca-t span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hca-x{width:40px;height:40px;padding:0;border:none;background:none;border-radius:var(--r-md);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.hca-x i,.hca-x svg{width:20px;height:20px}
.hca-x:hover{background:var(--n-100);color:var(--text)}
.hca-tabs{display:flex;gap:4px;padding:6px 10px 0;border-bottom:1px solid var(--line)}
.hca-tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:8px 10px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:40px}
.hca-tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.hca-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;gap:10px;background:#fff}
.hca-msg{display:flex;flex-direction:column;max-width:88%;min-width:0}
.hca-msg.me{align-self:flex-end;align-items:flex-end}
.hca-msg.ai,.hca-msg.sys{align-self:flex-start}
.hca-bub{padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.hca-msg.me .hca-bub{background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.hca-msg.ai .hca-bub{background:var(--n-100);color:var(--text);border-bottom-left-radius:4px}
.hca-msg.ai.weak .hca-bub{background:var(--amber-50);border:1px solid #ecd9a8}
.hca-msg.sys .hca-bub{background:#fff;border:1px dashed var(--line-strong);color:var(--muted);font-size:13px}
.hca-typing{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.hca-mfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.hca-rate{display:inline-flex;gap:2px}
.hca-rate button{width:36px;height:32px;padding:0;border:1px solid transparent;background:none;border-radius:var(--r-md);color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer}
.hca-rate button i,.hca-rate button svg{width:16px;height:16px}
.hca-rate button:hover{color:var(--text);background:var(--n-50)}
.hca-rate button[aria-pressed="true"]{color:var(--brand);border-color:var(--red-200);background:var(--red-50)}
.hca-escbtn{font-size:12.5px}
.hca-esc{display:flex;flex-direction:column;gap:6px;width:100%}
.hca-esc textarea{font-size:14px;min-height:0}
.hca-sent{display:flex;align-items:flex-start;gap:5px;font-size:12.5px;color:var(--green-700)}
.hca-sent i,.hca-sent svg{width:14px;height:14px;flex:none;margin-top:2px}
.hca-err{color:var(--brand);font-size:12.5px;font-weight:600}
.hca-err:empty{display:none}
.hca-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hca-row .btn-primary{width:auto}
.hca-sugs{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hca-sug{background:#fff;border:1px solid var(--red-200);color:var(--brand);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;min-height:36px;max-width:100%}
.hca-sug:hover{background:var(--red-50)}
.hca-foot{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:end;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.hca-foot[hidden]{display:none}
.hca-foot textarea{resize:none;min-height:42px;max-height:110px;font-size:15px;padding:10px 12px;line-height:1.4}
.hca-send{width:44px;height:44px;padding:0;flex:none;border-radius:50%;border:none;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hca-send:hover{background:var(--brand-hover)}
.hca-send i,.hca-send svg{width:18px;height:18px}
.hca-left{grid-column:1/-1;font-size:11.5px;color:var(--muted)}
.hca-note{font-size:11.5px;color:var(--muted);margin-top:6px}
.hca-fqq{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.hca-fqq[hidden]{display:none}
.hca-fqq small{font-weight:400;color:var(--muted)}
.hca-fqq input{width:100%;font-size:14px}
.hca-empty{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;padding:8px 2px}
.hca-new{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;background:var(--paper)}
.hca-new summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--brand);min-height:30px;display:flex;align-items:center}
.hca-new textarea{margin:6px 0 8px;font-size:14px}
.hca-tk{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.hca-tk.new{border-color:var(--green-500);box-shadow:0 0 0 2px var(--green-50)}
.hca-tk-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
.hca-tk-txt{font-size:14px;font-weight:600;color:var(--text-strong);overflow-wrap:anywhere}
.hca-tk-a{background:var(--green-50);border-left:3px solid var(--green-500);border-radius:6px;padding:8px 10px;font-size:14px;overflow-wrap:anywhere}
.hca-tk-a b{display:block;font-size:12px;color:var(--green-700);margin-bottom:2px}
@media (max-width:560px){
  .hca{right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom) + var(--hca-lift))}
  .hca-fab{width:50px;height:50px}
  .hca-panel{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom) + var(--hca-lift));height:calc(100dvh - 70px - var(--hca-lift));border-radius:var(--r-lg)}
}
@media (max-width:560px){ body.hca-on .views{padding-bottom:84px} body.hca-on .gmain{padding-bottom:64px} }   /* chừa chỗ để nút cuối trang không nằm dưới bubble */
@media print{ .hca{display:none!important} }
/* mục Hỗ trợ nhân viên (chủ cửa hàng) */
.hca-adm{display:flex;flex-direction:column;gap:16px}
.hca-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.hca-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-xs);display:flex;flex-direction:column;gap:2px;min-width:0}
.hca-kpi span{font-size:12.5px;color:var(--muted);font-weight:600}
.hca-kpi b{font-size:22px;color:var(--text-strong);line-height:1.3;overflow-wrap:anywhere}
.hca-kpi small{font-size:12px;color:var(--muted)}
.hca-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:16px;align-items:start}
.hca-grid .card{margin:0;min-width:0}
.hca-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.hca-at,.hca-wk,.hca-dn{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.hca-at-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.hca-at-h .muted{font-size:12.5px}
.hca-at-q{font-size:14.5px;font-weight:600;color:var(--text-strong);overflow-wrap:anywhere}
.hca-at-note{font-size:13.5px;background:var(--amber-50);border-radius:6px;padding:6px 10px;overflow-wrap:anywhere}
.hca-at-ai{font-size:13.5px;color:var(--muted)}
.hca-at-ai summary{cursor:pointer;font-weight:600}
.hca-at-ai div{margin-top:4px;background:var(--n-50);border-radius:6px;padding:8px 10px;color:var(--text);overflow-wrap:anywhere}
.hca-at textarea,.hca-ff textarea{font-size:14px}
.hca-at label.chk{font-weight:500;font-size:13px;align-items:flex-start}
.hca-ff{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hca-ff input{width:100%}
.hca-tp{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.hca-tp:last-child{border-bottom:none}
.hca-tp>div{min-width:0;overflow-wrap:anywhere}
.hca-tp .muted{font-size:12.5px;margin-top:2px}
.hca-tp-n{min-width:38px;height:30px;border-radius:999px;background:var(--red-50);color:var(--brand);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:13.5px}
.hca-fq{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0;min-width:0}
.hca-fq:last-child{border-bottom:none}
.hca-fq>div{min-width:0;font-size:13.5px;overflow-wrap:anywhere}
.hca-fq .btn-sm{flex:none}
.hca-fq .btn-sm.armed{background:var(--brand);border-color:var(--brand);color:#fff}
.hca-at .btn-sm.armed{background:var(--brand);border-color:var(--brand);color:#fff}
.hca-set{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.hca-set .seg{margin:0}
.hca-set input{width:90px}
.hca-set>span{display:flex;flex-direction:column;min-width:0;flex:1 1 220px}
.hca-sub{font-size:12px;color:var(--muted);font-weight:400}

/* ===== Thông báo tự động theo lịch (notify.js, từ 31/10/2026) — thẻ trong Cài đặt, chỉ chủ cửa hàng ===== */
.nt{display:flex;flex-direction:column;gap:14px}
.nt-rule{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--card)}
.nt-rule.off .nt-ic{opacity:.45}
.nt-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.nt-head .seg{margin:0 0 0 auto}
.nt-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--red-50);color:var(--brand)}
.nt-ic i,.nt-ic svg{width:18px;height:18px}
.nt-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.nt-t span{font-size:13px;color:var(--muted)}
.nt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nt-row .seg{margin:0}
.nt-lb{font-size:13px;font-weight:600;min-width:64px}
.nt-time{width:120px;padding:8px 10px}
.nt-days{display:flex;flex-wrap:wrap;gap:6px}
.nt-day,.nt-all{padding:0;min-width:40px;height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink,#222);font-size:13px;font-weight:600;cursor:pointer}
.nt-all{padding:0 12px;color:var(--muted);font-weight:500}
.nt-day.on{background:var(--brand);border-color:var(--brand);color:#fff}
.nt-check{display:flex;align-items:center;gap:8px;font-size:13.5px}
.nt-check input{width:18px;height:18px;margin:0}
.nt-reach{display:flex;gap:8px;font-size:13px;background:var(--n-50,#f7f6f4);border-radius:10px;padding:10px;line-height:1.5}
.nt-reach>i,.nt-reach>svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted)}
.nt-reach>div{min-width:0;overflow-wrap:anywhere}
.nt-off{color:var(--amber-700)}
.nt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.nt-meta>span{display:block}
.nt-meta>.nt-next{display:inline-flex;align-items:center;gap:4px}
.nt-meta i,.nt-meta svg{width:14px;height:14px}
.nt-acts{display:flex;flex-wrap:wrap;gap:8px}
.nt-acts>button{flex:0 1 auto;width:auto}
@media (max-width:520px){.nt-acts>button{flex:1 1 140px}}
.nt-pv{margin-top:6px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.04);font-size:13px;color:var(--ink,#222);overflow-wrap:anywhere}
.nt-note summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
.nt-note .sub{margin-top:6px}
.nt-log{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.nt-log li{border-bottom:1px solid var(--line);padding-bottom:6px;overflow-wrap:anywhere}
.nt-log .bad{color:var(--brand)}
/* thông báo tự tạo */
.nt-csec{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.nt-csec-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nt-csec-h>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
.nt-csec-h .btn-sm{width:auto;flex:none}
.nt-empty{padding:4px 0}
.nt-kv{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.nt-kv span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.nt-kv i,.nt-kv svg{width:14px;height:14px;flex:none;color:var(--muted)}
.nt-ed{border-color:var(--brand);box-shadow:0 0 0 3px var(--red-50)}
.nt-ed-h{font-size:15px}
.nt-f{display:flex;flex-direction:column;gap:6px;font-size:13px}
.nt-in{width:100%;padding:9px 11px;font:inherit;font-size:14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;box-sizing:border-box}
textarea.nt-in{resize:vertical;min-height:70px}
.nt-num{width:100px}
.nt-date{width:180px}
.nt-chips{display:flex;flex-wrap:wrap;gap:6px}
.nt-chip{padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;width:auto;line-height:1.2}
.nt-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.nt-var{font-weight:500;color:var(--muted)}
.nt-dates .nt-chip{min-width:36px;padding:6px 0}
.nt-dates .nt-chip:last-child{padding:6px 11px}
.nt-ppl summary{cursor:pointer;font-weight:600;padding:2px 0}
.nt-ppl .nt-chips{margin-top:6px}
.nt-pvbox{background:var(--n-50);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.nt-pvn{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.nt-pvbox .nt-pv{background:#fff;border:1px solid var(--line)}
.nt-pvbox .nt-pv div{margin-top:2px}
.nt-del.armed{color:#fff;background:var(--brand);border-color:var(--brand)}
.nt-pvbox .bad{color:var(--brand)}