/* web-core.css — layout/base workspace (SAO tu <style> index.html).
   :root giu token GOC (global, vo hai vi landing khong dung); phan con lai boc
   @scope(#appView) de KHONG ro ri ra trang landing/login. web.css nap SAU se
   doi token tren #appView sang champagne. */
  :root{
    --brand:#175A80; --brand-dk:#114A6B; --brand-soft:#E3EEF5;
    --nen:#F4F6F8; --mat:#FFFFFF; --vien:#D9E1E8; --vien-nhat:#E9EEF3;
    --chu:#1E2B36; --mo:#5E6E7C; --nhat:#8CA0AE;
    --ok:#1E8449; --ok-soft:#E6F3EB; --vang:#B9770E; --vang-soft:#FAF0DE;
    --loi:#C0392B; --loi-soft:#F8E7E4;
    --o-nhap:#FFF9E0; --o-nhap-bd:#D9B23C; --o-tinh:#F1F4F6;
  }

@scope (#appView) {
  *{box-sizing:border-box;}
  :scope{margin:0;background:var(--nen);color:var(--chu);font-size:13px;}

  /* ===== TOPBAR 40px ===== */
  #topbar{flex:0 0 40px;background:var(--brand);color:#fff;display:flex;align-items:center;
    gap:12px;padding:0 14px;}
  #topbar .logo{font-weight:650;font-size:14px;white-space:nowrap;}
  #topbar .hoso-info{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:3px 12px;font-size:12.5px;
    cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%;}
  #topbar .sp{flex:1;}
  #den-rel{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 11px;
    border-radius:12px;background:rgba(255,255,255,.13);white-space:nowrap;cursor:pointer;}
  #den-rel .dot{width:8px;height:8px;border-radius:50%;background:#B9C7D1;flex:0 0 auto;}
  #den-rel.dat .dot{background:#6FCF97;box-shadow:0 0 0 3px rgba(111,207,151,.28);}
  #den-rel.chua .dot{background:#E67E5A;box-shadow:0 0 0 3px rgba(230,126,90,.28);}
  #topbar button.xuat{background:#fff;color:var(--brand);border:0;border-radius:5px;
    padding:5px 14px;font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap;}
  #topbar button.xuat:hover{background:#EAF2F7;}
  #topbar .gear{cursor:pointer;opacity:.85;font-size:15px;}
  #topbar .gear:hover{opacity:1;}
  #topbar button.dn-out{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35);
    border-radius:5px;padding:4px 11px;font-size:12px;cursor:pointer;white-space:nowrap;}
  #topbar button.dn-out:hover{background:rgba(255,255,255,.26);}
  #topbar button.dn-out[hidden]{display:none;}

  /* ===== KHÓA ĐĂNG NHẬP / KÍCH HOẠT MÃ ===== */
  #dnOverlay{position:fixed;inset:0;z-index:9999;padding:20px;display:flex;align-items:center;
    justify-content:center;background:linear-gradient(135deg,var(--brand),var(--brand-dk));}
  #dnOverlay[hidden]{display:none;}
  .dn-card{background:var(--mat);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.30);
    width:100%;max-width:400px;padding:28px 28px 22px;}
  .dn-logo{font-weight:700;color:var(--brand);font-size:15px;letter-spacing:.3px;}
  .dn-tit{font-size:20px;font-weight:650;margin:14px 0 4px;color:var(--chu);}
  .dn-sub{color:var(--mo);font-size:13px;margin-bottom:18px;line-height:1.5;}
  .dn-lb{display:block;font-size:12px;font-weight:600;color:var(--mo);margin-bottom:5px;}
  .dn-inp{width:100%;padding:11px 12px;border:1.5px solid var(--vien);border-radius:7px;
    font-size:14px;font-family:"Consolas","Courier New",monospace;outline:none;}
  .dn-inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
  .dn-consent{display:flex;gap:9px;align-items:flex-start;margin:16px 0;font-size:12.5px;
    color:var(--chu);line-height:1.5;cursor:pointer;}
  .dn-consent input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;cursor:pointer;}
  .dn-consent a{color:var(--brand);font-weight:600;}
  .dn-err{background:var(--loi-soft);color:var(--loi);border:1px solid #E6B7B0;border-radius:6px;
    padding:9px 11px;font-size:12.5px;margin-bottom:12px;}
  .dn-err[hidden]{display:none;}
  .dn-btn{width:100%;padding:12px;background:var(--brand);color:#fff;border:0;border-radius:7px;
    font-size:14px;font-weight:650;cursor:pointer;}
  .dn-btn:hover{background:var(--brand-dk);}
  .dn-btn:disabled{opacity:.6;cursor:default;}
  .dn-foot{color:var(--nhat);font-size:11px;margin-top:16px;text-align:center;line-height:1.6;}

  /* ===== KHUNG ===== */
  #khung{display:flex;flex:1 1 auto;min-height:0;}
  #sidebar{width:208px;flex:0 0 auto;background:var(--mat);border-right:1px solid var(--vien);
    padding:8px 0;overflow-y:auto;display:flex;flex-direction:column;}
  #sidebar .nhom{font-size:10.5px;color:var(--nhat);text-transform:uppercase;letter-spacing:.1em;
    padding:10px 16px 4px;font-weight:650;}
  .sb-item{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 13px;cursor:pointer;
    font-size:13px;border-left:3px solid transparent;}
  .sb-item:hover{background:var(--brand-soft);}
  .sb-item.dang-mo{background:var(--brand-soft);border-left-color:var(--brand);font-weight:650;color:var(--brand-dk);}
  .sb-item .cham{width:8px;height:8px;border-radius:50%;background:#C6D2DB;flex:0 0 auto;}
  .sb-item .cham.COMPLETED{background:var(--ok);} .sb-item .cham.NEED_RECALC{background:var(--vang);}
  .sb-item .cham.ERROR{background:var(--loi);} .sb-item .cham.NOT_STARTED{background:#C6D2DB;}
  #sidebar .foot{margin-top:auto;padding:10px 14px;font-size:10.5px;color:var(--nhat);
    border-top:1px solid var(--vien-nhat);line-height:15px;}

  /* ===== VÙNG LÀM VIỆC (không tab bar — sidebar là điều hướng duy nhất) ===== */
  #noidung{flex:1 1 auto;min-width:0;background:var(--mat);display:flex;flex-direction:column;overflow:hidden;}
  .panel{display:none;}
  .panel.dang-mo{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;padding:12px 18px 40px;}
  .panel.dang-mo.khung-doc{overflow:hidden;padding:0;}
  .phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;flex:0 0 auto;}
  .phead h1{font-size:15px;margin:0;font-weight:650;}
  .phead .sub{font-size:12px;color:var(--mo);}
  .phead .sp{flex:1;}

  /* ===== NÚT / PILL / FORM ===== */
  button{background:var(--brand);color:#fff;border:0;padding:6px 14px;border-radius:5px;
    cursor:pointer;font-size:12.5px;font-weight:600;}
  button:hover{background:var(--brand-dk);}
  button:disabled{opacity:.55;cursor:not-allowed;}
  button.phu{background:var(--mat);color:var(--brand);border:1px solid var(--vien);font-weight:500;}
  button.phu:hover{background:var(--brand-soft);border-color:var(--brand);}
  button.nguy{background:var(--mat);color:var(--loi);border:1px solid var(--loi-soft);font-weight:500;}
  button.nguy:hover{background:var(--loi-soft);}
  .icbtn{border:1px solid var(--vien);background:var(--mat);border-radius:5px;
    padding:4px 10px;font-size:12px;color:var(--mo);cursor:pointer;}
  .icbtn:hover{border-color:var(--brand);color:var(--brand);}
  input[type=file],input[type=text],input[type=number],input[type=date],select{
    font-size:12.5px;padding:5px 8px;border:1px solid var(--vien);border-radius:4px;background:var(--mat);color:var(--chu);}
  input:focus,select:focus{outline:none;border-color:var(--brand);}
  .the{display:inline-block;padding:2px 10px;border-radius:11px;font-size:11.5px;font-weight:650;}
  .the.ok{background:var(--ok-soft);color:var(--ok);}
  .the.loi{background:var(--loi-soft);color:var(--loi);}
  .the.vang{background:var(--vang-soft);color:var(--vang);}
  .the.cho{background:var(--vien-nhat);color:var(--mo);}
  .ghichu{font-size:11.5px;color:var(--mo);margin:6px 0;}
  /* ===== NÚT TRỢ GIÚP ? + POPOVER ===== */
  .help{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
    border-radius:50%;border:1px solid var(--vien);color:var(--mo);font-size:11px;font-weight:650;
    cursor:pointer;flex:0 0 auto;vertical-align:-2px;user-select:none;}
  .help:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
  #help-pop{position:fixed;display:none;z-index:90;background:var(--mat);border:1px solid var(--vien);
    border-radius:6px;box-shadow:0 8px 30px rgba(10,25,35,.25);padding:11px 15px;max-width:400px;
    max-height:60vh;overflow-y:auto;font-size:12.5px;line-height:1.6;color:var(--chu);}
  #help-pop.mo{display:block;}
  #help-pop b{color:var(--brand-dk);}
  #help-pop ul{margin:4px 0;padding-left:18px;}
  #help-pop li{margin:3px 0;}
  .hang{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
  .card{background:var(--mat);border:1px solid var(--vien);border-radius:6px;padding:12px 16px;margin-bottom:12px;}
  .card h3{margin:0 0 8px;}
  h3{font-size:13px;margin:12px 0 4px;color:var(--brand-dk);}

  /* ===== BẢNG (nén 24px/dòng, header dính khi cuộn) ===== */
  table{border-collapse:separate;border-spacing:0;background:var(--mat);
    border:1px solid var(--vien);font-size:12.5px;margin-top:8px;}
  th{position:sticky;top:0;z-index:2;background:#EDF2F6;font-weight:650;font-size:11.5px;
    color:var(--mo);border-bottom:1px solid var(--vien);padding:5px 9px;text-align:left;white-space:nowrap;}
  td{padding:3px 9px;border-bottom:1px solid var(--vien-nhat);vertical-align:top;line-height:17px;}
  tr:last-child td{border-bottom:0;}
  td.so,th.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
  table.note-tbl td.it{font-style:italic;}
  table.note-tbl tr.nr-section td{background:#F6F9FB;font-weight:650;font-style:italic;}
  table.note-tbl tr.nr-total td{font-weight:700;border-top:2px solid #34495E;background:#F6F9FB;}
  table.note-tbl tr.nr-check td{font-size:12px;color:var(--mo);}
  table.note-tbl tr.nr-check.ok td{color:var(--ok);}
  table.note-tbl tr.nr-check.loi td{color:var(--loi);font-weight:650;}
  /* Ô NHẬP (vàng — quy ước Excel) vs Ô HIỂN THỊ */
  table.note-tbl input.ce{width:100%;box-sizing:border-box;background:var(--o-nhap);
    border:1px solid transparent;border-radius:3px;padding:2px 6px;font-size:12.5px;font-family:inherit;color:var(--chu);}
  table.note-tbl td.so input.ce{text-align:right;font-variant-numeric:tabular-nums;}
  table.note-tbl input.ce:hover{border-color:var(--o-nhap-bd);}
  table.note-tbl input.ce:focus{outline:none;border-color:var(--o-nhap-bd);background:#FFFDF2;
    box-shadow:0 0 0 2px rgba(217,178,60,.25);}
  .edit-lbl{cursor:pointer;}
  .edit-lbl:hover{color:var(--loi);}
  .legend{display:flex;gap:16px;align-items:center;font-size:11.5px;color:var(--mo);margin:4px 0;}
  .legend .sw{display:inline-block;width:14px;height:12px;border-radius:2px;vertical-align:-1px;
    margin-right:5px;border:1px solid var(--vien);}
  .legend .sw.in{background:var(--o-nhap);border-color:var(--o-nhap-bd);}
  .luoi{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media (max-width:1100px){.luoi{grid-template-columns:1fr;} #sidebar{width:170px;}}

  /* ===== NHẬP LIỆU ===== */
  .chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;
    border-radius:11px;padding:2px 10px;white-space:nowrap;}
  .chip.ok{background:var(--ok-soft);color:var(--ok);}
  .chip.mut{background:var(--vien-nhat);color:var(--mo);}
  .chip .t{font-weight:400;color:var(--mo);}

  /* ===== THUYẾT MINH: danh sách dọc + nội dung ===== */
  #tm-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:9px 18px;border-bottom:1px solid var(--vien);}
  #tm-khung{display:flex;flex:1;min-height:0;}
  #tm-list{flex:0 0 264px;border-right:1px solid var(--vien);overflow-y:auto;padding:6px 0;}
  #tm-list .ngrp{font-size:10.5px;color:var(--nhat);text-transform:uppercase;letter-spacing:.09em;
    padding:9px 14px 3px;font-weight:650;}
  .nit{display:flex;align-items:center;gap:8px;padding:5px 14px;cursor:pointer;font-size:12.5px;line-height:16px;}
  .nit:hover{background:var(--brand-soft);}
  .nit.dang-mo{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand);font-weight:650;color:var(--brand-dk);}
  .nit .no{flex:0 0 20px;text-align:right;color:var(--mo);font-variant-numeric:tabular-nums;font-size:11.5px;}
  .nit.dang-mo .no{color:var(--brand);}
  .nit .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nit .fl{font-size:11px;flex:0 0 auto;}
  .nit.an{opacity:.5;font-style:italic;}
  #tm-content{flex:1;overflow-y:auto;padding:12px 18px 40px;min-width:0;}

  /* ===== KIỂM TRA ===== */
  .vsum{display:flex;align-items:center;gap:16px;background:var(--mat);border:1px solid var(--vien);
    border-left:4px solid var(--loi);border-radius:6px;padding:10px 16px;margin:4px 0 12px;max-width:940px;}
  .vsum.dat{border-left-color:var(--ok);}
  .vsum .big{font-size:14px;font-weight:700;color:var(--loi);}
  .vsum.dat .big{color:var(--ok);}
  .vsum .cnt{font-size:12px;color:var(--mo);}
  .vgrp{font-size:11.5px;font-weight:650;color:var(--mo);text-transform:uppercase;
    letter-spacing:.08em;margin:14px 0 6px;}
  .vrow{display:flex;align-items:center;gap:12px;background:var(--mat);border:1px solid var(--vien);
    border-radius:5px;padding:8px 14px;margin-bottom:6px;font-size:13px;max-width:940px;}
  .vrow .vic{flex:0 0 18px;text-align:center;font-weight:700;}
  .vrow.bad .vic{color:var(--loi);} .vrow.wa .vic{color:var(--vang);} .vrow.good .vic{color:var(--ok);}
  .vrow .dt2{font-size:11.5px;color:var(--mo);font-variant-numeric:tabular-nums;}
  .vrow .sp{flex:1;}
  details.vall{max-width:940px;margin-top:4px;}
  details.vall summary{cursor:pointer;font-size:12.5px;color:var(--brand);padding:4px 2px;}

  /* ===== STATUSBAR ===== */
  #sbar{flex:0 0 25px;background:var(--mat);border-top:1px solid var(--vien);display:flex;
    align-items:center;gap:18px;padding:0 14px;font-size:11px;color:var(--mo);
    white-space:nowrap;overflow:hidden;}
  #sb-log{color:var(--ok);font-weight:600;cursor:pointer;}
  #sbar .sp{flex:1;}
  #sbar .kb{color:var(--nhat);}

  /* ===== TOAST + MODAL ===== */
  /* Đợt 88b (KTV 19/07): thông báo HỘP GIỮA MÀN HÌNH — cảnh báo VÀNG, lỗi ĐỎ, thường tự đóng */
  #thongbao{position:fixed;inset:0;display:none;z-index:120;align-items:center;justify-content:center;
    background:rgba(15,23,42,.35);}
  #thongbao.mo{display:flex;}
  .tb-box{background:#f0fdf4;color:#0f172a;min-width:400px;max-width:58%;border-radius:10px;
    padding:18px 22px 12px;box-shadow:0 12px 40px rgba(0,0,0,.4);border-top:6px solid var(--ok);}
  .tb-box.canhbao{border-top-color:#f59e0b;background:#fffbeb;}
  .tb-box.loi{border-top-color:var(--loi);background:#fef2f2;}
  .tb-msg{white-space:pre-wrap;font-size:14px;line-height:1.55;margin-top:4px;}
  .tb-msg.canhbao{color:#92400e;}
  .tb-msg.loi{color:#991b1b;}
  .tb-dong{margin-top:12px;text-align:right;}
  .tb-item{background:#213240;color:#fff;padding:9px 14px;border-radius:6px;margin-top:8px;
    font-size:12.5px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
  .tb-item.loi{background:var(--loi);}
  .ovl{position:fixed;inset:0;background:rgba(20,35,46,.45);display:none;
    align-items:center;justify-content:center;z-index:60;}
  #ovl-xn{z-index:75;}  /* hộp xác nhận luôn NỔI TRÊN modal khác (fix: bấm Ghi trong modal
    BC năm trước — xacNhan mở dưới modal nên tưởng app không phản hồi) */
  .ovl.mo{display:flex;}
  .modal{background:var(--mat);border-radius:8px;max-width:700px;width:92%;max-height:84vh;
    display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(10,25,35,.35);}
  .modal .mh{display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid var(--vien);}
  .modal .mh b{font-size:13.5px;}
  .modal .mh .x{margin-left:auto;cursor:pointer;color:var(--mo);font-size:16px;padding:0 4px;}
  .modal .mb{padding:10px 18px 14px;overflow-y:auto;font-size:13px;}
  .modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--vien);}
  #nk-list{max-height:50vh;overflow-y:auto;font-size:12px;}
  #nk-list div{padding:3px 0;border-bottom:1px dashed var(--vien-nhat);}
  #nk-list .l{color:var(--loi);}
  :focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
}