:root{
    --chinh:#a8562f; --chinh-dam:#8c4525; --muc:#2b2622; --mo:#8a8179;
    --nen:#fbfaf9; --the:#fff; --vien:#ece7e2; --vien-dam:#ddd5cd;
    --xanh:#2f7d53; --xanh-nen:#eaf5ee; --vang:#a9772a; --vang-nen:#fdf4e4;
    --do:#b23b45; --do-nen:#fbeced; --xam-nen:#f5f2ef;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font:14px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       background:var(--nen);color:var(--muc);padding:22px 18px 50px}
  .bao{max-width:1500px;margin:0 auto}
  button,select,input{font:inherit;color:inherit}

  .vun{font-size:12.5px;color:var(--mo);margin-bottom:9px}
  .vun b{font-weight:500;color:var(--muc)}
  .dau{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
  h1{font-size:28px;letter-spacing:-.4px;font-weight:600}
  .dau p{color:var(--mo);font-size:13.5px;margin-top:3px}

  .nut{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--vien-dam);
       background:var(--the);border-radius:9px;padding:9px 15px;cursor:pointer;
       font-size:13.5px;font-weight:500;white-space:nowrap}
  .nut:hover{background:var(--xam-nen)}
  .nut.chinh{background:var(--chinh);border-color:var(--chinh);color:#fff}
  .nut.chinh:hover{background:var(--chinh-dam)}
  .nut.nho{padding:5px 11px;font-size:12.5px}
  .nut svg{width:15px;height:15px;flex:none}
  #nutSua.bat{background:var(--chinh);border-color:var(--chinh);color:#fff}

  /* ---- o so lieu ---- */
  .oso{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:20px 0}
  .oso>div{background:var(--the);border:1px solid var(--vien);border-radius:13px;padding:16px 17px;
           display:flex;gap:13px;align-items:flex-start}
  .bieutuong{width:38px;height:38px;border-radius:10px;background:var(--xam-nen);
             display:grid;place-items:center;flex:none;color:var(--mo)}
  .bieutuong svg{width:18px;height:18px}
  .oso .nhan{font-size:12.5px;color:var(--mo)}
  .oso .lon{font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:1.25;margin-top:1px}
  .oso .duoi{font-size:11.5px;color:var(--mo);margin-top:2px}
  .thanh{height:5px;border-radius:99px;background:var(--xam-nen);margin-top:7px;overflow:hidden}
  .thanh i{display:block;height:100%;background:var(--chinh);border-radius:99px}

  /* ---- the danh sach ---- */
  .khoi{background:var(--the);border:1px solid var(--vien);border-radius:13px;padding:18px}
  .hang1{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
  .hang1 h2{font-size:19px;font-weight:600;display:flex;align-items:center;gap:9px}
  .dem{font-size:12px;font-weight:600;color:var(--chinh);background:#f7ece6;padding:2px 9px;border-radius:99px}
  .tab{display:flex;gap:6px;flex-wrap:wrap}
  .tab button{border:1px solid transparent;background:transparent;border-radius:9px;padding:8px 13px;
              font-size:13px;cursor:pointer;color:var(--mo);display:inline-flex;align-items:center;gap:7px}
  .tab button:hover{background:var(--xam-nen)}
  .tab button.chon{background:#f7ece6;border-color:#eddcd3;color:var(--chinh);font-weight:600}
  .tab b{font-size:11.5px;background:rgba(0,0,0,.055);padding:1px 7px;border-radius:99px;font-weight:600}
  .tab button.chon b{background:rgba(168,86,47,.13)}

  .loc{display:flex;gap:10px;margin:15px 0 4px;flex-wrap:wrap}
  .tim{position:relative;flex:1;min-width:220px}
  .tim svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--mo)}
  .tim input{width:100%;padding:10px 12px 10px 35px;border:1px solid var(--vien-dam);border-radius:9px;background:var(--the)}
  .loc select{padding:10px 12px;border:1px solid var(--vien-dam);border-radius:9px;background:var(--the);min-width:150px}
  input:focus,select:focus{outline:2px solid #eddcd3;outline-offset:-1px}

  .chon-bar{display:none;align-items:center;gap:12px;background:#f7ece6;border:1px solid #eddcd3;
            border-radius:10px;padding:10px 14px;margin-top:13px;font-size:13.5px;flex-wrap:wrap}
  .chon-bar.hien{display:flex}

  /* ---- bang kieu bang tinh: ke o, moi khach 1 hang ---- */
  .khung{overflow:auto;margin-top:14px;border:1px solid var(--vien-dam);border-radius:10px;
         max-height:calc(100vh - 60px);-webkit-overflow-scrolling:touch}
  table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px}
  thead th{position:sticky;top:0;z-index:2;background:var(--xam-nen);text-align:left;
           font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mo);font-weight:600;
           padding:9px 10px;border-bottom:1px solid var(--vien-dam);border-right:1px solid #e6dfd8;white-space:nowrap}
  tbody td{padding:7px 10px;border-bottom:1px solid #f0ebe5;border-right:1px solid #f0ebe5;
           vertical-align:middle;font-size:13.5px;white-space:nowrap}
  tbody tr:nth-child(even) td{background:#fdfbf9}
  tbody tr:hover td{background:#faf5f0}
  tbody tr.modau td{border-top:2px solid var(--vien-dam)}
  tbody tr.modau:first-child td{border-top:0}
  td.so,th.so{text-align:right;font-variant-numeric:tabular-nums}
  td.sttc{text-align:right;color:var(--mo);font-variant-numeric:tabular-nums;width:56px}
  .ten{font-weight:600}
  .chipnhom{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
  .thiep{display:inline-flex;align-items:center;gap:7px;color:var(--mo);background:none;border:0;cursor:pointer;font-size:13px;padding:0}
  .thiep.roi{color:var(--xanh);font-weight:600}
  .thiep svg{width:15px;height:15px}
  select.tl{appearance:none;-webkit-appearance:none;padding:4px 24px 4px 10px;font-size:12px;font-weight:600;
            border-radius:99px;border:1px solid transparent;cursor:pointer;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat;background-position:right 8px center;background-size:10px}
  .p-chua{background-color:var(--vang-nen);border-color:#f0e2c8;color:var(--vang)}
  .p-den{background-color:var(--xanh-nen);border-color:#c9e4d4;color:var(--xanh)}
  .p-khong{background-color:var(--do-nen);border-color:#f0d4d7;color:var(--do)}

  .menu{position:relative}
  .menu>button{background:none;border:0;cursor:pointer;color:var(--mo);padding:2px 8px;border-radius:7px;font-size:17px;line-height:1}
  .menu>button:hover{background:var(--xam-nen)}
  .menu ul{position:absolute;right:0;top:100%;z-index:9;background:var(--the);border:1px solid var(--vien-dam);
           border-radius:10px;padding:5px;box-shadow:0 10px 26px rgba(0,0,0,.1);list-style:none;min-width:170px;display:none}
  .menu.mo ul{display:block}
  .menu li button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:8px 11px;border-radius:7px;font-size:13.5px}
  .menu li button:hover{background:var(--xam-nen)}
  .menu li button.do{color:var(--do)}

  /* ---- che do Sua ---- */
  body.dang-sua td[data-sua]{cursor:text}
  body.dang-sua td[data-sua]:hover{box-shadow:inset 0 0 0 1px #d9b49c;background:#fffaf6}
  .chen{display:none;width:20px;height:20px;border-radius:99px;border:1px solid #e3c9b8;background:#fff;
        color:var(--chinh);font-weight:700;font-size:14px;line-height:1;cursor:pointer;margin-right:6px;vertical-align:middle}
  .chen:hover{background:var(--chinh);color:#fff}
  body.dang-sua .chen{display:inline-block}
  .oinput{width:100%;min-width:60px;padding:4px 7px;border:1.5px solid var(--chinh);border-radius:5px;font-size:13px;background:#fff}
  td.so .oinput{text-align:right}
  tr.dongthem td{background:#fff4ea!important;padding:5px 7px}
  tr.dongthem .oinput{border-color:#e0bfa9}
  tr.dongthem .oinput:focus{border-color:var(--chinh)}
  .goiy{font-size:11.5px;color:var(--mo);margin-left:6px}
  .trong{text-align:center;padding:40px;color:var(--mo)}
  .chan{margin-top:12px;font-size:13px;color:var(--mo)}

  /* ---- popup ---- */
  dialog{border:0;border-radius:15px;padding:0;max-width:480px;width:calc(100% - 28px);box-shadow:0 20px 56px rgba(0,0,0,.22)}
  dialog::backdrop{background:rgba(35,28,22,.42)}
  .pop{padding:20px}
  .pop h3{font-size:18px;font-weight:600;margin-bottom:15px}
  .o{margin-bottom:12px}
  .o label{display:block;font-size:12px;color:var(--mo);margin-bottom:5px}
  .o input,.o select{width:100%;padding:10px 12px;border:1px solid var(--vien-dam);border-radius:9px;background:var(--the)}
  .doi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .nutpop{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}

  #bao{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--muc);color:#fff;
       padding:10px 18px;border-radius:9px;font-size:13.5px;display:none;z-index:99;max-width:90vw}

  /* Dien thoai: van la bang tinh, vuot ngang ca bang (khong dinh cot nao) */
  @media(max-width:860px){
    body{padding:12px 8px 40px}
    h1{font-size:22px}
    .dau p{display:none}
    .oso{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
    .oso>div{padding:10px;gap:8px}
    .bieutuong{width:28px;height:28px}
    .oso .lon{font-size:18px}
    .oso .duoi{display:none}
    .khoi{padding:10px}
    .hang1 h2{font-size:16px}
    .tab{overflow-x:auto;flex-wrap:nowrap;width:100%}
    .tab button{padding:6px 10px;font-size:12px;flex:none}
    .tim{flex-basis:100%}
    .loc select{min-width:0;flex:1}
    .khung{max-height:calc(100vh - 90px);border-radius:6px}
    table{font-size:12.5px;min-width:820px}
    thead th{padding:7px 8px;font-size:10px}
    tbody td{padding:5px 8px;font-size:12.5px}
    .chipnhom{font-size:10.5px;padding:2px 6px;border-radius:4px}
    td.o-chon, th.o-chon{display:none}
    .doi{grid-template-columns:1fr}
  }

  /* ---- menu giua cac trang (Khach moi / Thu chi / Vendor) ---- */
  .dhtrang{display:flex;align-items:center;gap:4px;margin-bottom:16px;padding-bottom:10px;
           border-bottom:1px solid var(--vien);overflow-x:auto}
  .dhtrang .logo{font-weight:700;color:var(--chinh);margin-right:12px;white-space:nowrap;letter-spacing:-.2px}
  .dhtrang a{padding:7px 13px;border-radius:9px;color:var(--mo);text-decoration:none;font-size:13.5px;white-space:nowrap}
  .dhtrang a:hover{background:var(--xam-nen)}
  .dhtrang a.chon{background:#f7ece6;color:var(--chinh);font-weight:600}
  .dhtrang .khoa{width:12px;height:12px;vertical-align:-1px;margin-left:3px;opacity:.7}

  /* ---- bang dung chung (bang.js) ---- */
  .p-thu{background-color:var(--xanh-nen);border-color:#c9e4d4;color:var(--xanh)}
  .p-chi{background-color:var(--do-nen);border-color:#f0d4d7;color:var(--do)}
  .p-dang_hoi{background-color:var(--vang-nen);border-color:#f0e2c8;color:var(--vang)}
  .p-da_chot{background-color:var(--xanh-nen);border-color:#c9e4d4;color:var(--xanh)}
  .p-huy{background-color:var(--xam-nen);border-color:var(--vien-dam);color:var(--mo)}
  td.tien-thu{color:var(--xanh);font-weight:600}
  td.tien-chi{color:var(--do);font-weight:600}
  td.tien-dukien{color:var(--vang);font-weight:600}
  td.tien-conlai b{color:var(--vang)}
  .pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;border:1px solid;white-space:nowrap}
  .p-chua{background-color:var(--do-nen);border-color:#f0d4d7;color:var(--do)}
  .p-con_no{background-color:var(--vang-nen);border-color:#f0e2c8;color:var(--vang)}
  tr.dukien .ten{font-weight:500;font-style:italic}
  .p-da_tra{background-color:var(--xanh-nen);border-color:#c9e4d4;color:var(--xanh)}
  .p-du_kien{background-color:var(--vang-nen);border-color:#f0e2c8;color:var(--vang)}
  a.goi{display:inline-flex;align-items:center;gap:5px;color:var(--chinh);font-weight:600;text-decoration:none;
        padding:2px 8px;border-radius:99px;background:#f7ece6;margin-right:4px}
  a.goi svg{width:13px;height:13px}
  a.molink{color:var(--chinh);text-decoration:none;font-weight:500}
  .xoa{display:none;background:none;border:0;color:var(--do);cursor:pointer;font-size:15px;padding:2px 7px;border-radius:6px}
  .xoa:hover{background:var(--do-nen)}
  body.dang-sua .xoa{display:inline-block}
  tr.huy td{color:var(--mo)} tr.huy .ten{text-decoration:line-through}
  @media(min-width:861px){ .oso.ba{grid-template-columns:repeat(3,1fr)} }
  .hangmuc{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 18px}
  .hangmuc span{font-size:12.5px;background:var(--the);border:1px solid var(--vien);border-radius:99px;padding:4px 11px}
  .hangmuc b{font-weight:600;margin-left:4px}

  /* ---- bieu do donut (Estimate) ---- */
  .bieudo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-6px 0 18px}
  .bieudo:empty{display:none}
  .the-bd{background:var(--the);border:1px solid var(--vien);border-radius:13px;padding:14px 17px}
  .the-bd h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--mo);font-weight:600;margin-bottom:10px}
  .bd{display:flex;align-items:center;gap:22px}
  .donut{position:relative;width:170px;height:170px;flex:none}
  .donut svg{width:100%;height:100%}
  .donut .tam{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .donut .tam b{font-size:21px;font-weight:700;letter-spacing:-.4px}
  .donut .tam span{font-size:11.5px;color:var(--mo)}
  .chuthich{list-style:none;flex:1;min-width:0;font-size:13px}
  .chuthich li{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px dashed var(--vien)}
  .chuthich li:last-child{border-bottom:0}
  .chuthich i{width:10px;height:10px;border-radius:3px;flex:none}
  .chuthich span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chuthich b{font-weight:600;font-variant-numeric:tabular-nums}
  .chuthich em{font-style:normal;color:var(--mo);font-size:11.5px;width:34px;text-align:right}
  /* o luoi mac dinh min-width:auto -> chu chu thich (nowrap) day ca trang rong ra tren dien thoai */
  .bieudo>*,.cachtinh>*,.oso>*{min-width:0}
  .donut .tam span{max-width:68%;line-height:1.25}
  @media(max-width:860px){ .bieudo{grid-template-columns:1fr;margin:0 0 10px}
    .bd{flex-direction:column;align-items:stretch;gap:12px} .donut{width:150px;height:150px;margin:0 auto}
    .donut .tam b{font-size:18px} .chuthich{width:100%} }

  /* ---- cach tinh (Estimate) ---- */
  .cachtinh{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:-6px 0 18px}
  .cachtinh:empty{display:none}
  .cachtinh .cot{background:var(--the);border:1px solid var(--vien);border-radius:13px;padding:14px 17px}
  .cachtinh h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--mo);font-weight:600;margin-bottom:6px}
  .cachtinh .cot>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px;border-bottom:1px dashed var(--vien)}
  .cachtinh i{color:var(--mo);font-style:normal;font-size:12px}
  .cachtinh b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cachtinh .tong{border-bottom:0!important;font-weight:600;padding-top:8px!important}
  .cachtinh .ketqua{margin-top:8px;padding:10px 12px!important;border-radius:9px;font-size:15px!important}
  .cachtinh .ketqua.am{background:var(--do-nen);color:var(--do)}
  .cachtinh .ketqua.duong{background:var(--xanh-nen);color:var(--xanh)}
  .cachtinh .cot>div>span{min-width:0}
  @media(max-width:860px){ .cachtinh{grid-template-columns:1fr;margin:0 0 10px} }

  /* ---- o mat khau (Thu chi) ---- */
  .cong{max-width:360px;margin:60px auto;background:var(--the);border:1px solid var(--vien);border-radius:15px;padding:24px}
  .cong h2{font-size:18px;font-weight:600;margin-bottom:6px}
  .cong p{color:var(--mo);font-size:13px;margin-bottom:14px}
  .cong input{width:100%;padding:10px 12px;border:1px solid var(--vien-dam);border-radius:9px;margin-bottom:12px}
  .cong .loi{color:var(--do);font-size:12.5px;min-height:18px;margin:-6px 0 8px}
  @media(max-width:860px){ .dhtrang{margin-bottom:10px} .hangmuc{margin:0 0 10px} }