/* Giao diện kiểu Microsoft Excel: xanh Excel, nền trắng, đường kẻ ô xám, góc vuông, phông Segoe UI.
   Nạp sau style.css và studio.css. */
:root{
  --xl-green:#217346; --xl-green-dark:#185c37; --xl-green-deep:#0e3f25; --xl-green-hover:#1b6a3e;
  --xl-sel:#e3f1e8; --xl-sel-strong:#cde8d6; --xl-grid:#d4d4d4; --xl-grid-soft:#e7e7e7;
  --xl-head:#f3f3f3; --xl-head-dark:#e6e6e6; --xl-ink:#252423; --xl-muted:#605e5c; --xl-bg:#f8f8f8;
  --green:var(--xl-green); --line:var(--xl-grid); --muted:var(--xl-muted); --ink:var(--xl-ink); --bg:var(--xl-bg);
}
html,body{background:var(--xl-bg)!important;color:var(--xl-ink)!important;font-family:'Segoe UI',Calibri,'Helvetica Neue',Arial,sans-serif!important}
*{border-radius:0}
button,input,select,textarea{font-family:inherit!important;border-radius:2px!important}

/* Thanh bên: như khung Backstage của Excel */
.sidebar{background:var(--xl-green)!important;color:#fff!important;border-right:0!important}
.sidebar .brand.logo-only img{border-radius:4px!important;box-shadow:0 0 0 1px rgba(255,255,255,.35)!important}
.sidebar .brand small,.brand.logo-only small{color:#e6f2ea!important;letter-spacing:1.4px!important;font-weight:600!important}
.sidebar nav button{color:#fff!important;background:transparent!important;border-radius:0!important;border-left:3px solid transparent!important;font-weight:400!important}
.sidebar nav button:hover{background:var(--xl-green-hover)!important}
.sidebar nav button.active{background:var(--xl-green-dark)!important;color:#fff!important;border-left-color:#fff!important;font-weight:600!important}
.sidebar nav button svg{stroke:currentColor!important;color:#fff!important}
.sidebar .note.ver{color:#cfe6d8!important}
.badge{background:#d13438!important;box-shadow:0 0 0 2px var(--xl-green)!important}

/* Thanh trên: như thanh công thức */
.topbar{border-bottom:1px solid var(--xl-grid)!important;min-height:44px!important}
.status{border-radius:2px!important;background:#fff4ce!important;color:#7a5c00!important;border:1px solid #f0d78c!important}
.status.connected{background:#dff6dd!important;color:#0e5e2a!important;border-color:#9fd89f!important}
.profile,.avatar{border-radius:2px!important;background:var(--xl-head-dark)!important;color:var(--xl-ink)!important}

/* Tiêu đề trang */
.pagehead h1{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif!important;font-size:1.375rem!important;font-weight:600!important;color:var(--xl-ink)!important}

/* Khối nội dung: như vùng bảng tính */
.panel,.connectcard,.reportpanel,.sidepanel,.stat,.groupcard,.project-progress,details.sourcegroup.others,.empty,dialog{background:#fff!important;border:1px solid var(--xl-grid)!important;border-radius:0!important;box-shadow:none!important}
.panelhead,.dialoghead{background:var(--xl-head)!important;border-bottom:1px solid var(--xl-grid)!important}
.panelhead h2,.connectcard h2,.sidepanel h2{font-size:.9375rem!important;font-weight:600!important;color:var(--xl-ink)!important}
.projectrow,.workrow,.message,.task,.event{border-bottom:1px solid var(--xl-grid-soft)!important;border-radius:0!important}
.projectrow:hover,.workrow:hover,.message:hover,.task:hover{background:#f5faf7!important}

/* Ô thống kê: như ô có tiêu đề cột */
.stat{padding:0 0 14px!important;overflow:hidden}
.stat .value,.stat small{display:block;padding:0 16px}
.stat .label{display:block;background:var(--xl-head);margin:0 0 10px;padding:6px 16px;border-bottom:1px solid var(--xl-grid);color:var(--xl-muted)!important;font-size:.75rem!important;text-transform:uppercase;letter-spacing:.4px}
.stat .value{color:var(--xl-ink)!important;font-family:Calibri,'Segoe UI',sans-serif!important}
.stat:first-child{background:#fff!important;border-color:var(--xl-grid)!important;box-shadow:none!important}
.stat:first-child .label,.stat:first-child small{color:var(--xl-muted)!important}
.stat.alert .value{color:#a4262c!important}

/* Nút */
button,.linkbutton{background:#fff!important;border:1px solid #c8c6c4!important;color:var(--xl-ink)!important;box-shadow:none!important}
button:hover,.linkbutton:hover{background:var(--xl-head)!important;border-color:#a19f9d!important}
.primary,button.primary,.linkbutton.primary{background:var(--xl-green)!important;border-color:var(--xl-green)!important;color:#fff!important}
.primary:hover,button.primary:hover{background:var(--xl-green-dark)!important;border-color:var(--xl-green-dark)!important}
button:disabled{opacity:.5!important}
.quiet{background:transparent!important}
.danger{color:#a4262c!important}
.prio-filter button.active,.tabs button.active{background:var(--xl-sel-strong)!important;border-color:var(--xl-green)!important;color:var(--xl-green-deep)!important;font-weight:600!important}
.sidebar nav button,.sidebar nav button:hover{border-top:0!important;border-right:0!important;border-bottom:0!important}

/* Ô nhập: viền xanh khi chọn như ô Excel */
input,select,textarea{border:1px solid #c8c6c4!important;background:#fff!important;color:var(--xl-ink)!important}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--xl-green)!important;outline-offset:-1px!important;border-color:var(--xl-green)!important}

/* Nhãn: kiểu ô định dạng của Excel (Good / Neutral / Bad) */
.tag{border-radius:2px!important;background:var(--xl-head)!important;color:var(--xl-muted)!important;border:1px solid var(--xl-grid-soft)}
.tag.code,.projectrow .code{background:transparent!important;color:var(--xl-green-dark)!important;font-family:Calibri,'Segoe UI',sans-serif!important}
.tag.code{border:1px solid #9fd2b3!important;background:#e9f5ee!important}
.projectrow .code.is-priority,.project-progress.is-priority,.prio-sel-priority{background:#ffeb9c!important;color:#7a4b00!important;border-color:#f2d36b!important;border-radius:2px!important}
.prio-sel-delay{background:#ffc7ce!important;color:#9c0006!important;border-color:#f3a6b0!important}
.prio-sel-stopped{background:#ededed!important;color:#605e5c!important;border-color:#c8c6c4!important}
.prio-sel-normal{background:#fff!important;color:#185c37!important}
.tag.high,.due.overdue{background:#ffc7ce!important;color:#9c0006!important;border-color:#f3a6b0!important}
.tag.review{background:#ffeb9c!important;color:#7a4b00!important}

/* Thanh tiến độ */
progress::-webkit-progress-value{background:var(--xl-green)!important}
progress::-webkit-progress-bar{background:var(--xl-grid-soft)!important}
progress{accent-color:var(--xl-green)}

/* Công tắc, liên kết, chip */
.switch.on{background:var(--xl-green)!important}
a{color:#0f6cbd}
.chip{border-radius:2px!important;border-color:var(--xl-grid)!important}
.chip:hover{border-color:var(--xl-green)!important;background:var(--xl-sel)!important}
.chip.bad{background:#fde7e9!important;border-color:#f3a6b0!important;color:#9c0006!important}

/* Thông báo */
.banner{background:#e9f5ee!important;border:1px solid #9fd2b3!important;border-left:4px solid var(--xl-green)!important;border-radius:0!important;color:var(--xl-ink)!important}
.banner.warn{background:#fff8e1!important;border-color:#f2d36b!important;border-left-color:#c19c00!important}
.errorbox{border-radius:0!important}
#toast{background:#323130!important;border-radius:2px!important}
.updating{background:rgba(255,255,255,.96)!important}
.updating img,.login .brand.logo-only img{border-radius:4px!important}
details.moreprojects>summary,details.sourcegroup.others>summary{background:var(--xl-head)}

/* Điện thoại: thanh dưới màu trắng, mục chọn màu xanh Excel */
@media(max-width:720px){
  .sidebar{background:#fff!important;border-top:1px solid var(--xl-grid)!important}
  .sidebar nav button{color:var(--xl-muted)!important;border-left:0!important}
  .sidebar nav button svg{color:currentColor!important}
  .sidebar nav button.active{background:var(--xl-sel)!important;color:var(--xl-green-dark)!important}
  .badge{box-shadow:0 0 0 2px #fff!important}
}

/* 0.5.6: menu ngang kiểu thanh tab Excel trên cùng, gọn chiều cao (máy tính) */
@media(min-width:721px){
  .shell{display:block!important;grid-template-columns:none!important}
  .sidebar{position:sticky!important;top:0!important;inset:auto!important;width:100%!important;height:44px!important;padding:0 14px!important;display:flex!important;flex-direction:row!important;align-items:flex-end!important;gap:18px!important;z-index:30!important;box-shadow:0 1px 0 var(--xl-green-dark)}
  .sidebar .brand.logo-only{flex-direction:row!important;align-items:center!important;gap:8px!important;align-self:center!important;margin:0!important;padding:0!important}
  .sidebar .brand.logo-only img{width:26px!important;height:26px!important;border-radius:3px!important}
  .sidebar .brand.logo-only small{font-size:.6875rem!important;letter-spacing:1px!important;white-space:nowrap}
  .sidebar nav{display:flex!important;flex-direction:row!important;gap:2px!important;margin:0!important;height:36px;align-items:stretch}
  .sidebar nav button{height:36px!important;min-height:0!important;margin:0!important;padding:0 14px!important;border-left:0!important;border-radius:3px 3px 0 0!important;display:flex!important;align-items:center!important;gap:7px!important;font-size:.875rem!important;white-space:nowrap;width:auto!important}
  .sidebar nav button svg{width:16px!important;height:16px!important}
  .sidebar nav button:hover{background:var(--xl-green-hover)!important}
  .sidebar nav button.active{background:var(--xl-bg)!important;color:var(--xl-green-dark)!important;border-left:0!important}
  .sidebar nav button.active svg{color:var(--xl-green-dark)!important}
  .sidebar .barstatus{margin-left:auto;align-self:center;font-size:.75rem;color:#e6f2ea;cursor:pointer;white-space:nowrap;padding:3px 8px;border:1px solid rgba(255,255,255,.35);border-radius:2px}
  .sidebar .barstatus:not(.connected){background:#fff4ce;color:#7a5c00;border-color:#f0d78c}
  .sidebar .note.ver{margin:0!important;align-self:center!important;padding:0!important}
  .topbar{display:none!important}
  .badge{position:relative!important;top:-7px!important;right:auto!important;margin-left:3px!important;display:inline-block}
  .sidebar nav button.active .badge{box-shadow:0 0 0 2px var(--xl-bg)!important}
  .main{grid-column:auto!important;max-width:none!important;padding:12px 22px 40px!important}
  .pagehead{margin:4px 0 14px!important}
}
@media(min-width:721px) and (max-width:1100px){.sidebar .brand.logo-only small,.sidebar .note.ver{display:none!important}.sidebar nav button{padding:0 10px!important}}
@media(min-width:721px) and (max-width:900px){.sidebar nav button svg{display:none!important}}

/* Công tắc Nguồn tin: hình bầu dục, bật = vàng nhạt */
.switch{border-radius:999px!important;width:46px!important;height:26px!important;min-height:26px!important;padding:2px!important;background:#e1dfdd!important;border:1px solid #c8c6c4!important}
.switch:before{border-radius:50%!important;width:20px!important;height:20px!important;background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.25)!important;transition:transform .15s}
.switch.on{background:#ffe699!important;border-color:#e2c25b!important}
.switch.on:before{transform:translateX(20px)!important;box-shadow:0 0 0 1px #d9b440,0 1px 2px rgba(0,0,0,.2)!important}
.switch:hover{filter:brightness(.97)}

/* Việc mới ở Tổng quan */
.tag.new{background:#d13438!important;color:#fff!important;border-color:#d13438!important;font-weight:600}
.workrow.is-new{background:#fffbea!important;box-shadow:inset 3px 0 0 #d13438}

@media(max-width:720px){.sidebar .barstatus{display:none}}

/* 0.5.7: menu cố định trên cùng khi cuộn; chân trang */
@media(min-width:721px){
  .sidebar{position:fixed!important;top:0!important;left:0!important;right:0!important}
  .main{padding-top:58px!important}
}
.appfoot{margin:40px auto 0;padding:14px 0 6px;border-top:1px solid var(--xl-grid-soft);text-align:center;color:#a19f9d;font-size:.75rem;line-height:1.6}
.appfoot details{margin-top:2px}
.appfoot summary{cursor:pointer;list-style:none;display:inline-block;color:#a19f9d}
.appfoot summary::-webkit-details-marker{display:none}
.appfoot summary:hover{text-decoration:underline}
.appfoot ul{list-style:none;padding:0;margin:8px auto 0;max-width:760px;text-align:left}
.appfoot li{padding:2px 0}
.appfoot b{font-weight:600;color:#8a8886}
.login+.appfoot,.login .appfoot{border:0}

/* 0.5.8: hồ sơ lưu trên máy, ảnh */
.rootline{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.rootline .actions{margin:0}
.pathline{font-family:Consolas,'Cascadia Mono',monospace;font-size:.75rem;color:var(--xl-muted);overflow-wrap:anywhere;margin:4px 0 0}
.uploadbox{margin-top:12px;border-top:1px solid var(--xl-grid-soft);padding-top:10px}
.uploadbox summary{cursor:pointer;color:var(--xl-green-dark);font-weight:600;font-size:.875rem}
.photorow{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:start}
.photorow{display:grid!important;gap:14px}
img.thumb{width:72px;height:72px;object-fit:cover;border:1px solid var(--xl-grid);display:block;background:#fff}
img.thumb.big{width:220px;height:auto;max-height:220px;object-fit:contain}
.thumb.missing{display:grid;place-items:center;width:72px;height:72px;border:1px dashed var(--xl-grid)}
@media(max-width:720px){.photorow{grid-template-columns:auto minmax(0,1fr)!important}.photorow .docactions{grid-column:1/-1}}

.mkrow{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px;align-items:center;margin-top:6px}
.mkrow button{width:auto!important;white-space:nowrap}

/* 0.5.15 */
.srcproj{margin:0 0 14px}
.srcproj>h3{font-size:.9375rem;font-weight:600;margin:0 0 10px;display:flex;align-items:center;gap:8px;padding:8px 14px;background:#e2efda;border:1px solid #c6e0b4;border-left:4px solid var(--xl-green);color:var(--xl-green-deep)}
.srcproj>h3 .tag.code{background:#fff!important}
.srcproj.loose>h3{background:var(--xl-head);border-color:var(--xl-grid);border-left-color:#a19f9d;color:var(--xl-ink)}
.srcproj>h3 small{color:var(--xl-muted);font-weight:400}
.chipgrp{display:inline-flex}
.chipgrp .chip:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.chipgrp .chip.web{border-left:0!important;padding:4px 8px;text-decoration:none}
.linkrow{grid-template-columns:minmax(110px,1fr) minmax(150px,1.5fr) minmax(150px,1.5fr) auto auto auto}
.rootline.second{margin-top:14px;padding-top:14px;border-top:1px solid var(--xl-grid-soft)}
.sidebar nav button.dragging{opacity:.4}
.sidebar nav button.dropbefore{box-shadow:inset 3px 0 0 #fff!important}
.sidebar nav button.dropafter{box-shadow:inset -3px 0 0 #fff!important}
@media(max-width:720px){.linkrow{grid-template-columns:1fr auto auto auto}.linkrow .lk-label,.linkrow .lk-web{grid-column:1/-1}}

/* 0.5.16: tin nhắn theo năm › tháng › ngày; gọi tên @ */
#messageList details.mg>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--xl-grid-soft);user-select:none}
#messageList details.mg>summary::-webkit-details-marker{display:none}
#messageList details.mg>summary::before{content:'▸';color:var(--xl-muted);width:10px}
#messageList details.mg[open]>summary::before{content:'▾'}
#messageList .mg-y>summary{background:var(--xl-head-dark);font-weight:700}
#messageList .mg-m>summary{background:var(--xl-head);font-weight:600;padding-left:28px}
#messageList .mg-d>summary{background:#fff;padding-left:42px}
#messageList .mg-d[open]>summary{background:#e2efda;color:var(--xl-green-deep)}
#messageList .mg-d .message{padding-left:58px}
.gcount{font-size:.75rem;color:var(--xl-muted);font-weight:400;background:#fff;border:1px solid var(--xl-grid-soft);padding:0 6px}
.gnames{margin-left:auto;font-size:.75rem;color:var(--xl-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.mentionwrap{position:relative}
.mentionlist{position:fixed;z-index:200;background:#fff;border:1px solid var(--xl-grid);box-shadow:0 8px 24px rgba(0,0,0,.16);min-width:240px;overflow-y:auto;overscroll-behavior:contain}
.mentionlist[hidden]{display:none!important}
.mentionlist .mi{flex-shrink:0;min-height:36px}
.mentionlist .mi{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:.875rem}
.mentionlist .mi.on,.mentionlist .mi:hover{background:var(--xl-sel)}
.mentionlist .mi.muted{color:var(--xl-muted);cursor:default}
.mentionlist .mav{width:24px;height:24px;display:grid;place-items:center;background:var(--xl-head);border:1px solid var(--xl-grid);font-size:.6875rem;font-weight:700;color:var(--xl-green-dark)}
@media(max-width:720px){#messageList .mg-d .message{padding-left:16px}.gnames{display:none}}

/* 0.5.19: phân loại thủ công hồ sơ */
.assignsel{min-height:30px;padding:2px 26px 2px 8px;font-size:.8125rem;max-width:340px;background:#fff}
.assignsel.unset{background:#fff2cc!important;border-color:#f2d36b!important;color:#7a4b00!important;font-weight:600}

/* 0.5.20: trả lời ngay dưới tin */
.messagehead .replybtn{margin-left:auto;opacity:0;transition:opacity .12s;min-height:28px;padding:2px 10px}
.message:hover .replybtn,.message:focus-within .replybtn{opacity:1}
@media(hover:none){.messagehead .replybtn{opacity:1}}
.replybox{margin-top:10px;padding:10px 12px;border:1px solid #9fd2b3;border-left:3px solid var(--xl-green);background:#f6fbf8}
.replybox .quoteline{font-size:.8125rem;color:var(--xl-muted);margin-bottom:6px}
.replybox textarea{width:100%;resize:vertical;min-height:56px}

/* 0.5.21: luồng việc */
.thread{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:14px 20px;border-bottom:1px solid var(--xl-grid-soft);background:#fff}
.thread.is-new{background:#fffbea;box-shadow:inset 3px 0 0 #d13438}
.thread.is-over{box-shadow:inset 3px 0 0 #c00000}
.thread h3{margin:6px 0 2px;font-size:.9375rem}
.thr-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.thr-st{font-size:.75rem;font-weight:600;padding:1px 7px;border:1px solid}
.st-giao{background:#ddebf7;color:#1f4e79;border-color:#9dc3e6}
.st-nhan{background:#e2efda;color:#375623;border-color:#a9d08e}
.st-gui{background:#ffeb9c;color:#7a4b00;border-color:#f2d36b}
.st-sua{background:#fce4d6;color:#843c0c;border-color:#f4b183}
.st-xong{background:#c6efce;color:#006100;border-color:#9fd89f}
.st-bo{background:#ededed;color:#605e5c;border-color:#c8c6c4}
.st-over{background:#ffc7ce;color:#9c0006;border-color:#f3a6b0}
.thr-step{margin:4px 0 0;font-size:.8125rem;color:var(--xl-green-deep);background:#f3faf6;border-left:2px solid var(--xl-green);padding:3px 8px}
.thread .docactions{align-self:start}
.thr-tl{grid-column:1/-1}
.thr-tl>summary{cursor:pointer;font-size:.8125rem;color:var(--xl-green-dark);font-weight:600;padding:4px 0}
.thr-tl ol{list-style:none;margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid var(--xl-grid)}
.thr-tl li{position:relative;padding:5px 0 5px 12px;font-size:.8125rem;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.thr-tl li::before{content:'';position:absolute;left:-17px;top:11px;width:8px;height:8px;background:#fff;border:2px solid var(--xl-green)}
.thr-tl .tlt{color:var(--xl-muted);font-size:.75rem;font-family:Calibri,'Segoe UI',sans-serif}
.thr-role{font-size:.6875rem;font-weight:600;padding:0 5px;border:1px solid var(--xl-grid);background:var(--xl-head)}
.role-giao .thr-role{background:#ddebf7;border-color:#9dc3e6}.role-gui .thr-role{background:#ffeb9c;border-color:#f2d36b}.role-sua .thr-role{background:#fce4d6;border-color:#f4b183}.role-xong .thr-role{background:#c6efce;border-color:#9fd89f}
.thr-it-act{margin-left:auto;display:inline-flex;gap:4px}
.thr-it-act .small{min-height:24px;padding:0 8px;font-size:.75rem}
@media(max-width:720px){.thread{grid-template-columns:1fr}.thr-it-act{margin-left:0}}

/* 0.5.22: việc cần theo sát gọn hơn — duyệt / theo dõi, nhắn thẳng vào nhóm, ảnh trong diễn biến */
button.stat{font:inherit;text-align:left;cursor:pointer;color:inherit;width:100%}
button.stat.is-active{outline:2px solid var(--xl-green);outline-offset:-2px}
.st-review{background:#fff2cc;color:#7f6000;border-color:#ffd966}
.thr-main{min-width:0}
.thr-last{margin:4px 0 0;font-size:.8125rem;color:#3b3a39;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-tl li{display:block}
.thr-it-head{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.thr-it-text{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}
.thr-pic{display:inline-block;margin-top:4px}
.thr-reply{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--xl-grid);background:#fafafa}
.thr-reply .quoteline{font-size:.75rem;color:var(--xl-muted);margin-bottom:6px}
.thr-reply textarea{width:100%}
.source-img{max-width:100%;max-height:60vh;display:block;margin-top:8px;border:1px solid var(--xl-grid)}
details.advanced{margin-top:14px;font-size:.8125rem}
details.advanced>summary{cursor:pointer;color:var(--xl-muted)}
article.message.flash{animation:msgflash 2.4s ease-out}
@keyframes msgflash{0%,40%{background:#fff2cc;box-shadow:inset 3px 0 0 #ffc000}100%{background:transparent}}
.toolbar .prio-filter{display:inline-flex}

/* 0.5.23: Nhân sự — sơ đồ cơ cấu phòng */
.org{padding:18px 20px 14px}
.org-title{font-weight:700;font-size:1.05rem;color:#1f3864;margin-bottom:12px}
.org-sub{font-weight:700;font-size:.8125rem;color:#1f3864;margin:4px 0 6px}.org-sub span{font-weight:400}
.org-assigners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.org-as{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border:1px solid #8e8e8e;background:#e8e4f0;font:inherit;cursor:pointer;min-height:0;border-radius:0}
.org-as b{font-size:.8125rem}.org-as small{font-size:.75rem;color:#444}.org-as span{width:100%;text-align:center;background:#f4f1f8;border-top:1px solid #c9c2d6;margin-top:3px;padding-top:2px;font-size:.75rem}
.org-flow{text-align:center;font-weight:700;font-size:.75rem;color:#555;margin:10px 0 2px;display:flex;flex-direction:column;align-items:center}
.org-down{display:block;width:0;height:14px;border-left:1.5px solid #555;margin:2px auto 0;position:relative}
.org-down::after{content:'';position:absolute;left:-5px;bottom:-2px;border:4px solid transparent;border-top:6px solid #555}
.org-leads{display:flex;flex-direction:column;align-items:center;max-width:360px;margin:0 auto 6px}
.org-leads .org-row{width:100%}
.org-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1.5px solid #555;padding-top:12px;margin-top:2px}
.org-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.org-dep{min-height:34px;margin-bottom:6px}.org-gap{height:30px}
.org-unit{background:#9dc3e6;border:1px solid #6f9cc8;text-align:center;padding:6px 6px 0}
.org-unit strong{display:block;font-size:.95rem;padding-bottom:4px}
.org-unit small{display:block;background:#c5daf0;margin:0 -6px;padding:4px 6px;font-size:.75rem;border-top:1px solid #6f9cc8}
.org-grp{background:#dbe5f1;border:1px solid #9fb6d3;text-align:center;font-weight:700;font-size:.75rem;padding:3px;margin-top:6px}
.org-row{display:grid;grid-template-columns:minmax(0,1fr) 38px 44px 46px;align-items:stretch;padding:0;border:1px solid #8a8a8a;font:inherit;font-size:.8125rem;text-align:left;cursor:pointer;min-height:26px;border-radius:0;color:#111}
.org-row>span{padding:4px 6px;border-left:1px solid #8a8a8a;text-align:center;display:flex;align-items:center;justify-content:center}
.org-row>.nm{border-left:0;justify-content:flex-start;text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-row>.n{font-weight:700}
.org-row.z0{background:#e7e6e6}.org-row.ok{background:#c6e0b4}.org-row.warm{background:#ffd966}.org-row.hot{background:#f4a6a6}
.org-row.vac{background:#fff2cc;border-color:#c55a11;justify-content:center;text-align:center;font-weight:700;font-size:.75rem;display:block;padding:5px}
.org-row:hover,.org-as:hover{outline:2px solid var(--xl-green);outline-offset:-1px}
.org-note{margin-top:14px}.org-key{display:inline-block;padding:0 6px;margin:0 3px;border:1px solid #8a8a8a;font-size:.75rem}
.org-key.ok{background:#c6e0b4}.org-key.warm{background:#ffd966}.org-key.hot{background:#f4a6a6}.org-key.z0{background:#e7e6e6}
.org-items{max-height:34vh;overflow:auto;border:1px solid var(--xl-grid)}
.org-item{padding:6px 10px;border-bottom:1px solid var(--xl-grid-soft);font-size:.8125rem}.org-item small{display:block;color:var(--xl-muted)}
.dlg-sub{font-size:.875rem;margin:0 0 6px}
.zalo-table{display:flex;flex-direction:column;max-height:60vh;overflow:auto;border:1px solid var(--xl-grid)}
.zalo-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,1.4fr) 110px 90px;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--xl-grid-soft)}
.zalo-row.need{background:#fffbea}.zalo-row small{display:block;color:var(--xl-muted);font-size:.75rem}
.tag.ok{background:#c6efce;color:#006100}.tag.danger{background:#ffc7ce;color:#9c0006}
@media(max-width:900px){.org-cols{grid-template-columns:1fr}.zalo-row{grid-template-columns:1fr 1fr}}
#app .org button.org-row{width:100%;border-radius:0;box-shadow:none}
#app .org button.org-row.z0{background:#e7e6e6}#app .org button.org-row.ok{background:#c6e0b4}#app .org button.org-row.warm{background:#ffd966}#app .org button.org-row.hot{background:#f4a6a6}#app .org button.org-row.vac{background:#fff2cc;border-color:#c55a11}
#app .org button.org-as{background:#e8e4f0;border-radius:0;box-shadow:none}
.org-leads{max-width:480px;width:100%}
dialog:has(.zalo-table),dialog:has(#personForm){width:min(920px,96vw);max-width:none}
dialog .tag.ok,#app .tag.ok{background:#c6efce;color:#006100;border-color:#9fd89f}dialog .tag.danger,#app .tag.danger{background:#ffc7ce;color:#9c0006;border-color:#f3a6b0}dialog .tag.review{background:#ffeb9c;color:#7a4b00}
.pagehead .orgbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#app .org button.org-row{border:1px solid #8a8a8a!important;color:#111!important}
#app .org button.org-row.z0{background:#e7e6e6!important}#app .org button.org-row.ok{background:#c6e0b4!important}#app .org button.org-row.warm{background:#ffd966!important}#app .org button.org-row.hot{background:#f4a6a6!important}#app .org button.org-row.vac{background:#fff2cc!important;border-color:#c55a11!important}
#app .org button.org-as{background:#e8e4f0!important;border:1px solid #8e8e8e!important}
#app .org button.org-row:hover,#app .org button.org-as:hover{filter:brightness(.96)}
.fullw{width:100%}

/* 0.6.5: Cài đặt thu gọn */
details.setsec{padding:0!important}
details.setsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 20px;user-select:none}
details.setsec>summary::-webkit-details-marker{display:none}
details.setsec>summary::before{content:'▸';color:var(--xl-green);font-size:.9rem;transition:transform .15s}
details.setsec[open]>summary::before{transform:rotate(90deg)}
details.setsec>summary h2{margin:0;font-size:1rem}
details.setsec>summary:hover{background:var(--xl-head)}
details.setsec .setbody{padding:4px 20px 18px;border-top:1px solid var(--xl-grid-soft)}
*:has(> details.setsec){align-items:start!important;row-gap:12px!important}
details.setsec{margin-top:0!important;margin-bottom:0!important}

/* 0.6.7: thông báo gọn */
.notices{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.notices .banner.compact{display:flex!important;align-items:center;gap:10px;padding:5px 10px 5px 12px!important;margin:0!important;font-size:.8125rem!important;line-height:1.4!important;min-height:0!important;border-width:0 0 0 3px!important;border-left-width:3px!important;box-shadow:none!important}
.notices .banner.compact>div{flex:1;min-width:0}
.notices .banner.compact strong{font-weight:600}
.notices .banner.compact button,.notices .banner.compact .linkbutton{min-height:24px!important;padding:0 10px!important;font-size:.75rem!important}
.notices .banner.compact button.x{border:0!important;background:transparent!important;color:#8a8886!important;font-size:1.05rem!important;padding:0 4px!important;line-height:1}
.notices .banner.compact button.x:hover{color:#323130!important}
@media(max-width:720px){.notices .banner.compact{flex-wrap:wrap}}
/* 0.6.10: lưu trên máy cơ quan */
#app .saveto{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:8px;font-size:13px}
#app .saveto label{display:inline-flex;align-items:center;gap:6px;font-weight:500;margin:0}
#app .saveto input{width:auto;margin:0}
#app .rootpanel .rootline.second{border-top:1px solid #e3e8e4;margin-top:10px;padding-top:10px}
/* 0.6.13: dòng trạng thái lưu trữ ở trang Hồ sơ */
#app .storestrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
#app .storestrip p{margin:0}
#app .storestrip .actions{margin:0}
#app .setbody .rootpanel .rootline{display:block}
/* 0.6.14: ô nhắn tin / gửi tệp thu gọn */
details.compose{padding:0!important}
details.compose>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 20px;user-select:none}
details.compose>summary::-webkit-details-marker{display:none}
details.compose>summary::before{content:'▸';color:var(--xl-green);font-size:.9rem;transition:transform .15s}
details.compose[open]>summary::before{transform:rotate(90deg)}
details.compose>summary h2{margin:0;font-size:1rem}
details.compose>.setbody{padding:0 20px 16px}
#app .composefiles{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px}
#app .filechip{display:inline-flex;align-items:center;gap:6px;border:1px solid #d5ddd7;background:#f6f9f7;border-radius:4px;padding:2px 2px 2px 8px;font-size:13px}
#app .filechip small{color:#6b7a70}
#app .filechip button{min-height:0!important;padding:0 6px!important;border:0!important;background:transparent!important}
/* 0.7.0: biên bản giao việc */
#app .ownerline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:4px 0 2px;font-size:12.5px;color:#3d4a41}
#app .ownerline b{font-weight:600;color:#1f2a22}
#app .ownerline .own-pend{color:#9a6b00;background:#fff6dc;border:1px solid #f0dc9c;border-radius:3px;padding:0 5px}
#app .ownerline .manual small{color:#217346}
#app .ownerline .tag{font-size:11px}
#app .ownerline button{min-height:0!important;padding:1px 8px!important;font-size:12px!important}
#app .assigninfo{margin:0 0 10px}
#app .org-row .bb{grid-column:1/-1;font-size:11px;color:#4a5a4f;text-align:left;padding:0 8px 4px;border-top:1px dashed #d5ddd7}
#app .org-row .bb i,#app .org-as i,#app .qldatable i{color:#b42318;font-style:normal;font-weight:600}
#app .qldatable{display:grid;gap:4px;margin:6px 0 12px}
#app .qldatable .qrow{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,1fr) 3fr;gap:8px;align-items:center;padding:6px 10px;border:1px solid #e3e8e4;background:#fbfcfb;font-size:13px}
@media (max-width:700px){#app .qldatable .qrow{grid-template-columns:1fr}}
.pvwrap{max-height:50vh;overflow:auto;border:1px solid #e3e8e4;margin:8px 0}
.pvtable{width:100%;border-collapse:collapse;font-size:13px}
.pvtable th,.pvtable td{padding:6px 8px;border-bottom:1px solid #eef1ef;text-align:left;vertical-align:top}
.pvtable td small{display:block;color:#6b7a70;font-size:11.5px}
.pvtable tr.unmatched td:first-child{border-left:3px solid #f0b400}
.pvtable select{width:100%;max-width:420px}
#app .rulesform h3{font-size:13px;margin:14px 0 6px;color:#217346}
/* 0.7.2: nhân sự dự án */
#app .ownerline .own-c{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;padding:1px 8px;border-left:2px solid #cfe3d6;background:#f6faf7}
#app .ownerline .own-c em{font-style:normal;font-weight:600;color:#217346;margin-right:2px}
#app button.plink{all:unset;cursor:pointer;font-weight:600;color:#1f2a22;border-bottom:1px dotted #8aa596}
#app button.plink:hover{color:#217346;border-bottom-color:#217346}
#app .org-row .bb .tm{color:#1d5f8a}
.teambox{border:1px solid #dfe6e1;padding:8px 12px 10px;margin:0 0 10px}
.teambox legend{font-weight:700;color:#217346;padding:0 4px}
.teambox .tkhead{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:8px 0 4px;font-size:13px;font-weight:600}
.teambox .tkhead .checkline{font-weight:400;margin:0}
.tkpick{display:grid;gap:4px;max-height:180px;overflow:auto;border:1px solid #eef1ef;padding:6px}
.tkpick.off{opacity:.45;pointer-events:none}
.tkgrp{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tkgrp small{width:100%;color:#6b7a70}
.tkchip{display:inline-flex!important;align-items:center;gap:4px;border:1px solid #dfe6e1;padding:1px 8px;font-size:12.5px;margin:0!important;cursor:pointer}
.tkchip input{width:auto;margin:0}
.chipwrap{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 8px}
#app .ownerline button.plink,#app button.plink{background:none!important;border:0!important;border-bottom:1px dotted #8aa596!important;padding:0!important;min-height:0!important;box-shadow:none!important;font-size:inherit!important;line-height:1.3!important;border-radius:0!important;width:auto!important}
#app .ownerline button.plink:hover{border-bottom-color:#217346!important;color:#217346!important}
.tkchip{padding:2px 8px!important;font-size:12.5px!important;line-height:1.4}