:root{--blue:#0057B8;--bd:#003F8A;--bl:#D6E8FF;--yellow:#FFD600;--text:#1A1A1A;--t2:#555;--t3:#aaa;--border:#C8D4E0;--bdd:#8A9BAF;--bg:#EFF3F8;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Be Vietnam Pro',sans-serif;background:var(--bg);color:var(--text);font-size:13px;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--blue);height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,60,.2)}
.tb-l{display:flex;align-items:center;gap:10px}
.tb-logo{background:var(--yellow);color:var(--bd);font-weight:800;font-size:12px;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.tb-title{color:#fff;font-weight:700;font-size:14px}
.tb-tabs{display:flex;gap:3px}
.tabt{padding:6px 14px;border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);border-radius:6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;transition:all .15s}
.tabt:hover{background:rgba(255,255,255,.22);color:#fff}
.tabt.on{background:#fff;color:var(--blue)}
.tb-r{display:flex;align-items:center;gap:8px}
.save-ind{font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:5px;transition:color .2s}
.save-ind.pending{color:#B45309}
.save-ind.saving{color:#1565C0;animation:si-pulse .8s ease-in-out infinite}
.save-ind.saved{color:#2E7D32}
.save-ind.err{color:#C62828}
@keyframes si-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.sbar{background:#fff;border-bottom:1px solid var(--border);padding:5px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:12px}
.si{color:var(--t2);display:flex;align-items:center;gap:3px}
.si strong{color:var(--blue);font-family:'Be Vietnam Pro',sans-serif}
.ssep{color:var(--bdd)}
.view{display:none;flex:1;overflow:hidden;flex-direction:column}
.view.on{display:flex}
.tw{flex:1;overflow:auto}
.pt{border-collapse:collapse;background:#fff}
.pt thead th{border:1px solid rgba(255,255,255,0.4);text-align:center;font-size:11px;font-weight:700;white-space:nowrap;padding:4px 5px;position:sticky;top:0;z-index:20;letter-spacing:.2px;color:#fff;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0)}
.pt thead tr:nth-child(1) th[style*="background"]{background:inherit}
/* top cho row 2,3 được set bởi fixHeaderSticky() — CSS chỉ là fallback */
.pt thead tr:nth-child(2) th{z-index:20;vertical-align:middle;color:#1A1A1A;-webkit-transform:translateZ(0);transform:translateZ(0)}
/* Default blue for fixed cols without inline bg */
.hv,.hns,.htong,.htinh,.hst,.hmast,.hmien,.hdoitac,.hgd,.hgn,.htsl,
.pt thead th[class^="h"]{background:var(--blue)!important;color:#fff!important}
.pt thead tr:nth-child(1){height:44px}
.pt thead tr:nth-child(2){height:30px}
/* Dòng tổng 8 vùng ở đầu thead */
.plan-total-thead-row td{position:sticky;top:0;z-index:21;background:#E0E0E0;border:1px solid #BDBDBD;color:#1A1A1A;font-weight:800;font-size:11px;vertical-align:middle;height:26px;line-height:26px;padding:0 8px;-webkit-transform:translateZ(0);transform:translateZ(0)}
.pt th,.pt td{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pt tbody td{border:1px solid var(--border);padding:0;height:27px;vertical-align:middle}
/* ── STICKY COLUMN 1 (Vùng) ── */
.pt th:nth-child(1),.pt td:nth-child(1){position:sticky;left:0;z-index:16;width:145px;min-width:145px;max-width:145px;white-space:nowrap;background:#fff}
/* Chỉ áp dụng sticky-blue cho ô đầu tiên của ROW 1 (header "Vùng" với rowspan=2)
   – tránh việc trúng nhầm ô SL Dọc/Giá dọc đầu tiên của ROW 2 (làm chúng bị ép xanh đậm) */
.pt thead tr:nth-child(1) th:nth-child(1){z-index:52!important;background:var(--blue)!important}
.pt tr.rv td:nth-child(1){background:#D5D5D5!important}
.pt tr.rd td:nth-child(1){background:#fff!important}
.pt tr.rd:hover td:nth-child(1){background:#F0F7FF!important}
.pt tr.rd.locked td:nth-child(1){background:#fafafa!important}
.pt tr.rf td:nth-child(1){background:#fff!important}
.hv{background:var(--blue);color:#fff;width:145px;min-width:145px;white-space:nowrap}.hns{background:var(--blue);color:#fff;width:110px;min-width:110px}.htong{background:var(--blue);color:#fff;width:110px;min-width:110px}
.htinh{background:var(--blue);color:#fff;width:110px;min-width:110px}.hst{background:var(--blue);color:#fff;width:264px}
.hmast{background:var(--blue);color:#fff;width:78px;min-width:78px;max-width:78px}
.hmien{background:var(--blue);color:#fff;width:90px;min-width:90px}.hdoitac{background:var(--blue);color:#fff;width:110px;min-width:110px}
.hgd{background:var(--blue);color:#fff;width:95px;min-width:95px}.hgn{background:var(--blue);color:#fff;width:95px;min-width:95px}.htsl{background:var(--blue);color:#fff;width:75px}
tr.rv td{background:#E0E0E0;color:#333;font-weight:700;font-size:12px;font-family:'Be Vietnam Pro',sans-serif;padding:5px 10px;border-color:#BDBDBD}
tr.rv td:first-child{background:#D5D5D5}
tr.rf td{background:#fff;padding:0;border-color:var(--border)}
tr.rf td:first-child{background:#fff}
.rf-btns{display:flex;gap:4px;justify-content:center;align-items:center;padding:3px 6px;height:26px}
.btn-rf{width:22px;height:22px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;flex-shrink:0}
.btn-rf-plus{background:#E3F2FD;color:var(--blue)}.btn-rf-plus:hover{background:var(--blue);color:#fff}
.btn-rf-minus{background:#FFEBEE;color:#C62828}.btn-rf-minus:hover{background:#C62828;color:#fff}
tr.rd:hover td{background:#F0F7FF}
tr.rd td:first-child{background:#FAFBFF}
tr.rd.locked td{opacity:.45;pointer-events:none}
.ce{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:var(--text);padding:0 5px;text-align:right;cursor:text}
.ce:focus{background:#E3F2FD;box-shadow:inset 0 0 0 2px var(--blue)}
.ce[readonly]{background:#F9F9F9;color:var(--t3);cursor:not-allowed}
.comp{background:#F5F5F5!important;color:#333!important;font-weight:600!important}
.ctong{background:#E8F0FE!important;color:#1A237E!important;font-weight:700!important}
td.tdg{background:#F9F9F9!important}td.tdt{background:#F5F5F5!important}td.tdtg{background:#E8F0FE!important}
.cmast{display:flex;align-items:center;gap:0;padding:0 2px;height:100%;overflow:hidden}
.cmast input{width:100%;min-width:0;flex:1;border:none;outline:none;background:transparent;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;padding:0 2px;height:100%}
.cmast input:focus{background:#E3F2FD}
.blk{background:var(--blue);color:#fff;border:none;border-radius:3px;width:17px;height:17px;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .15s}
tr.rd:hover .blk{opacity:1}
.ctxt{padding:0 6px;font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tinh-sel{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;color:#1A237E;padding:0 6px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231A237E' opacity='.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tinh-sel:focus{background-color:#E8EAF6;box-shadow:inset 0 0 0 2px #3F51B5}
.tinh-sel option{font-size:12px;color:var(--text)}
.admin-scroll{flex:1;overflow-y:auto;padding:20px}
.admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1100px;margin:0 auto}
@media(max-width:900px){.admin-cols{grid-template-columns:1fr}}
.acard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px}
.acard-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:8px}
.acard-sub{font-size:12px;color:var(--t2);margin-bottom:16px}
.adm-tbl{width:100%;border-collapse:collapse;margin-bottom:12px}
.adm-tbl th{background:var(--blue);color:#fff;padding:8px 10px;font-size:11px;font-weight:700;text-align:left}
.adm-tbl th:first-child{border-radius:6px 0 0 0;width:36px;text-align:center}
.adm-tbl th:last-child{border-radius:0 6px 0 0;width:36px;text-align:center}
.adm-tbl td{padding:0;border-bottom:1px solid var(--border)}
.adm-tbl tr:last-child td{border-bottom:none}
.adm-tbl tr:hover td{background:#F5F9FF}
.adt-n{text-align:center;padding:6px;font-family:'Be Vietnam Pro',sans-serif;font-size:11px;color:var(--t2)}
.adt-inp{width:100%;border:1px solid transparent;border-radius:5px;outline:none;font-family:'Be Vietnam Pro',sans-serif;font-size:12px;padding:6px 8px;background:transparent;color:var(--text);transition:border-color .15s,background .15s}
.adt-inp:hover{border-color:#CBD5E1;background:#F8FAFC}
.adt-inp:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px #BFDBFE}
.adt-inp:focus{background:#EAF2FF}
.adt-inp.mono{font-family:'Be Vietnam Pro',sans-serif;font-size:11px}
.adt-del{background:none;border:none;cursor:pointer;color:#E53935;font-size:14px;padding:0 10px;opacity:.4;transition:opacity .15s;width:36px}
.adm-tbl tr:hover .adt-del{opacity:1}.adt-del:hover{color:#B71C1C}
.dot-chip{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.btn-add-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;background:#F5F9FF;border:1.5px dashed #90CAF9;border-radius:7px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:var(--blue);transition:all .15s;margin-bottom:14px}
.btn-add-row:hover{background:#E3F2FD;border-color:var(--blue)}
.acard-footer{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border);margin-top:4px}
.btn-pri{padding:9px 20px;background:var(--blue);color:#fff;border:none;border-radius:7px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,87,184,.2)}
.btn-pri:hover{background:var(--bd);transform:translateY(-1px)}
.btn-pri:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sec{padding:9px 16px;background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:7px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-sec:hover{border-color:var(--blue);color:var(--blue)}
.form-sel{padding:8px 32px 8px 12px;border:1.5px solid var(--border);border-radius:7px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);background:#fff;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.form-sel:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,87,184,.1)}
.reset-zone{background:#FFF3E8;border:1.5px solid #FFAB76;border-radius:8px;padding:14px 16px}
.reset-title{font-weight:700;font-size:13px;color:#BF360C;margin-bottom:6px}
.reset-desc{font-size:12px;color:var(--t2);margin-bottom:12px;line-height:1.6}
.btn-danger{padding:9px 20px;background:#E53935;color:#fff;border:none;border-radius:7px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}
.btn-danger:hover{background:#B71C1C}
.mini-cal{position:fixed;z-index:9999;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.15);padding:10px;width:220px;user-select:none}
.mini-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mini-cal-head button{background:none;border:none;cursor:pointer;font-size:16px;color:var(--blue);padding:2px 8px;border-radius:4px;line-height:1}
.mini-cal-head button:hover{background:var(--bl)}
.mini-cal-title{font-size:12px;font-weight:700;color:var(--text)}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.mini-cal-dh{text-align:center;font-size:10px;font-weight:700;color:var(--t3);padding:2px 0}
.mini-cal-day{text-align:center;font-size:11px;padding:4px 2px;border-radius:4px;cursor:pointer;color:var(--text)}
.mini-cal-day:hover{background:var(--bl);color:var(--blue)}
.mini-cal-day.today{font-weight:700;color:var(--blue)}
.mini-cal-day.selected{background:var(--blue);color:#fff!important}
.mini-cal-day.other{color:var(--t3)}
.mini-cal-day.empty{cursor:default}
.vung-dd-trigger{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;cursor:pointer;min-height:28px;gap:4px;background:transparent;user-select:none}
.vung-dd-trigger:hover{background:#F0F7FF}
.vung-tags{display:flex;flex-wrap:wrap;gap:3px;flex:1}
.vtag{background:var(--bl);color:var(--blue);border-radius:4px;padding:1px 6px;font-size:11px;font-weight:600;white-space:nowrap}
.vtag.all{background:#FFF9C4;color:#5D4037}
.vung-dd-arrow{color:var(--t3);font-size:10px;flex-shrink:0;transition:transform .15s}
.vung-dd.open .vung-dd-arrow{transform:rotate(180deg)}
.vung-dd-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:100;background:#fff;border:1.5px solid var(--blue);border-radius:0 0 8px 8px;box-shadow:0 6px 20px rgba(0,0,0,.12);max-height:240px;overflow-y:auto}
.vung-dd.open .vung-dd-menu{display:block}
.vung-dd-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:12px;transition:background .1s}
.vung-dd-item:hover{background:#F0F7FF}
.vung-dd-item input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--blue);flex-shrink:0}
.vung-dd-item.all-item{border-bottom:1px solid var(--border);font-weight:700;color:#5D4037;background:#FFFDE7}
.vung-dd-placeholder{color:var(--t3);font-size:11px;font-style:italic}
.dash-scroll{flex:1;overflow-y:auto;padding:20px;background:var(--bg)}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;max-width:1200px;margin-left:auto;margin-right:auto}
.dash-title{font-size:18px;font-weight:800;color:var(--text)}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;max-width:1200px;margin:0 auto}
.plan-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;transition:all .2s;position:relative}
.plan-card:hover{box-shadow:0 4px 16px rgba(0,0,60,.1);transform:translateY(-2px);border-color:var(--blue)}
.plan-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.plan-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;flex:1}
.plan-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;margin-left:8px}
.badge-draft{background:#FFF9C4;color:#F57F17}.badge-pending{background:#E3F2FD;color:#1565C0}
.badge-approved{background:#E8F5E9;color:#2E7D32}.badge-paid{background:#F3E5F5;color:#6A1B9A}
.plan-meta{font-size:11px;color:var(--t2);display:flex;flex-direction:column;gap:3px}
.note-trigger{width:100%;max-width:100%;padding:6px 10px;font-size:12px;border:1.5px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;box-sizing:border-box;min-height:34px;display:flex;align-items:center;overflow:hidden;min-width:0;transition:border-color .15s,background .15s}
.note-trigger:hover{border-color:#9BABC0;background:#F8FAFF}
.note-trigger-txt{color:#BDBDBD;font-family:inherit;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;max-width:100%}
.note-trigger-txt.has-val{color:var(--text)}
.plan-actions{display:flex;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);flex-wrap:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none}
.plan-actions::-webkit-scrollbar{display:none}
.btn-sm{padding:5px 9px;border:none;border-radius:6px;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.btn-icon{padding:5px 7px;font-size:14px;line-height:1}
.btn-sm-blue{background:var(--bl);color:var(--blue)}.btn-sm-blue:hover{background:var(--blue);color:#fff}
.btn-sm-green{background:#E8F5E9;color:#2E7D32}.btn-sm-green:hover{background:#2E7D32;color:#fff}
.btn-sm-orange{background:#FFF3E0;color:#E65100}.btn-sm-orange:hover{background:#E65100;color:#fff}
.btn-sm-red{background:#FFEBEE;color:#C62828}.btn-sm-red:hover{background:#C62828;color:#fff}
.btn-sm-gray{background:#F5F5F5;color:#555}.btn-sm-gray:hover{background:#E0E0E0}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:flex;align-items:center;justify-content:center}
.modal-box{background:#fff;border-radius:14px;padding:28px 32px;width:440px;max-width:94vw;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.modal-title{font-size:16px;font-weight:800;margin-bottom:18px;color:var(--text)}
.modal-field{margin-bottom:14px}
.modal-label{font-size:12px;font-weight:600;color:var(--t2);display:block;margin-bottom:5px}
.modal-inp{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:13px;outline:none;transition:border .15s}
.modal-inp:focus{border-color:var(--blue)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding-top:14px;border-top:1px solid var(--border)}
.plan-crumb{background:var(--bl);border-bottom:1px solid #90CAF9;padding:5px 18px;font-size:12px;color:var(--blue);font-weight:600;display:flex;align-items:center;gap:8px;flex-shrink:0;display:none}
.plan-crumb button{background:none;border:none;color:var(--blue);cursor:pointer;font-size:12px;font-weight:600;padding:0;text-decoration:underline}
.plan-empty{text-align:center;padding:60px 20px;color:var(--t2)}
.wz-step{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue)}
.wz-step.inactive{color:var(--t3)}
.wz-num{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.wz-step.inactive .wz-num{background:var(--border);color:var(--t2)}
.wz-step.done .wz-num{background:#2E7D32}
.wz-step.done{color:#2E7D32}
.wz-line{flex:1;height:2px;background:var(--border);margin:0 8px}
.wz-line.done{background:#2E7D32}
.wz-hangmuc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wz-hangmuc-card{border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;background:#fff;transition:all .15s;min-height:44px}
.wz-hangmuc-card.on{border-color:var(--blue);background:var(--bl)}
.wz-hangmuc-card label{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:26px}
.wz-hangmuc-card input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;pointer-events:none;flex-shrink:0}
.wz-hangmuc-name{font-size:12px;font-weight:700;line-height:1.25;min-width:0}
.wz-hangmuc-custom{margin-top:6px}
@media(max-width:560px){.wz-hangmuc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wz-hangmuc-card.wz-khac-card{grid-column:1 / -1}}
.plan-empty .pe-icon{font-size:48px;margin-bottom:12px}
.plan-sort{display:flex;align-items:center;gap:8px;margin-left:4px}
.plan-sort-ico{width:38px;height:38px;border:1.5px solid #9FC2EA;border-radius:10px;background:#F8FBFF;display:flex;align-items:center;justify-content:center;color:var(--blue);box-shadow:0 2px 6px rgba(0,87,184,.08);flex-shrink:0}
.plan-sort-ico::before{content:"";width:17px;height:17px;background:currentColor;clip-path:polygon(8% 8%,92% 8%,58% 48%,58% 86%,42% 86%,42% 48%)}
.plan-sort-select{height:38px;min-width:156px;padding:0 34px 0 14px;border:1.5px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-family:inherit;font-size:13px;font-weight:700;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;box-shadow:0 1px 4px rgba(13,30,60,.06)}
.plan-sort-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,87,184,.1)}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;overflow:hidden}
.apple-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 70%,#533483 100%)}
.apple-blur-1{position:absolute;width:600px;height:600px;background:rgba(88,86,214,.35);border-radius:50%;top:-150px;left:-150px;filter:blur(120px)}
.apple-blur-2{position:absolute;width:500px;height:500px;background:rgba(10,132,255,.3);border-radius:50%;bottom:-100px;right:-100px;filter:blur(100px)}
.apple-blur-3{position:absolute;width:400px;height:400px;background:rgba(191,90,242,.25);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(80px)}
.login-card{position:relative;z-index:1;width:360px;max-width:92vw;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:44px 40px;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px)}
.login-logo{width:52px;height:52px;background:var(--yellow);border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--bd);margin:0 auto 16px;letter-spacing:-.5px}
.login-title{text-align:center;color:#fff;font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-.3px}
.login-sub{text-align:center;color:rgba(255,255,255,.5);font-size:13px;margin-bottom:32px}
.login-label{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:6px;letter-spacing:.3px;text-transform:uppercase}
.login-inp{width:100%;padding:13px 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:12px;font-family:inherit;font-size:14px;color:#fff;outline:none;transition:all .2s;box-sizing:border-box}
.login-inp::placeholder{color:rgba(255,255,255,.3)}
.login-inp:focus{background:rgba(255,255,255,.15);border-color:rgba(10,132,255,.7);box-shadow:0 0 0 3px rgba(10,132,255,.2)}
.login-btn{width:100%;padding:14px;background:rgba(10,132,255,1);color:#fff;border:none;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:-.1px;margin-top:4px}
.login-btn:hover{background:rgba(10,132,255,.85)}
.login-btn:active{transform:scale(.98)}
.login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.login-err{color:#ff6b6b;font-size:12px;text-align:center;margin-bottom:10px;display:none}
.login-field{margin-bottom:18px}
.spin{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.tw2{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:7px}
.tst{padding:10px 15px;border-radius:8px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:7px;box-shadow:0 3px 12px rgba(0,0,0,.15);animation:ti .2s ease;max-width:360px}
.tst.ok{background:#2E7D32;color:#fff}.tst.er{background:#C62828;color:#fff}.tst.in{background:var(--blue);color:#fff}
@keyframes ti{from{transform:translateX(50px);opacity:0}to{transform:none;opacity:1}}
/* Hide Google Apps Script warning banner */
.script-application-banner,
[class*="script-application"],
body > div[style*="z-index: 1000"],
body > div[style*="z-index:1000"]{display:none!important}
/* ════════════════════ NEW UI LAYOUT (sidebar + topbar) ════════════════════ */
:root{--nav-bg:#0E1B33;--nav-active:#0057B8;--card:#fff;--shadow:0 1px 3px rgba(13,30,60,.06)}
body.v2-layout{background:#F4F6FA!important;padding-left:288px!important;padding-top:64px!important;overflow:hidden;height:100vh;transition:padding-left .22s ease}
body.v2-layout > .topbar{display:none!important}
body.v2-layout > .sbar{display:none!important}
body.v2-layout > .view{padding:22px 28px 28px!important;background:#F4F6FA!important;overflow-y:auto;max-height:calc(100vh - 64px)}
body.v2-layout > .plan-crumb{left:288px!important}
.app-shell{position:fixed;inset:0;pointer-events:none;z-index:90}
.app-shell > *{pointer-events:auto}
.app-sb{position:fixed;left:0;top:0;width:288px;height:100vh;background:var(--nav-bg);color:#fff;display:flex;flex-direction:column;overflow:hidden;z-index:100;transition:transform .22s ease;will-change:transform}
.sb-logo{padding:9px 16px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.06);min-height:64px;background:rgba(0,0,0,.15)}
.sb-logo img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.sb-section{padding:18px 12px 6px 18px;font-size:10px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:1px;text-transform:uppercase}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;cursor:pointer;color:rgba(255,255,255,.75);font-size:13px;font-weight:500;border:none;background:transparent;text-align:left;width:100%;font-family:inherit;transition:all .15s}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-item.active{background:var(--nav-active);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(0,87,184,.3)}
.sb-ico{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.sb-spacer{flex:1}
.sb-mascot{display:flex;justify-content:flex-end;align-items:flex-end;padding:0 18px 10px;min-height:112px;flex:0 0 112px;overflow:visible}
.sb-mascot-svg{width:99px;height:auto;display:block;filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));flex-shrink:0}
.sb-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;display:flex;flex-direction:column;gap:3px}
.sb-sync{display:flex;align-items:center;gap:6px;color:#4ADE80;font-weight:600}
.sb-sync-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.sb-sync-time{color:rgba(255,255,255,.4);font-size:10px;padding-left:14px}
/* New horizontal topbar */
.app-tb{position:fixed;top:0;left:288px;right:0;height:64px;background:#fff;border-bottom:1px solid #E1E7EF;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;z-index:99;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:left .22s ease}
.sb-toggle{width:38px;height:38px;border-radius:10px;border:1px solid #D6E0EC;background:#fff;color:var(--blue);font-family:inherit;font-size:18px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s}.sb-toggle svg{flex-shrink:0}
.sb-toggle:hover{background:var(--bl);border-color:#BBD6F2}
.atb-search{flex:1;max-width:520px;position:relative}
.atb-search input{width:100%;padding:10px 14px 10px 38px;border:1px solid #E1E7EF;border-radius:10px;font-size:13px;outline:none;background:#F8FAFD;font-family:inherit}
.atb-search input:focus{border-color:var(--blue);background:#fff}
.atb-search::before{content:"🔍";position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.55}
.atb-right{display:flex;align-items:center;gap:14px}
.atb-bell{position:relative;width:38px;height:38px;border-radius:50%;background:#F4F6FA;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:#555}
.atb-bell:hover{background:#E8ECF1}
.atb-bell::after{content:"";position:absolute;top:8px;right:9px;width:8px;height:8px;background:#FF4757;border-radius:50%;border:2px solid #fff}
.atb-save{padding:9px 18px;background:#fff;color:var(--blue);border:1.5px solid #BBD6F2;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:inherit;box-shadow:0 1px 3px rgba(13,30,60,.06)}
.atb-save:hover{background:#EAF3FF;border-color:var(--blue)}
.atb-export{padding:9px 18px;background:var(--blue);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 2px 6px rgba(0,87,184,.25);font-family:inherit}
.atb-export:hover{background:var(--bd)}
body.v2-layout:not(.plan-detail-open) .atb-save{display:none}
body.v2-layout:not(.plan-detail-open) .atb-export{display:none}
.atb-user{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;background:#FFFBEB;border:1px solid #FFE07A;border-radius:24px;cursor:pointer}
/* Avatar mặc định: SVG mascot Điện Máy Xanh inline (~900 bytes, no extra request) */
.atb-user-av{width:34px;height:34px;border-radius:50%;background:#FFC72C url("data:image/png;base64,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") center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:0;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.atb-user-info{display:flex;flex-direction:column;line-height:1.2}
.atb-user-name{font-size:13px;font-weight:700;color:var(--text)}
.atb-user-role{font-size:10px;color:#555;font-weight:600}
/* Main content area placeholder (views render trực tiếp ở body) */
.app-main{display:none}
/* Page head common */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-title{font-size:22px;font-weight:800;color:var(--text)}
.page-sub{font-size:13px;color:#555;margin-top:2px}
/* Stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:#fff;border:1px solid #E1E7EF;border-radius:14px;padding:20px 22px;display:flex;align-items:flex-start;gap:16px;box-shadow:var(--shadow)}
.stat-ico-v2{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.si1{background:#EEF2FF}.si2{background:#FEF9C3}.si3{background:#FCE7F3}.si4{background:#DCFCE7}
.stat-label{font-size:13px;color:#555;font-weight:600;margin-bottom:6px}
.stat-value{font-size:30px;font-weight:800;color:var(--text);line-height:1;margin-bottom:6px}
.stat-sub{font-size:11px;color:#9AA3B0;font-weight:500}
/* Filter bar v2 */
.fbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid #E1E7EF}
.ftabs{display:flex;gap:6px;flex-wrap:wrap}
.ftab{padding:7px 16px;background:transparent;border:1.5px solid transparent;border-radius:18px;font-size:12px;font-weight:600;color:#555;cursor:pointer;font-family:inherit}
.ftab:hover{background:#EEF2FB;color:var(--blue)}
.ftab.on{background:var(--bl);color:var(--blue);border-color:#BBD6F2}
.fright{display:flex;gap:10px;align-items:center}
.fsel{padding:7px 30px 7px 12px;border:1px solid #E1E7EF;border-radius:9px;background:#fff;font-size:12px;font-weight:600;color:var(--text);outline:none;cursor:pointer;font-family:inherit;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#E1E7EF;border:1px solid #E1E7EF;border-radius:8px;overflow:hidden}
.cal-dh{background:var(--nav-bg);color:#fff;padding:8px;text-align:center;font-size:11px;font-weight:700}
.cal-d{background:#fff;min-height:90px;padding:6px;font-size:11px}
.cal-d.other{background:#FAFBFD;color:#9AA3B0}
.cal-d-num{font-weight:700;margin-bottom:4px}
.cal-d .ev{background:var(--bl);color:var(--blue);padding:2px 5px;border-radius:4px;font-size:10px;margin-bottom:2px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.placeholder-card{background:#fff;border:1px solid #E1E7EF;border-radius:12px;padding:40px;text-align:center;color:#555}
.placeholder-card .ph-ico{font-size:48px;margin-bottom:12px;opacity:.4}
.cost-tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:1600px}
.cost-total-row td{position:sticky;top:0;z-index:3;background:#E0E0E0;padding:5px 10px;border-bottom:1px solid #BDBDBD;border-right:1px solid #BDBDBD;font-weight:800;font-size:11px;white-space:nowrap;height:26px}
.cost-tbl th{position:sticky;top:26px;z-index:2;background:var(--blue);color:#fff;padding:9px 10px;text-align:left;font-weight:800;white-space:nowrap;border-right:1px solid rgba(255,255,255,.35)}
.cost-tbl td{padding:8px 10px;border-bottom:1px solid #E1E7EF;border-right:1px solid #EEF2F7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;max-width:220px}
.cost-tbl tbody tr:nth-child(even) td{background:#FAFBFD}
.cost-tbl tbody tr:hover td{background:#F0F7FF}
.cost-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.cost-tbl .empty-cell{text-align:center;color:var(--t2);padding:28px}
.cost-tbl-form{min-width:1450px;border-collapse:collapse;table-layout:fixed}
.cost-tbl-form th{background:var(--blue)!important;color:#fff!important;border:1px solid #003F8A!important;text-align:center!important;vertical-align:middle;white-space:normal;line-height:1.35;font-size:12px;padding:12px 8px;z-index:5;box-shadow:inset 0 -1px 0 #003F8A,0 2px 0 #003F8A}
.cost-tbl-form td{border:1px solid #111!important;background:#fff;color:#111;vertical-align:middle}
.cost-tbl-form tbody tr:nth-child(even) td{background:#fff}
.cost-tbl-form tbody tr:hover td{background:#F7FBFF}
.cost-tbl-form th:nth-child(1),.cost-tbl-form td:nth-child(1){min-width:72px;width:72px}
.cost-tbl-form th:nth-child(2),.cost-tbl-form td:nth-child(2){min-width:128px;width:128px}
.cost-tbl-form th:nth-child(3),.cost-tbl-form td:nth-child(3){min-width:150px;width:150px}
.cost-tbl-form th:nth-child(4),.cost-tbl-form td:nth-child(4){min-width:255px;width:255px;max-width:255px;white-space:normal;line-height:1.35;overflow-wrap:anywhere}
.cost-tbl-form th:nth-child(5),.cost-tbl-form td:nth-child(5){min-width:70px;width:70px;text-align:center}
.cost-tbl-form th:nth-child(6),.cost-tbl-form td:nth-child(6),.cost-tbl-form th:nth-child(7),.cost-tbl-form td:nth-child(7){min-width:92px;width:92px}
.cost-tbl-form th:nth-child(8),.cost-tbl-form td:nth-child(8),.cost-tbl-form th:nth-child(9),.cost-tbl-form td:nth-child(9){min-width:76px;width:76px}
.cost-tbl-form th:nth-child(10),.cost-tbl-form td:nth-child(10){min-width:135px;width:135px}
.cost-tbl-form th:nth-child(11),.cost-tbl-form td:nth-child(11){min-width:108px;width:108px;text-align:center}
.cost-tbl-form th:nth-child(12),.cost-tbl-form td:nth-child(12){min-width:170px;width:170px;max-width:170px;white-space:normal;line-height:1.35;overflow-wrap:anywhere}
.cost-tbl-form th:nth-child(13),.cost-tbl-form td:nth-child(13){min-width:145px;width:145px;max-width:145px;white-space:normal;line-height:1.35;overflow-wrap:anywhere}
.cost-tbl-form th:nth-child(14),.cost-tbl-form td:nth-child(14){min-width:118px;width:118px;text-align:center}
.budget-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
/* Date Range Picker trigger */
.drp-wrap{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #E1E7EF;border-radius:10px;padding:9px 14px;cursor:pointer;min-width:220px;transition:border-color .15s;user-select:none}
.drp-wrap:hover{border-color:#9BABC0}
.drp-ico{width:18px;height:18px;color:#5A6270;flex-shrink:0}
.drp-label{flex:1;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.drp-placeholder{color:#BDBDBD!important}
.drp-chevron{width:12px;height:8px;color:#9BABC0;flex-shrink:0}
/* Date Range Picker panel */
.drp-panel{position:absolute;z-index:900;background:#fff;border:1.5px solid #E1E7EF;border-radius:12px;box-shadow:0 8px 28px rgba(13,30,60,.14);padding:12px 14px}
.drp-panel-body{display:flex;align-items:flex-end;gap:8px}
.drp-field{display:flex;flex-direction:column;gap:3px}
.drp-field-lbl{font-size:10px;font-weight:700;color:#9BABC0;text-transform:uppercase;letter-spacing:.4px;padding-left:2px}
.drp-field-inp{border:1.5px solid #E1E7EF;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;color:var(--text);font-family:inherit;cursor:pointer;text-align:center;outline:none;width:110px}
.drp-field-inp:hover,.drp-field-inp:focus{border-color:var(--blue)}
.drp-dash{font-size:14px;color:#BDBDBD;padding-bottom:6px;flex-shrink:0}
.drp-panel-actions{display:flex;gap:6px;flex-shrink:0;padding-bottom:0}
.drp-btn-clear{padding:5px 10px;border:1.5px solid #E1E7EF;border-radius:7px;background:#fff;font-size:11px;font-weight:600;color:#7A8594;cursor:pointer;white-space:nowrap}
.drp-btn-clear:hover{background:#F5F5F5}
.drp-btn-apply{padding:5px 12px;border:none;border-radius:7px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.drp-btn-apply:hover{background:#004FA3}
.budget-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
#view-budget .budget-stat-card{align-items:center;min-width:0;padding:18px 20px}
#view-budget .budget-stat-card .stat-ico-v2{width:58px;height:58px}
#view-budget .budget-stat-card .stat-value{font-size:28px;line-height:1.08;word-break:break-word}
#view-budget .budget-stat-card .budget-stat-value{font-size:24px}
.ncc-report{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(300px,.9fr) minmax(360px,1fr);gap:14px;align-items:stretch;margin-bottom:14px}
.ncc-pivot-card,.ncc-slicer{background:#fff;border:1px solid #E1E7EF;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0}
.ncc-pivot-card{min-width:0;min-height:430px}
.ncc-pivot-card>div:last-child{flex:1;min-height:0}
.ncc-pivot-scroll{overflow:auto;max-height:520px;min-height:0}
.ncc-stack{display:grid;grid-template-rows:auto auto minmax(210px,1fr);gap:14px;min-width:0;height:100%;min-height:430px}
.ncc-stack-top{display:grid;grid-template-columns:1fr;gap:12px;min-height:0}
.ncc-stack .ncc-slicer{min-height:0}
.ncc-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid #E1E7EF;font-weight:800;font-size:12px;color:var(--text)}
.ncc-head-muted{font-size:11px;font-weight:700;color:#7A8594}
.ncc-slicer-body{padding:8px;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow:auto;flex:1;min-height:0}
.ncc-stack .ncc-slicer-body{max-height:260px}
.ncc-slicer-hang{min-width:0;min-height:430px}
.ncc-slicer-hang .ncc-slicer-body{max-height:520px}
.ncc-slicer-vung{min-width:0}
.ncc-slicer-vung .ncc-slicer-body{max-height:520px}
.ncc-pill.vung.on{background:#2563EB;color:#fff}
.ncc-pill{border:none;border-radius:7px;padding:7px 9px;text-align:left;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;background:#D8DEE7;color:#333;transition:all .15s;display:flex;align-items:center;gap:6px;min-height:30px;width:100%}
.ncc-pill>span:not(.ncc-pill-check){flex:1;text-align:left}
.ncc-pill small{font-size:10px;font-weight:800;opacity:.82;white-space:nowrap;margin-left:auto}
.ncc-pill:hover{filter:brightness(.96);transform:translateY(-1px)}
.ncc-pill-check{width:14px;height:14px;flex-shrink:0;border-radius:3px;border:1.5px solid rgba(0,0,0,.25);background:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:transparent;transition:all .1s}
.ncc-pill.on .ncc-pill-check{background:rgba(255,255,255,.9);border-color:transparent;color:inherit}
.ncc-pill.on{background:#EF3F35;color:#fff}
.ncc-pill.chain.on{background:#FFB703;color:#333}
.ncc-pill.chain.on .ncc-pill-check{color:#333}
.ncc-pill.partner.on{background:#FF7A00;color:#fff}
.ncc-pill.empty{justify-content:center;background:#F5F7FA;color:#8A94A3;cursor:default}
.ncc-pivot-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.ncc-pivot-table th{background:#EAF2FF;color:#111;text-align:left;padding:8px 9px;border-bottom:1px solid #BBD6F2;font-weight:800;white-space:normal;position:sticky;top:0;z-index:2}
.ncc-pivot-table td{padding:7px 9px;border-bottom:1px solid #EEF2F7;white-space:normal;color:#333;line-height:1.3;overflow-wrap:anywhere}
.ncc-pivot-table th:nth-child(1),.ncc-pivot-table td:nth-child(1){width:16%}
.ncc-pivot-table th:nth-child(2),.ncc-pivot-table td:nth-child(2){width:27%}
.ncc-pivot-table th:nth-child(3),.ncc-pivot-table td:nth-child(3){width:32%}
.ncc-pivot-table th:nth-child(4),.ncc-pivot-table td:nth-child(4){width:25%;white-space:nowrap}
.ncc-pivot-table tbody tr:nth-child(even) td{background:#FAFBFD}
.ncc-pivot-table tbody tr:hover td{background:#F0F7FF}
.ncc-pivot-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ncc-pivot-table .empty-cell{text-align:center;color:var(--t2);padding:28px}
.ncc-pivot-total td{background:#FFF7D6!important;font-weight:900;color:#1A1A1A;border-top:2px solid #FFD166}
.ncc-filter-clear{border:none;background:#F1F5F9;border-radius:6px;padding:4px 7px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;color:#5C6675}
.ncc-filter-clear:hover{background:#E3ECF7;color:var(--blue)}
.budget-detail-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.budget-detail-head{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:800}
.budget-detail-scroll{overflow:auto;max-height:115vh}
.contract-card{background:#fff;border:1px solid #E1E7EF;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.contract-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #E1E7EF}
.contract-card-title{font-size:15px;font-weight:900;color:var(--text)}
.contract-card-sub{font-size:11px;color:#7A8594;margin-top:2px;font-weight:600}
.contract-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.contract-btn{border:none;border-radius:8px;padding:8px 12px;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:all .15s}
.contract-btn.add{background:var(--bl);color:var(--blue)}
.contract-btn.add:hover{background:var(--blue);color:#fff}
.contract-btn.clear{background:#FFF1F2;color:#C62828}
.contract-btn.clear:hover{background:#C62828;color:#fff}
.contract-btn.load{background:var(--blue);color:#fff;box-shadow:0 2px 7px rgba(0,87,184,.22)}
.contract-btn.load:hover{background:var(--bd)}
.contract-table-wrap{overflow:auto;max-height:calc(100vh - 240px)}
.contract-table{width:100%;min-width:1450px;border-collapse:collapse;font-size:12px;table-layout:fixed}
.contract-table th{position:sticky;top:0;z-index:3;background:var(--blue);color:#fff;text-align:center;vertical-align:middle;padding:10px 8px;border:1px solid #003F8A;font-weight:800;white-space:normal;line-height:1.35}
.contract-table td{border:1px solid #C8D4E0;background:#fff;padding:0;height:34px;vertical-align:middle}
.contract-table tbody tr:nth-child(even) td{background:#FAFBFD}
.contract-table tbody tr:hover td{background:#F0F7FF}
.contract-cell{width:100%;height:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:12px;color:var(--text);padding:7px 8px}
.contract-text{display:block;padding:8px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contract-cell:focus{background:#EAF2FF;box-shadow:inset 0 0 0 2px var(--blue)}
.contract-table .num{text-align:right;font-variant-numeric:tabular-nums}
.contract-table th:nth-child(1),.contract-table td:nth-child(1){width:150px}
.contract-table th:nth-child(2),.contract-table td:nth-child(2){width:190px}
.contract-table th:nth-child(3),.contract-table td:nth-child(3){width:145px}
.contract-table th:nth-child(4),.contract-table td:nth-child(4){width:130px}
.contract-table th:nth-child(5),.contract-table td:nth-child(5){width:140px}
.contract-table th:nth-child(6),.contract-table td:nth-child(6){width:170px}
.contract-table th:nth-child(7),.contract-table td:nth-child(7){width:150px}
.contract-table th:nth-child(8),.contract-table td:nth-child(8){width:180px}
.contract-table th:nth-child(9),.contract-table td:nth-child(9){width:160px}
.contract-table th:nth-child(10),.contract-table td:nth-child(10){width:170px}
.contract-table th:nth-child(11),.contract-table td:nth-child(11){width:160px}
.bbnt-builder{display:grid;grid-template-columns:minmax(360px,430px) 1fr;gap:14px;margin-bottom:14px}
.bbnt-form{padding:16px;background:#fff;border:1px solid #E1E7EF;border-radius:12px;box-shadow:var(--shadow)}
.bbnt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bbnt-form .modal-field{margin-bottom:12px}
.bbnt-form .full{grid-column:1/-1}
.bbnt-company-picker{display:grid;grid-template-columns:138px 1fr;gap:10px;align-items:center}
.bbnt-company-logo{height:48px;border:1.5px solid #D7E0EC;border-radius:10px;background:#F8FAFD;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.bbnt-company-logo img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.bbnt-company-logo span{font-size:11px;font-weight:800;color:#7A8594;text-align:center}
.bbnt-hang-filter{position:relative}
.bbnt-hang-trigger{width:100%;min-height:42px;border:1.5px solid var(--border);border-radius:8px;background:#fff;padding:9px 34px 9px 12px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.bbnt-hang-trigger::after{content:"";position:absolute;right:12px;top:50%;width:10px;height:10px;border-right:2px solid #7A8594;border-bottom:2px solid #7A8594;transform:translateY(-65%) rotate(45deg)}
.bbnt-hang-filter.open .bbnt-hang-trigger{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,87,184,.1)}
.bbnt-hang-filter.open .bbnt-hang-trigger::after{transform:translateY(-35%) rotate(225deg)}
.bbnt-hang-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:120;background:#fff;border:1.5px solid var(--blue);border-radius:10px;box-shadow:0 10px 26px rgba(13,30,60,.16);padding:6px;max-height:260px;overflow:auto}
.bbnt-hang-filter.open .bbnt-hang-menu{display:block}
.bbnt-hang-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;font-size:12px;font-weight:700;color:#333;cursor:pointer}
.bbnt-hang-item:hover{background:#F0F7FF}
.bbnt-hang-item input{width:15px;height:15px;accent-color:var(--blue);flex-shrink:0}
.bbnt-hang-item.all{border-bottom:1px solid #E1E7EF;margin-bottom:4px;color:var(--blue);background:#F5F9FF}
.bbnt-hang-empty{padding:10px;color:#7A8594;font-size:12px;font-weight:700;text-align:center}
.bbnt-party-table-wrap{background:#fff;border:1px solid #E1E7EF;border-radius:12px;overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow)}
.bbnt-party-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.bbnt-party-table th{background:var(--blue);color:#fff;padding:10px 14px;font-weight:700;font-size:13px;width:50%}
.bbnt-party-table td{padding:8px 14px;border-bottom:1px solid #EEF2F7;vertical-align:top;width:50%}
.bbnt-party-table tbody tr:nth-child(even) td{background:#F8FAFF}
.bbnt-party-table tbody tr:last-child td{border-bottom:none}
/* bbnt-party-tbl: bảng thông tin 2 bên (3 cột: label | bên A | bên B) */
.bbnt-party-tbl{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:13px;table-layout:fixed}
.bbnt-party-tbl thead th{background:var(--blue);color:#fff;padding:8px 12px;font-weight:700;font-size:13px;text-align:center;border:1px solid #003F8A}
.bbnt-party-tbl .bbnt-pt-th-lbl{width:18%;background:var(--blue) !important;border-color:#003F8A !important}
.bbnt-party-tbl .bbnt-pt-th{width:41%}
.bbnt-party-tbl td{border:1px solid #D7E0EC;padding:8px 12px;vertical-align:top;line-height:1.45}
.bbnt-party-tbl .bbnt-pt-lbl-cell{width:18%;background:#F4F6FA;color:#5A6270;font-weight:600;font-size:12px;white-space:nowrap}
.bbnt-party-tbl .bbnt-pt-val{width:41%;color:var(--text)}
.bbnt-party-tbl tbody tr:nth-child(even) .bbnt-pt-val{background:#F8FAFF}
.bbnt-party-tbl .bbnt-pt-name strong{font-weight:800;color:#111}
.bbnt-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;align-items:stretch}
.bbnt-source-card{background:#fff;border:1px solid #E1E7EF;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.bbnt-source-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-bottom:1px solid #E1E7EF;font-size:13px;font-weight:900;color:var(--text)}
.bbnt-source-body{padding:10px 13px;display:flex;flex-direction:column;font-size:12px;color:#333;line-height:1.5;flex:1}
.bbnt-line{display:grid;grid-template-columns:82px 1fr;gap:8px}
.bbnt-line b{color:#111;font-weight:800}
.bbnt-preview-table{width:100%;border-collapse:collapse;table-layout:auto;font-size:12px}
.bbnt-preview-table thead{position:sticky;top:0;z-index:1}
.bbnt-preview-table .cost-total-row td{background:#E0E0E0;padding:5px 12px;border-bottom:1px solid #BDBDBD;font-weight:800;font-size:11px;height:26px;white-space:nowrap}
.bbnt-preview-table th{background:var(--blue);color:#fff;text-align:left;padding:9px 12px;font-size:11px;font-weight:700;white-space:nowrap;border-right:1px solid rgba(255,255,255,.15)}
.bbnt-preview-table th:last-child{border-right:none}
.bbnt-preview-table tbody tr:nth-child(odd){background:#fff}
.bbnt-preview-table tbody tr:nth-child(even){background:#F5F8FF}
.bbnt-preview-table tbody tr:hover{background:#EBF3FF;transition:background .1s}
.bbnt-preview-table td{padding:8px 12px;border-bottom:1px solid #E8EDF5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.bbnt-preview-table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:#1565C0}
.bbnt-mini-card{background:#fff;border:1px solid #E1E7EF;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.bbnt-mini-card .bbnt-source-head{background:linear-gradient(135deg,#F0F6FF,#E8F0FD);border-bottom:2px solid #D0DEFA}
.bbnt-mini-card .empty-cell{padding:28px;text-align:center;color:#7A8594;font-size:12px;font-weight:600}
.bbnt-doc-preview{background:#fff;border:1px solid #E1E7EF;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin:0 0 18px}
.bbnt-doc-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #E1E7EF}
.bbnt-doc-preview-body{padding:24px;background:#F8FAFD;overflow:auto;max-height:none}
.bbnt-paper{width:900px;max-width:100%;min-height:1273px;margin:0 auto;background:#fff;border:1px solid #D7E0EC;border-radius:6px;padding:36px 42px;color:#111;font-size:12px;line-height:1.55;box-shadow:0 8px 24px rgba(13,30,60,.08)}
.bbnt-paper h2{text-align:center;font-size:20px;margin:0;font-weight:900;letter-spacing:.1px}
.bbnt-paper .bbnt-logo-row{min-height:64px;margin-bottom:8px;display:flex;align-items:flex-start}
.bbnt-paper .bbnt-logo{width:188px;height:auto;object-fit:contain;display:block}
.bbnt-paper .bbnt-head-space{height:18px}
.bbnt-paper .bbnt-doc-no{text-align:center;color:#F00;font-size:18px;font-weight:700;margin:7px 0 34px}
.bbnt-paper .bbnt-lead{font-size:16px;line-height:1.45;margin:0 0 16px}
.bbnt-paper .bbnt-lead.compact{margin-bottom:2px}
.bbnt-paper .bbnt-red-line{color:#111;font-weight:700}
.bbnt-paper .bbnt-no{text-align:right;font-weight:700;margin-bottom:12px}
.bbnt-paper .bbnt-red{color:#111;font-weight:800}
.bbnt-paper .bbnt-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.bbnt-paper .bbnt-box{border:1px solid #D7E0EC;border-radius:6px;padding:10px 12px}
.bbnt-paper .bbnt-box-title{font-weight:900;margin-bottom:6px;color:#111}
.bbnt-paper table{width:100%;border-collapse:collapse;margin:10px 0;font-size:10.5px}
.bbnt-paper th{background:var(--blue);color:#fff;border:1px solid #003F8A;padding:6px;text-align:center}
.bbnt-paper td{border:1px solid #B8C6D8;padding:5px;vertical-align:middle}
.bbnt-paper .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bbnt-paper .bbnt-total td{font-weight:900;background:#FFF7D6}
.bbnt-paper .bbnt-settlement{font-size:13px;line-height:1.55;margin-top:10px}
.bbnt-paper .bbnt-settlement div{margin:4px 0}
.bbnt-paper .bbnt-next-page{text-align:center;font-style:italic;margin-top:14px;color:#111}
body.v2-layout > #view-contract.view{display:none!important;height:calc(100vh - 64px)!important;max-height:calc(100vh - 64px)!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0;padding-bottom:80px!important;-webkit-overflow-scrolling:touch}
body.v2-layout > #view-contract.view.on{display:block!important}
@media(max-width:1180px){.bbnt-builder{grid-template-columns:1fr}.bbnt-source-grid{grid-template-columns:1fr}}
@media(max-width:1500px){.ncc-report{grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr) minmax(320px,.95fr)}#view-budget .budget-stat-card .stat-value{font-size:24px}#view-budget .budget-stat-card .budget-stat-value{font-size:22px}}
@media(max-width:1180px){.budget-stat-grid{grid-template-columns:1fr}.ncc-report{grid-template-columns:1fr}.ncc-stack{min-height:0}.ncc-stack-top{grid-template-columns:1fr 1fr}.ncc-slicer-hang{min-height:0}}
@media(max-width:780px){.ncc-stack-top{grid-template-columns:1fr}.ncc-stack{grid-template-rows:auto auto}.budget-actions{justify-content:flex-start}}
/* Hide old topbar when using app-shell */
.app-shell > .topbar,.app-shell .sbar{display:none}
/* Sbar (status bar) becomes part of main content header in v2 */
.app-shell .v2-sbar{background:#fff;border:1px solid #E1E7EF;border-radius:10px;padding:8px 16px;display:flex;align-items:center;gap:12px;font-size:11px;margin-bottom:14px;flex-wrap:wrap}
/* ── Dashboard KPI Strip ───────────────────────────────────── */
.dash-kpi-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:none;margin:0 0 14px}
.dash-kpi-card{background:#fff;border:1px solid #E1E7EF;border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;user-select:none}
.dash-kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.dash-kpi-card:hover{box-shadow:0 4px 14px rgba(0,40,120,.09);transform:translateY(-1px)}
.dash-kpi-card.active{border-width:2px}
.kpi-num{font-size:28px;font-weight:900;line-height:1;letter-spacing:-1px;margin-bottom:5px}
.kpi-lbl{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.4px}
/* KPI color variants */
.kpi-c-all::before{background:#6B7A99}
.kpi-c-all .kpi-num{color:#2B3A55}
.kpi-c-all.active{border-color:#6B7A99;background:#F7F8FA}
.kpi-c-draft::before{background:#64748B}
.kpi-c-draft .kpi-num{color:#64748B}
.kpi-c-draft.active{border-color:#64748B;background:#F8F9FB}
.kpi-c-pending::before{background:#D97706}
.kpi-c-pending .kpi-num{color:#B45309}
.kpi-c-pending.active{border-color:#D97706;background:#FFFBF0}
.kpi-c-approved::before{background:#059669}
.kpi-c-approved .kpi-num{color:#047857}
.kpi-c-approved.active{border-color:#059669;background:#F0FDF9}
.kpi-c-paid::before{background:#0057B8}
.kpi-c-paid .kpi-num{color:#0057B8}
.kpi-c-paid.active{border-color:#0057B8;background:#EEF5FF}
/* ── Chain Filter Bar ──────────────────────────────────────── */
.dash-chain-bar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;align-items:center}
.chain-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:99px;border:1.5px solid #E1E7EF;background:#fff;cursor:pointer;font-size:12px;font-weight:700;color:var(--text);transition:all .13s;white-space:nowrap}
.chain-chip:hover{border-color:#0057B8;background:#EEF5FF;color:#0057B8}
.chain-chip.active{background:var(--chip-soft,#EEF5FF);border-color:var(--chip-color,#0057B8);color:var(--chip-text,#0057B8)}
.chain-chip:first-child.active{background:#EEF5FF;border-color:#0057B8;color:#0057B8}
.chip-lbl{font-size:12px;font-weight:700}
.chip-count{background:rgba(0,0,0,.08);color:inherit;border-radius:99px;padding:1px 7px;font-size:10px;font-weight:800}
.chain-chip.active .chip-count{background:rgba(0,0,0,.12)}
/* ── Plan card row2 & deploy tag ──────────────────────────── */
.plan-card-row2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plan-type-badge{font-size:10px;font-weight:600;color:var(--t2);background:#F1F5F9;border-radius:6px;padding:2px 7px}
.deploy-tag{font-size:10px;font-weight:800;border-radius:6px;padding:2px 7px;margin-left:auto}
.tag-past{background:#FEE2E2;color:#B91C1C}
.tag-today{background:#FEF3C7;color:#92400E}
.tag-soon{background:#FFF7ED;color:#C2410C}
.tag-near{background:#ECFDF5;color:#065F46}
.meta-created{color:var(--t2);font-size:10px}
.meta-note{color:var(--t2);font-style:italic;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
/* ── Responsive KPI strip ─────────────────────────────────── */
@media(max-width:1100px){.dash-kpi-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.dash-kpi-strip{grid-template-columns:repeat(2,1fr)}.kpi-num{font-size:22px}}
/* Override old plan-card with new style */
body.v2-layout .dash-header,body.v2-layout .plan-grid{max-width:none}
body.v2-layout .plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body.v2-layout .plan-card{background:#fff;border:1px solid #E1E7EF;border-radius:12px;padding:22px 14px 14px;box-shadow:var(--shadow);transition:all .15s;display:flex;flex-direction:column;gap:8px;overflow:hidden;position:relative;min-height:216px;cursor:pointer}
body.v2-layout .plan-card::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--chain-color,#0057B8)}
body.v2-layout .plan-card:hover{box-shadow:0 8px 20px rgba(13,30,60,.10);border-color:var(--chain-color,#BBD6F2);transform:translateY(-2px)}
body.v2-layout .plan-name{font-size:15px;font-weight:800;line-height:1.25}
body.v2-layout .plan-card-top{margin-bottom:4px}
body.v2-layout .plan-meta{font-size:11px;gap:4px}
body.v2-layout .plan-chain-badge{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:3px 9px;border-radius:8px;background:var(--chain-soft,#E3F2FD);color:var(--chain-text,#0057B8);font-size:10px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
body.v2-layout .plan-card-row2{margin-bottom:2px}
body.v2-layout .plan-actions{margin-top:auto;padding-top:9px;gap:6px}
body.v2-layout .btn-sm{padding:5px 10px;font-size:10px}
body.v2-layout .plan-card[data-chain="TGDĐ"] .plan-chain-badge{color:#2B2B2B}
body.v2-layout .plan-card[data-chain="TopZone"] .plan-chain-badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* Plan crumb adjust */
.app-shell .plan-crumb{position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #E1E7EF;padding:8px 18px;margin:0 -28px -28px;z-index:50}
body.v2-layout.sb-collapsed{padding-left:0!important}
body.v2-layout.sb-collapsed > .plan-crumb{left:0!important}
body.v2-layout.sb-collapsed .app-sb{transform:translateX(-100%)}
body.v2-layout.sb-collapsed .app-tb{left:0}
body.v2-layout.sb-collapsed .sb-toggle{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:1500px){body.v2-layout .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1120px){body.v2-layout .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){
  body.v2-layout{padding-left:72px!important;padding-top:58px!important}
  body.v2-layout.sb-collapsed{padding-left:0!important}
  body.v2-layout > .view{padding:14px 12px 18px!important;max-height:calc(100vh - 58px)}
  .app-sb{width:72px}
  .app-tb{left:72px;height:58px;padding:0 10px}
  body.v2-layout.sb-collapsed .app-tb{left:0}
  .sb-toggle{width:36px;height:36px}
  .sb-logo{min-height:58px;padding:8px}
  .sb-logo img{max-height:34px}
  .sb-item span:not(.sb-ico),.sb-section,.sb-footer,.sb-mascot{display:none}
  .sb-item{justify-content:center;padding:11px 0}
  .atb-search{max-width:none}
  .atb-export{padding:9px 10px;font-size:0}
  .atb-export::before{content:"📤";font-size:14px}
  .atb-user-info{display:none}
  .atb-user{padding:3px;background:#fff;border-color:#E1E7EF}
  .page-title{font-size:18px}
  .stat-grid{grid-template-columns:1fr}
  body.v2-layout .plan-grid{grid-template-columns:1fr}
  .dash-header{align-items:stretch;flex-direction:column}
  .dash-header > div:last-child{align-items:flex-start!important;flex-wrap:wrap}
  .plan-sort{width:100%;margin-left:0}
  .plan-sort-select{flex:1;min-width:150px}
}
/* ── Mobile phone (≤480px): sidebar ẩn hoàn toàn, dạng overlay ── */
@media(max-width:480px){
  body.v2-layout{padding-left:0!important;padding-top:54px!important}
  body.v2-layout.sb-collapsed{padding-left:0!important}
  /* Sidebar mặc định ẩn (overlay) */
  .app-sb{width:240px;position:fixed;top:0;left:0;height:100%;z-index:200;transform:translateX(-100%);transition:transform .22s ease;box-shadow:none}
  body.v2-layout:not(.sb-collapsed) .app-sb{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.18)}
  body.v2-layout.sb-collapsed .app-sb{transform:translateX(-100%)}
  /* Show text labels in overlay mode */
  .sb-item span:not(.sb-ico),.sb-section,.sb-footer{display:block}
  .sb-item{justify-content:flex-start;padding:10px 16px}
  /* Overlay backdrop */
  body.v2-layout:not(.sb-collapsed)::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199}
  /* Topbar full width */
  .app-tb{left:0!important;height:54px;padding:0 10px}
  .sb-logo{min-height:54px}
  body.v2-layout > .view{padding:12px 10px 16px!important;max-height:calc(100vh - 54px)}
  /* Ẩn search trên phone rất nhỏ, chỉ giữ icon */
  .atb-search input{font-size:13px}
  /* Ẩn bớt topbar items */
  .atb-save{display:none}
  .atb-bell{display:none}
}

/* ── Month Picker (Apple-style) ──────────────────────────────── */
.month-picker-wrap{position:relative}
.month-picker-btn{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;height:36px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--white);
  color:var(--text);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  font-family:inherit;
}
.month-picker-btn:hover{border-color:#0057B8;color:#0057B8;background:#f0f6ff}
.month-picker-btn.active{border-color:#0057B8;background:#0057B8;color:#fff}
.month-picker-btn.active svg{stroke:#fff}
.month-picker-btn svg{flex-shrink:0;opacity:.75}
.month-picker-btn.active svg{opacity:1}

.month-picker-popup{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:9999;
  background:#fff;border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
  padding:16px;width:260px;
  animation:mppIn .18s cubic-bezier(.34,1.56,.64,1);
  border:1px solid rgba(0,0,0,.06);
}
@media(max-width:480px){
  .month-picker-popup{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;border-radius:20px 20px 0 0;padding:20px 16px 32px}
  .mpp-months{grid-template-columns:repeat(3,1fr);gap:8px}
}
.month-picker-popup.open{display:block}
@keyframes mppIn{from{opacity:0;transform:scale(.92) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}

.mpp-year-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mpp-year-label{font-size:15px;font-weight:700;color:#111;letter-spacing:.3px}
.mpp-year-btn{
  width:30px;height:30px;border-radius:50%;border:none;background:none;
  cursor:pointer;font-size:18px;color:#555;display:flex;align-items:center;justify-content:center;
  transition:background .12s;line-height:1;
}
.mpp-year-btn:hover{background:#f0f0f5;color:#111}

.mpp-months{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.mpp-month-btn{
  height:38px;border-radius:10px;border:none;background:none;
  font-size:12px;font-weight:600;color:#333;cursor:pointer;
  transition:background .12s,color .12s,transform .1s;
  font-family:inherit;
}
.mpp-month-btn:hover{background:#f0f6ff;color:#0057B8}
.mpp-month-btn.current-month{
  border:1.5px solid #0057B8;color:#0057B8;background:#EEF4FF;
}
.mpp-month-btn.selected{
  background:#0057B8;color:#fff;font-weight:700;
  box-shadow:0 2px 8px rgba(0,87,184,.35);
}
.mpp-month-btn.selected:hover{background:#0046a0}
.mpp-month-btn.has-plans::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:2px auto 0;opacity:.5}
.mpp-month-btn.selected.has-plans::after{opacity:.7;background:#fff}

.mpp-footer{border-top:1px solid #f0f0f5;padding-top:10px;text-align:center}
.mpp-clear-btn{
  background:none;border:none;font-size:12px;color:#888;cursor:pointer;
  font-family:inherit;font-weight:500;padding:4px 8px;border-radius:6px;
  transition:color .12s,background .12s;
}
.mpp-clear-btn:hover{color:#0057B8;background:#f0f6ff}

/* ── Comment toggle button ────────────────────────────────── */
.btn-comment-toggle{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1.5px solid #E1E7EF;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;font-weight:700;color:var(--text);transition:all .13s;white-space:nowrap}
.btn-comment-toggle:hover{border-color:var(--blue);color:var(--blue);background:#EEF5FF}
#comment-count-badge:not(:empty){background:var(--blue);color:#fff;border-radius:99px;padding:1px 6px;font-size:10px;font-weight:800}
/* ── Comment panel (slide từ phải) ──────────────────────── */
.comment-panel{position:fixed;top:0;right:-400px;width:380px;max-width:94vw;height:100vh;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.13);z-index:1200;display:flex;flex-direction:column;transition:right .25s cubic-bezier(.4,0,.2,1)}
.comment-panel.open{right:0}
.comment-overlay{position:fixed;inset:0;background:rgba(0,0,0,.18);z-index:1199;display:none}
.comment-overlay.open{display:block}
.cp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #E1E7EF;flex-shrink:0}
.cp-title{font-size:15px;font-weight:800;color:var(--text)}
.cp-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--t2);padding:2px 6px;border-radius:6px;transition:all .13s}
.cp-close:hover{background:#F1F5F9;color:var(--text)}
.cp-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.cp-loading,.cp-empty{text-align:center;color:var(--t2);font-size:13px;padding:32px 0}
/* ── Messages ─────────────────────────────────────────────── */
.cp-msg{display:flex;gap:10px;align-items:flex-start}
.cp-msg-mine{flex-direction:row-reverse}
.cp-av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cp-msg-mine .cp-av{background:#059669}
.cp-msg-body{flex:1;min-width:0}
.cp-msg-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.cp-msg-mine .cp-msg-head{flex-direction:row-reverse}
.cp-msg-name{font-size:12px;font-weight:700;color:var(--text)}
.cp-msg-time{font-size:10px;color:var(--t2)}
.cp-del{background:none;border:none;font-size:11px;color:var(--t2);cursor:pointer;padding:1px 4px;border-radius:4px;margin-left:auto}
.cp-msg-mine .cp-del{margin-left:0;margin-right:auto}
.cp-del:hover{background:#FEE2E2;color:#B91C1C}
.cp-msg-text{font-size:13px;line-height:1.5;color:var(--text);background:#F7F8FA;border-radius:0 10px 10px 10px;padding:8px 12px;word-break:break-word}
.cp-msg-mine .cp-msg-text{background:#EEF5FF;border-radius:10px 0 10px 10px;text-align:left}
/* ── Footer input ─────────────────────────────────────────── */
.cp-footer{padding:12px 16px;border-top:1px solid #E1E7EF;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.cp-input{width:100%;border:1.5px solid #E1E7EF;border-radius:10px;padding:10px 12px;font-size:13px;resize:none;font-family:inherit;line-height:1.5;transition:border-color .13s;box-sizing:border-box}
.cp-input:focus{outline:none;border-color:var(--blue)}
.cp-send{align-self:flex-end;padding:8px 20px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;transition:background .13s}
.cp-send:hover{background:#004A9E}
.cp-footer-hint{font-size:10px;color:var(--t2);text-align:right}

/* ── OOH sub-tabs ────────────────────────────────────────────── */
.ooh-stab{border-bottom:2px solid transparent!important;color:var(--t2)}
.ooh-stab.active{color:#1565C0!important;border-bottom-color:#1565C0!important;background:none}
.ooh-stab:hover:not(.active){color:var(--text)!important;background:rgba(0,0,0,.04)}

/* ── Card context menu ──────────────────────────────────────── */
/* Card action icon buttons */
.card-icon-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:7px;background:#F8FAFC;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .15s;padding:0;flex-shrink:0}
.card-icon-btn:hover{background:#EEF5FF;border-color:var(--blue)}
.card-icon-btn.danger:hover{background:#FEE2E2;border-color:#B91C1C}

/* ── Airtable-style Nhân sự table ──────────────────────────── */
.ns-row:hover { background:#f5f9ff !important; }
.ns-row:hover .ns-actions { opacity:1 !important; }