/* === STICKY title bar + filter bar (cả mobile + desktop) — anh muốn topbar/filter đứng yên,
   nội dung cuộn dưới. Topbar đã có position:sticky sẵn, chỉ cần thêm filter-bar.
   QUAN TRỌNG: KHÔNG dùng negative margin-top — gây nhiễu wheel scroll trên trang dài (Income). */
.filter-bar{
  position:sticky;
  top:var(--topbar-h, 93px); /* Phase 1.2v3.3: dynamic match topbar height */
  background:var(--bg);
  z-index:90;
  padding-top:8px;
  padding-bottom:8px;
}
@media (max-width:768px){
  .filter-bar{ top:var(--topbar-h, 93px); padding-top:6px; padding-bottom:6px; }
}

/* LOGIN */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:36px;width:400px;max-width:100%}
.login-logo{display:flex;justify-content:center;margin-bottom:20px}
.login-logo img{width:128px;height:auto;display:block}
.login-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:4px}
.login-sub{font-size:12px;color:var(--text2);text-align:center;margin-bottom:24px;line-height:1.6}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fg label{font-size:11px;font-weight:600;color:var(--text2)}
.fg input{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:11px 14px;border-radius:9px;font-size:14px;font-family:var(--font);outline:none;width:100%;transition:border-color .15s}
.fg input:focus{border-color:var(--blue2)}
.login-btn{border:none;padding:13px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);width:100%;margin-top:4px}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.errmsg{background:var(--red-bg);border:1px solid var(--red);color:var(--red);padding:10px 14px;border-radius:8px;font-size:12px;margin-bottom:12px;display:none}
.login-footer{text-align:center;margin-top:16px;font-size:11px;color:var(--text3)}

/* LAYOUT */
#admin-screen{display:none}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:199}
.overlay.show{display:block}
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;transition:width .22s ease, transform .25s}
.sidebar.collapsed{width:64px}
.sidebar.collapsed .logo-text,.sidebar.collapsed .logo-sub,.sidebar.collapsed .nav-sec,.sidebar.collapsed .uname,.sidebar.collapsed .urole,.sidebar.collapsed .logout-btn span,.sidebar.collapsed .nav-link-label,.sidebar.collapsed .nav-group-label,.sidebar.collapsed .nav-group-arrow{display:none}
/* Khi collapsed: ẩn TẤT CẢ item con của nhóm, chỉ hiện header nhóm (icon nhóm) + standalone items */
.sidebar.collapsed .nav-group .nav-group-body{display:none !important}
.sidebar.collapsed .nav-group-head{display:flex;justify-content:center;padding:10px 8px;cursor:pointer;border-radius:8px;color:var(--text2);background:transparent;text-transform:none;letter-spacing:normal;font-size:14px;position:relative}
.sidebar.collapsed .nav-group-head:hover{background:var(--bg3);color:var(--text)}
.sidebar.collapsed .nav-group-icon{width:auto;font-size:18px}
.sidebar.collapsed .ni-standalone,.sidebar.collapsed .ni{justify-content:center;padding:10px 8px;position:relative}
.sidebar.collapsed .ni-icon,.sidebar.collapsed .nav-link-icon{font-size:18px;width:auto}
.sidebar.collapsed .logo{padding:14px 8px;text-align:center}
.sidebar.collapsed .logo-mark{justify-content:center}
.sidebar.collapsed .user-info{padding:6px;justify-content:center}
.sidebar.collapsed .nav-group{margin-bottom:2px}
/* Active group khi collapsed: highlight icon nhóm cha nếu chứa page đang active */
.sidebar.collapsed .nav-group.has-active-page > .nav-group-head{background:var(--blue-bg);color:var(--blue)}
.sidebar.collapsed .nav-group.has-active-page > .nav-group-head::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--blue);border-radius:0 2px 2px 0}
/* Badge khi collapsed: chấm nhỏ trên icon nhóm */
.sidebar.collapsed .nav-group-badge{position:absolute;top:4px;right:4px;font-size:8px;padding:0 4px;min-width:14px;display:inline-block !important}
.sidebar.collapsed .nav-link-badge{position:absolute;top:4px;right:4px;font-size:8px;padding:0 4px;min-width:12px}
/* Tooltip khi sidebar collapsed */
.sidebar.collapsed .ni:hover::after,.sidebar.collapsed .nav-link:hover::after,.sidebar.collapsed .nav-group-head:hover::after{
  content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);
  background:var(--bg);color:var(--text);padding:6px 10px;border-radius:6px;font-size:12px;
  white-space:nowrap;border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,0.4);
  margin-left:8px;z-index:1000;pointer-events:none;font-weight:500
}
.sidebar-collapse-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;margin-top:6px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text3);font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s}
.sidebar-collapse-btn:hover{background:var(--bg3);color:var(--text)}
.sidebar.collapsed .sidebar-collapse-btn span{display:none}
/* Standalone item highlight khi active */
.ni-standalone.active{background:var(--blue-bg);color:var(--blue);font-weight:600}
.ni-standalone.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--blue);border-radius:0 2px 2px 0}
.logo{height:var(--topbar-h, 54px);min-height:var(--topbar-h, 54px);max-height:var(--topbar-h, 54px);padding:0 12px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;box-sizing:border-box}
.logo-mark{display:flex;align-items:center;gap:8px}
.logo-icon{width:38px;height:auto;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:width .2s ease}
.logo-icon img{width:100%;height:auto;display:block}
.sidebar.collapsed .logo-icon{width:32px}
.logo-text{font-size:14px;font-weight:700}.logo-sub{font-size:10px;color:var(--text2);margin-top:1px}
.nav{flex:1;padding:8px;overflow-y:auto}
.nav-sec{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:1px;padding:10px 8px 5px;text-transform:uppercase}
.ni{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .15s;margin-bottom:1px;position:relative;border:none;background:none;width:100%;text-align:left;font-family:var(--font)}
.ni:hover{background:var(--bg3);color:var(--text)}
.ni.active{background:var(--blue-bg);color:var(--blue)}
.ni.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--blue);border-radius:0 2px 2px 0}
.ni-icon{font-size:14px;width:18px;height:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ni-icon svg{width:18px;height:18px;display:block}
.sb-bottom{padding:10px;border-top:1px solid var(--border);flex-shrink:0}
.user-info{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:var(--bg3)}
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.uname{font-size:12px;font-weight:600}.urole{font-size:10px;color:var(--text2)}
.logout-btn{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;margin-top:6px;border-radius:7px;border:none;background:none;color:var(--text2);font-size:12px;cursor:pointer;font-family:var(--font);transition:all .15s}
.logout-btn:hover{background:var(--red-bg);color:var(--red)}
/* Phase 1.2v3.3: admin body lock scroll → .main thành scroll container → .topbar sticky thực sự dính top.
   :not(.emp-active) isolate emp portal (đã có overflow:hidden riêng từ line 189). */
body:not(.emp-active){overflow:hidden;height:100vh}
.main{margin-left:220px;flex:1;display:flex;flex-direction:column;height:100vh;overflow-y:auto;transition:margin-left .22s ease}
body.sidebar-collapsed .main{margin-left:64px}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 20px;height:var(--topbar-h, 54px);flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:10px}
.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;cursor:pointer;font-size:18px;flex-shrink:0}
.page-title{font-size:14px;font-weight:700;line-height:1.2}.page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.content{padding:18px 20px;flex:1;min-width:0}
/* Đảm bảo flex parents allow shrinking — fix scroll ngang bảng tính trên máy khác */
.main{min-width:0}
.page{min-width:0;max-width:100%}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:var(--font)}
.btn-primary{background:var(--blue2);color:#fff}.btn-primary:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-success{background:var(--green-bg);color:var(--green);border:1px solid #1a4a3a}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid #4a2020}

/* PAGES */
.page{display:none}.page.active{display:block}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.slabel{font-size:10px;color:var(--text2);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.svalue{font-size:20px;font-weight:700;letter-spacing:-.5px}
.schange{font-size:11px;margin-top:4px;color:var(--text2)}
.tc{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px}
.th{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.tt{font-size:13px;font-weight:600}.ts{font-size:11px;color:var(--text2);margin-top:1px}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 14px;font-size:10px;font-weight:600;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;background:var(--bg3);border-bottom:1px solid var(--border)}
td{padding:10px 14px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.015)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.bg{background:var(--green-bg);color:var(--green)}.ba{background:var(--amber-bg);color:var(--amber)}
.br{background:var(--red-bg);color:var(--red)}.bb{background:var(--blue-bg);color:var(--blue)}
.bp{background:var(--purple-bg);color:var(--purple)}
.chip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:10px;background:var(--bg4);color:var(--text2)}
.sec-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.sec-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px}
.sec-title{font-size:12px;font-weight:600;margin-bottom:10px}
.irow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}
.irow:last-child{border-bottom:none}
.ikey{font-size:11px;color:var(--text2)}.ival{font-size:12px;font-weight:600}

/* ACCORDION */
.acc-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:var(--bg3);transition:background .15s}
.acc-head:hover{background:var(--bg4)}
.acc-head-left{display:flex;align-items:center;gap:10px}
.acc-arrow{font-size:12px;color:var(--text2);transition:transform .2s}
.acc-body{display:none;background:var(--bg2)}
.acc-body.open{display:block}
.acc-arrow.open{transform:rotate(90deg)}

/* SUB TABS */
.sub-tabs{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--border);background:var(--bg2)}
.sub-tab{padding:6px 14px;border-radius:7px 7px 0 0;font-size:12px;font-weight:500;cursor:pointer;color:var(--text2);transition:all .15s;border:none;background:none;font-family:var(--font)}
.sub-tab.active{background:var(--blue-bg);color:var(--blue)}
.sub-content{display:none;padding:16px}
.sub-content.active{display:block}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:500;display:flex;align-items:flex-start;justify-content:center;backdrop-filter:blur(4px);padding:16px;overflow-y:auto}
.modal-overlay.hidden{display:none}
/* Khi modal-xwide hiển thị → overlay không scroll (modal tự scroll nội bộ) */
.modal-overlay:has(.modal-xwide){overflow:hidden;align-items:center}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:22px;width:700px;max-width:calc(100vw - 32px);margin:auto;box-sizing:border-box}
.modal-wide{width:80vw;max-width:1400px}
.modal-xwide{width:95vw;max-width:1800px}
/* modal-xwide: scroll nội bộ với mfooter sticky đáy — user không phải cuộn tận đáy để bấm Lưu/Hủy */
.modal.modal-xwide{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;padding:18px 22px 0}
.modal.modal-xwide > .modal-title{flex-shrink:0}
.modal.modal-xwide > .fg2{overflow-y:auto;flex:1;min-height:0;padding-bottom:8px}
.modal.modal-xwide > .mfooter{flex-shrink:0;background:var(--bg2);margin:0 -22px 0;padding:12px 22px;border-top:1px solid var(--border)}
/* Project modal — gộp các section collapsible vào 1 khung chung tiết kiệm không gian */
.proj-sections-card{grid-column:1/-1;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:0;display:flex;flex-direction:column;margin:0}
.proj-sections-card > .proj-section{border-bottom:1px solid var(--border);padding:0}
.proj-sections-card > .proj-section:last-child{border-bottom:0}
.proj-sections-card > .proj-section > .coll-header{background:transparent !important;border:0 !important;border-radius:0 !important;padding:9px 14px !important;margin:0 !important}
.proj-sections-card > .proj-section > .coll-header:hover{background:var(--bg4) !important}
.proj-sections-card > .proj-section > .coll-body{background:transparent !important;border:0 !important;border-radius:0 !important;padding:6px 14px 12px !important;margin:0 !important}
/* Worker rows trong .proj-sections-card cần bg sáng hơn để tương phản với card bg3 (tránh blend invisible) */
.proj-sections-card .assigned-worker-row{background:var(--bg4) !important;border-color:var(--border2) !important}
/* Aw-items hàng item NV: cần bg đậm hơn so với worker row bg4 → dùng bg3 */
.proj-sections-card .aw-item-row,.proj-sections-card .aw-item-extra-row{background:var(--bg3) !important}
.modal-title{font-size:15px;font-weight:700;margin-bottom:16px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg2 .fm.full.tight{margin-top:-7px}
.fm{display:flex;flex-direction:column;gap:4px}
.fm.full{grid-column:1/-1}
.fm.third{grid-column:span 1}
.fm label{font-size:11px;font-weight:600;color:var(--text2)}
.fm input,.fm select,.fm textarea{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:9px 11px;border-radius:7px;font-size:13px;font-family:var(--font);outline:none;width:100%;transition:border-color .15s}
.fm input[inputmode=numeric]{text-align:right;letter-spacing:.5px}
.fm input:focus,.fm select:focus{border-color:var(--blue2)}
.fm select option{background:var(--bg2)}
.mfooter{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.emp-preview{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:none}
.ep-label{font-size:10px;color:var(--text2);margin-bottom:3px}
.ep-val{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* BONUS CALC */
.bonus-calc{background:var(--bg3);border-radius:14px;padding:12px;margin-top:14px;overflow:hidden}
.bc-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:12px}
.rg{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.rrow{display:flex;align-items:center;gap:6px;background:var(--bg4);border-radius:8px;padding:7px 8px;min-width:0}
.rlabel{flex:1;font-size:11px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rprice{font-size:10px;color:var(--text3);min-width:60px;text-align:right;flex-shrink:0}
.rinput{width:52px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border2);color:var(--text);padding:4px 5px;border-radius:6px;font-size:12px;font-family:var(--font);outline:none;text-align:center}
.rinput-wide{width:72px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border2);color:var(--text);padding:4px 5px;border-radius:6px;font-size:11px;font-family:var(--font);outline:none;text-align:center}
.rinput:focus{border-color:var(--blue)}
.rsub{font-size:10px;font-weight:600;color:var(--amber);min-width:72px;text-align:right;flex-shrink:0}
.btotal{display:flex;justify-content:space-between;align-items:center;background:var(--blue-bg);border:1px solid var(--blue);border-radius:10px;padding:12px 16px;margin-top:12px}
.btotal-label{font-size:12px;color:var(--blue)}.btotal-val{font-size:20px;font-weight:700;color:var(--blue)}

/* EMP PORTAL */
#emp-screen{display:none;min-height:100vh}
/* Khi đang ở employee screen: khóa body scroll, mọi cuộn xảy ra trong emp-content */
body.emp-active{overflow:hidden}
body.emp-active #emp-screen{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.emp-topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.emp-layout{display:flex;flex:1;min-height:0;height:calc(100vh - 60px);overflow:hidden}
.emp-sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);flex-shrink:0;padding:14px 8px 10px;display:flex;flex-direction:column;gap:4px;transition:width .22s ease;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}
.emp-sidebar.collapsed{width:64px}
.emp-sidebar.collapsed .emp-sidebar-label,.emp-sidebar.collapsed .emp-sidebar-title{display:none}
.emp-sidebar.collapsed .emp-tab-v{justify-content:center;padding:11px 8px}
.emp-sidebar.collapsed .emp-tab-v-badge{position:absolute;top:3px;right:3px;font-size:8px;padding:0 4px;min-width:14px;margin-left:0}
.emp-sidebar-title{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:1px;padding:4px 10px 6px;text-transform:uppercase}
.emp-tab-v{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:none;background:none;color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s;width:100%;text-align:left;position:relative;flex-shrink:0}
.emp-tab-v:hover{background:var(--bg3);color:var(--text)}
.emp-tab-v.active{background:var(--blue-bg);color:var(--blue);font-weight:600}
.emp-tab-v.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--blue);border-radius:0 2px 2px 0}
.emp-tab-v-icon{font-size:18px;width:22px;height:22px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.emp-tab-v-icon svg{width:18px;height:18px;display:block}
.emp-tab-v-badge{background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:14px;text-align:center;margin-left:auto}
.emp-sidebar.collapsed .emp-tab-v:hover::after{
  content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);
  background:var(--bg);color:var(--text);padding:6px 10px;border-radius:6px;font-size:12px;
  white-space:nowrap;border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,0.4);
  margin-left:8px;z-index:1000;pointer-events:none;font-weight:500
}
.emp-sidebar-collapse{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:7px;margin-top:auto;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text3);font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s;flex-shrink:0}
.emp-sidebar.collapsed .emp-sidebar-collapse{padding:7px 4px;font-size:14px}
.emp-sidebar.collapsed .emp-sidebar-collapse span:not(#emp-sb-collapse-icon){display:none}
.emp-sidebar-collapse:hover{background:var(--bg3);color:var(--text)}
.emp-content{padding:16px;flex:1;min-width:0;box-sizing:border-box;overflow-y:auto;height:100%}
@media (max-width:800px){
  .emp-layout{flex-direction:column;height:auto;overflow:visible}
  .emp-sidebar{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;padding:8px;gap:4px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}
  .emp-sidebar.collapsed{width:100%}
  .emp-sidebar-title{display:none}
  .emp-tab-v{width:auto;flex:1;min-width:120px;font-size:12px;padding:8px 10px}
  .emp-sidebar-collapse{display:none}
  .emp-content{padding:12px;height:auto;overflow:visible}
}
.emp-icon{width:36px;height:36px;background:var(--green-bg);border:1px solid var(--green);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.mbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:12px 16px}
.mnav{display:flex;align-items:center;gap:8px}
.mbtn{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.mcur{font-size:13px;font-weight:600;min-width:100px;text-align:center}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px}
.sc-label{font-size:10px;color:var(--text2);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.sc-val{font-size:20px;font-weight:700;letter-spacing:-.5px}
.sc-sub{font-size:11px;color:var(--text2);margin-top:3px}
.sbar{height:4px;background:var(--bg4);border-radius:2px;margin-top:8px;overflow:hidden}
.sbar-fill{height:100%;border-radius:2px}
.esec{background:var(--bg2);border:1px solid var(--border);border-radius:14px;margin-bottom:14px;overflow:hidden}
.esec-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.esec-title{font-size:13px;font-weight:600}
.ag{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.ac{background:var(--bg3);border-radius:10px;padding:12px;text-align:center}
.av{font-size:22px;font-weight:700;margin-bottom:3px}.al{font-size:11px;color:var(--text2)}
.trow{padding:12px 14px;background:var(--bg3);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border)}
.trow-label{font-size:12px;font-weight:600;color:var(--text2)}.trow-val{font-size:16px;font-weight:700;color:var(--green)}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filter-bar select,.filter-bar input{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:7px 12px;border-radius:8px;font-size:12px;font-family:var(--font);outline:none}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--blue2)}

/* UTILS */
.tg{color:var(--green)}.tr{color:var(--red)}.ta{color:var(--amber)}.tb{color:var(--blue)}.tp{color:var(--purple)}.tm{color:var(--text2)}
.fb{font-weight:700}
.empty{text-align:center;padding:32px;color:var(--text2);font-size:13px}
.att-table input.att-cell{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:5px 7px;border-radius:6px;font-size:12px;font-family:var(--font);text-align:center;transition:border-color .15s}
.att-table input.att-cell:focus{outline:none;border-color:var(--blue)}
.att-table input.att-cell:hover{border-color:var(--text3)}
.loading{display:flex;align-items:center;justify-content:center;padding:28px;color:var(--text2);font-size:13px;gap:8px}
.spin{width:16px;height:16px;border:2px solid var(--border2);border-radius:50%;animation:spin .6s linear infinite}
.spin-b{border-top-color:var(--blue)}.spin-g{border-top-color:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}
#toast{position:fixed;bottom:20px;right:20px;padding:11px 18px;border-radius:9px;font-size:12px;font-weight:600;z-index:9999;transform:translateY(60px);opacity:0;transition:all .3s;pointer-events:none;max-width:280px}
#toast.show{transform:translateY(0);opacity:1}
#toast.success{background:var(--green-bg);border:1px solid var(--green);color:var(--green)}
#toast.error{background:var(--red-bg);border:1px solid var(--red);color:var(--red)}

/* MOBILE */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:flex}
  .stat-grid{grid-template-columns:1fr 1fr}
  .sec-row{grid-template-columns:1fr}
  .fg2{grid-template-columns:1fr}
  .fm.full{grid-column:1}
  .rg{grid-template-columns:1fr}
  .content{padding:12px 14px}
  .topbar{padding:10px 14px}
}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* SCOPE WARNING */
.scope-warn{background:var(--red-bg);border:1px solid var(--red);color:var(--red);padding:10px 14px;border-radius:8px;font-size:12px;margin:8px 0;line-height:1.6}
.scope-ok{background:var(--green-bg);border:1px solid var(--green);color:var(--green);padding:8px 12px;border-radius:8px;font-size:11px;margin:8px 0}
.scope-info{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);padding:10px 12px;border-radius:8px;font-size:11px;margin:8px 0;line-height:1.7}

/* EMP PROJECT WORK */
.proj-work-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.proj-work-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:6px}
.proj-work-name{font-size:13px;font-weight:600}
.proj-work-meta{font-size:11px;color:var(--text2);margin-top:2px}
.proj-work-actions{display:flex;gap:6px}
.proj-work-data{font-size:11px;color:var(--text2);background:var(--bg2);padding:8px 10px;border-radius:6px;line-height:1.7}

/* EXPORT BUTTON */
.export-btn{background:var(--green-bg);color:var(--green);border:1px solid var(--green);padding:7px 12px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font);transition:opacity .15s}
.export-btn:hover{opacity:.85}
.export-btn-pdf{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.export-btn-bank{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}

/* EMP TABS */
.emp-tabs{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:6px;margin-bottom:14px}
.emp-tab{flex:1;padding:10px 14px;border-radius:8px;border:none;background:none;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s}
.emp-tab:hover{color:var(--text);background:var(--bg3)}
.emp-tab.active{background:var(--blue-bg);color:var(--blue)}
.emp-pane{display:none}
.emp-pane.active{display:block}

/* WORKFLOW BADGES */
.wf-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:8px 10px;background:var(--bg2);border-radius:8px;border:1px solid var(--border)}
.wf-step{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:var(--bg4);color:var(--text3);border:1px solid var(--border2)}
.wf-step.done{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.wf-step.warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber)}
.wf-step.locked{opacity:.5}
.wf-action{margin-left:auto}
.btn-final{background:linear-gradient(135deg,#34d399,#22c55e);color:#fff;border:none}
.row-verified{background:rgba(52,211,153,0.07)!important}
.row-verified td{border-left:3px solid var(--green)}
.card-incomplete{border-left:4px solid var(--red)!important}

/* BELL NOTIFICATIONS */
.bell-wrap{position:relative}
.bell-btn{background:var(--bg2);border:1px solid var(--border);width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:all .15s;color:#fff}
.bell-btn:hover{background:var(--bg3);border-color:var(--blue)}
.bell-btn.has-notif{animation:bellShake 1s ease-in-out infinite}
@keyframes bellShake{
  0%,100%{transform:rotate(0deg)}
  10%,30%,50%{transform:rotate(-12deg)}
  20%,40%,60%{transform:rotate(12deg)}
  70%{transform:rotate(0deg)}
}
.bell-badge{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center;line-height:1.4}
.notif-panel{display:none;position:absolute;right:0;top:42px;width:380px;max-height:500px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:1000;overflow:hidden}
.notif-panel.open{display:flex;flex-direction:column}
.notif-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg3)}
.notif-body{flex:1;overflow-y:auto;max-height:440px}
.notif-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.notif-item:hover{background:var(--bg3)}
.notif-item:last-child{border-bottom:none}
.notif-item-title{font-size:12px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.notif-item-msg{font-size:11px;color:var(--text2);line-height:1.5}
.notif-item.urgent{border-left:3px solid var(--red)}
.notif-item.warn{border-left:3px solid var(--amber)}
.notif-item.info{border-left:3px solid var(--blue)}
@media (max-width:600px){
  .notif-panel{width:calc(100vw - 30px);right:-15px}
}

/* === Phase 1.2v4c — Bảng tính BD: custom topbar (Approach A2 — hide global, NEW custom-bar) === */
/* Hide global .topbar khi page-spreadsheet active. :has() scope: zero regress 23 pages khác */
.main:has(#page-spreadsheet.active) > .topbar{display:none}
/* Flex chain để tx-table-wrap auto-fill remaining space (prep v4d) */
.main:has(#page-spreadsheet.active) > .content{padding:0;display:flex;flex-direction:column;min-height:0}
#page-spreadsheet.active{display:flex;flex-direction:column;flex:1;min-height:0}

/* Custom topbar — TRIPLE-LOCK height 54px + flex-shrink:0 (mitigate v3.5b 1px regression) */
.tx-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;
  min-height:54px;
  max-height:54px;
  flex-shrink:0;
  flex-grow:0;
  box-sizing:border-box;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:100;
  /* overflow:visible (default) — notif-panel dropdown từ bell escape xuống dưới */
}

/* Title block (left) — mimic page-title + page-sub */
.tx-custom-title{display:flex;flex-direction:column;justify-content:center;gap:0;flex-shrink:0;margin-right:8px}
.tx-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.tx-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}

/* Filters block (right) — overflow-x:auto for 14+ items */
.tx-custom-filters{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding-right:4px;
}
.tx-custom-filters > *{flex-shrink:0}
/* 2026-05-20: Shrink Bảng tính topbar elements để fit không cần scroll */
.tx-custom-filters label{font-size:11px !important}
.tx-custom-filters select,
.tx-custom-filters input[type="text"]{
  padding:2px 6px !important;
  font-size:10.5px !important;
  min-width:0 !important;
  height:26px !important;
  border-radius:5px !important;
}
.tx-custom-filters select#tx-month-num,
.tx-custom-filters select#tx-year{min-width:72px !important;max-width:90px}
.tx-custom-filters input#tx-search{min-width:110px !important;max-width:160px}
.tx-custom-filters input#tx-name{min-width:120px !important;max-width:180px}
.tx-custom-filters .export-btn{
  padding:2px 8px !important;
  font-size:10.5px !important;
  height:26px !important;
  border-radius:5px !important;
}
.tx-custom-filters #tx-meta{font-size:10px !important}
.tx-custom-topbar{gap:6px !important;padding:0 8px !important}
.tx-custom-filters{gap:3px !important;overflow:visible !important}
.tx-custom-filters::-webkit-scrollbar{height:4px}
.tx-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* "Tên bảng" + meta đẩy sát phải */
.tx-custom-filters .tx-name-group{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0}

/* === Phase 1.2v4d — Bảng tính full màn hình (flexbox auto-fill, không math) === */
#page-spreadsheet > #tx-table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}

/* === Chat page full màn hình (2026-05-19, per user) — flex chain + strip viền === */
/* Loại bỏ padding .content + border/radius .chat-shell. Áp dụng cho ADMIN portal chat,
   không đụng emp-chat-shell vì khác parent. */
.main:has(#page-chat.active) > .content{padding:0;display:flex;flex-direction:column;min-height:0}
#page-chat.active{display:flex;flex-direction:column;flex:1;min-height:0}
#page-chat > #chat-shell{
  height:100%;
  max-height:none;
  min-height:0;
  border:0;
  border-radius:0;
  flex:1;
}

/* === 2026-05-19: PM Dashboard compact layout (per user request) === */
/* All gaps = 4px uniform (top/right/bottom/left of stat cards + content edges) */
.main:has(#page-pm_dashboard.active){position:relative}
.main:has(#page-pm_dashboard.active) > .content{padding:4px}
/* Task 1: Move filter-bar lên topbar (absolute position) */
#page-pm_dashboard.active > .filter-bar{
  position:absolute;
  top:9px;
  left:280px;
  right:180px;
  height:36px;
  margin:0;
  padding:0;
  z-index:105;
  background:transparent;
  border:0;
  display:flex;
  gap:6px;
  align-items:center;
}
#page-pm_dashboard.active > .filter-bar input,
#page-pm_dashboard.active > .filter-bar select{
  height:30px;
  font-size:12px;
  padding:4px 10px;
  background:var(--bg3);
  border:1px solid var(--border);
}
#page-pm_dashboard.active > .filter-bar .btn{
  height:30px;
  padding:4px 10px;
  font-size:11px;
}
/* Task 2 + 3: Compact stat-grid (gap 4px) + stat-cards 1/3 size + 4px margin-bottom */
#page-pm_dashboard > .stat-grid{gap:4px !important;margin-bottom:4px !important}
#page-pm_dashboard > .stat-grid .stat-card{padding:6px 10px;border-radius:8px}
#page-pm_dashboard > .stat-grid .stat-card .slabel{font-size:9px;margin-bottom:1px;letter-spacing:.3px}
#page-pm_dashboard > .stat-grid .stat-card .svalue{font-size:16px;letter-spacing:-.3px}
#page-pm_dashboard > .stat-grid .stat-card .tm{font-size:9px !important;margin-top:0 !important}

/* 2026-05-20: PM Dashboard 2-tab full-height — active pane fills viewport, table scrolls inside */
.main:has(#page-pm_dashboard.active) > .content{display:flex;flex-direction:column;min-height:0}
#page-pm_dashboard.active{display:flex;flex-direction:column;flex:1;min-height:0}
#page-pm_dashboard.active > .emp-pane.active{flex:1;min-height:0;display:flex;flex-direction:column}
#page-pm_dashboard.active > .emp-pane.active > div[id$="-content"]{flex:1;min-height:0;display:flex;flex-direction:column}
#page-pm_dashboard.active > .emp-pane.active > div[id$="-content"] > .tc{flex:1;min-height:0;display:flex;flex-direction:column;margin:0 !important}
#page-pm_dashboard.active > .emp-pane.active > div[id$="-content"] > .tc > div[style*="overflow"]{flex:1;min-height:0;max-height:none !important}

/* === 2026-05-19/v11: Dự án (projects) — flex column + sticky filter + sticky thead === */
.main:has(#page-projects.active) > .content{padding:4px !important;display:flex;flex-direction:column;min-height:0}
#page-projects.active{display:flex;flex-direction:column;flex:1;min-height:0}
#page-projects.active > .filter-bar{
  position:sticky;top:0;z-index:50;
  margin:0 0 4px !important;
  padding:6px 12px;
  height:48px;box-sizing:border-box;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
  flex-shrink:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
#page-projects.active > .tc{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#page-projects.active > .tc > .th{flex-shrink:0}
#page-projects.active > .tc > #prj-tw{flex:1;min-height:0;overflow:auto}
#page-projects.active > .filter-bar > *{flex-shrink:0}
#page-projects.active > .filter-bar input,
#page-projects.active > .filter-bar select{
  height:30px;
  font-size:12px;
  padding:4px 10px;
  background:var(--bg3);
  border:1px solid var(--border);
}
#page-projects.active > .filter-bar input{flex:1 0 200px;min-width:200px}
#page-projects.active > .filter-bar .btn{
  height:30px;
  padding:4px 10px;
  font-size:11px;
}
#page-projects.active > .filter-bar::-webkit-scrollbar{height:4px}
#page-projects.active > .filter-bar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
/* Layer 2026-05-26 v11: sticky thead bảng quản lý dự án — #prj-tw là scroll container nội */
#page-projects #prj-tw .prj-main-table{width:100%;border-collapse:collapse}
#page-projects #prj-tw .prj-main-table > thead{position:sticky;top:0;z-index:5;background:var(--bg2)}
#page-projects #prj-tw .prj-main-table > thead > tr > th{background:var(--bg2);box-shadow:inset 0 -1px 0 var(--border)}

/* === 2026-05-19: Deadline (today_tomorrow) — filter-bar lên topbar + grid 4px + calendar view === */
.main:has(#page-today_tomorrow.active){position:relative}
.main:has(#page-today_tomorrow.active) > .content{padding:4px}
#page-today_tomorrow.active > .filter-bar{
  position:absolute;
  top:9px;
  left:280px;
  right:180px;
  height:36px;
  margin:0;
  padding:0;
  z-index:105;
  background:transparent;
  border:0;
  display:flex;
  gap:6px;
  align-items:center;
}
/* View mode buttons */
.tt-mode-btn{
  height:30px;padding:4px 12px;font-size:11px;font-weight:600;
  background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  border-radius:6px;cursor:pointer;transition:all .15s;
  font-family:var(--font);
}
.tt-mode-btn:hover{background:var(--bg4);color:var(--text)}
.tt-mode-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Deadline grid layout — 4px gap (replace old margin-bottom:6px stacking) */
.tt-event-grid{display:flex;flex-direction:column;gap:4px}
.tt-event-grid > div{margin-bottom:0 !important}
.tt-section{margin-bottom:8px !important}

/* === Calendar grid (Windows 11 style) for Month view === */
.tt-cal-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px;margin-top:4px}
.tt-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tt-cal-title{font-size:13px;font-weight:700;color:var(--text)}
.tt-cal-nav{display:flex;gap:4px}
.tt-cal-nav button{background:var(--bg3);border:1px solid var(--border);color:var(--text);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:13px}
.tt-cal-nav button:hover{background:var(--bg4)}
.tt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tt-cal-dow{font-size:10px;font-weight:600;color:var(--text3);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.5px}
/* 2026-05-19: Calendar cells 1/4 size — fit full month without scroll */
.tt-cal-cell{
  min-height:40px;
  border-radius:5px;
  padding:3px 5px;
  display:flex;flex-direction:column;
  font-size:10px;
  cursor:pointer;
  transition:all .15s;
  border:1px solid var(--border);
  background:var(--bg3);
}
.tt-cal-cell:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.tt-cal-cell.empty{background:transparent;border:0;cursor:default;pointer-events:none}
.tt-cal-cell.empty:hover{transform:none;box-shadow:none}
.tt-cal-cell.today{border:2px solid var(--blue);font-weight:700}
.tt-cal-cell .cal-day-num{font-size:11px;font-weight:600;color:var(--text);line-height:1}
.tt-cal-cell .cal-day-count{font-size:8.5px;color:var(--text2);margin-top:auto;line-height:1.1}
/* Month picker styling — visible only when mode=month */
#tt-month-picker{
  height:30px;padding:4px 10px;font-size:11px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;cursor:pointer;
  font-family:var(--font);
  margin-left:4px;
}
/* Color-coded by deadline count */
.tt-cal-cell.cnt-1{background:rgba(245,158,11,0.25);border-color:rgba(245,158,11,0.5)}
.tt-cal-cell.cnt-1 .cal-day-num{color:#fbbf24}
.tt-cal-cell.cnt-many{background:rgba(248,113,113,0.28);border-color:rgba(248,113,113,0.55)}
.tt-cal-cell.cnt-many .cal-day-num{color:#fca5a5}
.tt-cal-day-events{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.tt-cal-day-header{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px;padding:6px 10px;background:var(--bg3);border-radius:6px}

/* === 2026-05-19: Sync emp portal UI với admin layout === */
/* Emp Deadline filter-bar — inline tại top of pane (visible, compact, styled like admin) */
#emp-pane-today > .emp-tt-filter{
  position:static;
  display:flex;
  gap:6px;
  align-items:center;
  padding:8px 12px;
  margin:0;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  height:54px;
  box-sizing:border-box;
}
#emp-pane-today > #emp-tt-container{padding:12px;flex:1;overflow-y:auto;min-height:0}

/* Emp Today/Deadline pane — flex column to lay filter-bar + container */
#emp-pane-today.active{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}

/* Emp Chat fullscreen — #emp-pane-chat khi active + #emp-chat-shell full */
#emp-pane-chat.active{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
#emp-pane-chat > #emp-chat-shell{
  height:100%;
  max-height:none;
  min-height:0;
  border:0;
  border-radius:0;
  flex:1;
}
/* Emp Workflow fullscreen — #emp-pane-workflow + emp-wf-shell full */
#emp-pane-workflow.active{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
#emp-pane-workflow > #emp-wf-shell{
  height:100%;
  max-height:none;
  min-height:0;
  flex:1;
}
/* Strip emp-content padding cho 3 panes này để match admin fullscreen */
.emp-content:has(#emp-pane-chat.active),
.emp-content:has(#emp-pane-today.active),
.emp-content:has(#emp-pane-workflow.active){
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0 !important;
}

/* === 2026-05-19: Emp Dự án thực hiện — compact layout giống PM Dashboard === */
/* Title + filter + add button all in 1 row (esec-head) */
.emp-content:has(#emp-pane-projects.active){padding:4px !important}
/* OUTER border của section (giống .tc của PM) — head row borderless để không chồng nét.
   Layer 2026-05-26 v9: flex column + flex:1 để inner ep-myproj có scroll context,
   esec-head sticky top, thead trong table sticky. */
.emp-content:has(#emp-pane-projects.active){display:flex;flex-direction:column}
#emp-pane-projects.active{display:flex;flex-direction:column;flex:1;min-height:0}
#emp-pane-projects > .emp-proj-sec{
  margin:0;
  padding:0;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  display:flex;flex-direction:column;
  flex:1;min-height:0;
}
#emp-pane-projects > .emp-proj-sec > .emp-proj-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  margin:0;
  background:var(--bg2);
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  height:48px;
  box-sizing:border-box;
  flex-wrap:nowrap;
  flex-shrink:0;
}
.emp-proj-title-block{display:flex;align-items:center;gap:6px;flex-shrink:0}
.emp-proj-title-block .esec-title{font-size:13px;font-weight:700;white-space:nowrap}
.emp-proj-filter{
  flex:1;
  display:flex;
  gap:4px;
  align-items:center;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
}
.emp-proj-filter > *{flex-shrink:0}
.emp-proj-filter select,
.emp-proj-filter input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
.emp-proj-filter .btn{height:30px;padding:4px 10px;font-size:11px}
.emp-proj-add-btn{height:30px !important;padding:4px 10px !important;font-size:11px !important;flex-shrink:0}

/* Project list — Layer 2026-05-26 v9/v10: scroll container + sticky thead.
   v10: bỏ wrapper overflow-x:auto trong JS → table trực tiếp con của #ep-myproj
   → thead sticky stick relative to #ep-myproj scroll context. */
#emp-pane-projects #ep-myproj{padding:0;flex:1;min-height:0;overflow:auto}
#emp-pane-projects #ep-myproj > div{margin-bottom:4px}
#emp-pane-projects #ep-myproj > div:last-child{margin-bottom:0}
#emp-pane-projects #ep-myproj .emp-prj-table{width:100%;border-collapse:collapse}
/* v11 fix: scope > thead direct child — không bleed sang inner prj-scope-matrix thead
   (matrix nested trong colspan=9 td của detail row, cùng descendant của emp-prj-table) */
#emp-pane-projects #ep-myproj .emp-prj-table > thead{position:sticky;top:0;z-index:5;background:var(--bg2)}
#emp-pane-projects #ep-myproj .emp-prj-table > thead > tr > th{background:var(--bg2);box-shadow:inset 0 -1px 0 var(--border)}

/* === 2026-05-19: Emp Bảng lương — compact layout giống Dự án thực hiện === */
.emp-content:has(#emp-pane-salary.active){padding:4px !important}
/* Month picker bar — compact 48px */
#emp-pane-salary > .mbar{
  margin:0 0 4px;
  padding:6px 12px;
  border-radius:10px;
  height:48px;
  box-sizing:border-box;
}
#emp-pane-salary > .mbar > div:first-child{font-size:12px !important}
#emp-pane-salary .mbtn{width:26px;height:26px;font-size:13px;border-radius:6px}
#emp-pane-salary .mcur{font-size:12px;min-width:90px}
/* Summary cards — tighten padding & gap */
#emp-pane-salary > .sg{gap:4px;margin-bottom:4px}
#emp-pane-salary > .sg > .sc{padding:10px 12px;border-radius:10px}
#emp-pane-salary > .sg > .sc .sc-val{font-size:17px}
#emp-pane-salary > .sg > .sc .sc-sub{font-size:10px}
#emp-pane-salary > .sg > .sc .sbar{margin-top:6px}
/* esec — match project section border-radius:10 và spacing 4px */
#emp-pane-salary > .esec{
  margin:0 0 4px;
  border-radius:10px;
}
#emp-pane-salary > .esec:last-child{margin-bottom:0}
#emp-pane-salary > .esec > .esec-head{
  padding:6px 12px;
  height:40px;
  box-sizing:border-box;
}
#emp-pane-salary > .esec > .esec-head .esec-title{font-size:12px;font-weight:700}
/* Attendance grid — tighten padding */
#emp-pane-salary > .esec .ag{padding:8px;gap:6px}
#emp-pane-salary > .esec .ag .ac{padding:8px 6px;border-radius:8px}
#emp-pane-salary > .esec .ag .ac .av{font-size:18px;margin-bottom:2px}
#emp-pane-salary > .esec .ag .ac .al{font-size:10px}
/* Tables inside esec — compact cells */
#emp-pane-salary > .esec table td,
#emp-pane-salary > .esec table th{padding:6px 12px !important;font-size:12px}
#emp-pane-salary > .esec .trow{padding:8px 12px}
#emp-pane-salary > .esec .trow-label{font-size:11px}
#emp-pane-salary > .esec .trow-val{font-size:15px !important}

/* === 2026-05-19: Deadline page compact (admin + PM + emp) giống Bảng lương === */
/* --- ADMIN/PM: #page-today_tomorrow --- */
.content:has(#page-today_tomorrow.active){padding:4px !important}
#page-today_tomorrow.active{display:flex;flex-direction:column;min-height:0;padding:0}
#page-today_tomorrow > .filter-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;margin:0 0 4px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  height:48px;box-sizing:border-box;
  flex-shrink:0;flex-wrap:nowrap;
}
#page-today_tomorrow > #tt-container{flex:1;overflow-y:auto;min-height:0}
/* --- EMP: tighten existing 54px filter-bar xuống 48px + match border-radius 10px --- */
#emp-pane-today > .emp-tt-filter{
  padding:6px 12px;
  height:48px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:10px;
  margin:0 0 4px;
}
#emp-pane-today > #emp-tt-container{padding:0;flex:1;overflow-y:auto;min-height:0}

/* --- SHARED: tighten content INSIDE container (admin & emp) --- */
#tt-container > div,
#emp-tt-container > div{gap:4px !important}
#tt-container .tt-section,
#emp-tt-container .tt-section{
  margin-bottom:0 !important;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
}
#tt-container .tt-section > div:first-child,
#emp-tt-container .tt-section > div:first-child{
  font-size:12px !important;
  margin-bottom:4px !important;
  padding-bottom:4px !important;
}
#tt-container .tt-section > div:first-child span,
#emp-tt-container .tt-section > div:first-child span{font-size:10px !important}
/* Calendar wrap — compact padding & nested gap */
#tt-container .tt-cal-wrap,
#emp-tt-container .tt-cal-wrap{padding:8px;margin-top:0}
#tt-container .tt-cal-head,
#emp-tt-container .tt-cal-head{margin-bottom:6px}
#tt-container .tt-cal-title,
#emp-tt-container .tt-cal-title{font-size:12px}
#tt-container .tt-cal-nav button,
#emp-tt-container .tt-cal-nav button{width:24px;height:24px;font-size:12px;border-radius:5px}
/* Event grid — already 4px gap, just compact card padding via inline-style override */
#tt-container .tt-event-grid > div,
#emp-tt-container .tt-event-grid > div{font-size:11px}
/* Footer hint */
#tt-container > div > div:last-child[style*="margin-top"],
#emp-tt-container > div > div:last-child[style*="margin-top"]{
  margin-top:4px !important;
  padding:6px 10px !important;
  font-size:10px !important;
  border-radius:10px !important;
}

/* === 2026-05-19: Kiểm tra dự án NV (admin/PM/lead/vice_director) compact ===
   v11: .content thành flex column → #page-verify (flex:1) đầy main viewport →
   filter + stat (flex-shrink:0) đứng yên, #vf-content (flex:1 overflow:auto) scroll */
.main:has(#page-verify.active) > .content{padding:4px !important;display:flex;flex-direction:column;min-height:0}
#page-verify.active{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
#page-verify > .filter-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;margin:0 0 4px !important;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  height:48px;box-sizing:border-box;
  flex-shrink:0;flex-wrap:nowrap;
}
#page-verify > .filter-bar select{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
#page-verify > .stat-grid{gap:4px !important;margin-bottom:4px !important}
#page-verify > .stat-grid .stat-card{padding:6px 10px;border-radius:8px}
#page-verify > .stat-grid .stat-card .slabel{font-size:9px;margin-bottom:1px;letter-spacing:.3px}
#page-verify > .stat-grid .stat-card .svalue{font-size:16px;letter-spacing:-.3px}
#page-verify > #vf-content{
  flex:1;overflow:auto;min-height:0;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
}
#page-verify > #vf-content table{margin:0}
#page-verify > #vf-content table td,
#page-verify > #vf-content table th{padding:6px 10px !important;font-size:12px}
/* Layer 2026-05-26 v9/v11/v12: sticky thead — header đứng yên khi cuộn list.
   v12: override .tc{overflow:hidden} bên trong vf-content → nested overflow context
        phá sticky. Set overflow:visible cho .tc + reset bg/border. */
#page-verify > #vf-content > .tc{overflow:visible;background:transparent;border:0;margin:0;border-radius:0}
#page-verify > #vf-content > .tc > table > thead{position:sticky;top:0;z-index:5;background:var(--bg2)}
#page-verify > #vf-content > .tc > table > thead > tr > th{background:var(--bg2);box-shadow:inset 0 -1px 0 var(--border)}
/* v10: ẩn "+ Thêm mới" trên các page không có handler add */
.main:has(#page-verify.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-customers.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-payment_orders.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-balance_check.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-pm_dashboard.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-project_pnl.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-report.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-today_tomorrow.active) > .topbar button[onclick*="openAddModal"],
.main:has(#page-dashboard.active) > .topbar button[onclick*="openAddModal"]{display:none}

/* === 2026-05-26 v5: Bảng tin layout cho custom topbar full-flush, content scroll === */
/* Padding 0 để topbar nối liền sidebar; container nội padding tự lo */
.content:has(#page-feed.active){padding:0 !important}
.emp-content:has(#emp-pane-feed.active){padding:0 !important}
#page-feed.active{display:flex;flex-direction:column;padding:0}
#emp-pane-feed.active{display:flex;flex-direction:column;padding:0}
/* Feed container — single col, max 680, KHÔNG flex:1/min-height:0 để cho content
   tự grow vượt viewport → .main scroll xử lý */
#page-feed > .feed-container,
#emp-pane-feed > .feed-container{
  max-width:680px;margin:0 auto;
  padding:12px 8px 24px;
  gap:6px;
  display:flex;flex-direction:column;
  width:100%;box-sizing:border-box;
}
/* Composer — tighter padding & border-radius 10px */
#page-feed .feed-composer,
#emp-pane-feed .feed-composer{
  padding:8px 12px;
  border-radius:10px;
}
#page-feed .feed-composer-head,
#emp-pane-feed .feed-composer-head{padding:4px 2px;gap:8px}
#page-feed .feed-composer-avatar,
#emp-pane-feed .feed-composer-avatar{width:32px;height:32px;font-size:13px}
#page-feed .feed-composer-placeholder,
#emp-pane-feed .feed-composer-placeholder{padding:7px 12px;font-size:12px}
#page-feed .feed-composer-actions,
#emp-pane-feed .feed-composer-actions{margin-top:6px;padding-top:6px;gap:4px}

/* Layer 2026-05-26 v5: Custom topbar tabs cho Bảng tin page (admin + emp) */
/* Ẩn global topbar khi ở Bảng tin admin */
.main:has(#page-feed.active) > .topbar{display:none}
/* .content layout: flex column để topbar sticky + body scroll qua .main */
.main:has(#page-feed.active) > .content{display:flex;flex-direction:column}

.feed-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;
  box-sizing:border-box;
  padding:0 20px;
  display:flex;align-items:center;gap:8px;
  position:sticky;top:0;z-index:100;
}
.feed-tab{
  background:transparent;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text2);
  font-family:var(--font);
  transition:background .15s,color .15s;
  position:relative;
}
.feed-tab:hover{background:var(--bg3);color:var(--text)}
.feed-tab.active{background:var(--bg3);color:var(--text)}
.feed-tab.active::after{
  content:'';position:absolute;left:16px;right:16px;bottom:-2px;height:2px;
  background:var(--blue);border-radius:2px;
}
.feed-tab[data-feed-tab="ann"].active::after{background:var(--amber)}
.feed-tab-badge{
  font-size:10.5px;font-weight:700;color:#fff;background:#ef4444;
  padding:1px 7px;border-radius:9px;line-height:1.3;
  box-shadow:0 0 0 2px rgba(239,68,68,0.15);
  animation:annBadgePulse 1.8s ease-in-out infinite;
}
@keyframes annBadgePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.85;transform:scale(1.05)}}

/* Panels — JS toggle inline display:none/flex. Default (no inline style): show via flex.
   width:100% để panel fill container width (680px) — không co lại = composer/posts đủ rộng. */
.feed-panel{display:flex;flex-direction:column;gap:6px;width:100%}

/* Empty state cho announcement panel */
#feed-panel-ann .feed-posts:empty::after,
#emp-feed-panel-ann .feed-posts:empty::after{
  content:'📭 Chưa có thông báo nào';
  display:block;text-align:center;color:var(--text3);
  font-size:13px;font-style:italic;padding:30px 0;
}
#page-feed .feed-composer-btn,
#emp-pane-feed .feed-composer-btn{padding:6px 8px;font-size:11px}
/* Filter bar — match deadline 48px */
#page-feed .feed-filter-bar,
#emp-pane-feed .feed-filter-bar{
  padding:6px 8px;
  border-radius:10px;
  gap:4px;
}
#page-feed .feed-filter-btn,
#emp-pane-feed .feed-filter-btn{padding:6px 10px;font-size:11px;border-radius:6px}
/* Posts container — tighter gap between posts */
#page-feed .feed-posts,
#emp-pane-feed #emp-feed-posts,
#emp-pane-feed .feed-posts{
  gap:6px;
  flex:1;overflow-y:auto;min-height:0;
}
/* Post — tighter padding & smaller radius */
#page-feed .feed-post,
#emp-pane-feed .feed-post{border-radius:10px}
#page-feed .feed-post-head,
#emp-pane-feed .feed-post-head{padding:8px 12px;gap:8px}
#page-feed .feed-post-avatar,
#emp-pane-feed .feed-post-avatar{width:34px;height:34px;font-size:13px}
#page-feed .feed-post-author,
#emp-pane-feed .feed-post-author{font-size:13px}
#page-feed .feed-post-time,
#emp-pane-feed .feed-post-time{font-size:10px}
#page-feed .feed-post-content,
#emp-pane-feed .feed-post-content{padding:8px 12px;font-size:12.5px;line-height:1.45}
#page-feed .feed-post-stats,
#emp-pane-feed .feed-post-stats{padding:6px 12px;font-size:11px}
#page-feed .feed-post-action-bar,
#emp-pane-feed .feed-post-action-bar{padding:4px 8px;min-height:38px;gap:4px}
#page-feed .feed-post-btn,
#emp-pane-feed .feed-post-btn{padding:6px 9px;font-size:12px;gap:5px}
#page-feed .feed-post-btn-count,
#emp-pane-feed .feed-post-btn-count{font-size:12px}

/* === 2026-05-19: Compact pack — Tổng quan tài chính / Khách hàng / Báo cáo / Lời-Lỗ DA === */
/* Common: container 4px padding + filter-bar 48px + stat-grid compact */
.content:has(#page-dashboard.active),
.content:has(#page-customers.active),
.content:has(#page-report.active),
.content:has(#page-project_pnl.active){padding:4px !important}
/* Layer 2026-05-26 v10: filter-bar sticky cho Customers, Report, Project PnL khi scroll
   content. top = topbar height (--topbar-h, 54px) để stick ngay dưới global topbar. */
#page-customers > #cust-list-view > .filter-bar,
#page-report > .filter-bar,
#page-project_pnl > .filter-bar{position:sticky;top:var(--topbar-h, 54px);z-index:50}

/* --- Filter-bar 48px wrap (apply to all 4 pages) --- */
#page-dashboard > .filter-bar,
#page-customers > #cust-list-view > .filter-bar,
#page-report > .filter-bar,
#page-project_pnl > .filter-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;margin:0 0 4px !important;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  height:48px;box-sizing:border-box;
  flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;
}
#page-dashboard > .filter-bar > *,
#page-customers > #cust-list-view > .filter-bar > *,
#page-report > .filter-bar > *,
#page-project_pnl > .filter-bar > *{flex-shrink:0}
#page-dashboard > .filter-bar select,
#page-customers > #cust-list-view > .filter-bar select,
#page-customers > #cust-list-view > .filter-bar input,
#page-report > .filter-bar select,
#page-project_pnl > .filter-bar select,
#page-project_pnl > .filter-bar input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
#page-dashboard > .filter-bar .btn,
#page-customers > #cust-list-view > .filter-bar .btn,
#page-report > .filter-bar .export-btn,
#page-report > .filter-bar .btn,
#page-project_pnl > .filter-bar .btn{
  height:30px;padding:4px 10px;font-size:11px;
}

/* --- Stat-grid (3-col / 4-col / 2-col) compact pack --- */
#page-dashboard > .stat-grid,
#page-customers > #cust-list-view > .stat-grid,
#page-report > .stat-grid,
#page-project_pnl > .stat-grid{gap:4px !important;margin-bottom:4px !important}
#page-dashboard > .stat-grid .stat-card,
#page-customers > #cust-list-view > .stat-grid .stat-card,
#page-report > .stat-grid .stat-card,
#page-project_pnl > .stat-grid .stat-card{padding:6px 10px;border-radius:8px}
#page-dashboard > .stat-grid .stat-card .slabel,
#page-customers > #cust-list-view > .stat-grid .stat-card .slabel,
#page-report > .stat-grid .stat-card .slabel,
#page-project_pnl > .stat-grid .stat-card .slabel{font-size:9px;margin-bottom:1px;letter-spacing:.3px}
#page-dashboard > .stat-grid .stat-card .svalue,
#page-customers > #cust-list-view > .stat-grid .stat-card .svalue,
#page-report > .stat-grid .stat-card .svalue,
#page-project_pnl > .stat-grid .stat-card .svalue{font-size:16px;letter-spacing:-.3px}
#page-dashboard > .stat-grid .stat-card .schange,
#page-report > .stat-grid .stat-card .schange,
#page-project_pnl > .stat-grid .stat-card .schange{font-size:9px !important;margin-top:0 !important}

/* --- sec-row (Dashboard + Báo cáo "Chi tiết tài chính / Invoice quá hạn") --- */
#page-dashboard > .sec-row,
#page-report > .sec-row{gap:4px;margin-bottom:0}
#page-dashboard > .sec-row > .sec-card,
#page-report > .sec-row > .sec-card{padding:10px 12px;border-radius:10px}
#page-dashboard > .sec-row > .sec-card > .sec-title,
#page-report > .sec-row > .sec-card > .sec-title{font-size:11px;margin-bottom:6px}

/* --- Customer grid + P&L content card wrap --- */
#page-customers > #cust-list-view > #cust-grid{gap:6px}
#page-project_pnl > #pnl-content,
#page-project_pnl > #pnl-detail{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
#page-project_pnl > #pnl-detail{margin-top:4px !important}
#page-project_pnl > #pnl-content table td,
#page-project_pnl > #pnl-content table th,
#page-project_pnl > #pnl-detail table td,
#page-project_pnl > #pnl-detail table th{padding:6px 10px !important;font-size:12px}

/* === 2026-05-19: Compact pack #2 — HR + Tài chính tables === */
/* Pages: employees, attendance, salary, bonus, income_emp, income, expense,
   payment_orders, invoices, invoices_offset, balance_check, suppliers       */
.content:has(#page-employees.active),
.content:has(#page-attendance.active),
.content:has(#page-salary.active),
.content:has(#page-bonus.active),
.content:has(#page-income_emp.active),
.content:has(#page-income.active),
.content:has(#page-expense.active),
.content:has(#page-payment_orders.active),
.content:has(#page-invoices.active),
.content:has(#page-invoices_offset.active),
.content:has(#page-balance_check.active),
.content:has(#page-suppliers.active){padding:4px !important}

/* Filter-bar (48px height, border-radius 10px, scrollable horizontally) */
#page-attendance > .filter-bar,
#page-bonus > .filter-bar,
#page-income_emp > .filter-bar,
#page-income > .filter-bar,
#page-expense > .filter-bar,
#page-payment_orders > .filter-bar,
#page-invoices > .filter-bar,
#page-invoices_offset > .filter-bar,
#page-balance_check > .filter-bar,
#page-suppliers > .filter-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;margin:0 0 4px !important;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  height:48px;box-sizing:border-box;
  flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;
}
#page-attendance > .filter-bar > *,
#page-bonus > .filter-bar > *,
#page-income_emp > .filter-bar > *,
#page-income > .filter-bar > *,
#page-expense > .filter-bar > *,
#page-payment_orders > .filter-bar > *,
#page-invoices > .filter-bar > *,
#page-invoices_offset > .filter-bar > *,
#page-balance_check > .filter-bar > *,
#page-suppliers > .filter-bar > *{flex-shrink:0}
#page-attendance > .filter-bar select,
#page-attendance > .filter-bar input,
#page-bonus > .filter-bar select,
#page-bonus > .filter-bar input,
#page-income_emp > .filter-bar select,
#page-income > .filter-bar select,
#page-income > .filter-bar input,
#page-expense > .filter-bar select,
#page-expense > .filter-bar input,
#page-payment_orders > .filter-bar select,
#page-payment_orders > .filter-bar input,
#page-invoices > .filter-bar select,
#page-invoices > .filter-bar input,
#page-invoices_offset > .filter-bar select,
#page-invoices_offset > .filter-bar input,
#page-balance_check > .filter-bar select,
#page-suppliers > .filter-bar input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
#page-attendance > .filter-bar .btn,
#page-bonus > .filter-bar .btn,
#page-bonus > .filter-bar .export-btn,
#page-income_emp > .filter-bar .export-btn,
#page-income > .filter-bar .btn,
#page-income > .filter-bar .export-btn,
#page-expense > .filter-bar .btn,
#page-expense > .filter-bar .export-btn,
#page-payment_orders > .filter-bar .btn,
#page-invoices > .filter-bar .btn,
#page-invoices_offset > .filter-bar .btn,
#page-balance_check > .filter-bar .btn,
#page-suppliers > .filter-bar .btn{
  height:30px;padding:4px 10px;font-size:11px;
}

/* Stat-grid (3-col / 4-col) + grid-stats compact */
#page-bonus > .stat-grid,
#page-payment_orders > .grid-stats,
#page-invoices > .stat-grid,
#page-invoices_offset > .stat-grid,
#page-suppliers > .stat-grid{gap:4px !important;margin-bottom:4px !important}
#page-bonus > .stat-grid .stat-card,
#page-payment_orders > .grid-stats .stat-card,
#page-invoices > .stat-grid .stat-card,
#page-invoices_offset > .stat-grid .stat-card,
#page-suppliers > .stat-grid .stat-card{padding:6px 10px;border-radius:8px}
#page-bonus > .stat-grid .stat-card .slabel,
#page-payment_orders > .grid-stats .stat-card .slabel,
#page-invoices > .stat-grid .stat-card .slabel,
#page-invoices_offset > .stat-grid .stat-card .slabel,
#page-suppliers > .stat-grid .stat-card .slabel{font-size:9px;margin-bottom:1px;letter-spacing:.3px}
#page-bonus > .stat-grid .stat-card .svalue,
#page-payment_orders > .grid-stats .stat-card .svalue,
#page-invoices > .stat-grid .stat-card .svalue,
#page-invoices_offset > .stat-grid .stat-card .svalue,
#page-suppliers > .stat-grid .stat-card .svalue{font-size:16px;letter-spacing:-.3px}

/* .tc wraps (table card) — border-radius 10px, margin-bottom 4px */
#page-employees > .tc,
#page-salary > .tc,
#page-income > .tc,
#page-expense > .tc,
#page-invoices > .tc,
#page-invoices_offset > .tc{
  margin:0 0 4px !important;
  border-radius:10px;
}
#page-employees > .tc:last-child,
#page-salary > .tc:last-child,
#page-income > .tc:last-child,
#page-expense > .tc:last-child,
#page-invoices > .tc:last-child,
#page-invoices_offset > .tc:last-child{margin-bottom:0 !important}
#page-employees > .tc > .th,
#page-salary > .tc > .th,
#page-income > .tc > .th,
#page-expense > .tc > .th,
#page-invoices > .tc > .th,
#page-invoices_offset > .tc > .th{
  padding:6px 12px;min-height:40px;
}
#page-employees > .tc > .th .tt,
#page-salary > .tc > .th .tt,
#page-income > .tc > .th .tt,
#page-expense > .tc > .th .tt,
#page-invoices > .tc > .th .tt,
#page-invoices_offset > .tc > .th .tt{font-size:12px}
#page-employees > .tc > .th .ts,
#page-salary > .tc > .th .ts,
#page-income > .tc > .th .ts,
#page-expense > .tc > .th .ts,
#page-invoices > .tc > .th .ts,
#page-invoices_offset > .tc > .th .ts{font-size:10px}

/* Accordion head (used in Income page) */
#page-income > .tc > .acc-head,
#page-expense > .tc > .acc-head{padding:6px 12px}

/* Bảng nhân viên: 2px inset + gap để 2 bảng (Nhân sự + CTV) không đè viền với outer .tc */
#page-employees > .tc > #emp-tw{padding:2px}
#page-employees > .tc > #emp-tw > .acc-item{margin-bottom:2px}
#page-employees > .tc > #emp-tw > .acc-item:last-child{margin-bottom:0}
/* Phase 2D F1 (2026-06-09): emp portal DSNS — gap nhỏ + sticky thead giống admin */
#emp-pane-staff-list > .tc > #emp-staff-list-tw{padding:2px}
#emp-pane-staff-list > .tc > #emp-staff-list-tw > .acc-item{margin-bottom:2px}
#emp-pane-staff-list > .tc > #emp-staff-list-tw > .acc-item:last-child{margin-bottom:0}
/* Giảm padding emp-content khi pane DSNS active để gap trái/trên nhỏ giống admin PM portal */
.emp-content:has(#emp-pane-staff-list.active){padding:4px}
/* Giảm margin-bottom .tc khi ở pane DSNS để không hở dưới */
#emp-pane-staff-list > .tc{margin-bottom:4px}

/* Sticky thead — tiêu đề cột (Họ tên/Chức vụ/...) đứng yên khi cuộn,
   áp dụng cho cả "Nhân sự công ty" + "Cộng tác viên (CTV)" */
#page-employees .acc-body > div{
  max-height:calc(100vh - 200px);
  overflow:auto;
}
#page-employees .acc-body table{border-collapse:separate;border-spacing:0}
#page-employees .acc-body table thead{
  position:sticky;top:0;z-index:5;
}
#page-employees .acc-body table thead th{
  background:var(--bg2);
  box-shadow:inset 0 -1px 0 var(--border);
}

/* scope-info (info box) — smaller padding */
#page-invoices_offset > .scope-info{
  margin:0 0 4px !important;
  padding:6px 10px !important;
  font-size:10px !important;
  border-radius:10px !important;
  line-height:1.45 !important;
}

/* Direct content containers (no .tc wrap) — wrap in card */
#page-income_emp > #ie-content{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  margin:0 !important;
}
/* Income_emp tax settings panel — compact head */
#page-income_emp > div[onclick*="toggleTaxPanel"],
#page-income_emp > div:has(> div[onclick*="toggleTaxPanel"]){
  margin-bottom:4px !important;
  border-radius:10px !important;
}

/* === 2026-05-19: Chuyên cần — custom topbar + popover quy định === */
/* Hide global topbar khi page-attendance active (giống pattern spreadsheet) */
.main:has(#page-attendance.active) > .topbar{display:none}
.main:has(#page-attendance.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-attendance.active{display:flex;flex-direction:column;flex:1;min-height:0}

/* Custom topbar — 54px triple-lock */
.att-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.att-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.att-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.att-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.att-custom-filters{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;padding-right:4px;
}
.att-custom-filters > *{flex-shrink:0}
.att-custom-filters select,
.att-custom-filters input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
.att-custom-filters .btn{height:30px;padding:4px 10px;font-size:11px}
.att-custom-filters::-webkit-scrollbar{height:4px}
.att-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Nút 💡 quy định + popover */
.att-rules-wrap{position:relative;flex-shrink:0}
.att-rules-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.att-rules-btn:hover{background:var(--bg4)}
.att-rules-popover{
  display:none;
  position:absolute;top:calc(100% + 6px);right:0;
  width:360px;max-width:80vw;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:200;
}
.att-rules-popover.open{display:block}

/* Stat-grid 3/4 size + 4px gap mỗi cạnh */
#page-attendance > .att-stat-grid{
  margin:4px !important;
  gap:4px !important;
}
#page-attendance > .att-stat-grid .stat-card{
  padding:4px 8px;border-radius:8px;
}
#page-attendance > .att-stat-grid .stat-card .slabel{
  font-size:8px;margin-bottom:1px;letter-spacing:.2px;
}
#page-attendance > .att-stat-grid .stat-card .svalue{
  font-size:12px;letter-spacing:-.2px;
}

/* Bảng nhân viên — 1 đường bo quanh + sticky thead */
#page-attendance > #att-page-content{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
  margin:4px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
}
/* Phase 2D fix (2026-06-09): .tc thực tế nằm trong #att-pane-main (tab bar wrapper),
   không phải direct child của #att-page-content. Path: #att-page-content > #att-pane-main > .tc > div(overflow-x) > table.
   Đồng thời tab bar (div.flex đầu tiên) phải flex-shrink:0 để giữ height cố định. */
#page-attendance > #att-page-content > #att-pane-main{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
}
#page-attendance > #att-page-content > #att-pane-main > .tc,
#page-attendance > #att-page-content > .tc{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  overflow:hidden;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
}
#page-attendance > #att-page-content > #att-pane-main > .tc > div,
#page-attendance > #att-page-content > .tc > div{
  flex:1;min-height:0;
  overflow:auto !important;
}
#page-attendance .att-table{border-collapse:separate;border-spacing:0}
#page-attendance .att-table thead{
  position:sticky;top:0;z-index:5;
  background:var(--bg2);
}
#page-attendance .att-table thead th{
  background:var(--bg2);
  box-shadow:inset 0 -1px 0 var(--border);
}

/* === 2026-05-19: Bonus — custom topbar (filters + export + add) + bỏ bo ngoài === */
.main:has(#page-bonus.active) > .topbar{display:none}
.main:has(#page-bonus.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-bonus.active{display:flex;flex-direction:column;flex:1;min-height:0}

.bon-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.bon-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.bon-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.bon-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.bon-custom-filters{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;padding-right:4px;
}
.bon-custom-filters > *{flex-shrink:0}
.bon-custom-filters select{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
.bon-custom-filters .btn,
.bon-custom-filters .export-btn{height:30px;padding:4px 10px;font-size:11px}
.bon-custom-filters::-webkit-scrollbar{height:4px}
.bon-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Stat-grid compact với 4px margin mỗi cạnh */
#page-bonus > .bon-stat-grid{
  margin:4px !important;
  gap:4px !important;
}
#page-bonus > .bon-stat-grid .stat-card{padding:6px 10px;border-radius:8px}
#page-bonus > .bon-stat-grid .stat-card .slabel{font-size:9px;margin-bottom:1px;letter-spacing:.3px}
#page-bonus > .bon-stat-grid .stat-card .svalue{font-size:16px;letter-spacing:-.3px}

/* #bon-content — bỏ outer border, container flex để table có chiều cao */
#page-bonus > #bon-content{
  flex:1;min-height:0;
  margin:4px;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:auto;
}

/* === 2026-05-19: Thu nhập NV — custom topbar (filter + export) === */
.main:has(#page-income_emp.active) > .topbar{display:none}
.main:has(#page-income_emp.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-income_emp.active{display:flex;flex-direction:column;flex:1;min-height:0}

.ie-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.ie-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.ie-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.ie-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.ie-custom-filters{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;padding-right:4px;
}
.ie-custom-filters > *{flex-shrink:0}
.ie-custom-filters select{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
.ie-custom-filters .export-btn{height:30px;padding:4px 10px;font-size:11px}
.ie-custom-filters::-webkit-scrollbar{height:4px}
.ie-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Tax settings panel + #ie-content margin 4px */
#page-income_emp > div:has(> div[onclick*="toggleTaxPanel"]){margin:4px !important}
#page-income_emp > #ie-content{margin:4px !important;flex:1;min-height:0;overflow:auto}

/* === 2026-05-19: Theo dõi thu — custom topbar + stats 3/4 + .tc kẻ thẳng === */
.main:has(#page-income.active) > .topbar{display:none}
.main:has(#page-income.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-income.active{display:flex;flex-direction:column;flex:1;min-height:0}

.inc-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.inc-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.inc-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.inc-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.inc-custom-filters{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;padding-right:4px;
}
.inc-custom-filters > *{flex-shrink:0}
.inc-custom-filters select,
.inc-custom-filters input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
.inc-custom-filters .btn{height:30px;padding:4px 10px;font-size:11px}
.inc-custom-filters::-webkit-scrollbar{height:4px}
.inc-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Summary bar — shrink stat-cards xuống 3/4 + override inline gap 12px */
#page-income > #inc-summary-bar{
  gap:4px !important;
  margin:4px !important;
}
#page-income > #inc-summary-bar > .stat-card{padding:4px 8px;border-radius:8px}
#page-income > #inc-summary-bar > .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-income > #inc-summary-bar > .stat-card .svalue{font-size:12px;letter-spacing:-.2px}

/* .tc kẻ thẳng — bỏ outer border + border-radius, gap 4px giữa sections + 4px giữa .th và content bên trong */
#page-income > .tc{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 4px 4px 4px !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
/* Khi summary bar hidden, .tc đầu tiên cần margin-top 4px (gap từ topbar border-bottom) */
#page-income > .inc-custom-topbar + .tc{margin-top:4px !important}
/* .th (title row) inside .tc — flat, no border */
#page-income > .tc > .th{
  background:var(--bg2) !important;
  border:0 !important;
  border-radius:6px !important;
}
/* acc-head (accordion toggle) inside .tc — flat */
#page-income > .tc > .acc-head{border-radius:6px !important}

/* === 2026-05-19: Theo dõi chi — custom topbar pattern + 4px gaps === */
.main:has(#page-expense.active) > .topbar{display:none}
.main:has(#page-expense.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-expense.active{display:flex;flex-direction:column;flex:1;min-height:0}

.exp-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.exp-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.exp-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.exp-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.exp-custom-filters{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;padding-right:4px;
}
.exp-custom-filters > *{flex-shrink:0}
.exp-custom-filters select,
.exp-custom-filters input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
.exp-custom-filters .btn{height:30px;padding:4px 10px;font-size:11px}
.exp-custom-filters::-webkit-scrollbar{height:4px}
.exp-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Filter-bar bên trong pane Ứng chi — match exp-custom-filters style */
#page-expense .emp-pane > .filter-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;margin:4px !important;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  height:48px;box-sizing:border-box;flex-shrink:0;
}
#page-expense .emp-pane > .filter-bar > *{flex-shrink:0}
#page-expense .emp-pane > .filter-bar select,
#page-expense .emp-pane > .filter-bar input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  border-radius:6px;
}
#page-expense .emp-pane > .filter-bar .btn{height:30px;padding:4px 10px;font-size:11px}

/* Stat-grid + summary bar margin 4px */
#page-expense #exp-summary-bar{margin:4px !important;gap:4px !important}
#page-expense #exp-summary-bar > .stat-card{padding:4px 8px;border-radius:8px}
#page-expense #exp-summary-bar > .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-expense #exp-summary-bar > .stat-card .svalue{font-size:12px;letter-spacing:-.2px}
#page-expense .stat-grid{margin:4px !important;gap:4px !important}
#page-expense .stat-grid .stat-card{padding:4px 8px;border-radius:8px}
#page-expense .stat-grid .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-expense .stat-grid .stat-card .svalue{font-size:12px;letter-spacing:-.2px}

/* .tc kẻ thẳng — bỏ outer border, gap:4px giữa .th và content */
#page-expense .emp-pane > .tc{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  margin:4px !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
#page-expense .emp-pane > .tc > .th{
  background:var(--bg2) !important;
  border:0 !important;
  border-radius:6px !important;
}

/* === 2026-05-19: Duyệt lệnh chi — custom topbar + 4px gaps === */
.main:has(#page-payment_orders.active) > .topbar{display:none}
.main:has(#page-payment_orders.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-payment_orders.active{display:flex;flex-direction:column;flex:1;min-height:0}

.po-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.po-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.po-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.po-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.po-custom-filters{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-right:4px;
}
.po-custom-filters > *{flex-shrink:0}
.po-custom-filters select,
.po-custom-filters input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;
}
.po-custom-filters .btn{height:30px;padding:4px 10px;font-size:11px}
.po-custom-filters::-webkit-scrollbar{height:4px}
.po-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
/* Stats hàng ngang grid 4 cột + 4px gap */
#page-payment_orders > .po-stats{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:4px !important;
  margin:4px !important;
}
#page-payment_orders > .po-stats .stat-card{padding:4px 8px;border-radius:8px}
#page-payment_orders > .po-stats .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-payment_orders > .po-stats .stat-card .svalue{font-size:12px;letter-spacing:-.2px}
#page-payment_orders > #po-tw{margin:4px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px}

/* PO row compact (collapsible) — chỉ hiện mã + status, click để mở chi tiết */
.po-row{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.po-row-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  cursor:pointer;
  transition:background .15s;
  user-select:none;
}
.po-row-head:hover{background:var(--bg3)}
.po-arrow{
  font-size:10px;color:var(--text3);
  transition:transform .2s;
  display:inline-block;flex-shrink:0;
}
.po-row.open .po-arrow{transform:rotate(90deg)}
.po-row-code{font-size:13px;font-weight:700;color:var(--text)}
.po-row-amount{font-size:12px;font-weight:600;color:var(--green);margin-left:auto;margin-right:8px}
.po-row-detail{
  display:none;
  padding:10px 14px;
  border-top:1px dashed var(--border);
  background:var(--bg);
}
.po-row.open .po-row-detail{display:block}

/* === 2026-05-19: Hóa đơn — custom topbar + bỏ .th + flat === */
.main:has(#page-invoices.active) > .topbar{display:none}
.main:has(#page-invoices.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-invoices.active{display:flex;flex-direction:column;flex:1;min-height:0}

.inv-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 8px;display:flex;align-items:center;gap:4px;
  position:sticky;top:0;z-index:100;
}
.inv-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:4px}
.inv-custom-title .page-title{font-size:13px;font-weight:700;line-height:1.2}
.inv-custom-title .page-sub{font-size:10px;color:var(--text2);margin-top:0;line-height:1.1}
.inv-custom-filters{
  display:flex;align-items:center;gap:3px;flex:1;min-width:0;
  overflow:visible;padding-right:2px;flex-wrap:nowrap;
}
.inv-custom-filters > *{flex-shrink:1;min-width:0}
.inv-custom-filters select,
.inv-custom-filters input{
  height:28px;font-size:10.5px;padding:2px 6px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:5px;
  min-width:60px;max-width:140px;text-overflow:ellipsis;
}
.inv-custom-filters input[type="text"]{min-width:90px;max-width:none;flex-shrink:1}
.inv-custom-filters .btn{height:28px;padding:2px 8px;font-size:10.5px;flex-shrink:0}
.inv-custom-filters::-webkit-scrollbar{height:4px}
.inv-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
/* Stats compact + #inv-tw flat (no .th wrap) */
#page-invoices > .inv-stats{margin:4px !important;gap:4px !important}
#page-invoices > .inv-stats .stat-card{padding:4px 8px;border-radius:8px}
#page-invoices > .inv-stats .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-invoices > .inv-stats .stat-card .svalue{font-size:12px;letter-spacing:-.2px}
#page-invoices > #inv-tw{margin:4px;flex:1;min-height:0;overflow:auto}
#page-invoices > #inv-tw > table.inv-table-sticky > thead{position:sticky;top:0;z-index:20;background:var(--bg2)}
#page-invoices > #inv-tw > table.inv-table-sticky > thead th{background:var(--bg2);box-shadow:inset 0 -1px 0 var(--border)}

/* === 2026-05-19: Hóa đơn bù — custom topbar + popover ghi chú + bell + flat === */
.main:has(#page-invoices_offset.active) > .topbar{display:none}
.main:has(#page-invoices_offset.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-invoices_offset.active{display:flex;flex-direction:column;flex:1;min-height:0}

.iof-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.iof-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.iof-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.iof-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.iof-custom-filters{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-right:4px;
}
.iof-custom-filters > *{flex-shrink:0}
.iof-custom-filters select,
.iof-custom-filters input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;
}
.iof-custom-filters .btn{height:30px;padding:4px 10px;font-size:11px}
.iof-custom-filters::-webkit-scrollbar{height:4px}
.iof-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* Nút 💡 ghi chú + popover */
.iof-note-wrap{position:relative;flex-shrink:0}
.iof-note-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.iof-note-btn:hover{background:var(--bg4)}
.iof-note-popover{
  display:none;
  position:absolute;top:calc(100% + 6px);right:0;
  width:380px;max-width:80vw;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;
}
.iof-note-popover.open{display:block}

/* Stats compact + #iof-tw flat */
#page-invoices_offset > .iof-stats{margin:4px !important;gap:4px !important}
#page-invoices_offset > .iof-stats .stat-card{padding:4px 8px;border-radius:8px}
#page-invoices_offset > .iof-stats .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-invoices_offset > .iof-stats .stat-card .svalue{font-size:12px;letter-spacing:-.2px}
#page-invoices_offset > #iof-tw{margin:4px;flex:1;min-height:0;overflow:auto}
#page-invoices_offset > #iof-tw > table.iof-table-sticky > thead{position:sticky;top:0;z-index:20;background:var(--bg2)}
#page-invoices_offset > #iof-tw > table.iof-table-sticky > thead th{background:var(--bg2);box-shadow:inset 0 -1px 0 var(--border)}

/* === 2026-05-19: Nhà cung cấp — custom topbar (search only, no + on topbar) === */
.main:has(#page-suppliers.active) > .topbar{display:none}
.main:has(#page-suppliers.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-suppliers.active{display:flex;flex-direction:column;flex:1;min-height:0}

.sup-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.sup-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.sup-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.sup-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.sup-custom-filters{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-right:4px;
}
.sup-custom-filters > *{flex-shrink:0}
.sup-custom-filters input{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;
}
.sup-custom-filters::-webkit-scrollbar{height:4px}
.sup-custom-filters::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
/* Stats compact */
#page-suppliers > .sup-stats{margin:4px !important;gap:4px !important}
#page-suppliers > .sup-stats .stat-card{padding:4px 8px;border-radius:8px}
#page-suppliers > .sup-stats .stat-card .slabel{font-size:8px;margin-bottom:1px;letter-spacing:.2px}
#page-suppliers > .sup-stats .stat-card .svalue{font-size:12px;letter-spacing:-.2px}
#page-suppliers > #sup-grid{margin:4px;flex:1;min-height:0;overflow:auto;background:transparent;border:0;border-radius:0;padding:0;gap:6px}

/* === 2026-05-19: Cân đối hóa đơn — custom topbar + bỏ bo sub-tables === */
.main:has(#page-balance_check.active) > .topbar{display:none}
.main:has(#page-balance_check.active) > .content{padding:0 !important;display:flex;flex-direction:column;min-height:0}
#page-balance_check.active{display:flex;flex-direction:column;flex:1;min-height:0}

.bal-custom-topbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  height:54px;min-height:54px;max-height:54px;
  flex-shrink:0;flex-grow:0;box-sizing:border-box;
  padding:0 16px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:100;
}
.bal-custom-title{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;margin-right:8px}
.bal-custom-title .page-title{font-size:14px;font-weight:700;line-height:1.2}
.bal-custom-title .page-sub{font-size:11px;color:var(--text2);margin-top:0;line-height:1.1}
.bal-custom-filters{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-right:4px;
}
.bal-custom-filters > *{flex-shrink:0}
.bal-custom-filters select{
  height:30px;font-size:11px;padding:4px 8px;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:6px;
}
.bal-custom-filters .btn{height:30px;padding:4px 10px;font-size:11px}
/* #bal-content: flat container, sub-tables bên trong cũng flat với 4px gap */
#page-balance_check > #bal-content{
  margin:4px;flex:1;min-height:0;overflow:auto;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
#page-balance_check > #bal-content .tc{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 0 4px !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
#page-balance_check > #bal-content .tc > .th{
  background:var(--bg2) !important;
  border:0 !important;
  border-radius:6px !important;
}
/* Outer grid (2 cột Chi/HĐ) — giữ grid layout nhưng gap=4px */
#page-balance_check > #bal-content > div[style*="grid-template-columns"]{gap:4px !important;margin-bottom:4px !important}