/* cb.css — Quản lý Công bố sản phẩm.
   Lưới 12 cột · bước 8px · thang giãn cách 4·8·12·16·24·32·48 (SPEC §12).
   Mỗi khung nhìn chỉ MỘT màu nhấn: teal cho thao tác chính, cam để dành riêng
   cho cảnh báo hạn. Không dùng cam làm nút. */
:root{
  --teal:#067686; --teal-dam:#04525d; --teal-nhat:#e7f2f4;
  --cam:#c2410c;                     /* chỉ dùng cho chữ/viền cảnh báo, đủ 4.5:1 trên nền trắng */
  --muc:#1d3235; --mo:#5d7278; --vien:#dce6e8; --nen:#f6f9fa; --trang:#fff;
  --g1:4px; --g2:8px; --g3:12px; --g4:16px; --g6:24px; --g8:32px; --g12:48px;
  --bo:12px; --bo-nho:8px;
  --bong:0 1px 2px rgba(29,50,53,.06), 0 2px 8px rgba(29,50,53,.05);
}
*{box-sizing:border-box}
/* ⚠ Bắt buộc !important: cb.js bật/tắt màn hình bằng thuộc tính `hidden`, mà bất kỳ
   quy tắc display nào viết sau cũng đè được display:none mặc định của trình duyệt.
   Thiếu dòng này thì màn đăng nhập và màn chính chồng lên nhau. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--nen); color:var(--muc);
  font:400 15px/1.5 'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Khung chung: lưới 12 cột, lề trái mọi khối trùng nhau ── */
.bo-cuc{max-width:1320px;margin:0 auto;padding:0 var(--g6)}
.luoi12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g4)}

/* ── Thanh đầu trang ── */
.dau{background:var(--trang);border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:20}
.dau-trong{display:flex;align-items:center;gap:var(--g4);height:64px}
.hieu{display:flex;align-items:center;gap:var(--g2);font-weight:700;font-size:16px;white-space:nowrap}
.hieu svg{width:24px;height:24px;flex:none;color:var(--teal)}
.o-tim{flex:1;min-width:160px;position:relative}
.o-tim input{
  width:100%;height:40px;padding:0 var(--g3) 0 var(--g8);
  border:1px solid var(--vien);border-radius:var(--bo-nho);
  background:var(--nen);font:inherit;color:var(--muc);
}
.o-tim input:focus{outline:2px solid var(--teal);outline-offset:-1px;background:var(--trang)}
.o-tim svg{position:absolute;left:var(--g3);top:11px;width:18px;height:18px;color:var(--mo)}
.the-nguoi{display:flex;align-items:center;gap:var(--g2);white-space:nowrap;font-size:14px}
.the-nguoi .cap{color:var(--mo)}
.ve-kho{white-space:nowrap;font-size:14px;color:var(--mo)}
.ve-kho:hover{color:var(--teal)}
/* Nút header KHÔNG co: ô tìm (flex:1) nuốt hết chỗ thừa, phần còn lại giữ nguyên cỡ,
   không bị bóp méo khi thêm/bớt nút. */
.dau-trong .nut{flex:none}

/* ── Bốn thẻ số: luôn nằm trên nếp gấp, cùng chiều cao ── */
.hang-so{margin:var(--g6) 0 0}
.the-so{
  grid-column:span 3;background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo);padding:var(--g4);cursor:pointer;text-align:left;
  font:inherit;color:inherit;box-shadow:var(--bong);
  /* Căn giữa dọc + min-height gọn hơn: 1 số + 1 nhãn không cần thẻ cao 88px,
     kéo cao rồi để trống dưới là "padding khổng lồ" Sếp cấm. */
  display:flex;flex-direction:column;justify-content:center;gap:var(--g1);min-height:72px;
}
.the-so:hover{border-color:var(--teal)}
.the-so[aria-current="true"]{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-nhat)}
.the-so .so{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.the-so .nhan-so{font-size:13px;color:var(--mo)}

/* ── Dải ngăn lọc + dải nhãn hay dùng ── */
.hang-loc{display:flex;flex-wrap:wrap;gap:var(--g2);margin:var(--g6) 0 var(--g3)}
.nut-loc{
  height:32px;padding:0 var(--g3);border:1px solid var(--vien);border-radius:999px;
  background:var(--trang);color:var(--muc);font:inherit;font-size:14px;cursor:pointer;
}
.nut-loc[aria-current="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.hang-nhan{display:flex;flex-wrap:wrap;gap:var(--g2);margin:0 0 var(--g4)}
/* Chip nhãn CÙNG cao 24px với chip nấc hạn (.nac): trong thẻ hồ sơ hai loại chip này
   đứng cạnh nhau ở .the-nhan — lệch 4px là Sếp nhìn ra ngay. */
.chip-nhan{
  height:24px;padding:0 var(--g2);border:1px solid var(--vien);border-radius:999px;
  background:var(--trang);color:var(--mo);font:inherit;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;
}
.chip-nhan:hover{border-color:var(--teal);color:var(--teal)}

/* ── Chip nấc hạn. 'nac-la' cố ý màu tím chói: nó là giá trị KHÔNG nằm trong bảng,
      phải đập vào mắt chứ không được lẫn vào bốn nấc thật (bài học Việc 12). ── */
.nac{display:inline-flex;align-items:center;height:24px;padding:0 var(--g2);
     border-radius:var(--bo-nho);font-size:13px;font-weight:500;white-space:nowrap}
.nac-xanh{background:#e6f4ee;color:#0d6b45}
.nac-vang{background:#fdf3d7;color:#7a5200}
.nac-cam {background:#fdece0;color:var(--cam)}
.nac-do  {background:#fdeaea;color:#a51d1d}
.nac-xam {background:#eef2f3;color:#37504f}  /* đậm hơn --mo cho đủ 4.5:1 trên nền chip */
.nac-la  {background:#f3e8ff;color:#6b21a8}

/* ── Lưới thẻ ── */
.the-hs{
  grid-column:span 3;background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo);padding:var(--g4);box-shadow:var(--bong);
  /* min-height để một hàng có thẻ ít nhãn không thấp hơn thẻ nhiều nhãn cạnh nó. */
  display:flex;flex-direction:column;gap:var(--g3);min-height:184px;
}
.the-dau{display:flex;gap:var(--g3);align-items:flex-start}
.o-anh{
  width:64px;height:64px;flex:none;border-radius:var(--bo-nho);
  background:var(--teal-nhat);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;overflow:hidden;
}
.o-anh img{width:100%;height:100%;object-fit:cover;display:block}
.the-ten{font-weight:600;line-height:1.35;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.the-phu{font-size:13px;color:var(--mo);margin:var(--g1) 0 0}
.the-nhan{display:flex;flex-wrap:wrap;gap:var(--g1)}
.the-nut{display:flex;flex-wrap:wrap;gap:var(--g2);margin-top:auto;padding-top:var(--g2)}
/* Nút VIỆC trong thẻ: gọn hơn nút ở thanh trên cùng để 5 nút (Xem·Tải·Chia sẻ·Gán·Xoá)
   nằm TRỌN MỘT HÀNG. Đo 26/08: thẻ rộng 272px mà bản cũ cần 321px → "Xoá" rớt xuống
   đứng một mình, đúng kiểu so le Sếp bắt. Cùng cỡ với nút trong bảng — hai chỗ này là
   CÙNG MỘT LOẠI nút nên phải cùng chiều cao, cùng cỡ chữ. */
.the-hs .the-nut{gap:var(--g1)}
.the-hs .the-nut .nut{height:28px;font-size:13px;padding:0 var(--g2)}

/* ── Nút ── */
.nut{height:32px;padding:0 var(--g3);border-radius:var(--bo-nho);border:1px solid var(--vien);
     background:var(--trang);color:var(--muc);font:inherit;font-size:14px;cursor:pointer;
     display:inline-flex;align-items:center;gap:var(--g1);white-space:nowrap}
/* ⚠ Icon trong nút PHẢI khoá cỡ. Thiếu dòng này thì SVG tự nở theo font-size dòng,
   đội nút "Nạp PDF" cao hơn hàng — cộng với thiếu nowrap, chữ rớt 2 dòng, cả header
   so le. Đây đúng là chỗ Sếp chê 25/08 "chẳng theo rule nào". */
.nut svg{width:18px;height:18px;flex:none}
.nut:hover{border-color:var(--teal);color:var(--teal)}
.nut-chinh{background:var(--teal);border-color:var(--teal);color:#fff}
.nut-chinh:hover{background:var(--teal-dam);border-color:var(--teal-dam);color:#fff}
.nut-nguy{color:#a51d1d}
.nut-nguy:hover{border-color:#a51d1d;color:#a51d1d}
.nut:disabled{opacity:.5;cursor:not-allowed}

/* ── Bảng: sáu cột cộng đúng 100% (SPEC §12) ── */
.khung-bang{grid-column:span 12;background:var(--trang);border:1px solid var(--vien);
            border-radius:var(--bo);overflow:hidden;box-shadow:var(--bong)}
table.bang{width:100%;border-collapse:collapse;table-layout:fixed}
.bang th,.bang td{padding:var(--g3) var(--g4);text-align:left;vertical-align:middle;
                  border-bottom:1px solid var(--vien)}
/* Hàng tiêu đề mang màu thương hiệu — Sếp chê 25/08 "headline nhợt nhạt không màu sắc".
   Teal nhạt + chữ teal đậm: có màu mà không giành điểm nhấn với nút teal đặc. */
.bang th{font-size:13px;font-weight:700;color:var(--teal-dam);background:var(--teal-nhat);
         border-bottom:2px solid var(--teal)}
/* Nút trong bảng gọn hơn nút thẻ và KHÔNG xuống hàng khi cột đủ rộng —
   Sếp chê 25/08 "thao tác sao không dàn ngang trong khi chỗ trống còn nhiều". */
.bang td .nut{height:28px;font-size:13px;padding:0 var(--g2)}
.bang td.o-viec-ds{white-space:nowrap}
.bang td.o-viec-ds .nut+.nut{margin-left:var(--g1)}
.bang tr:last-child td{border-bottom:0}
.bang td.o-ten{font-weight:600}
/* Ô trống nói RÕ nó trống vì sao — "—" cụt nghĩa, người đọc tưởng lỗi (Sếp 25/08).
   Mờ đi để không tranh mắt với dữ liệu thật, nhưng vẫn đủ tương phản đọc được. */
.bang td .o-trong{color:var(--mo);font-size:13px}
.bang td.o-so,.bang td.o-con{font-variant-numeric:tabular-nums}
.o-nhan-bang{display:flex;flex-wrap:wrap;gap:var(--g1)}

/* ── Trạng thái rỗng + câu gợi ý ── */
.trong{grid-column:span 12;background:var(--trang);border:1px dashed var(--vien);
       border-radius:var(--bo);padding:var(--g12) var(--g6);text-align:center;color:var(--mo)}
.goi-y{margin-top:var(--g3)}
/* Gợi ý là lối phụ, không được tranh điểm nhấn với câu chính: mặc định xám phẳng,
   chỉ hoá teal + gạch chân khi rê chuột. */
.goi-y button{background:none;border:0;color:var(--mo);font:inherit;cursor:pointer;
              text-decoration:none;padding:0}
.goi-y button:hover{color:var(--teal);text-decoration:underline}

/* ── Màn đăng nhập / đổi mật khẩu ──
   ⚠⚠ MỌI quy tắc dưới đây bắt buộc mở đầu bằng `form.hop`, KHÔNG được viết trơn
   `.hop`. Việc 14 dựng hộp thoại `<dialog class="hop">` dùng LẠI đúng tên lớp này.
   Viết `.hop .nut-chinh{width:100%}` là nút "Đổi tên" trong hộp thoại phình ra hết
   hàng và bóp méo cả hàng nút chân hộp — mà CSS không báo lỗi, chỉ nhìn ảnh chụp
   ở bước tự soi mới thấy. Hai bộ quy tắc phân nhau bằng TÊN THẺ: form ↔ dialog. */
.man-giua{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--g6)}
form.hop{width:100%;max-width:400px;background:var(--trang);border:1px solid var(--vien);
     border-radius:var(--bo);padding:var(--g8);box-shadow:var(--bong)}
form.hop h1{font-size:20px;margin:0 0 var(--g2)}
form.hop p.dan{color:var(--mo);font-size:14px;margin:0 0 var(--g6)}
form.hop label{display:block;font-size:14px;font-weight:500;margin:0 0 var(--g1)}
form.hop input{width:100%;height:40px;padding:0 var(--g3);margin:0 0 var(--g4);
           border:1px solid var(--vien);border-radius:var(--bo-nho);font:inherit;color:var(--muc)}
form.hop input:focus{outline:2px solid var(--teal);outline-offset:-1px}
form.hop .nut-chinh{width:100%;height:40px;justify-content:center}
.loi{color:#a51d1d;font-size:14px;margin:0 0 var(--g4);min-height:20px}

/* ── Nhật ký (chỉ cấp tn trở lên nhìn thấy) ── */
.khung-nk{grid-column:span 12;background:var(--trang);border:1px solid var(--vien);
          border-radius:var(--bo);padding:var(--g4);box-shadow:var(--bong);margin-bottom:var(--g6)}
.nk-dong{display:flex;gap:var(--g3);padding:var(--g2) 0;border-bottom:1px solid var(--vien);font-size:14px}
.nk-dong:last-child{border-bottom:0}
.nk-luc{color:var(--mo);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── Dưới 900px: bảng KHÔNG dựng được, cb.js tự ép về lưới thẻ (kieuHopLe).
      Quy tắc dưới đây chỉ lo phần xếp cột, không lo chuyện đổi kiểu. ── */
@media (max-width:1100px){
  .the-hs{grid-column:span 4}
}
@media (max-width:900px){
  .bo-cuc{padding:0 var(--g4)}
  .the-so{grid-column:span 6}
  .the-hs{grid-column:span 6}
  .dau-trong{height:auto;padding:var(--g3) 0;flex-wrap:wrap}
  .o-tim{order:3;flex-basis:100%}
}
@media (max-width:560px){
  .the-so{grid-column:span 6;min-height:76px;padding:var(--g3)}
  .the-so .so{font-size:22px}
  .the-hs{grid-column:span 12}
}

/* ════════ Việc 14 · đường ghi ════════ */

/* ── Hộp thoại (dùng chung cho hộp Nạp và biểu mẫu Gán) ── */
dialog.hop{
  width:min(720px,calc(100vw - var(--g8)));
  padding:0; border:none; border-radius:var(--bo);
  background:var(--trang); color:var(--muc); box-shadow:var(--bong);
}
dialog.hop::backdrop{background:rgba(29,50,53,.42)}
.hop-dau{
  display:flex;align-items:center;gap:var(--g3);
  height:56px;padding:0 var(--g6);
  border-bottom:1px solid var(--vien);
}
.hop-dau h2{margin:0;font-size:17px;font-weight:700;flex:1}
.hop-than{padding:var(--g6);max-height:min(70vh,560px);overflow:auto}
.hop-chan{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--g3);
  height:64px;padding:0 var(--g6);
  border-top:1px solid var(--vien);background:var(--nen);
  border-radius:0 0 var(--bo) var(--bo);
}
/* ⚠ mọi nút trong hộp CÙNG chiều cao 40px, CÙNG bo góc, CÙNG cỡ chữ.
   Sếp bị OCD — nút cao 38 đứng cạnh nút cao 40 là thấy ngay. */
.hop-chan .nut,.hop-chan button{height:40px}
.hop-chan .chan-trai{margin-right:auto}

/* ⚠ Nhãn ô và ô nhập trong hộp thoại phải khai RIÊNG. Bộ quy tắc của màn đăng nhập
   nay bó trong `form.hop` (xem ghi chú ở khối "Màn đăng nhập" của Việc 13) nên không
   rót xuống `<dialog class="hop">` nữa. Kê rõ từng `type=` chứ đừng viết `input` trơn:
   `input[type=file]` mà ăn phải `height:40px` là ô chọn tệp méo hẳn trên Chrome. */
dialog.hop label{display:block;font-size:14px;font-weight:500;margin:0 0 var(--g1)}
dialog.hop input[type=text],dialog.hop input[type=search],
dialog.hop input[type=date],dialog.hop select{
  width:100%;height:40px;padding:0 var(--g3);margin:0 0 var(--g3);
  border:1px solid var(--vien);border-radius:var(--bo-nho);
  background:var(--trang);font:inherit;color:var(--muc);
}
dialog.hop input:focus,dialog.hop select:focus{outline:2px solid var(--teal);outline-offset:-1px}

/* ── Ô gợi ý (combobox) ── */
.o-goi-y{position:relative}
.khung-gy{
  position:absolute;left:0;right:0;top:calc(100% + var(--g1));z-index:40;
  max-height:264px;overflow:auto;
  background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo-nho);box-shadow:var(--bong);
}
.gy-dong{
  display:flex;align-items:center;gap:var(--g3);
  height:40px;padding:0 var(--g3);cursor:pointer;
}
.gy-dong+.gy-dong{border-top:1px solid var(--vien)}
.gy-dong:hover,.gy-chon{background:var(--teal-nhat)}
.gy-chu{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gy-phu{color:var(--mo);font-size:13px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gy-so{color:var(--mo);font-size:12px;flex:none;
  padding:0 var(--g2);height:20px;line-height:20px;
  background:var(--nen);border-radius:10px}

/* ── Chip nhãn trong biểu mẫu Gán ── */
.dan-chip{display:flex;flex-wrap:wrap;gap:var(--g2);min-height:32px;align-items:flex-start}
.chip{
  display:inline-flex;align-items:center;gap:var(--g2);
  height:28px;padding:0 var(--g2) 0 var(--g3);
  background:var(--teal-nhat);color:var(--teal-dam);
  border:1px solid var(--vien);border-radius:14px;
  font-size:13px;font-weight:600;max-width:240px;
}
.chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip button{
  width:18px;height:18px;flex:none;padding:0;
  border:none;border-radius:9px;background:transparent;
  color:var(--teal-dam);font-size:15px;line-height:1;cursor:pointer;
}
.chip button:hover{background:var(--trang)}
/* nhãn đã khớp SKU thật thì có chấm teal đặc — MỘT điểm hút mắt, không tô cả chip */
.chip.that::before{
  content:'';width:6px;height:6px;flex:none;border-radius:3px;background:var(--teal);
}

/* ── Vùng kéo thả tệp ── */
.tha{
  display:flex;flex-direction:column;align-items:center;gap:var(--g3);
  padding:var(--g8) var(--g6);
  border:2px dashed var(--vien);border-radius:var(--bo);background:var(--nen);
  text-align:center;
}
.tha.dang-keo{border-color:var(--teal);background:var(--teal-nhat)}
.tha-chu{margin:0;font-weight:600}
.tha-phu{margin:0;color:var(--mo);font-size:13px}
.tha .nut{height:40px}

/* ── Thanh tiến trình khi nạp ── */
.dan-nap{display:flex;flex-direction:column;gap:var(--g2);margin-top:var(--g4)}
.dan-nap:empty{margin-top:0}
/* Hai hàng cố định: chữ 24px + giãn 4px + hàng dưới 16px + đệm 8·8 = ĐÚNG 60px.
   Hàng dưới cao 16px dù là thanh tiến trình hay câu lỗi, nên mọi dòng CÙNG chiều
   cao dù chữ dài hay ngắn. Chữ dài thì cắt bằng ellipsis, cấm xuống dòng —
   dòng so le chiều cao là thứ Sếp nhìn ra đầu tiên. */
.dong-nap{
  display:grid;grid-template-columns:1fr 88px 24px;
  grid-template-rows:24px 16px;gap:var(--g1) var(--g3);align-items:center;
  height:60px;padding:var(--g2) var(--g3);
  background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-nho);
}
.dong-nap>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dong-nap .ten{font-size:14px}
.dong-nap .tt{font-size:13px;color:var(--mo);text-align:right}
.dong-nap .dau-tt{text-align:center;font-weight:700;overflow:visible}
.dong-nap.xong .dau-tt{color:var(--teal)}
.dong-nap.hong{border-color:var(--cam);background:#fdf3ee}
.dong-nap.hong .tt,.dong-nap.hong .dau-tt{color:var(--cam)}
/* thanh 4px canh giữa hàng 16px — vẽ bằng ::before + <i>, không đổi chiều cao dòng */
.thanh{grid-column:1/-1;height:16px;position:relative;overflow:visible}
.thanh::before{
  content:'';position:absolute;inset:6px 0 auto 0;height:4px;
  border-radius:2px;background:var(--vien);
}
.thanh i{
  position:absolute;left:0;top:6px;height:4px;max-width:100%;
  border-radius:2px;background:var(--teal);transition:width .18s linear;
}
/* câu lỗi thay chỗ thanh — cũng cao 16px, nên dòng vẫn đúng 60px */
.loi-nap{
  grid-column:1/-1;height:16px;line-height:16px;
  font-size:12px;color:var(--cam);
}

/* ── Lưới biểu mẫu Gán: 12 cột, lề trái mọi ô trùng nhau ── */
.gan-tep{margin:0 0 var(--g6);font-size:14px}
.luoi-gan{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g4)}
.luoi-gan .o{display:flex;flex-direction:column;gap:var(--g1)}
.luoi-gan .o label{font-size:13px;font-weight:600;color:var(--mo)}
.luoi-gan .o input,.luoi-gan .o select,.luoi-gan .o textarea{
  height:40px;padding:0 var(--g3);
  border:1px solid var(--vien);border-radius:var(--bo-nho);
  background:var(--trang);font:inherit;color:var(--muc);width:100%;
}
.luoi-gan .o textarea{height:80px;padding:var(--g2) var(--g3);resize:vertical;line-height:1.5}
.luoi-gan .o input:focus,.luoi-gan .o select:focus,.luoi-gan .o textarea:focus{
  outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal);
}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}
.c4{grid-column:span 4}.c3{grid-column:span 3}
.loi-o{color:var(--cam);font-size:13px;min-height:18px}

/* ── Điện thoại: hộp thoại chiếm gần hết màn, mọi ô về 12 cột ── */
@media (max-width:640px){
  dialog.hop{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .hop-than{max-height:calc(100dvh - 120px)}
  .hop-chan{border-radius:0}
  .c8,.c6,.c4,.c3{grid-column:span 12}
  .dong-nap{grid-template-columns:1fr 72px 24px}
}

/* ── Trang Quản lý nhãn (nhan.html) ── */
.khung-bang{
  grid-column:1/-1;background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo);box-shadow:var(--bong);overflow:hidden;margin-bottom:var(--g6);
}
/* ⚠ BA DÒNG NÀY CHỈ CỦA BẢNG NHÃN — phải neo vào #bang-nhan. Trước đây neo vào
   `.bang` trơn nên rò sang BẢNG CHÍNH: ở đó `.o-so` là "Số công bố" (mã chữ-số,
   canh trái theo tiêu đề), còn ở đây `.o-so` là "Hồ sơ" (con số, canh phải). Cùng
   tên lớp, hai nghĩa khác nhau — hậu quả: dấu "—" ở bảng chính bị `width:1%` +
   `text-align:right` kéo dạt sang phải, rời khỏi tiêu đề. Sếp bắt được 26/08. */
#bang-nhan td.o-viec,#bang-nhan th.o-viec{width:1%;white-space:nowrap;text-align:right}
#bang-nhan td.o-viec .nut{height:28px;font-size:13px}
#bang-nhan td.o-so,#bang-nhan th.o-so{width:1%;white-space:nowrap;text-align:right}
.trong{margin:0;padding:var(--g6);text-align:center;color:var(--mo);font-size:14px}
/* Chip trong bảng KHÔNG có nút ✕, nên trả lại lề hai bên bằng nhau.
   `.chip` gốc lệch 12/8 là để chừa chỗ cho nút gỡ ở biểu mẫu Gán. */
.bang .chip{padding:0 var(--g3)}

/* ── Hộp Chia sẻ (SPEC §9) ── */
.o-duyet{display:flex;align-items:center;gap:var(--g2);margin:0 0 var(--g4);
         font-size:14px;font-weight:500}
.o-duyet input{width:16px;height:16px;accent-color:var(--teal)}
.dan-link{display:flex;flex-direction:column;gap:var(--g2)}
.link-dong{display:flex;align-items:center;gap:var(--g2);
           padding:var(--g2) var(--g3);background:var(--nen);
           border:1px solid var(--vien);border-radius:var(--bo-nho)}
.link-chu{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--g1)}
.link-ma{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.link-chet{opacity:.55}
.link-dong .nut{flex:none;height:28px;font-size:13px}

/* Câu xác nhận gộp: một khối, một điểm hút mắt, không tô đỏ loè loẹt */
.cau-xac-nhan{
  margin:var(--g3) 0 0;padding:var(--g3) var(--g4);border-radius:var(--bo-nho);
  background:var(--nen);border-left:3px solid var(--cam);
  font-size:14px;line-height:1.6;color:var(--muc);
}
.cau-xac-nhan[hidden]{display:none!important}