:root{
    --brand:#E45139; /* đỏ cam IK — màu chủ đạo trên ikgroup.vn */
    --bg:#F1EEDB; --surface:#FFFFFF; --surface-2:#EBE8D5; --surface-3:#DDD9C2;
    --ink:#1B1A17; --ink-muted:#6A665A; --border:#DAD6C0;
    --accent:#C8371F; --accent-strong:#9E2814; --accent-soft:#FBE4DD; --accent-contrast:#FFFFFF;
    --good:#256B40; --good-soft:#DFF0E4; --good-contrast:#FFFFFF;
    --warn:#8A5700; --warn-soft:#FCEFCF; --warn-contrast:#FFFFFF;
    --critical:#B0173B; --critical-soft:#F9DDE4; --critical-contrast:#FFFFFF;
    --shadow: 0 1px 2px rgba(27,26,23,.06), 0 6px 20px -8px rgba(27,26,23,.18);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --brand:#F0674F;
      --bg:#1A1714; --surface:#24201C; --surface-2:#2E2924; --surface-3:#3A342D;
      --ink:#F1EEDB; --ink-muted:#B3AD9A; --border:#40392F;
      --accent:#F0674F; --accent-strong:#FF8B76; --accent-soft:#3B211A; --accent-contrast:#1A1714;
      --good:#6BC98F; --good-soft:#1F3A2A; --good-contrast:#0E1F15;
      --warn:#E9B458; --warn-soft:#3D2E12; --warn-contrast:#2A1C00;
      --critical:#F07A93; --critical-soft:#42202A; --critical-contrast:#2A0B14;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --brand:#F0674F;
    --bg:#1A1714; --surface:#24201C; --surface-2:#2E2924; --surface-3:#3A342D;
    --ink:#F1EEDB; --ink-muted:#B3AD9A; --border:#40392F;
    --accent:#F0674F; --accent-strong:#FF8B76; --accent-soft:#3B211A; --accent-contrast:#1A1714;
    --good:#6BC98F; --good-soft:#1F3A2A; --good-contrast:#0E1F15;
    --warn:#E9B458; --warn-soft:#3D2E12; --warn-contrast:#2A1C00;
    --critical:#F07A93; --critical-soft:#42202A; --critical-contrast:#2A0B14;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  }
  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--ink); font-family:'Be Vietnam Pro',system-ui,sans-serif;}
  h1,h2,h3,.display{font-family:'Be Vietnam Pro',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; text-wrap:balance; margin:0;}
  .mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
  a{color:var(--accent);}
  button{font-family:inherit; cursor:pointer;}
  button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  #app{display:flex; min-height:100vh;}

  /* Sidebar */
  #sidebar{width:232px; flex:none; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 14px; gap:18px;}
  .brand{display:flex; flex-direction:column; gap:8px; padding:0 6px;}
  .brand-logo{height:46px; width:auto; align-self:flex-start;}
  .brand-name{font-weight:700; font-size:15px; line-height:1.2; letter-spacing:-.01em;}
  .brand-sub{font-size:11px; color:var(--ink-muted); letter-spacing:.02em;}
  nav{display:flex; flex-direction:column; gap:2px; margin-top:6px;}
  .navbtn{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; border:none; background:transparent; color:var(--ink-muted); text-align:left; font-size:13.5px; font-weight:500;}
  .navbtn:hover{background:var(--surface-2); color:var(--ink);}
  .navbtn.active{background:var(--accent-soft); color:var(--accent-strong); font-weight:600;}
  .navbtn .ico{width:18px; text-align:center; font-size:14px;}
  .nav-count{margin-left:auto; background:var(--warn-soft); color:var(--warn); font-size:11px; font-weight:700; padding:1px 6px; border-radius:99px; min-width:18px; text-align:center;}
  .sidebar-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--border); font-size:11px; color:var(--ink-muted); line-height:1.5;}

  /* Topbar */
  #main{flex:1; display:flex; flex-direction:column; min-width:0;}
  #topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 28px; border-top:3px solid var(--brand); border-bottom:1px solid var(--border); background:var(--surface);}
  .topbar-title{font-family:'Be Vietnam Pro',system-ui,sans-serif; font-size:19px; font-weight:700; letter-spacing:-.01em;}
  .topbar-sub{font-size:12.5px; color:var(--ink-muted); margin-top:2px;}
  .identity{display:flex; align-items:center; gap:8px;}
  .identity input, .identity select{font-size:12.5px; padding:6px 9px; border-radius:7px; border:1px solid var(--border); background:var(--surface); color:var(--ink);}
  .identity label{font-size:11px; color:var(--ink-muted); display:block; margin-bottom:2px;}
  .identity-field{display:flex; flex-direction:column;}

  #content{flex:1; overflow-y:auto; padding:26px 28px 60px;}
  .container{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:20px;}

  /* Cards / panels */
  .panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);}
  .panel-pad{padding:18px 20px;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); gap:12px;}
  .panel-head h2{font-size:16px;}
  .panel-head .hint{font-size:12px; color:var(--ink-muted); margin-top:3px;}

  .grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;}
  .stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow);}
  .stat .num{font-family:'Be Vietnam Pro',system-ui,sans-serif; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
  .stat .lbl{font-size:12px; color:var(--ink-muted);}
  .stat.warn .num{color:var(--warn);}
  .stat.crit .num{color:var(--critical);}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; white-space:nowrap;}
  .btn:hover{background:var(--surface-2);}
  .btn-accent{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}
  .btn-accent:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
  .btn-good{background:var(--good); border-color:var(--good); color:var(--good-contrast);}
  .btn-bad{background:transparent; border-color:var(--critical); color:var(--critical);}
  .btn-bad:hover{background:var(--critical-soft);}
  .btn-del{color:var(--critical);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--accent);}
  .btn-ghost:hover{background:var(--accent-soft);}
  .btn[disabled]{opacity:.4; cursor:not-allowed;}
  .btn-sm{padding:5px 10px; font-size:12px; border-radius:7px;}
  .btn-row{display:flex; gap:8px; flex-wrap:wrap;}

  /* Badges / flags */
  .badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap;}
  .badge-pending{background:var(--warn-soft); color:var(--warn);}
  .badge-good{background:var(--good-soft); color:var(--good);}
  .badge-bad{background:var(--critical-soft); color:var(--critical);}
  .badge-neutral{background:var(--surface-2); color:var(--ink-muted);}
  .flag-red{color:var(--critical); font-weight:700;}
  .flag-orange{color:var(--warn); font-weight:700;}

  /* Table */
  .tablewrap{overflow-x:auto;}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;}
  td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
  tr:last-child td{border-bottom:none;}
  tr.row-click:hover{background:var(--surface-2); cursor:pointer;}
  .num-cell{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; text-align:right;}
  .muted{color:var(--ink-muted);}
  .empty-state{padding:40px 20px; text-align:center; color:var(--ink-muted); display:flex; flex-direction:column; align-items:center; gap:10px;}
  .empty-state .big{font-size:32px;}

  /* Forms */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:12px; font-weight:600; color:var(--ink-muted);}
  .field .fhint{font-size:11px; color:var(--ink-muted); font-weight:400;}
  input,select,textarea{font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;}
  textarea{resize:vertical; min-height:60px;}
  fieldset{border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:0;}
  legend{font-size:12px; font-weight:600; color:var(--ink-muted); padding:0 6px;}
  .row-repeat{display:grid; grid-template-columns:2fr 1.4fr 1fr auto; gap:8px; align-items:end; margin-bottom:8px;}
  .row-repeat.two{grid-template-columns:2fr 1fr auto;}
  .icon-btn{background:transparent; border:1px solid var(--border); border-radius:7px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--critical);}
  .radio-group{display:flex; gap:14px; flex-wrap:wrap;}
  .radio-opt{display:flex; align-items:center; gap:6px; font-size:13px; padding:8px 12px; border:1px solid var(--border); border-radius:8px;}
  .radio-opt input{width:auto;}

  /* Modal */
  #modalRoot{position:fixed; inset:0; background:rgba(20,17,13,.45); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; z-index:50;}
  #modalRoot.open{display:flex;}
  .modal{background:var(--surface); border-radius:14px; width:100%; max-width:640px; box-shadow:var(--shadow); border:1px solid var(--border);}
  .modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border);}
  .modal-head h3{font-size:16px;}
  .modal-body{padding:20px; display:flex; flex-direction:column; gap:16px; max-height:70vh; overflow-y:auto;}
  .modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--border);}
  .close-x{background:transparent; border:none; font-size:18px; color:var(--ink-muted); line-height:1;}

  .timeline{display:flex; flex-direction:column; gap:10px;}
  .tl-item{display:flex; gap:10px; font-size:12.5px;}
  .tl-dot{width:7px; height:7px; border-radius:99px; background:var(--accent); margin-top:5px; flex:none;}
  .tl-body b{font-weight:600;}
  .tl-time{color:var(--ink-muted); font-size:11px;}

  .progress{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
  .progress > div{height:100%; background:var(--brand);}
  .progress.danger > div{background:var(--critical);}

  .kv{display:flex; justify-content:space-between; font-size:12.5px; padding:3px 0;}
  .kv .k{color:var(--ink-muted);}
  .callout{border-radius:10px; padding:10px 13px; font-size:12.5px; display:flex; gap:8px; align-items:flex-start;}
  .callout.info{background:var(--accent-soft); color:var(--accent-strong);}
  .callout.warn{background:var(--warn-soft); color:var(--warn);}
  .callout.bad{background:var(--critical-soft); color:var(--critical);}
  .tag-scope{font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; color:var(--ink-muted);}

  .checkline{display:flex; align-items:center; gap:8px;}
  .role-pill{display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; background:var(--surface-2); font-size:11px; font-weight:600; color:var(--ink-muted);}

  #toastBox{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:100; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:var(--shadow); display:none; max-width:min(520px,90vw);}
  #toastBox.bad{background:var(--critical); color:var(--critical-contrast);}
  #toastBox.warn{background:var(--warn); color:var(--warn-contrast);}
  #toastBox.info{background:var(--accent); color:var(--accent-contrast);}

/* ---- bổ sung cho bản web app ---- */
.user-chip{display:flex; align-items:center; gap:10px;}
.user-chip .who{display:flex; flex-direction:column; align-items:flex-end; line-height:1.25;}
.user-chip .who b{font-size:13.5px;}
.role-pills{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end;}
.role-pill.me{background:var(--accent-soft); color:var(--accent-strong);}
.step-box{border:1px dashed var(--border); border-radius:10px; padding:10px 12px; font-size:12.5px; display:flex; justify-content:space-between; gap:10px; align-items:center;}
.step-box .k{color:var(--ink-muted);}
.att-list{display:flex; flex-direction:column; gap:6px;}
.att-item{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:6px 8px; background:var(--surface-2); border-radius:8px;}
.att-item a{font-weight:600; word-break:break-all;}
.file-btn{position:relative; overflow:hidden;}
.file-btn input{position:absolute; inset:0; opacity:0; cursor:pointer;}
input.money{font-family:'JetBrains Mono',ui-monospace,monospace; text-align:right;}
.hdr-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.loading{padding:40px; text-align:center; color:var(--ink-muted);}
.checkgrid{display:flex; flex-wrap:wrap; gap:6px 12px;}
.checkgrid label{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--ink);}
.checkgrid input{width:auto;}
tr.inactive td{opacity:.5;}
.print-only{display:none;}

@media (max-width: 820px){
  #app{flex-direction:column;}
  #sidebar{width:auto; flex-direction:row; align-items:center; padding:10px 12px; gap:10px; border-right:none; border-bottom:1px solid var(--border); overflow-x:auto;}
  .brand{flex-direction:row; align-items:center; flex:none;}
  .brand-logo{height:30px;}
  .brand > div{display:none;}
  nav{flex-direction:row; margin:0; flex:none;}
  .navbtn{white-space:nowrap; padding:7px 9px; font-size:12.5px;}
  .sidebar-foot{display:none;}
  #topbar{padding:10px 14px; flex-wrap:wrap;}
  .user-chip .who{align-items:flex-start;}
  #content{padding:14px 12px 60px;}
  .form-grid{grid-template-columns:1fr;}
  .row-repeat{grid-template-columns:1fr 1fr; }
  .row-repeat .icon-btn{justify-self:end;}
  #modalRoot{padding:10px;}
  .modal-body{max-height:none;}
  .modal-foot{flex-wrap:wrap;}
}
@media print{
  #sidebar, #topbar, .no-print, #modalRoot, #toastBox{display:none !important;}
  .print-only{display:block;}
  body{background:#fff;}
  #content{padding:0;}
  .panel{box-shadow:none; border-color:#999;}
}

.fhint{font-size:11px; color:var(--ink-muted); font-weight:400;}