/* Giao diện theo phong cách OnePro (erp.onepro.io.vn): navy #1e3a5a, xanh lá #3ecf8e, Inter */
:root{
  --primary:#1e3a5a; --primary-2:#2a4a6e; --accent:#3ecf8e; --accent-2:#2db87a; --accent-soft:rgba(62,207,142,.14);
  --bg:#f8fafc; --card:#fff; --ink:#1e293b; --ink-2:#475569; --muted:#64748b; --line:#e2e8f0; --line-2:#f1f5f9; --secondary:#f1f5f9;
  --side-ink:#e2e8f0; --side-muted:#94a3b8;
  --ok:#1f9d63; --ok-soft:#dcf7ea; --warn:#b45309; --warn-soft:#fef3c7; --bad:#dc2626; --bad-soft:#fee2e2; --info:#1d4ed8; --info-soft:#dbeafe;
  --radius:12px; --radius-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:14px; color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sidebar ---------- */
#app{display:flex;min-height:100vh}
#side{width:280px;flex:none;background:var(--primary);color:var(--side-ink);position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--primary-2);display:flex;flex-direction:column}
#side .logo{height:64px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--primary-2)}
#side .logo img{height:30px;width:auto}
#side .logo span{font-size:11px;color:var(--side-muted);line-height:1.2;border-left:1px solid var(--primary-2);padding-left:10px}
#side nav{padding:14px 12px;flex:1}
#side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--side-muted);margin:16px 12px 6px;font-weight:600}
#side a{display:flex;gap:12px;align-items:center;color:var(--side-ink);text-decoration:none;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:14.5px;font-weight:500;margin:2px 0}
#side a .ic{color:#cbd5e1}
#side a:hover{background:rgba(42,74,110,.6)}
#side a.on{background:var(--primary-2);color:#fff;font-weight:600}
#side a.on .ic{color:var(--accent)}
#side a .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side a .pill{background:var(--accent);color:var(--primary);font-weight:600;border:none}
#side a .pill.warn{background:#fbbf24;color:#422006} #side a .pill.bad{background:#ef4444;color:#fff} #side a .pill.ok{background:var(--accent);color:var(--primary)}
#side a .pill.muted{background:rgba(255,255,255,.12);color:#e2e8f0}
#side .eng{margin:6px 4px 4px;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--primary-2)}
#side .eng b{display:block;color:#fff;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side .eng small{color:var(--side-muted);font-size:12px}
#side .foot{padding:14px 20px;border-top:1px solid var(--primary-2);font-size:12px;color:var(--side-muted)}

/* ---------- topbar ---------- */
#wrap{flex:1;min-width:0;display:flex;flex-direction:column}
#top{height:65px;position:sticky;top:0;z-index:20;background:rgba(248,250,252,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 24px}
#top .search{position:relative;width:min(448px,45vw)}
#top .search .ic{position:absolute;left:12px;top:11px;color:var(--muted);width:17px;height:17px}
#top .search input{height:40px;border-radius:12px;padding-left:38px;background:rgba(241,245,249,.6);border:1px solid var(--line)}
#top .user{display:flex;align-items:center;gap:10px}
#top .avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;border:2px solid var(--accent)}
#top .user b{display:block;font-size:14px;font-weight:600}
#top .user small{color:var(--muted);font-size:12px}
#top .chip{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 10px;font-size:13px;color:var(--ink-2)}
main{flex:1;padding:24px 24px 60px;min-width:0}

/* ---------- chữ ---------- */
h1{font-size:24px;font-weight:700;margin:0 0 6px;color:var(--ink)} h2{font-size:17px;font-weight:600;margin:0 0 12px} h3{font-size:14.5px;font-weight:600;margin:16px 0 8px}
.lead{color:var(--muted);font-size:15px;margin:0 0 20px;line-height:1.5}
.muted{color:var(--muted)} .small{font-size:12.5px}
.pagehead{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px} .pagehead > div:first-child{flex:1;min-width:0}

/* ---------- thẻ ---------- */
.card{background:var(--card);border:1px solid rgba(226,232,240,.7);border-radius:var(--radius-lg);padding:20px 24px;margin:0 0 16px;box-shadow:var(--shadow)}
.card > h2:first-child{margin-top:0}
.sub2{color:var(--muted);font-size:13px;margin:-8px 0 12px}
.grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1200px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} #side{width:220px} #side .logo span{display:none} #top .search{display:none} .pagehead{flex-direction:column}}
.stat{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px}
.stat .tile{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.stat .tile .ic{width:20px;height:20px}
.stat b{font-size:24px;font-weight:700;line-height:1.1}
.stat span{color:var(--muted);font-size:14px}
.t-gray{background:var(--secondary);color:var(--ink-2)} .t-green{background:var(--ok-soft);color:var(--accent-2)} .t-yellow{background:var(--warn-soft);color:#d97706}
.t-blue{background:var(--info-soft);color:#2563eb} .t-red{background:var(--bad-soft);color:var(--bad)} .t-navy{background:#e6edf5;color:var(--primary)}

/* ---------- thẻ thành viên kiểu thẻ công việc OnePro ---------- */
.mcard{border-left:4px solid #cbd5e1}
.mcard.s-dang{border-left-color:#f59e0b} .mcard.s-cho{border-left-color:#3b82f6} .mcard.s-xong{border-left-color:var(--accent)} .mcard.s-sua{border-left-color:#ef4444}
.mcard .ttl{font-size:16px;font-weight:600;margin:10px 0 2px}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.kpi div{font-size:12px;color:var(--muted)} .kpi b{display:block;font-size:17px;color:var(--ink);font-weight:700}
.bar{height:6px;background:var(--secondary);border-radius:999px;overflow:hidden;margin:12px 0 4px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px}

/* ---------- form ---------- */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
label.f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2);font-weight:500;min-width:150px}
input,select,textarea{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:#fff;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
input,select{height:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,207,142,.18)}
textarea{min-height:80px;resize:vertical;line-height:1.5}
td input,td select{height:32px;padding:4px 8px;font-size:13px;border-radius:8px}
input.n{text-align:right;font-variant-numeric:tabular-nums}
input[type=file]{height:auto;padding:8px}
button,.btn{font:inherit;font-size:14px;font-weight:500;height:36px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 14px;cursor:pointer;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
button:hover{background:var(--secondary)}
button.pri{background:var(--primary);border-color:var(--primary);color:#fff} button.pri:hover{background:var(--primary-2)}
button.ok{background:var(--accent);border-color:var(--accent);color:#fff} button.ok:hover{background:var(--accent-2)}
button.del{border:none;background:none;color:#94a3b8;padding:0 6px;height:28px} button.del:hover{color:var(--bad);background:var(--bad-soft)}
button:disabled{opacity:.45;cursor:not-allowed}
button .ic{width:16px;height:16px}

/* ---------- tab dạng segmented như OnePro ---------- */
.tabs{display:flex;gap:2px;background:var(--secondary);padding:4px;border-radius:12px;margin:14px 0 16px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:thin}
.tabs a{padding:7px 12px;flex:none;cursor:pointer;border-radius:9px;color:var(--ink-2);font-weight:500;font-size:13.5px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:#fff;color:var(--primary);font-weight:600;box-shadow:var(--shadow)}

/* ---------- bảng ---------- */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
th,td{border-bottom:1px solid var(--line-2);padding:9px 10px;text-align:left;vertical-align:middle}
th{background:var(--bg);font-weight:600;font-size:12px;color:var(--muted);position:sticky;top:0;text-transform:uppercase;letter-spacing:.03em}
tr:hover td{background:#fbfcfd}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.tot td{font-weight:700;background:var(--bg);border-top:1px solid var(--line)}
tr.flag td{background:#fffbeb}
.scroll{overflow:auto;max-height:580px;border:1px solid var(--line);border-radius:12px}
.scroll table th{z-index:1}

/* ---------- nhãn trạng thái ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--secondary);color:var(--ink-2);white-space:nowrap;border:1px solid transparent}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:#fca5a5} .pill.pri{background:var(--info-soft);color:var(--info)}

/* ---------- thông báo ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;margin:0 0 16px;border:1px solid;font-size:13.5px;line-height:1.55}
.banner .ic{margin-top:1px}
.banner.warn{background:#fffbeb;border-color:#fde68a;color:#78350f}
.banner.bad{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.banner.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.banner.info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}

/* ---------- bút toán, markdown, chat ---------- */
.entry{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px;background:#fff;border-left:4px solid var(--accent)}
.entry.badbal{border-left-color:var(--bad);background:#fffafa}
.md{line-height:1.6} .md h3,.md h4,.md h5,.md h6{margin:14px 0 6px} .md p{margin:6px 0} .md ul{margin:4px 0 8px 18px;padding:0}
.md table{margin:8px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.md pre{background:var(--primary);color:#e2e8f0;padding:12px;border-radius:10px;overflow:auto;font-size:12px}
.md code{background:var(--secondary);padding:1px 5px;border-radius:5px;font-size:12px} .md pre code{background:none;padding:0;color:inherit}
details{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0} summary{cursor:pointer}
.chat{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow:auto;padding:4px}
.msg{padding:12px 14px;border-radius:14px;max-width:88%}
.msg.user{background:var(--primary);color:#fff;align-self:flex-end;white-space:pre-wrap;border-bottom-right-radius:4px}
.msg.assistant{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg .meta{font-size:11px;color:var(--muted);margin-top:8px}
.aihead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.aihead .tile{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent-2);display:flex;align-items:center;justify-content:center}
.aiblk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px dashed var(--accent);border-radius:10px;padding:8px 10px;margin:8px 0;background:#f3fcf7;font-size:12.5px}
#toast{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:50}
#toast div{background:var(--primary);color:#fff;padding:11px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.2);max-width:380px;border-left:4px solid var(--accent);font-size:13.5px}
#toast div.bad{border-left-color:#ef4444}
.drop{border:2px dashed #cbd5e1;border-radius:14px;padding:22px;text-align:center;background:var(--bg)}
.drop .tile{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}
td.hl,th.hl{background:#ecfdf5}
.chk{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink);font-weight:400} .chk input{width:16px;height:16px;accent-color:var(--accent)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.gate{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)} .gate:last-child{border:none}
.gate .tile{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}

pre[data-lang="aje"],pre[data-lang="pbc"],pre[data-lang="risk"]{display:none}
.aiblk .lines{flex-basis:100%;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--ink-2)}

/* ---------- danh mục, lịch kiểu Outlook ---------- */
.g31{grid-template-columns:minmax(0,3fr) minmax(280px,1fr)}
@media(max-width:1200px){.g31{grid-template-columns:1fr}}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.steps{display:flex;gap:3px;margin-bottom:4px}.steps i{width:16px;height:6px;border-radius:3px;background:var(--line)}.steps i.d{background:var(--accent)}.steps i.c{background:var(--primary)}
.mini{display:flex;align-items:center;gap:8px;min-width:110px}.mini .bar{flex:1;margin:0}.mini span{font-size:12px;color:var(--muted);width:34px;text-align:right}
.pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media(max-width:1200px){.pipe{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcol{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;min-height:110px}
.pcol b{font-size:13px}
.pchip{display:flex;align-items:center;gap:6px;font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pchip:hover{border-color:var(--accent)}
.cal{padding:16px 16px 0;overflow:hidden}
.cal-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cal-top button{height:34px;min-width:34px;justify-content:center}
.cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);margin:0 -16px;width:calc(100% + 32px)}
.cal-head div{padding:8px 10px;font-size:12px;font-weight:600;color:var(--muted)}
.cal-week{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:30px repeat(3,24px) 20px;width:calc(100% + 32px);aspect-ratio:7/1;min-height:126px;margin:0 -16px;border-bottom:1px solid var(--line)}
.cal-week:last-child{border-bottom:none}
.cal-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-day{border-right:1px solid var(--line-2);padding:6px 8px;cursor:pointer;transition:background .1s}
.cal-day:last-child{border-right:none}
.cal-day:hover{background:#f8fafc}
.cal-day.we{background:#fbfcfd}
.cal-day.other .dn{color:#cbd5e1}
.cal-day .dn{font-size:13px;font-weight:500;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;padding:0 4px}
.cal-day.today .dn{background:var(--primary);color:#fff;font-weight:700}
.cal-day.sel{background:rgba(62,207,142,.10);box-shadow:inset 0 0 0 2px var(--accent)}
.cal-fg{display:contents}
.ev{position:relative;z-index:1;margin:1px 4px;height:21px;line-height:21px;border-radius:5px;font-size:11.5px;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--ink)}
.ev.k-range{background:color-mix(in srgb,var(--c) 18%,#fff);border-left:3px solid var(--c);font-weight:500}
.ev.k-pt,.ev.k-done{background:none;padding-left:16px}
.ev.k-pt::before,.ev.k-done::before{content:"";position:absolute;left:5px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--c)}
.ev.k-done{color:var(--ok)}
.ev.k-dl{background:#fee2e2;color:#b91c1c;font-weight:600;border-left:3px solid #ef4444}
.ev.k-pay{background:#dcf7ea;color:#15803d;border-left:3px solid var(--accent)}
.ev.k-pbc{background:#fef3c7;color:#92400e;border-left:3px solid #f59e0b}
.ev.cl{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.ev.cr{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.ev:hover{filter:brightness(.96);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.more{position:relative;z-index:1;font-size:11.5px;color:var(--primary);font-weight:600;padding:0 8px;cursor:pointer;line-height:20px}
.selday{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.selday b{font-size:32px;font-weight:700;color:var(--primary);line-height:1}
.ag{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;border:1px solid var(--line);margin:6px 0;cursor:pointer;background:#fff}
.ag .dot{margin-top:5px}
.ag:hover{border-color:var(--accent)}
.ag.k-dl,.ag.dl{border-color:#fecaca;background:#fef2f2}
.ag.k-pay{border-color:#bbf7d0;background:#f0fdf4}
.ag.k-pbc{border-color:#fde68a;background:#fffbeb}
.agd{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 4px}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.ev-s{font-size:11.5px;padding:2px 8px;border-radius:5px;--c:var(--primary)}
.ev-s.k-range{background:#e6edf5;border-left:3px solid var(--primary)}.ev-s.k-pt{background:var(--secondary)}.ev-s.k-dl{background:#fee2e2;color:#b91c1c}.ev-s.k-pay{background:#dcf7ea;color:#15803d}.ev-s.k-pbc{background:#fef3c7;color:#92400e}
.card .chk{margin:6px 0}