:root {
        color-scheme: light dark;
        --bg:#fffef5; --fg:#1c1917; --muted:#78716c; --line:#e7e5e4;
        --card:#fdfce8; --lime:#65a30d; --lime-soft:#ecfccb; --lime-deep:#3f6212;
        --gold:#a16207; --ok:#15803d; --pick:#0369a1; --pick-bg:#e0f2fe;
        --warn:#c2410c;   /* việc còn thiếu — cam đậm, đọc rõ trên nền chanh */
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg:#0c0a09; --fg:#fafaf9; --muted:#a8a29e; --line:#292524;
          --card:#1c1917; --lime:#a3e635; --lime-soft:#1a2e05; --lime-deep:#d9f99d;
          --gold:#fbbf24; --ok:#86efac; --pick:#7dd3fc; --pick-bg:#082f49;
          --warn:#fdba74;
        }
      }
      * { box-sizing:border-box; }
      body { margin:0; padding:0 0 60px; background:var(--bg); color:var(--fg);
        font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
      main { max-width:1240px; margin:0 auto; padding:0 22px; }

      .hero { position:relative; overflow:hidden; margin-bottom:20px;
        padding:30px 22px 26px;
        background:linear-gradient(160deg,#d9f99d,#bef264 60%,#a3e635);
        border-radius:0 0 22px 22px; }
      @media (prefers-color-scheme: dark) {
        .hero { background:linear-gradient(160deg,#1a2e05,#243b06 60%,#365314); }
      }
      .hero .inner { position:relative; z-index:2; max-width:1240px; margin:0 auto;
        padding:0 8px; }
      .hero h1 { margin:0 0 2px; font-size:1.7rem; letter-spacing:-0.02em; color:#1a2e05; }
      .hero .who { margin:0; font-size:0.88rem; color:#3f6212; }
      .hero .stamp { margin:2px 0 0; font-size:0.8rem; color:#3f6212; opacity:0.85; }
      @media (prefers-color-scheme: dark) {
        .hero h1 { color:#ecfccb; } .hero .who, .hero .stamp { color:#bef264; }
      }
      .cat { position:absolute; right:26px; bottom:-24px; width:210px; z-index:1;
        pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.12)); }

      .gl { animation:shine 2.4s ease-in-out infinite; }
      .gl.g2 { animation-delay:0.3s; }
      @keyframes shine { 0%,100%{opacity:0.75} 50%{opacity:1} }
      .tw { animation:tw 1.9s ease-in-out infinite; }
      .tw.t2 { animation-delay:0.6s; } .tw.t3 { animation-delay:1.2s; }
      @keyframes tw { 0%,100%{opacity:0.2} 50%{opacity:1} }
      .coin { animation:bob 2.6s ease-in-out infinite; }
      .coin.c2 { animation-delay:0.5s; } .coin.c3 { animation-delay:1s; }
      @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
      @media (prefers-reduced-motion: reduce) { .gl,.tw,.coin { animation:none; } }

      .big { display:grid; grid-template-columns:1.15fr 1fr; gap:14px; margin:18px 0 6px; }
      @media (max-width:760px) { .big { grid-template-columns:1fr; } }
      .big .box { position:relative; padding:18px; border-radius:16px;
        background:var(--card); border:1px solid var(--line); }
      .big .box.debt { border-color:var(--gold); }
      .big .box.money { border-color:var(--lime); padding-right:88px; }
      .big .lbl { margin:0 0 4px; font-size:0.85rem; color:var(--muted); font-weight:600; }
      .big .val { font-size:2.5rem; font-weight:700; letter-spacing:-0.03em;
        font-variant-numeric:tabular-nums; line-height:1.12; }
      .big .debt .val { color:var(--gold); }
      .big .money .val { color:var(--lime-deep); font-size:2rem; }
      .big .foot { margin-top:5px; font-size:0.79rem; color:var(--muted); }
      .tree { position:absolute; right:12px; top:8px; width:66px; height:92px; }

      .moc { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
        margin:18px 0 2px; padding:11px 14px; border-radius:12px;
        background:var(--card); border:1px solid var(--line); font-size:0.88rem; }
      .moc .mlbl { font-weight:700; }
      .moc button { appearance:none; cursor:pointer; font:inherit; font-size:0.84rem;
        font-weight:600; padding:5px 13px; border-radius:999px;
        border:1.5px solid var(--line); background:var(--bg); color:var(--fg); }
      .moc button[aria-pressed="true"] { background:var(--gold); border-color:var(--gold);
        color:#fff; }
      @media (prefers-color-scheme: dark) {
        .moc button[aria-pressed="true"] { color:#1c1917; }
      }
      .moc label { display:flex; align-items:center; gap:6px; color:var(--muted); }
      .moc input { width:74px; font:inherit; font-size:0.86rem; padding:4px 8px;
        border-radius:8px; border:1.5px solid var(--line); background:var(--bg);
        color:var(--fg); }
      .moc .mnote { margin-left:auto; color:var(--muted); font-size:0.82rem; }
      /* Câu này phải nằm ngay dưới ba cái nút: bản cũ dùng mốc để cắt tiền nên ai quen
         bản cũ sẽ đọc số sai nếu không nói rõ nghĩa mới ngay tại chỗ. */
      .moc .mgt { flex-basis:100%; color:var(--muted); font-size:0.79rem;
        line-height:1.45; }
      .moc .mgt b { color:var(--fg); }

      /* ---------- ô tìm nhanh ---------- */
      .timbar { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
        margin:18px 0 2px; padding:11px 14px; border-radius:12px;
        background:var(--card); border:1px solid var(--line); font-size:0.88rem; }
      .timbar .mlbl { font-weight:700; }
      .timbar input { flex:1; min-width:190px; font:inherit; font-size:0.9rem;
        padding:6px 11px; border-radius:9px; border:1.5px solid var(--line);
        background:var(--bg); color:var(--fg); }
      .timbar input:focus { outline:none; border-color:var(--gold); }
      .timbar button { appearance:none; cursor:pointer; font:inherit; font-size:0.84rem;
        font-weight:600; padding:5px 13px; border-radius:999px;
        border:1.5px solid var(--line); background:var(--bg); color:var(--fg); }
      .timbar .tnote { flex-basis:100%; color:var(--muted); font-size:0.8rem; }
      .found { margin:14px 0 8px; font-size:0.92rem; }
      .found .fw { color:var(--gold); font-weight:700;
        font-variant-numeric:tabular-nums; }
      /* Danh sách phẳng mất thông tin "thuộc ai, nhóm nào" nên mỗi dòng tự ghi lại,
         thành dòng chữ xám nhỏ dưới tên dự án. Chỉ áp cho bảng kết quả tìm. */
      .prow .pn { white-space:normal; line-height:1.25; }
      .prow .pn .oat { display:block; font-size:0.72rem; font-weight:500;
        color:var(--muted); margin-top:1px; }

      /* băng “số đã cũ” — cam đậm, viền dày, nằm trên cùng phần thân trang. Cố ý KHÔNG
         dùng tông chanh: đây là chỗ duy nhất trên trang được phép trông như báo động. */
      .cu { margin:16px 0 0; padding:12px 15px; border-radius:12px; font-size:0.9rem;
        background:var(--card); color:var(--warn); border:2px solid var(--warn); }
      .cu b { font-weight:700; }

      .scope { margin:14px 0 8px; padding:11px 14px; border-radius:10px;
        background:var(--lime-soft); color:var(--lime-deep); font-size:0.85rem; }
      .scope b { font-weight:700; }
      .picked { margin:0 0 26px; padding:12px 14px; border-radius:12px;
        background:var(--pick-bg); color:var(--pick); font-size:0.86rem; }
      .picked .hd { font-weight:700; margin-bottom:8px; display:flex;
        align-items:center; gap:10px; }
      .picked button { margin-left:auto; appearance:none; cursor:pointer;
        border:1.5px solid var(--pick); background:transparent; color:var(--pick);
        border-radius:999px; padding:4px 12px; font:inherit; font-size:0.82rem;
        font-weight:600; }
      .gtot { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
        gap:8px; }
      /* Thẻ nhóm BẤM ĐƯỢC để bung danh sách gộp cả nhân viên — nên phải là <button>
         và phải trông bấm được, không thì không ai nghĩ tới chuyện bấm vào. */
      .gtot .gcard { appearance:none; font:inherit; text-align:left; cursor:pointer;
        width:100%; padding:8px 11px; border-radius:9px; background:var(--bg);
        border:1.5px solid transparent;
        transition:transform 0.12s ease, border-color 0.12s ease; }
      .gtot .gcard:hover, .gtot .gcard:focus-visible { transform:translateY(-2px);
        border-color:var(--pick); outline:none; }
      .gtot .gcard[aria-expanded="true"] { border-color:var(--pick);
        box-shadow:0 0 0 3px var(--pick-bg); transform:none; }
      /* Dòng chữ nói thẳng thẻ này bấm được — không có nó thì thẻ trông y hệt ô đọc-số. */
      .gtot .gcard .gmo { margin-top:5px; font-size:0.74rem; font-weight:700;
        color:var(--pick); }
      .gtot .gcard.zero { opacity:0.6; }
      .gtot .gcard.zero .gmo { color:var(--muted); font-weight:600; }
      .pgoi { margin:9px 0 10px; font-size:0.8rem; opacity:0.9; }
      .gtot .gn { font-size:0.78rem; font-weight:700; display:flex;
        align-items:center; gap:6px; }
      .gtot .gn .leaf { width:17px; height:17px; flex:none; }
      .gtot .gv { font-size:1.15rem; font-weight:700; color:var(--fg);
        font-variant-numeric:tabular-nums; }
      .gtot .gc { font-size:0.75rem; color:var(--muted); }
      .gds:not(:empty) { margin-top:12px; }
      .gds .gdshd { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
        margin-bottom:7px; font-size:0.84rem; }
      .gds .gdshd .leaf { width:19px; height:19px; flex:none; }
      .gds .tbl { background:var(--bg); }
      .picked button.chinh { margin-left:auto; background:var(--pick); color:#fff;
        border-color:var(--pick); }
      .picked button.chinh + button { margin-left:0; }
      .pnote { margin-top:9px; font-size:0.78rem; opacity:0.8; }
      .pnote.canluu { opacity:1; font-weight:600; }

      h2 { margin:26px 0 4px; font-size:1rem; }
      h2 + .hint { margin:0 0 14px; color:var(--muted); font-size:0.88rem; }

      /* ---------- tầng 1: lưới mèo ---------- */
      .cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
        gap:14px; }
      .catcard { appearance:none; font:inherit; color:inherit; cursor:pointer;
        text-align:center; padding:14px 10px 16px; border-radius:18px;
        background:var(--card); border:1px solid var(--line);
        border-top:5px solid var(--oc);
        transition:transform 0.15s ease, box-shadow 0.15s ease; }
      .catcard:hover, .catcard:focus-visible { transform:translateY(-4px);
        box-shadow:0 12px 26px rgba(0,0,0,0.11); outline:none; }
      .catfish { width:104px; height:108px; }
      .catcard .nm { font-weight:700; margin-top:2px; }
      .catcard .ow { font-size:1.45rem; font-weight:800; color:var(--gold);
        font-variant-numeric:tabular-nums; line-height:1.2; }
      .catcard .cnt { font-size:0.78rem; color:var(--muted); }

      /* ---------- tầng 2: lưới lá ---------- */
      .leaves { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
        gap:12px; }
      .leafcard { appearance:none; font:inherit; cursor:pointer; text-align:center;
        padding:16px 10px; border-radius:16px; background:var(--card);
        border:1.5px solid currentColor;
        transition:transform 0.15s ease, box-shadow 0.15s ease; }
      .leafcard:hover, .leafcard:focus-visible { transform:translateY(-3px);
        box-shadow:0 10px 22px rgba(0,0,0,0.1); outline:none; }
      .leafcard.zero { opacity:0.45; }
      .leafcard .leaf { width:46px; height:46px; }
      .leafcard .gname { font-size:0.84rem; font-weight:700; margin-top:2px; }
      .leafcard .gw { font-size:1.25rem; font-weight:800; color:var(--fg);
        font-variant-numeric:tabular-nums; }
      .leafcard .gc { font-size:0.76rem; color:var(--muted); }

      /* dải lá thu nhỏ, dùng trong tầng 3 để đổi nhóm mà không phải thoát ra ngoài */
      .leaves.mini { display:flex; gap:8px; overflow-x:auto; margin:12px 0 6px;
        padding:2px 2px 8px; }
      .leaves.mini .leafcard { flex:0 0 auto; width:118px; padding:9px 6px;
        border-radius:12px; }
      .leaves.mini .leafcard .leaf { width:28px; height:28px; }
      .leaves.mini .leafcard .gname { font-size:0.73rem; margin-top:0; }
      .leaves.mini .leafcard .gc { font-size:0.7rem; }
      .leaves.mini .leafcard.cur { border-width:3px; background:var(--pick-bg); }

      /* ---------- thanh quay lại ---------- */
      .crumb { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
        margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
      .crumb button { appearance:none; cursor:pointer; font:inherit; font-size:0.84rem;
        font-weight:600; padding:5px 12px; border-radius:999px;
        border:1.5px solid var(--line); background:var(--bg); color:var(--fg); }
      .crumb button:hover { border-color:var(--lime); }
      .crumb .catfish { width:38px; height:40px; }
      .crumb .leaf { width:26px; height:26px; }
      .crumb .cur { font-size:1.1rem; font-weight:800; }
      .crumb .ow { margin-left:auto; font-size:1.1rem; font-weight:800;
        color:var(--gold); font-variant-numeric:tabular-nums; }
      .crumb .ow span { font-size:0.78rem; font-weight:600; color:var(--muted);
        margin-right:6px; }

      /* ---------- tầng 3: bảng dự án ---------- */
      /* Bảng tự cuộn trong khung thay vì kéo dài cả trang — một nhóm có tới 49 dự án.
         Tiêu đề cột dính trên cùng nên cuộn xuống vẫn biết cột nào là cột nào. */
      .tbl { border:1px solid var(--line); border-radius:12px; overflow:auto;
        max-height:62vh; }
      .prow { display:grid; align-items:center; gap:12px;
        grid-template-columns:150px 104px minmax(0,1.8fr) 136px 158px 120px;
        padding:8px 16px; border-top:1px solid var(--line); font-size:0.9rem; }
      .prow:first-child { border-top:0; }
      .prow > * { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .prow select { width:100%; font:inherit; font-size:0.8rem; padding:3px 6px;
        border-radius:7px; border:1.5px solid var(--line); background:var(--bg);
        color:var(--fg); cursor:pointer; }
      .prow select.set { border-color:var(--pick); color:var(--pick); font-weight:600; }
      .prow select.ky { font-size:0.76rem; }
      .prow select.ky.set { border-color:var(--gold); color:var(--gold); }
      /* đã từng nhận tiền mà chưa đặt luật riêng — phải nhìn thấy ngay, không để lặng lẽ */
      .prow select.ky.can { border-color:var(--warn); border-style:dashed; }
      .prow .canky { display:block; font-size:0.68rem; line-height:1.25; margin-top:2px;
        color:var(--warn); font-weight:600; }
      .prow .pn { font-weight:600; }
      .prow .lk, .prow .dt { font-size:0.82rem; color:var(--muted); }
      /* Ngày giục được: xanh = tới lúc rồi, mờ = còn phải chờ. Số ngày còn lại đi kèm
         luôn để khỏi phải nhẩm ngày trong đầu. */
      .prow .dt.qua { color:var(--ok); font-weight:600; }
      .prow .dt.chua { color:var(--muted); }
      /* dòng chữ nhỏ dưới ngày và dưới tiền — "đòi được rồi", "còn 12 ngày",
         và khoảng đang tính "15/06 → 07/07" */
      .prow .nn { display:block; font-size:0.7rem; font-weight:500; opacity:0.85; }
      .prow .m .nn { color:var(--muted); font-variant-numeric:normal; }
      .prow .m .nn.sau { color:var(--warn); font-weight:600; }
      /* Số / ngày NGƯỜI ĐIỀN — phải khác hẳn số máy tính, không ai được nhầm hai thứ. */
      .prow .m.tay, .prow .dt.tay { cursor:pointer; }
      .prow .m.tay { color:var(--pick); }
      .prow .m.tay .nn, .prow .dt.tay .nn { color:var(--pick); font-weight:700; }
      .prow [data-taytien], .prow [data-ngtay] { cursor:pointer; }
      .prow input.otay { width:100%; font:inherit; font-size:0.8rem; padding:3px 6px;
        border-radius:7px; border:1.5px solid var(--pick); background:var(--bg);
        color:var(--fg); text-align:right; }
      .prow .m { font-variant-numeric:tabular-nums; text-align:right; }
      .prow .m.w { color:var(--gold); font-weight:700; }
      .prow .m.dim { color:var(--muted); }
      .prow.head { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em;
        color:var(--muted); font-weight:700; background:var(--card);
        position:sticky; top:0; z-index:2; }
      .prow.head .m { color:var(--muted); }

      /* ---- ghi chú: dòng thứ hai trải hết bề ngang, không phải thêm một cột ---- */
      .prow .ghi { grid-column:1/-1; margin-top:1px;
        white-space:normal; overflow:visible; text-overflow:clip; }
      .prow .ghi button { appearance:none; font:inherit; cursor:pointer; text-align:left;
        border:0; background:transparent; padding:2px 0; }
      .prow .ghi .ghitrong { font-size:0.72rem; color:var(--muted); opacity:0.7; }
      .prow .ghi .ghitrong:hover, .prow .ghi .ghitrong:focus-visible {
        opacity:1; color:var(--pick); }
      .prow .ghi .ghico { font-size:0.8rem; font-style:italic; line-height:1.35;
        color:var(--fg); border-left:3px solid var(--pick); padding-left:9px; }
      .prow .ghi textarea { width:100%; font:inherit; font-size:0.82rem; padding:6px 9px;
        border-radius:8px; border:1.5px solid var(--pick); background:var(--bg);
        color:var(--fg); resize:vertical; }
      /* Màn hẹp: GIỮ NGUYÊN 5 cột rồi cho cuộn ngang, không gập xuống mấy cột nữa.
         Gập thì tiêu đề cột tụt xuống hàng hai còn số ở hàng một — nhìn tưởng "Còn lại"
         mà thật ra đang đọc cột khác. Thà cuộn ngang còn hơn đọc nhầm tiền. */
      @media (max-width:900px) {
        .prow { min-width:920px; }
      }
      .empty { padding:26px 16px; color:var(--muted); font-size:0.9rem;
        text-align:center; }


      /* mục Hái quả — đóng lại thì là một thẻ icon lớn kiểu .catcard; mở ra thì là
         khối .hqbody bám theo gu khối .picked */
      .haiqua { margin:26px 0; }
      .hqmo { appearance:none; font:inherit; color:inherit; cursor:pointer; display:block;
        width:100%; max-width:264px; text-align:center; padding:16px 14px 18px;
        border-radius:18px; background:var(--card); border:1px solid var(--line);
        border-top:5px solid var(--gold);
        transition:transform 0.15s ease, box-shadow 0.15s ease; }
      .hqmo:hover, .hqmo:focus-visible { transform:translateY(-4px);
        box-shadow:0 12px 26px rgba(0,0,0,0.11); outline:none; }
      .hqmo .cayxu { display:block; width:78px; height:104px; margin:0 auto 6px; }
      .hqmo .nm { font-weight:800; font-size:1.05rem; }
      .hqmo .cnt { font-size:0.8rem; color:var(--muted); }
      .hqmo .sl { margin-top:5px; font-weight:700; color:var(--lime-deep); }
      .hqloai:not(:empty) { margin:-8px 0 12px; font-size:0.82rem; color:var(--muted); }
      .hqbody { padding:12px 14px 16px; border-radius:12px;
        background:var(--card); border:1px solid var(--line); }
      .hqdong { appearance:none; cursor:pointer; font:inherit; font-size:0.8rem;
        font-weight:600; margin-left:10px; padding:4px 12px; border-radius:999px;
        border:1.5px solid var(--line); background:var(--bg); color:var(--fg); }
      .hqdong:hover, .hqdong:focus-visible { border-color:var(--lime); outline:none; }
      .haiqua .hd { display:flex; align-items:center; gap:8px; }
      .haiqua .hd h2 { margin:0; font-size:1.05rem; }
      .cayxu { width:38px; height:50px; flex:none; margin-top:-6px; }
      .haiqua .ngay { margin-left:auto; font-size:0.82rem; color:var(--muted); }
      .haiqua .hint { margin:6px 0 12px; font-size:0.82rem; color:var(--muted); }
      .hqg { margin-bottom:12px; }
      .hqg > .t { font-weight:700; font-size:0.86rem; margin-bottom:5px;
        display:flex; align-items:center; gap:8px; }
      .hqg > .t .n { font-weight:600; color:var(--muted); font-size:0.8rem; }
      .hqg.qh > .t { color:#b45309; } .hqg.hn > .t { color:var(--lime-deep); }
      .hqg.md > .t { color:#7d8a06; }
      /* hai khối "mở đường" — xanh nước, tách hẳn khỏi tông chanh của việc đi đòi, để
         mắt nhận ra ngay đây là loại việc khác: chưa có nợ, chỉ đi làm quen */
      .hqg.ct > .t, .hqg.dh > .t { color:var(--pick); }
      .hqg > .t button { appearance:none; cursor:pointer; font:inherit; font-size:0.76rem;
        padding:3px 11px; border-radius:99px; border:1px solid var(--pick);
        background:var(--bg); color:var(--pick); font-weight:600; }
      .hqg > .t button.canh { margin-left:auto; }
      /* bảng nhắc "cần điền mail liên hệ trên Arcozy" — gập lại, mở ra là danh sách để
         Minh Châu vừa nhìn vừa điền bên app, có nút copy cả danh sách */
      .cand { margin:0 0 8px; border:1px dashed var(--pick); border-radius:9px;
        background:var(--pick-bg); }
      .cand > summary { cursor:pointer; list-style:none; padding:7px 11px;
        font-size:0.8rem; font-weight:700; color:var(--pick); }
      .cand > summary::-webkit-details-marker { display:none; }
      .cand > summary::before { content:"▸ "; }
      .cand[open] > summary::before { content:"▾ "; }
      .cand .noi { padding:0 11px 10px; font-size:0.8rem; color:var(--pick); }
      .cand .k { color:var(--pick); opacity:0.85; line-height:1.5; }
      .cand ul { margin:8px 0; padding-left:20px; line-height:1.7; }
      .cand code { font-size:0.86em; padding:1px 5px; border-radius:4px;
        background:var(--bg); border:1px solid var(--line); }
      .cand a { color:var(--pick); }
      .cand button { appearance:none; cursor:pointer; font:inherit; font-size:0.78rem;
        padding:4px 12px; border-radius:99px; border:1px solid var(--pick);
        background:var(--bg); color:var(--pick); font-weight:600; }
      .hq0 { font-size:0.82rem; color:var(--muted); padding:2px 0 4px; }
      details.hqi { border:1px solid var(--line); border-radius:9px; background:var(--bg);
        margin-bottom:5px; }
      details.hqi > summary { cursor:pointer; list-style:none; padding:8px 11px;
        display:grid; grid-template-columns:auto 1fr auto auto; gap:10px;
        align-items:center; font-size:0.86rem; }
      details.hqi > summary::-webkit-details-marker { display:none; }
      /* mũi tên: không có nó thì không ai biết dòng này bấm được */
      details.hqi > summary::before { content:"▸"; color:var(--muted); font-size:0.8rem; }
      details.hqi[open] > summary::before { content:"▾"; color:var(--lime-deep); }
      details.hqi[open] > summary { border-bottom:1px solid var(--line); }
      .hqi .tien { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
      .hqi .viec { font-size:0.76rem; padding:2px 8px; border-radius:99px;
        background:var(--lime-soft); color:var(--lime-deep); white-space:nowrap; }
      .hqi .viec.doi { background:#fee2e2; color:#b91c1c; }
      .hqd { padding:10px 12px; font-size:0.84rem; display:grid; gap:7px; }
      .hqd .k { color:var(--muted); }
      .hqd a { color:var(--lime-deep); }
      /* tóm tắt lịch sử — hai dòng, thay cho cả dòng thời gian (bỏ 03/08) */
      .hqd .tt { border-left:3px solid var(--lime); padding:2px 0 2px 10px; display:grid;
        gap:3px; font-size:0.82rem; line-height:1.45; }
      /* dòng dài kẹp còn 2 dòng, bấm vào thì bung — giữ thẻ không phình quá màn hình */
      .hqd .kep { cursor:pointer; display:-webkit-box; -webkit-line-clamp:2;
        -webkit-box-orient:vertical; overflow:hidden; }
      .hqd .kep.bung { -webkit-line-clamp:unset; }
      .hqd .canhbao { margin:6px 0; padding:6px 9px; border-radius:7px; background:#fee2e2;
        color:#991b1b; font-size:0.8rem; line-height:1.45; }
      .hqd .thugon { margin-top:2px; border-color:var(--line); color:var(--muted); }
      .hqd .thugon:hover { border-color:var(--lime); color:var(--lime-deep); }
      .hqd code { font-size:0.86em; padding:1px 5px; border-radius:4px;
        background:var(--bg); border:1px solid var(--line); }
      .hqd .req { background:var(--card); border:1px dashed var(--line); border-radius:8px;
        padding:9px 11px; font-size:0.8rem; line-height:1.5; }
      .hqd .req .sotien { font-weight:700; font-size:0.95rem; }
      .hqd .mailbox { margin:7px 0; padding:9px 11px; border-radius:7px; background:var(--bg);
        border:1px solid var(--line); font:inherit; font-size:0.78rem; line-height:1.55;
        white-space:pre-wrap; max-height:230px; overflow:auto; }
      .hqd button { appearance:none; cursor:pointer; font:inherit; font-size:0.78rem;
        padding:4px 12px; border-radius:99px; border:1px solid var(--lime);
        background:#fff; color:var(--lime-deep); font-weight:600; }
      /* bốn bản nháp theo kênh — mỗi kênh một thẻ gập, mở ra mới thấy chữ. Để mở sẵn cả
         bốn thì phiếu dài gấp ba và cái mail chính bị chìm mất. */
      .hqd .kenh { display:grid; gap:5px; }
      .hqd .kenh > details { border:1px solid var(--line); border-radius:7px;
        background:var(--bg); }
      .hqd .kenh > details > summary { cursor:pointer; list-style:none; padding:6px 10px;
        font-size:0.79rem; font-weight:600; color:var(--pick); }
      .hqd .kenh > details > summary::-webkit-details-marker { display:none; }
      .hqd .kenh > details > summary::before { content:"▸ "; color:var(--muted); }
      .hqd .kenh > details[open] > summary::before { content:"▾ "; }
      .hqd .kenh .noi { padding:0 10px 9px; }
      .hqd .kenh .mailbox { max-height:none; }
      .hqd .kenh button { border-color:var(--pick); color:var(--pick); }
      /* ô Minh Châu tự gõ mail đối tác — cùng kiểu với ô tình trạng ở bảng chính */
      .hqd .odt { font:inherit; font-size:0.82rem; padding:3px 8px; border-radius:6px;
        border:1px solid var(--line); background:var(--bg); color:var(--fg);
        min-width:240px; }
      .hqd .odt:focus { outline:2px solid var(--pick); outline-offset:1px; }
      .hqd .tudien { font-size:0.74rem; color:var(--pick); font-weight:700; }
      @media (max-width:640px) {
        details.hqi > summary { grid-template-columns:1fr; gap:3px; }
      }

      .note { margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
        font-size:0.85rem; color:var(--muted); }
      .note p { margin:0 0 8px; }
      .note code { font-size:0.88em; padding:1px 5px; border-radius:4px;
        background:var(--card); }