/* =====================================================================
   Sàn Nông Sản — giao diện V1.0
   Không dùng khung giao diện ngoài: tải nhanh, dễ kiểm định, dễ bàn giao.
   Bảng màu lấy tông nông nghiệp, tương phản đạt mức AA.
   ===================================================================== */
:root{
  /* ------------------------------------------------------------------
     Bảng màu V2.8 — tông "nông sản sạch", lấy theo hướng của các sàn đi
     chợ online trong nước (chothongminh.com.vn): XANH LÁ làm màu chủ đạo,
     CAM làm màu điểm nhấn cho giá và khuyến mãi, nền trắng ngả xanh nhạt.

     Bản trước lấy tông xanh dương của ecdn.vn. Đổi sang xanh lá vì đây là
     sàn chuyên nông sản — màu chủ đạo nói ngay ngành hàng, và tách bạch
     với cổng thông tin của Sở để người dùng không nhầm hai hệ thống.

     Tên biến giữ nguyên (--xanh, --la, --vang…) để không phải sửa hàng
     trăm chỗ dùng; chỉ giá trị đổi. --xanh nay là xanh lá thương hiệu.
     Độ tương phản chữ trên nền đều đạt WCAG AA (≥ 4.5:1). Vì vậy sắc xanh
     lá TƯƠI (#1fa84f) chỉ dùng để TÔ MẢNG (viên logo, cột biểu đồ, viền khi
     rê chuột) — chữ trắng đặt lên nó chỉ đạt 3,1:1, không đủ chuẩn. Chữ và
     nút bấm dùng sắc xanh đậm hơn.
     ------------------------------------------------------------------ */

  /* Chủ đạo — xanh lá.
     --xanh-tuoi : chỉ tô mảng, không đặt chữ lên
     --xanh      : chữ liên kết, nền nút, thanh menu (trắng trên nền: 5,6:1)
     --xanh-dam  : trạng thái rê chuột / nhấn         (8,1:1)
     --xanh-tham : chân trang                          (11,9:1) */
  --xanh-tuoi:#1fa84f;
  --xanh:#12783a; --xanh-nhat:#e8f7ee; --xanh-dam:#0d5c2b; --xanh-tham:#0a4020;

  /* Điểm nhấn — cam: giá bán, khuyến mãi, sao đánh giá, nhãn OCOP.
     --cam     : tô mảng nhãn (đặt chữ nâu #3d2100 lên, 6,3:1)
     --cam-dam : chữ giá bán trên nền trắng            (5,2:1) */
  --cam:#ff8a00; --cam-nhat:#fff3e2; --cam-dam:#a85800;

  /* Xanh lá trầm — trạng thái "đạt / đã duyệt", cố ý khác sắc màu chủ đạo
     để ô trạng thái không lẫn vào nút bấm */
  --la:#0d6b34; --la-nhat:#e4f4ea;

  --vang:#e0930b; --vang-nhat:#fff6e0;
  --do:#c62828; --do-nhat:#fdecec;

  --chu:#1f2933; --chu-mo:#5f7168; --vien:#dfeae3; --nen:#f7fbf8; --trang:#fff;
  --bo:10px; --dai:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:var(--chu);background:var(--nen)}
img{max-width:100%;height:auto;display:block}
a{color:var(--xanh);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:1rem 0}
h2{font-size:1.2rem;margin:.8rem 0}
code{background:#f3f4f6;padding:.1em .35em;border-radius:4px;font-size:.86em}
.dai{max-width:var(--dai);margin:0 auto;padding:0 16px}
.an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nho{font-size:.85rem;color:var(--chu-mo)}
.do{color:var(--do)}
.trong{padding:24px;text-align:center;color:var(--chu-mo);background:var(--trang);border:1px dashed var(--vien);border-radius:var(--bo)}
.bo-qua{position:absolute;left:-9999px}
.bo-qua:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}

/* Đầu trang */
.dau-trang{background:var(--trang);border-bottom:1px solid var(--vien)}
.dau-tren{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding-top:6px;padding-bottom:6px;color:var(--chu-mo)}
.lien-ket-nhanh{display:flex;gap:14px;align-items:center}
.noi-hang{display:inline}
.nut-lien-ket{background:none;border:0;color:var(--xanh);cursor:pointer;font:inherit;padding:0}
.dau-chinh{display:flex;gap:24px;align-items:center;padding-top:12px;padding-bottom:12px}
.thuong-hieu{display:flex;gap:10px;align-items:center;color:var(--chu)}
.thuong-hieu small{display:block;font-size:.75rem;color:var(--chu-mo);font-weight:400}
.logo-chu{background:var(--xanh-tuoi);color:#fff;font-weight:700;border-radius:8px;padding:8px 10px;letter-spacing:.5px}
.o-tim{flex:1;display:flex;max-width:560px}
.o-tim input{flex:1;padding:10px 12px;border:1px solid var(--vien);border-right:0;border-radius:var(--bo) 0 0 var(--bo);font:inherit}
.o-tim button{padding:10px 20px;border:0;background:var(--xanh);color:#fff;border-radius:0 var(--bo) var(--bo) 0;cursor:pointer;font:inherit}
.thanh-menu{background:var(--xanh);overflow-x:auto}
.thanh-menu .dai{display:flex;gap:2px;white-space:nowrap}
.thanh-menu a{color:#fff;padding:10px 12px;font-size:.9rem}
.thanh-menu a:hover{background:var(--xanh-dam);text-decoration:none}

/* Khối chung */
main{padding:20px 16px 48px}
.khoi{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:16px;margin:16px 0}
.khoi-dau{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.hai-cot{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.giua-doc{text-align:center;padding:60px 20px}
.ma-loi{font-size:3rem;font-weight:700;color:var(--xanh);margin:0}
.dan{color:var(--chu-mo);max-width:70ch}
.dem{margin:12px 0}
.dem-nho{background:var(--xanh-nhat);color:var(--xanh-dam);border-radius:999px;padding:2px 10px;font-size:.85rem;vertical-align:middle}

/* Lưới thẻ */
.luoi{display:grid;gap:12px}
.luoi-6{grid-template-columns:repeat(6,1fr)}
.luoi-4{grid-template-columns:repeat(4,1fr)}
.luoi-3{grid-template-columns:repeat(3,1fr)}
.the{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:10px;color:var(--chu);display:block}
.the:hover{border-color:var(--xanh-tuoi);text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.the strong{display:block;font-size:.92rem;margin:6px 0 2px;line-height:1.35}
.the small{display:block;color:var(--chu-mo);font-size:.8rem}
.the-sp .anh{position:relative;aspect-ratio:1;background:var(--nen);border-radius:6px;overflow:hidden}
.the-sp .anh img{width:100%;height:100%;object-fit:cover}
.the-sp .gia{color:var(--cam-dam);font-weight:700}
.the-gh img{height:64px;object-fit:contain;margin:0 auto}
.the-tin img{aspect-ratio:16/9;object-fit:cover;border-radius:6px;width:100%}

/* Nhãn */
.nhan{display:inline-block;background:var(--nen);border:1px solid var(--vien);border-radius:999px;padding:1px 8px;font-size:.72rem;color:var(--chu-mo)}
.nhan-ocop{background:var(--cam);color:#3d2100;border-color:var(--cam);font-weight:600}
.nhan-tx{background:var(--la);color:#fff;border-color:var(--la)}
.nhan-xt{background:var(--la-nhat);color:var(--la);border-color:var(--la)}
.nhan-loi{background:var(--do-nhat);color:var(--do);border-color:var(--do)}
.nhan-nv{background:var(--vang-nhat);color:#8a5a00;border-color:var(--vang)}
.the-sp .nhan{position:absolute;top:6px;left:6px}
.the-sp .nhan-tx{top:6px;left:auto;right:6px}

/* Bảng số liệu trang chủ */
.bang-so{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.bang-so div{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:14px;text-align:center}
.bang-so strong{display:block;font-size:1.7rem;color:var(--xanh)}
.bang-so span{font-size:.85rem;color:var(--chu-mo)}
.bang-ron{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}

/* Danh sách */
.ds-tin{list-style:none;padding:0;margin:0}
.ds-tin li{border-bottom:1px solid var(--vien)}
.ds-tin a{display:flex;gap:10px;padding:10px 0;color:var(--chu)}
.ds-tin img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.ds-vb{list-style:none;padding:0;margin:0}
.ds-vb li{padding:8px 0;border-bottom:1px solid var(--vien);font-size:.92rem}
.the-nho{background:var(--xanh-nhat);color:var(--xanh-dam);border-radius:4px;padding:1px 6px;font-size:.78rem;margin-right:6px}

/* Bộ lọc, biểu mẫu */
.bo-loc{display:flex;flex-wrap:wrap;gap:12px;align-items:end;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:12px}
.bo-loc label{font-size:.85rem;color:var(--chu-mo);display:flex;flex-direction:column;gap:3px}
.bo-loc input,.bo-loc select,.form-gon input,.form-gon select{padding:7px 9px;border:1px solid var(--vien);border-radius:6px;font:inherit}
.bo-loc button{padding:8px 18px;background:var(--xanh);color:#fff;border:0;border-radius:6px;cursor:pointer;font:inherit}
.form-gon{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.the-form{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:24px;max-width:420px;margin:24px auto}
.the-form label{display:block;margin:12px 0 4px;font-size:.9rem}
.the-form input{width:100%;padding:10px;border:1px solid var(--vien);border-radius:6px;font:inherit}

/* Mã xác nhận ở trang đăng nhập.
   Ảnh và ô nhập nằm cùng một hàng và cùng chiều cao: đặt lệch nhau thì mắt
   phải nhảy hai lần cho một việc. Ô nhập hẹp lại đúng bằng chỗ cần cho ba ký
   tự — ô rộng bằng cả biểu mẫu làm người dùng tưởng phải gõ nhiều hơn.
   Chữ trong ô giãn cách và viết hoa sẵn để đối chiếu với ảnh cho nhanh. */
.hang-ma-xac-nhan{display:flex;gap:12px;align-items:stretch;margin-top:4px}
.anh-ma-xac-nhan{display:block;height:48px;width:auto;border:1px solid var(--vien);border-radius:6px;background:var(--trang);flex:0 0 auto}
.the-form .o-ma-xac-nhan{width:9ch;flex:0 0 auto;text-transform:uppercase;letter-spacing:.28em;font-size:1.15rem;text-align:center}

/* Chỗ trống cho thông tin bắt buộc công khai nhưng chưa được khai.
   Vẽ thành một dải gạch chân thay vì để trắng hẳn: khoảng trắng trông giống
   lỗi hiển thị, còn dải gạch chân đọc ra ngay là "chỗ này còn phải điền" —
   đúng như một dòng để trống trên biểu mẫu giấy. */
.cho-trong{display:inline-block;min-width:12ch;border-bottom:1px dotted currentColor;opacity:.45;vertical-align:baseline}
.nut{display:inline-block;background:var(--xanh);color:#fff;border:0;border-radius:6px;padding:10px 20px;cursor:pointer;font:inherit;margin-top:14px}
.nut:hover{background:var(--xanh-dam);text-decoration:none}
.nut-ok{background:var(--xanh)}
.nut-loi{background:var(--do)}
.nut-nho{padding:6px 12px;margin:0}
.nut-hang{display:flex;gap:8px;margin-top:8px}
textarea{width:100%;padding:8px;border:1px solid var(--vien);border-radius:6px;font:inherit}

/* Bảng */
.bang{width:100%;border-collapse:collapse;background:var(--trang);font-size:.9rem}
.bang th,.bang td{border:1px solid var(--vien);padding:8px 10px;text-align:left;vertical-align:top}
.bang th{background:var(--nen);font-weight:600}
.cuon-ngang{overflow-x:auto}

/* Ma trận phân quyền — tên vai trò nằm ngang, ô quyền là ô tích [x]/[ ]
   Khung cuộn có chiều cao giới hạn để position:sticky bám được cả hai chiều:
   cột "Quyền" ghim bên trái, hàng tên vai trò ghim bên trên. */
.cuon-ma-tran{overflow:auto;max-height:calc(100vh - 250px);border:1px solid var(--vien);border-radius:var(--bo);background:var(--trang)}
.cuon-ma-tran:focus-visible{outline:2px solid var(--xanh);outline-offset:2px}
/* Thanh trượt ngang đủ dày để bấm trúng bằng chuột */
.cuon-ma-tran::-webkit-scrollbar{height:14px;width:14px}
.cuon-ma-tran::-webkit-scrollbar-thumb{background:#b9c2d0;border-radius:7px;border:3px solid var(--trang)}
.cuon-ma-tran::-webkit-scrollbar-thumb:hover{background:#95a1b3}
.cuon-ma-tran::-webkit-scrollbar-track{background:var(--nen)}
.cuon-ma-tran{scrollbar-color:#b9c2d0 var(--nen)}

.bang-ma-tran{border-collapse:separate;border-spacing:0}
.bang-ma-tran th,.bang-ma-tran td{border:0;border-right:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.bang-ma-tran .cot-quyen{min-width:268px;width:268px;position:sticky;left:0;z-index:2;background:var(--trang);
  box-shadow:1px 0 0 var(--vien)}
.bang-ma-tran thead th{position:sticky;top:0;z-index:3;background:var(--nen);vertical-align:bottom}
.bang-ma-tran thead .cot-quyen{z-index:4;background:var(--nen)}
.bang-ma-tran thead .cot-quyen small{display:block;font-weight:400;color:var(--chu-mo);font-size:.72rem}
.bang-ma-tran .cot-vt{width:124px;min-width:124px;max-width:124px;text-align:center;padding:8px 6px}
.bang-ma-tran .cot-vt .vt-ten{display:block;font-size:.82rem;line-height:1.25;font-weight:600;
  white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.bang-ma-tran .cot-vt small{display:block;font-weight:400;color:var(--chu-mo);font-size:.68rem;margin-top:3px}
.bang-ma-tran tbody tr:hover td{background:#fbfcfe}
.bang-ma-tran tbody tr:hover .cot-quyen{background:#fbfcfe}

.o-quyen{text-align:center;vertical-align:middle;padding:6px 4px}
.o-quyen small{display:block;font-size:.62rem;color:var(--chu-mo);line-height:1.2;margin-top:2px}
.o-tich-doc{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.95rem;
  font-weight:700;letter-spacing:-.5px;white-space:nowrap}
.o-cho{background:var(--la-nhat)}
.o-cho .o-tich-doc{color:var(--la)}
.o-chan{background:var(--do-nhat)}
.o-chan .o-tich-doc{color:var(--do)}
.o-trong .o-tich-doc{color:#c2c9d4}
.o-tich-cho{color:var(--la)}
.o-tich-chan{color:var(--do)}
.o-tich-trong{color:#c2c9d4}
.chu-dan-ma-tran{margin:10px 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}

.hang-nhom td{background:#f3f4f6;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.5px}
/* Tên nhóm trượt theo để kéo ngang giữa bảng vẫn biết đang ở nhóm nào */
.hang-nhom .nhom-dinh{position:sticky;left:10px;display:inline-block}
.rr-cao{border-left:3px solid var(--vang)}
.rr-rc{border-left:3px solid var(--do)}

/* Bộ chọn vai trò hiển thị */
.loc-ma-tran{align-items:start}
.chon-cot{border:1px solid var(--vien);border-radius:6px;padding:6px 10px;background:var(--trang);max-width:640px}
.chon-cot summary{cursor:pointer;font-size:.88rem;font-weight:600}
.chon-cot p{margin:6px 0}
.luoi-chon-vt{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;margin:6px 0 4px}
/* Ghi đè .bo-loc label (cột dọc) cho riêng các ô tích trong hộp chọn vai trò */
.bo-loc .o-tich,.o-tich{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:.85rem;color:var(--chu)}
.bo-loc .o-tich input,.o-tich input{margin:0;padding:0;width:auto;flex:0 0 auto}
.o-tich small{color:var(--chu-mo)}

@media print{
  .cuon-ma-tran{overflow:visible;max-height:none;border:0}
  .bang-ma-tran .cot-quyen,.bang-ma-tran thead th{position:static}
  .bang-ma-tran{font-size:.62rem}
  .bang-ma-tran .cot-vt{width:auto;min-width:0;max-width:none}
}

/* Thông báo */
.bao{padding:10px 14px;border-radius:var(--bo);margin:10px 0;font-size:.92rem}
.bao-ok{background:var(--la-nhat);color:var(--la);border:1px solid var(--la)}
.bao-loi{background:var(--do-nhat);color:var(--do);border:1px solid var(--do)}
.bao-canh{background:var(--vang-nhat);color:#8a5a00;border:1px solid var(--vang)}
.bao ul{margin:0;padding-left:18px}

/* Chi tiết */
.duong-dan{font-size:.85rem;color:var(--chu-mo);margin:10px 0}
.sp-chi-tiet{display:grid;grid-template-columns:400px 1fr;gap:24px;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:20px}
.sp-anh img{border-radius:var(--bo);width:100%;aspect-ratio:1;object-fit:cover}
.sp-gia{font-size:1.6rem;color:var(--do);font-weight:700;margin:8px 0}
.bang-tt{display:grid;grid-template-columns:180px 1fr;gap:6px 12px;margin:14px 0;font-size:.92rem}
.bang-tt dt{color:var(--chu-mo)}
.bang-tt dd{margin:0}
    .hop-truy-xuat{background:var(--la-nhat);border-radius:var(--bo);padding:12px;margin-top:14px}
.hop-truy-xuat h2{margin-top:0;font-size:1rem}
.noi-dung-html img{border-radius:6px;margin:10px 0}
.noi-dung-html table{border-collapse:collapse}
.noi-dung-html td,.noi-dung-html th{border:1px solid var(--vien);padding:6px}
.gh-dau{display:flex;gap:18px;align-items:center;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:18px;margin-top:12px}
.gh-dau img{width:96px;height:96px;object-fit:contain}
.bai-viet{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:24px;max-width:80ch;margin:12px auto}
.bai-viet .meta{color:var(--chu-mo);font-size:.85rem}
.tom-tat{font-weight:600}
.danh-gia{border-top:1px solid var(--vien);padding:10px 0}
.sao{color:var(--cam)}
.xanh{color:var(--la)}

/* Truy xuất */
.o-tra-cuu{display:flex;gap:8px;max-width:520px;margin:16px 0}
.o-tra-cuu input{flex:1;padding:12px;border:1px solid var(--vien);border-radius:6px;font:inherit}
.o-tra-cuu button{padding:12px 24px;background:var(--xanh);color:#fff;border:0;border-radius:6px;cursor:pointer;font:inherit}
.doc-thoi-gian{list-style:none;padding:0;margin:0;border-left:3px solid var(--la);padding-left:18px}
.doc-thoi-gian li{position:relative;padding-bottom:18px}
.doc-thoi-gian li::before{content:"";position:absolute;left:-25px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--la)}
.moc{font-weight:700;color:var(--la)}
.doc-thoi-gian time{color:var(--chu-mo);font-size:.85rem;margin-left:8px}
.doc-thoi-gian p{margin:2px 0}

/* Tab, phân trang */
.tab{display:flex;gap:4px;flex-wrap:wrap;margin:12px 0;border-bottom:1px solid var(--vien)}
.tab a{padding:8px 14px;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;font-size:.9rem}
.tab a.dang{background:var(--trang);border-color:var(--vien);color:var(--chu);font-weight:600}
.phan-trang{display:flex;gap:6px;justify-content:center;margin:20px 0}
.phan-trang a{padding:7px 13px;border:1px solid var(--vien);border-radius:6px;background:var(--trang)}
.phan-trang a.dang{background:var(--xanh);color:#fff;border-color:var(--xanh)}

/* Chân trang */
.chan-trang{background:var(--xanh-tham);color:#d6e6dc;margin-top:40px;padding:28px 0 16px}
.chan-trang a{color:#d6e6dc}
.chan-trang h3{color:#fff;font-size:.95rem;margin:0 0 8px}
.luoi-chan{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.luoi-chan ul{list-style:none;padding:0;margin:0}
.luoi-chan li{padding:3px 0;font-size:.88rem}
.chan-duoi{border-top:1px solid #17603a;margin-top:20px;padding-top:12px;font-size:.85rem}

/* Quản trị */
.qt{background:var(--nen)}
.nen-mo{background:var(--nen)}
.khung-hep{max-width:520px;margin:0 auto;padding:40px 16px;text-align:center}
.giua{justify-content:center;margin-bottom:20px}











.o-so .o{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:16px}
.o-so strong{display:block;font-size:1.8rem;color:var(--xanh-dam)}
.o-so span{font-size:.85rem;color:var(--chu-mo)}
.the-duyet{display:grid;grid-template-columns:auto 1fr 320px;gap:14px;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:14px;margin:10px 0}
.the-duyet .anh-nho{width:84px;height:84px;object-fit:cover;border-radius:6px}
.the-duyet h2{margin:0 0 4px;font-size:1.05rem}

@media (max-width:1000px){
  .luoi-6{grid-template-columns:repeat(3,1fr)}
  .luoi-4{grid-template-columns:repeat(2,1fr)}
  .luoi-3,.hai-cot,.bang-ron{grid-template-columns:1fr 1fr}
  .sp-chi-tiet{grid-template-columns:1fr}
  
  .the-duyet{grid-template-columns:1fr}
  .luoi-chan{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .luoi-6,.luoi-4,.luoi-3,.hai-cot,.bang-so,.bang-ron,.luoi-chan{grid-template-columns:1fr 1fr}
  .dau-chinh{flex-direction:column;align-items:stretch}
  .bang-tt{grid-template-columns:1fr}
}
@media print{.thanh-menu,.qt-dau,.bo-loc,.hanh-dong,.chan-trang,.khong-in{display:none!important}
  .qt-noi-dung{padding:0}body{background:#fff}}


/* =====================================================================
   V2.0 — Core-App: biểu đồ, module, nhắc việc, trợ lý
   ===================================================================== */

/* Biểu đồ tự vẽ */
.bd{width:100%;height:auto;display:block}
.bd-nhan{display:flex;justify-content:space-between;font-size:.75rem;color:var(--chu-mo);margin-top:4px}
.bd-cot{display:flex;align-items:flex-end;gap:6px;height:var(--cao,140px);margin:10px 0 0}
.bd-cot-i{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px}
.bd-cot-v{font-size:.68rem;color:var(--chu-mo)}
.bd-cot-b{width:100%;border-radius:4px 4px 0 0;min-height:2px;transition:opacity .15s}
.bd-cot-i:hover .bd-cot-b{opacity:.75}
.bd-cot-n{font-size:.68rem;color:var(--chu-mo);white-space:nowrap}
.thanh-ds{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.thanh-i{display:grid;grid-template-columns:170px 1fr 70px;align-items:center;gap:10px;font-size:.85rem}
.thanh-n{color:var(--chu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thanh-b{background:var(--nen);border-radius:99px;height:14px;overflow:hidden}
.thanh-b i{display:block;height:100%;border-radius:99px}
.thanh-v{text-align:right;color:var(--chu-mo)}
.xu-huong{font-size:.78rem;font-weight:600}
.xu-huong.tang{color:var(--la)}
.xu-huong.giam{color:var(--do)}

/* Ô số liệu */
.o-nhan{display:block;font-size:.8rem;color:var(--chu-mo);margin-bottom:2px}
.o-so .o{display:flex;flex-direction:column;gap:2px}

/* Module */
.luoi-module .the-module{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:14px}
.the-module.mod-tat{opacity:.62;border-style:dashed}
.mod-dau{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.mod-icon{font-size:1.2rem}
.mod-trang-thai{margin-left:auto;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--la-nhat);color:var(--la)}
.mod-tat .mod-trang-thai{background:var(--nen);color:var(--chu-mo)}
.the-module p{font-size:.85rem;color:var(--chu-mo);margin:4px 0}
.mod-form{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.mod-form input{flex:1;min-width:120px;padding:6px 8px;border:1px solid var(--vien);border-radius:6px;font:inherit;font-size:.85rem}

/* Nhắc việc */
.dau-trang-qt{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.nhac-i{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--vien)}
.nhac-i.chua-doc{background:linear-gradient(90deg,var(--xanh-nhat),transparent 60%);padding-left:10px;border-left:3px solid var(--xanh)}
.nhac-khan.chua-doc{background:linear-gradient(90deg,var(--do-nhat),transparent 60%);border-left-color:var(--do)}
.nhac-i strong{display:block}
.nhac-i p{margin:2px 0;font-size:.87rem;color:var(--chu-mo)}
.nhac-nut{display:flex;gap:6px;align-items:flex-start;white-space:nowrap}
/* Chuông nhắc việc — khai một chỗ duy nhất, xem chú thích ở tools/kiem-tra-css.php */
.chuong{position:relative;display:flex;align-items:center;font-size:1.15rem;text-decoration:none}
.chuong-so{position:absolute;top:-6px;right:-9px;background:var(--do);color:#fff;border-radius:99px;font-size:.65rem;padding:1px 5px;font-weight:700}

/* Nhật ký */
.hang-canh{background:var(--vang-nhat)}
.hang-loi{background:var(--do-nhat)}
.o-chi-tiet{max-width:320px;font-size:.78rem;color:var(--chu-mo)}

/* Tìm kiếm nâng cao */
.bo-loc-rong{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-items:end}
.bo-loc-rong button{grid-column:span 1}
.bo-luu{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.bo-luu .the-nho{cursor:pointer;text-decoration:none}
.khoi-ok{border-left:4px solid var(--la)}
.khoi-loi{border-left:4px solid var(--do)}
.form-nhap{display:flex;flex-direction:column;gap:7px;margin:10px 0;font-size:.87rem}

/* Trợ lý hỏi đáp */
.tro-ly-nut{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;border:0;
  background:var(--xanh);color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.22);z-index:60}
.tro-ly-nut:hover{background:var(--xanh-dam)}
.tro-ly{position:fixed;right:20px;bottom:84px;width:390px;max-width:calc(100vw - 32px);max-height:min(560px,72vh);
  background:var(--trang);border:1px solid var(--vien);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.18);
  display:flex;flex-direction:column;z-index:61;overflow:hidden}
/* Thuộc tính hidden của HTML bị display:flex ở trên đè mất, nên hộp trợ lý
   luôn mở và che nội dung trang. Khai lại tường minh cho chắc. */
.tro-ly[hidden]{display:none}
.tl-dau{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:var(--xanh);color:#fff}
.tl-dau button{background:none;border:0;color:#fff;font-size:1.05rem;cursor:pointer}
.tl-noi-dung{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.tl-bong{padding:9px 12px;border-radius:12px;font-size:.88rem;line-height:1.55;max-width:92%;white-space:pre-wrap}
.tl-bot{background:var(--nen);align-self:flex-start;border-bottom-left-radius:3px}
.tl-nguoi{background:var(--xanh);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.tl-bong strong{font-weight:700}
.tl-bong code{background:rgba(0,0,0,.06);padding:0 4px;border-radius:3px}
.tl-goi-y{display:flex;flex-wrap:wrap;gap:6px}
.tl-goi{background:var(--xanh-nhat);border:1px solid var(--vien);border-radius:99px;padding:5px 11px;
  font-size:.79rem;cursor:pointer;color:var(--xanh-dam);font-family:inherit}
.tl-goi:hover{background:var(--xanh);color:#fff}
.tl-form{display:flex;gap:6px;padding:10px;border-top:1px solid var(--vien)}
.tl-form input{flex:1;padding:9px 11px;border:1px solid var(--vien);border-radius:8px;font:inherit}
.tl-form button{padding:9px 16px;background:var(--xanh);color:#fff;border:0;border-radius:8px;cursor:pointer;font:inherit}
.tl-chan{margin:0;padding:0 12px 9px;font-size:.7rem;color:var(--chu-mo);text-align:center}
.tl-nguon{font-size:.7rem;color:var(--chu-mo);margin-top:3px}
@media (max-width:600px){
  .tro-ly{right:8px;left:8px;width:auto;bottom:76px}
  .thanh-i{grid-template-columns:110px 1fr 56px}
  .luoi-2{grid-template-columns:1fr}
}

/* Hộp báo trạng thái cho trang quy chế chưa có nội dung chính thức. */
.hop-canh-bao{background:var(--vang-nhat);border-left:4px solid var(--vang);
  border-radius:var(--bo);padding:14px 16px;margin:14px 0}
.hop-canh-bao strong{display:block;margin-bottom:6px;color:#7a4d00}
.hop-canh-bao p{margin:.5rem 0}

/* ── Trang truy xuất: thẻ lô hàng + mã QR ───────────────────────────── */
.the-lo{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.lo-trai{flex:1 1 420px;min-width:0}
.lo-qr{flex:0 0 200px;text-align:center;background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo);padding:12px}
.lo-qr img{width:180px;height:180px;margin:0 auto;background:#fff}
.lo-qr .ma-tem{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}
.nut-phu{display:inline-block;margin-top:6px;padding:7px 14px;border:1px solid var(--xanh);
  border-radius:8px;color:var(--xanh);background:var(--trang);font-size:.85rem}
.nut-phu:hover{background:var(--xanh-nhat);text-decoration:none}

/* ── Hành trình lô hàng ─────────────────────────────────────────────── */
.hanh-trinh{list-style:none;margin:16px 0 0;padding:0;position:relative}
.hanh-trinh::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(var(--la),var(--xanh))}
.hanh-trinh>li{position:relative;padding:0 0 20px 54px}
.moc-so{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--la);color:#fff;font-weight:800;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 4px var(--nen)}
.moc-thu-hoi .moc-so{background:var(--do)}
.moc-dut  .moc-so{background:var(--vang)}
.moc-than{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:12px 14px}
.moc-thu-hoi .moc-than{border-color:var(--do);background:var(--do-nhat)}
.moc-dut  .moc-than{border-color:var(--vang);background:var(--vang-nhat)}
.moc-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.moc-dau h3{margin:0;font-size:1.02rem}
.moc-dau time{margin-left:auto;color:var(--chu-mo);font-size:.85rem}
.moc-icon{width:22px;height:22px;color:var(--la);flex:0 0 22px}
.moc-thu-hoi .moc-icon{color:var(--do)}
.moc-chinh{margin:.2rem 0 .5rem}
.bang-vet{width:100%;border-collapse:collapse;font-size:.84rem;margin:.4rem 0}
.bang-vet th,.bang-vet td{border-top:1px solid var(--vien);padding:4px 6px;text-align:left;vertical-align:top}
.bang-vet th{width:44%;font-weight:600;color:var(--chu-mo);white-space:nowrap}
@media(max-width:640px){
  .bang-vet th{width:50%;white-space:normal}
  .lo-qr{flex:1 1 100%}
}
.moc-chan{margin:.4rem 0 0;color:var(--chu-mo)}
.bao-lon{font-size:1.05rem;padding:14px 16px}
.bao-canh{background:var(--vang-nhat);border-left:4px solid var(--vang);padding:12px 14px;
  border-radius:var(--bo);margin:10px 0}
.do{color:var(--do)}
.an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ KHUNG QUẢN TRỊ — THANH ĐIỀU HƯỚNG NGANG ═══════════════════════ */
.qt{background:var(--nen)}
.ic{width:18px;height:18px;flex:0 0 18px}

.qt-dau{position:sticky;top:0;z-index:60;background:var(--xanh-dam);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,.14)}
.qt-dau a{color:#fff}
.qt-logo{display:flex;gap:9px;align-items:center;font-weight:700;min-width:0}
.qt-logo-chu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.qt-nguoi{display:flex;gap:12px;align-items:center;font-size:.86rem;flex:0 0 auto}
.qt-nguoi .nut-lien-ket{color:#fff;text-decoration:underline;background:none;border:0;
  cursor:pointer;font:inherit}
.qt-ten{opacity:.92;white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.qt-xem-san{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;
  background:rgba(255,255,255,.17);white-space:nowrap}
.qt-xem-san:hover{background:rgba(255,255,255,.3);text-decoration:none}
.chuong-so{position:absolute;top:-6px;right:-8px;background:var(--do);color:#fff;
  font-size:.66rem;font-weight:700;border-radius:99px;padding:1px 5px;line-height:1.5}

/* ── Thân: menu dọc bên trái + nội dung bên phải ─────────────────── */
.qt-than{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start}

/* Menu DÍNH cố định, không trôi theo nội dung; tự cuộn nếu quá dài. */
.qt-canh{position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);
  overflow-y:auto;background:var(--trang);border-right:1px solid var(--vien);
  padding:10px 0 24px}
.qt-canh a{display:flex;align-items:center;gap:9px;padding:9px 16px;color:var(--chu);
  font-size:.9rem;border-left:3px solid transparent}
.qt-canh a:hover{background:var(--xanh-nhat);text-decoration:none}
.qt-canh a .ic{color:var(--chu-mo)}

/* Mục đang xem: giữ nguyên màu, không mất khi rê chuột chỗ khác. */
.qt-canh a.muc-dang-xem{background:var(--xanh);color:#fff;font-weight:600;
  border-left-color:var(--vang)}
.qt-canh a.muc-dang-xem:hover{background:var(--xanh)}
.qt-canh a.muc-dang-xem .ic{color:#fff}

.qt-nhom{display:block;padding:15px 16px 5px;font-size:.71rem;text-transform:uppercase;
  letter-spacing:.7px;color:var(--chu-mo);font-weight:700}

.qt-noi-dung{padding:20px 24px 60px;min-width:0}

@media(max-width:1080px){
  .qt-than{grid-template-columns:200px minmax(0,1fr)}
  .qt-xem-san span,.qt-ten{display:none}
}
@media(max-width:820px){
  .qt-than{grid-template-columns:1fr}
  .qt-canh{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--vien);
    display:flex;flex-wrap:wrap;gap:4px;padding:8px}
  .qt-canh a{border-left:0;border-radius:8px;padding:7px 11px}
  .qt-nhom{width:100%;padding:8px 6px 2px}
  .qt-noi-dung{padding:14px 12px 50px}
}

/* ═══ DỮ LIỆU NỀN — danh sách và biểu mẫu ═══════════════════════════ */
/* Đầu mỗi màn hình quản trị. Trước đây dùng lại tên .dau-trang của đầu trang
   công khai — hai luật đè nhau, biến <header> trang ngoài thành hộp flex và
   thanh ngành hàng bị co lại. Đổi tên riêng để hết đụng độ. */
.dau-muc{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.dau-muc h1{margin:0 0 4px}
.hanh-dong{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dem-nho{font-size:.8rem;font-weight:500;color:var(--chu-mo);margin-left:8px}
.bang-cuon{overflow-x:auto;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo)}
.bang-du-lieu{width:100%;border-collapse:collapse;font-size:.9rem}
.bang-du-lieu th,.bang-du-lieu td{padding:9px 11px;text-align:left;border-top:1px solid var(--vien);vertical-align:middle}
.bang-du-lieu thead th{background:var(--xanh-nhat);color:var(--xanh);border-top:0;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.bang-du-lieu tbody tr:hover{background:#fafbfd}
.o-anh{width:44px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--vien);background:#fff}
.ten-chinh{font-weight:600}
.o-thao-tac{white-space:nowrap}
.o-thao-tac .nut-nho{margin-right:4px}
.tt{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:700;white-space:nowrap}
.tt-ok{background:var(--la-nhat);color:var(--la)}
.tt-cho{background:var(--cam-nhat);color:var(--cam-dam)}
.tt-nhap{background:#eef0f4;color:var(--chu-mo)}
.tt-loi{background:var(--do-nhat);color:var(--do)}
.tt-ngung{background:#e9ecf1;color:#6b7280}
.tt-khac{background:var(--xanh-nhat);color:var(--xanh)}
.dau-co{color:var(--la);font-weight:700}
.dau-khong{color:var(--chu-mo)}
.nhan-ocop{background:var(--cam-dam);color:#fff;padding:2px 8px;border-radius:99px;font-size:.74rem;font-weight:700}
.trong-rong{text-align:center;padding:36px 20px;color:var(--chu-mo)}
.phan-trang{display:flex;gap:6px;align-items:center;margin-top:12px;flex-wrap:wrap}
.phan-trang a{padding:5px 11px;border:1px solid var(--vien);border-radius:7px;background:var(--trang)}
.phan-trang a.dang-o{background:var(--xanh);color:#fff;border-color:var(--xanh)}

.bieu-mau{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:18px}
.luoi-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 18px}
.o-form{display:flex;flex-direction:column;gap:5px;min-width:0}
.o-form.o-rong{grid-column:1/-1}
.o-form label{font-size:.86rem;font-weight:600}
.o-form input[type=text],.o-form input[type=number],.o-form input[type=date],
.o-form select,.o-form textarea{padding:8px 11px;border:1px solid var(--vien);border-radius:8px;
  font:inherit;font-size:.92rem;background:var(--trang);width:100%}
.o-form input:focus,.o-form select:focus,.o-form textarea:focus{outline:2px solid var(--xanh);
  outline-offset:-1px;border-color:var(--xanh)}
.sao-bb{color:var(--do)}
.goi-y{margin:0;font-size:.78rem;color:var(--chu-mo)}
.o-anh-sua{display:flex;gap:10px;align-items:center}
.o-anh-sua img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--vien);flex:0 0 72px}
.chan-form{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--vien)}
.luoi-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}

/* Công tắc trong biểu mẫu */
.cong-tac{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.cong-tac input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.cong-tac-nut{width:44px;height:25px;border-radius:99px;background:#cbd2dc;position:relative;
  transition:background .16s;flex:0 0 44px}
.cong-tac-nut::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:#fff;transition:transform .16s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cong-tac input:checked + .cong-tac-nut{background:var(--la)}
.cong-tac input:checked + .cong-tac-nut::after{transform:translateX(19px)}
.cong-tac input:focus-visible + .cong-tac-nut{outline:2px solid var(--xanh);outline-offset:2px}

/* ═══ MÀN HÌNH BẬT TẮT MODULE ══════════════════════════════════════ */
.the-dong-ho{background:var(--vang-nhat);color:var(--vang);padding:6px 12px;border-radius:99px;
  font-size:.82rem;font-weight:600}
.mod-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.mod-ly-do{flex:1 1 150px;min-width:120px;padding:7px 10px;border:1px solid var(--vien);
  border-radius:7px;font:inherit;font-size:.84rem}
.cong-tac-gat{display:flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  font:inherit;padding:0}
.gat-ray{width:50px;height:28px;border-radius:99px;position:relative;transition:background .16s;
  flex:0 0 50px;display:block}
.gat-nut{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  transition:left .16s;box-shadow:0 1px 4px rgba(0,0,0,.35);display:block}
.gat-bat .gat-ray{background:var(--la)}
.gat-bat .gat-nut{left:25px}
.gat-tat .gat-ray{background:#c3cad5}
.gat-tat .gat-nut{left:3px}
.gat-chu{font-size:.74rem;font-weight:800;letter-spacing:.4px}
.gat-bat .gat-chu{color:var(--la)}
.gat-tat .gat-chu{color:var(--chu-mo)}
.cong-tac-gat:hover .gat-ray{filter:brightness(.94)}
.cong-tac-gat:focus-visible .gat-ray{outline:2px solid var(--xanh);outline-offset:2px}

.the-khoa{max-width:600px;margin:6vh auto;background:var(--trang);border:1px solid var(--vien);
  border-radius:var(--bo);padding:30px 32px;text-align:center}
.khoa-hinh{width:62px;height:62px;margin:0 auto 14px;color:var(--vang);
  background:var(--vang-nhat);border-radius:50%;display:flex;align-items:center;justify-content:center}
.khoa-hinh svg{width:32px;height:32px}
.the-khoa h1{font-size:1.3rem;margin:0 0 10px}
.the-khoa .dan{text-align:left}
.khoa-form{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:340px;
  margin:18px auto;text-align:left}
.khoa-form input{padding:10px 12px;border:1px solid var(--vien);border-radius:8px;font:inherit}
.khoa-ghi-chu{text-align:left;margin:16px 0 0;padding-left:20px}
.khoa-ghi-chu li{margin:.35rem 0}

/* ═══ BẢNG ĐIỀU KHIỂN — nhãn chế độ và nhãn cảnh báo ═══════════════ */
.bang-che-do{background:var(--vang-nhat);border-left:4px solid var(--vang);border-radius:var(--bo);
  padding:11px 15px;margin-bottom:16px;font-size:.9rem}
.nhan-che-do{display:inline-block;background:var(--vang);color:#fff;font-weight:800;font-size:.72rem;
  letter-spacing:.6px;padding:2px 9px;border-radius:99px;margin-right:8px}
.bao-co-nhan{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.bao-chu{flex:1 1 300px;min-width:0}
.nh{font-weight:800;font-size:.78rem;white-space:nowrap}
.nh-chua{color:var(--do)} .nh-canh{color:var(--vang)}
.nh-qua{color:#b35309}   .nh-suco{color:var(--do)}
.bao-xem{font-weight:600;white-space:nowrap}
.bao-ai{flex:1 1 100%;color:var(--chu-mo)}
.the-mk-tam{background:var(--vang-nhat);border:2px solid var(--vang);border-radius:var(--bo);
  padding:16px 18px;margin-bottom:16px}
.the-mk-tam h2{margin:0 0 8px;font-size:1rem}
.mk-hien{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;font-weight:700;
  letter-spacing:1.5px;background:#fff;border:1px dashed var(--vang);border-radius:8px;
  padding:10px 14px;margin:6px 0;user-select:all;word-break:break-all}
.ds-vai-tro{margin:.4rem 0;padding-left:18px}
.ds-vai-tro li{margin:.3rem 0}
.o-tem{display:flex;gap:8px;align-items:center}
.o-tem img{width:66px;height:66px;border:1px solid var(--vien);border-radius:6px;background:#fff}
.o-tem .nut-nho{display:block;margin-bottom:4px;text-align:center}
.the-tem-lo{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.the-tem-lo img{border:1px solid var(--vien);border-radius:10px;background:#fff;flex:0 0 150px}
.the-tem-lo h2{margin:0 0 6px;font-size:1.05rem}
.ma-tem-chu{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;
  word-break:break-all;margin:.2rem 0 .5rem;color:var(--chu-mo)}

/* =====================================================================
   V2.8 — Giao diện và nội dung: bộ chọn tông màu
   ===================================================================== */
.luoi-bang-mau{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:12px}
.the-mau{display:block;border:2px solid var(--vien);border-radius:var(--bo);padding:12px;cursor:pointer;
  background:var(--trang);transition:border-color .12s,box-shadow .12s}
.the-mau:hover{border-color:var(--xanh-tuoi)}
.the-mau-chon{border-color:var(--xanh);box-shadow:0 0 0 3px var(--xanh-nhat)}
.the-mau input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.the-mau-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.the-mau-dau strong{font-size:.98rem}
.the-mau-tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--vien);color:transparent;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;flex:0 0 auto}
.the-mau-chon .the-mau-tick{background:var(--xanh);border-color:var(--xanh);color:#fff}
.the-mau-ta{display:block;margin-top:8px}
.the-mau-so{display:block;margin-top:4px;font-size:.78rem}

/* Ô xem thử — dựng lại đầu trang, nút và thẻ sản phẩm bằng đúng bộ màu */
.xem-thu{display:block;border:1px solid var(--v);border-radius:8px;overflow:hidden;background:var(--nn);font-size:.7rem}
.xt-dau{display:flex;align-items:center;gap:6px;background:#fff;padding:6px 8px;font-weight:700;color:#1f2933;
  border-bottom:1px solid var(--v)}
.xt-logo{background:var(--xt);color:#fff;border-radius:4px;padding:2px 5px;font-size:.62rem}
.xt-menu{display:flex;gap:10px;background:var(--x);padding:7px 8px}
.xt-menu i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.85)}
.xt-menu i:nth-child(1){width:36px}.xt-menu i:nth-child(2){width:28px}
.xt-menu i:nth-child(3){width:44px}.xt-menu i:nth-child(4){width:24px}
.xt-than{display:flex;gap:8px;padding:8px}
.xt-the{flex:0 0 74px;background:#fff;border:1px solid var(--v);border-radius:6px;padding:5px}
.xt-anh{display:block;height:38px;border-radius:4px;background:linear-gradient(135deg,var(--xt),var(--x))}
.xt-ten{display:block;height:5px;width:80%;border-radius:3px;background:#d6dbe2;margin:5px 0 4px}
.xt-gia{display:block;color:var(--nd);font-weight:700;font-size:.68rem}
.xt-phai{flex:1;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.xt-nut{background:var(--x);color:#fff;border-radius:4px;padding:4px 10px;font-weight:600}
.xt-nhan{background:var(--n);color:#2b1a00;border-radius:99px;padding:1px 7px;font-weight:600;font-size:.63rem}
.xt-dong{display:block;height:5px;width:100%;border-radius:3px;background:#dfe3e9}
.xt-ngan{width:62%}

/* Bảng tự chọn màu */
.the-mau-tu .luoi-o-mau{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.o-mau{display:block}
.o-mau-nhan{display:block;font-size:.78rem;font-weight:600;margin-bottom:3px}
.o-mau-hang{display:flex;gap:6px;align-items:center;margin-bottom:2px}
.o-mau input[type=color]{width:42px;height:32px;padding:0;border:1px solid var(--vien);border-radius:5px;cursor:pointer;background:none}
.o-mau-chu{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;padding:5px 6px;
  border:1px solid var(--vien);border-radius:5px;background:var(--nen);color:var(--chu-mo);width:82px}

.hang-logo{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.logo-hien{min-width:140px;padding:12px;border:1px dashed var(--vien);border-radius:8px;text-align:center;background:var(--nen)}
.logo-anh{height:44px;width:auto;object-fit:contain;flex:0 0 auto}
.qt-logo .logo-anh{height:30px}

/* =====================================================================
   V2.8 — Kho tài liệu (DWH/DLH tệp)
   ===================================================================== */
.kho-2cot{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}
@media (max-width:900px){.kho-2cot{grid-template-columns:1fr}}
.kho-canh{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:14px;
  position:sticky;top:70px}
.kho-canh h2{margin:0 0 6px;font-size:1rem}
.ds-moc{list-style:none;padding:0;margin:8px 0 0}
.ds-moc li{margin:0}
.ds-moc a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 8px;
  border-radius:6px;font-size:.86rem;color:var(--chu)}
.ds-moc a:hover{background:var(--nen);text-decoration:none}
.ds-moc a.dang-o{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:600}
.moc-dem{font-size:.74rem;color:var(--chu-mo);white-space:nowrap}

.luoi-tep{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.the-tep{display:block;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);
  padding:10px;color:var(--chu)}
.the-tep:hover{border-color:var(--xanh-tuoi);text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.tep-hinh{position:relative;display:flex;align-items:center;justify-content:center;height:110px;
  background:var(--nen);border-radius:6px;overflow:hidden;margin-bottom:8px}
.tep-hinh img{width:100%;height:100%;object-fit:cover}
.tep-icon{font-size:2.6rem;line-height:1}
.tep-pii{position:absolute;top:5px;right:5px;background:var(--do);color:#fff;font-size:.6rem;
  font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.4px}
.tep-ten{display:block;font-size:.9rem;line-height:1.3;margin-bottom:4px;overflow-wrap:anywhere}
.tep-meta{display:block;line-height:1.45}
.tep-so{display:block;margin-top:5px;padding-top:5px;border-top:1px solid var(--vien)}

/* Khung xem trước */
.khung-xem{display:flex;align-items:center;justify-content:center;min-height:180px;padding:12px}
.xem-anh{max-height:520px;width:auto;max-width:100%;border-radius:6px}
.xem-pdf{width:100%;height:640px;border:0;border-radius:6px}
.xem-am{width:100%;max-width:560px}
.xem-video{width:100%;max-height:560px;border-radius:6px;background:#000}
.xem-chu{width:100%;height:420px;border:1px solid var(--vien);border-radius:6px;background:#fff}
.xem-khong{text-align:center;max-width:56ch;margin:0 auto}
.xem-khong-icon{font-size:3rem;margin:0 0 6px}
.bang-doc th{width:190px;background:var(--nen);font-weight:600;vertical-align:top}
.bam{font-size:.72rem;overflow-wrap:anywhere}

/* Hai lớp trước đây dùng trong giao diện mà chưa có luật — tools/kiem-tra-css.php bắt được */
.cong-tac-chu{font-size:.9rem;color:var(--chu)}
.kho-chinh{min-width:0}
/* Chi tiết sản phẩm — ba lớp trước nay chưa có luật, chữ và khoảng cách rơi về mặc định */
.sp-tt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 12px}
.ds-chung-nhan{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.tra-loi{margin:6px 0 0;padding:8px 12px;background:var(--xanh-nhat);border-left:3px solid var(--xanh);
  border-radius:0 6px 6px 0;font-size:.9rem}

/* =====================================================================
   V2.8 — Quy trình nhập liệu theo bước, có đèn tiến độ
   ===================================================================== */
.tien-do{padding:14px 16px}
.td-dau{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.td-thanh{height:10px;border-radius:99px;background:var(--vien);overflow:hidden}
.td-day{display:block;height:100%;background:var(--xanh-tuoi);transition:width .3s ease}
.td-day-xong{background:var(--la)}

/* Bậc thang các bước */
.bac-thang{list-style:none;margin:16px 0 0;padding:0;position:relative}
.bac-thang::before{content:"";position:absolute;left:19px;top:16px;bottom:16px;width:2px;background:var(--vien)}
.bt{position:relative;padding-left:56px;margin-bottom:14px}
.bt-so{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.98rem;
  background:var(--trang);border:2px solid var(--vien);color:var(--chu-mo);z-index:1}
.bt-than{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:14px 16px}
.bt-dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bt-dau h2{margin:0;font-size:1.05rem}
.bt-ta{margin:4px 0 10px}
.bt-tomtat{margin-top:8px}
.bt-khoa{margin:6px 0 0;padding:10px 12px;background:var(--nen);border-left:3px solid var(--vien);
  border-radius:0 6px 6px 0;color:var(--chu-mo);font-size:.9rem}
.bt-form{margin-top:6px}

/* Bốn trạng thái — màu do máy chủ quyết, tắt JavaScript vẫn đúng */
.bt-xong .bt-so{background:var(--la);border-color:var(--la);color:#fff}
.bt-xong .bt-than{border-color:var(--la);background:var(--la-nhat)}
.bt-dang_lam .bt-so{background:var(--xanh);border-color:var(--xanh);color:#fff;
  box-shadow:0 0 0 4px var(--xanh-nhat)}
.bt-dang_lam .bt-than{border-color:var(--xanh);border-width:2px}
.bt-mo .bt-so{border-color:var(--xanh-tuoi);color:var(--xanh)}
.bt-chua_mo{opacity:.62}
.bt-chua_mo .bt-than{background:var(--nen)}

/* Ô đếm bước ở danh sách lô */
.dem-buoc{display:flex;gap:3px;margin-bottom:3px}
.db-o{width:20px;height:9px;border-radius:2px;background:var(--vien)}
.db-xong{background:var(--la)}
.db-thieu{background:var(--vien);border:1px solid var(--vang)}
.db-bo-qua{background:repeating-linear-gradient(45deg,var(--vien),var(--vien) 2px,transparent 2px,transparent 4px)}

/* =====================================================================
   V2.8 — Bảng chỉ số của Dữ liệu nền
   ===================================================================== */
.ds-canh{list-style:none;margin:6px 0 0;padding:0}
.cb{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;margin-bottom:6px;
  border-left:4px solid var(--vang);background:var(--vang-nhat)}
.cb-loi{border-left-color:var(--do);background:var(--do-nhat)}
.cb-so{font-size:1.35rem;font-weight:700;min-width:56px;text-align:right;flex:0 0 auto}
.cb-canh .cb-so{color:#8a5a00}
.cb-loi .cb-so{color:var(--do)}
.cb-noi{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.cb-noi strong{font-weight:600;font-size:.95rem}

.ds-ty-le{list-style:none;margin:4px 0 0;padding:0}
.ds-ty-le li{margin-bottom:10px}
.tl-dong{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;margin-bottom:3px}
.tl-thanh{height:8px;border-radius:99px;background:var(--vien);overflow:hidden}
.tl-thanh span{display:block;height:100%}
.tl-tot{background:var(--la)}
.tl-vua{background:var(--vang)}
.tl-kem{background:var(--do)}

/* =====================================================================
   V2.8 — Xác thực hai lớp
   ===================================================================== */
.the-form-rong{max-width:640px}
.o-ma-otp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;letter-spacing:.5em;
  text-align:center;padding:12px}
.bac-lap{list-style:none;padding:0;margin:14px 0 0;counter-reset:b}
.bac-lap li{border-left:3px solid var(--xanh-nhat);padding:0 0 14px 16px;margin-bottom:4px}
.bac-lap h2{margin:0 0 4px;font-size:1.02rem}
.qr-lap{display:flex;justify-content:center;padding:12px;background:#fff;border:1px solid var(--vien);
  border-radius:8px;margin:8px 0}
.qr-lap svg{width:200px;height:200px}
.khoa-tay{margin:6px 0;padding:8px 10px;background:var(--nen);border:1px solid var(--vien);
  border-radius:6px;text-align:center}
.khoa-tay code{font-size:.95rem;letter-spacing:.08em;background:none}
.qt-dau a.qt-ten{color:#fff;display:inline-flex;align-items:center;gap:6px}
.qt-dau a.qt-ten:hover{text-decoration:underline}
.nhan-2lop{background:rgba(255,255,255,.22);border-radius:99px;padding:1px 7px;font-size:.7rem;font-weight:600}

/* V2.8 — Khiếu nại */
.khoi-trich{background:var(--nen);border-left:3px solid var(--vien);border-radius:0 6px 6px 0;
  padding:10px 14px;margin:6px 0 14px;white-space:pre-wrap}
.khoi-trich-ok{background:var(--la-nhat);border-left-color:var(--la)}
.khoi-thao-tac{border:1px solid var(--vien);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.khoi-thao-tac h3{margin:0 0 4px;font-size:.98rem}
.khoi-thao-tac textarea{margin:6px 0}

/* Chẩn đoán "module đã bật mà chưa thấy menu" — hiện ngay trên thẻ module.
   Không dùng lớp .bao-loi vì đây là chú thích trong thẻ, không phải dải thông
   báo toàn trang; dùng chung sẽ kéo theo lề và nền của dải báo. */
.mod-vuong {
  margin: .5rem 0 0;
  padding: .5rem .65rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--mau-chu);
  background: var(--mau-nen-loi, #fdf2f2);
  border-left: 3px solid var(--mau-loi, #b3261e);
  border-radius: 0 4px 4px 0;
}

/* ── Mức độ tuân thủ ────────────────────────────────────────────────
   Thang màu ở đây KHÔNG dùng riêng màu để mang nghĩa: mỗi mức luôn đi
   kèm chữ ("Đạt cơ bản", "Chưa đủ điều kiện") và con số phần trăm, để
   người không phân biệt được màu vẫn đọc được kết quả. */
.tt-tong { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.tt-vong {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 6px solid var(--mau-vien); text-align: center;
}
.tt-vong strong { font-size: 2rem; line-height: 1; }
.tt-vong strong span { font-size: 1rem; }
.tt-vong small { margin-top: .3rem; font-size: .72rem; padding: 0 .4rem; }
.tt-thang { flex: 1 1 320px; }
.tt-moc { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .85rem; }
.tt-moc li { padding: .22rem 0; }
.tt-thanh {
  height: 12px; border-radius: 6px; background: var(--mau-nen-nhat);
  border: 1px solid var(--mau-vien); overflow: hidden; margin: .6rem 0 .3rem;
}
.tt-thanh span { display: block; height: 100%; background: var(--mau-chinh); }
.tt-viec { margin: .4rem 0 0; padding-left: 1.3rem; }
.tt-viec li { padding: .35rem 0; }
.tt-anh-huong { margin: .3rem 0 0; padding-left: 1.3rem; font-size: .9rem; }
.tt-anh-huong li { padding: .15rem 0; }

/* Năm mức của thang điểm. Viền đậm nhạt khác nhau để phân biệt được cả
   khi in đen trắng — báo cáo gửi lên cấp trên thường in đen trắng. */
.md-du      { background: #e7f4ea; color: #10502a; border: 1px solid #10502a; }
.md-gan     { background: #eef5e7; color: #33501a; border: 1px solid #33501a; }
.md-co-ban  { background: #fdf6e3; color: #6b4e07; border: 1px solid #6b4e07; }
.md-dang    { background: #fdefe3; color: #7a3e07; border: 1px dashed #7a3e07; }
.md-chua    { background: #fdeaea; color: #7a1220; border: 1px dashed #7a1220; }

/* Ô chứa con số trong bảng: canh phải để so sánh theo cột bằng mắt được. */
.bang td.so, .bang th.so { text-align: right; white-space: nowrap; }

/* ── Ma trận phân quyền: ô bấm được ─────────────────────────────────
   Ô quyền vốn chỉ để đọc. Khi quản trị có quyền sửa, nó thành nút bấm —
   nhưng vẫn phải giữ nguyên kích thước và canh lề của ô cũ, nếu không cả
   bảng 101 × 17 sẽ xô lệch. Nên nút được gỡ hết trang trí mặc định của
   trình duyệt và kế thừa kiểu chữ của ô. */
.o-nut {
  font: inherit; color: inherit; background: none; border: 0;
  padding: 2px 4px; margin: 0; cursor: pointer; border-radius: 3px;
  line-height: inherit;
}
.o-nut:hover, .o-nut:focus-visible { background: var(--mau-nen-nhat); outline: 2px solid var(--mau-chinh); }

/* Ô đang khác cấu hình gốc. Dùng ĐỒNG THỜI viền và chấm tròn, không chỉ
   dựa vào màu — bảng này hay được in đen trắng để trình ký. */
.o-ghi-de { box-shadow: inset 0 0 0 2px var(--mau-canh, #b26b00); }
.cham-ghi-de { color: var(--mau-canh, #b26b00); font-size: .7rem; vertical-align: super; }

/* Hộp thoại đổi ô. <dialog> tự canh giữa và tự khoá nền, không cần lớp phủ
   dựng tay. */
.hop-thoai {
  max-width: 560px; width: calc(100% - 2rem); padding: 1.25rem 1.4rem;
  border: 1px solid var(--mau-vien); border-radius: 8px;
}
.hop-thoai::backdrop { background: rgba(0, 0, 0, .45); }
.hop-thoai h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.hop-thoai fieldset { border: 1px solid var(--mau-vien); border-radius: 6px; padding: .6rem .8rem; margin: .8rem 0; }
.hop-thoai legend { padding: 0 .3rem; font-size: .85rem; color: var(--chu-mo); }
.hop-thoai .o-tich { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; }

/* ── Bảng sửa cây menu ──────────────────────────────────────────────
   Hàng nhóm cha nổi hơn hàng mục con để nhìn ra tầng bậc ngay, không
   phải dò theo dấu thụt đầu dòng. */
.bang-menu .hang-nhom-menu > td { background: var(--mau-nen-nhat); border-top: 2px solid var(--mau-vien); }
.bang-menu .muc-con { padding-left: 1.1rem; }
.bang-menu .dau-cay { color: var(--chu-mo); }
.bang-menu input[type=text], .bang-menu input:not([type]) { width: 100%; }
.bang-menu .o-so { width: 5.5rem; }
.bang-menu .an-hien { font-size: .8rem; color: var(--chu-mo); }

/* ── Dải "Xem tiếp" ở cuối màn hình chi tiết ────────────────────────
   Nằm ngang, cuộn được trên màn hình hẹp thay vì xuống dòng lộn xộn. */
.khoi-lien-quan {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin: 1.1rem 0 0; padding: .7rem .85rem;
  background: var(--mau-nen-nhat); border: 1px solid var(--mau-vien); border-radius: 6px;
}
.khoi-lien-quan .lq-nhan { font-size: .82rem; color: var(--chu-mo); margin-right: .2rem; }
.khoi-lien-quan .lq-muc {
  display: inline-block; padding: .28rem .6rem; font-size: .86rem;
  background: var(--mau-nen); border: 1px solid var(--mau-vien); border-radius: 999px;
  text-decoration: none;
}
.khoi-lien-quan .lq-muc:hover, .khoi-lien-quan .lq-muc:focus-visible {
  border-color: var(--mau-chinh); text-decoration: underline;
}

/* ── Dòng chữ chạy trên thanh đầu trang quản trị ────────────────────
   Nội dung do quản trị đặt ở "Giao diện và nội dung"; để trống thì khối
   này không được vẽ ra nên không chiếm chỗ.

   Chuyển động là thứ gây khó chịu thật với một số người — chóng mặt, mất
   tập trung, đọc không kịp. Ba lớp bảo vệ: tôn trọng thiết lập giảm
   chuyển động của hệ điều hành, dừng khi rê chuột hoặc khi có tiêu điểm
   bàn phím, và một nút tạm dừng luôn hiện. */
/* Ba phần của thanh đầu trang chia không gian theo đúng thứ tự ưu tiên:
   tên sàn và cụm liên kết bên phải giữ nguyên bề rộng cần thiết, phần còn
   lại bao nhiêu thì dải chữ chạy lấy bấy nhiêu.

   Nếu để dải chữ chạy co giãn ngang hàng với tên sàn thì trình duyệt cắt
   bớt cả hai: tên sàn bị rút gọn thành "Quản trị Sàn Nông Sản …" còn dải
   chữ chạy hẹp tới mức chỉ đọc được vài ký tự đầu. */
.qt-dau > .qt-logo  { flex: 0 0 auto; }
.qt-dau > .qt-nguoi { flex: 0 0 auto; }
.qt-chay {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .4rem;
  margin: 0 .75rem; overflow: hidden;
}
.qt-chay-khung { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.qt-chay-chu {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  animation: qt-chay-di 26s linear infinite;
  font-size: .92rem; color: #fff;
}
.qt-chay-chu a { color: #fff; text-decoration: underline; }
@keyframes qt-chay-di {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Dừng khi người dùng đang muốn đọc hoặc đang thao tác vào dải này. */
.qt-chay:hover .qt-chay-chu,
.qt-chay:focus-within .qt-chay-chu,
.qt-chay-tam-dung .qt-chay-chu { animation-play-state: paused; }

.qt-chay-dung {
  flex: 0 0 auto; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px;
  font-size: .6rem; line-height: 1; padding: .3rem .4rem; cursor: pointer;
}
.qt-chay-dung:hover, .qt-chay-dung:focus-visible {
  background: rgba(255, 255, 255, .16);
}

/* Người đã bật "giảm chuyển động" thì không chạy nữa: chữ đứng yên và cắt
   bớt phần thừa. Chuyển động trang trí không đáng để đánh đổi. */
@media (prefers-reduced-motion: reduce) {
  .qt-chay-chu {
    animation: none; padding-left: 0;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
}

/* Màn hình hẹp: thanh đầu trang đã chật, bỏ hẳn dải chữ chạy. */
@media (max-width: 860px) { .qt-chay { display: none; } }

/* ── Màn hình sửa câu chữ ───────────────────────────────────────────
   Mỗi ô là một khối độc lập có nhãn, ô nhập và phần gợi ý; ô đang đặt
   khác bản gốc được đánh dấu bằng viền trái đậm để rà nhanh. */
.cc-man { margin: 1.4rem 0 .5rem; font-size: 1rem; border-bottom: 1px solid var(--mau-vien); padding-bottom: .3rem; }
.cc-o { padding: .55rem 0 .7rem; border-bottom: 1px dashed var(--mau-vien-mo, #e6e6e6); }
.cc-o label { display: block; font-weight: 600; margin-bottom: .25rem; }
.cc-o input, .cc-o textarea { width: 100%; }
.cc-chu-dan { margin: .3rem 0 0; line-height: 1.5; }
.cc-goc { color: var(--chu-mo); }
.cc-khac { border-left: 3px solid var(--mau-canh, #b26b00); padding-left: .7rem; }

/* ── Thẻ của màn hình "Giao diện và nội dung" ───────────────────────
   Mỗi thẻ là một liên kết bình thường, máy chủ dựng đúng nội dung của
   thẻ đó — chạy được cả khi trình duyệt tắt JavaScript. Không dùng mẹo
   ẩn hiện bằng kịch bản, vì tắt kịch bản là mất luôn cách chuyển thẻ. */
.the-hang {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0 0 1rem; padding-bottom: .1rem;
  border-bottom: 2px solid var(--mau-vien);
}
.the-nut {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: 7px 7px 0 0;
  border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: var(--chu-mo);
  text-decoration: none; font-size: .92rem;
  position: relative; top: 2px;
}
.the-nut:hover { background: var(--nen); color: var(--chu); text-decoration: none; }

/* Thẻ đang mở phải nhận ra được NGAY, và không chỉ bằng màu: nền nổi lên,
   viền hiện rõ, gạch đậm dưới chân nối liền vào vùng nội dung, chữ đậm.
   Bốn dấu hiệu cùng lúc để người không phân biệt được màu vẫn thấy. */
.the-nut.the-dang {
  background: #fff; color: var(--chu); font-weight: 700;
  border-color: var(--vien);
  box-shadow: 0 3px 0 0 #fff, inset 0 3px 0 0 var(--xanh);
}
.the-nut.the-dang .ic { color: var(--xanh); }
.the-nut .ic { width: 17px; height: 17px; flex: 0 0 auto; }

/* Ô bắt buộc đang trống — viền trái đậm để rà nhanh trong một lưới dài. */
.o-thieu { border-left: 3px solid var(--mau-loi, #b3261e); padding-left: .6rem; }

/* Ô lý do đứng riêng một hàng, tách khỏi lưới thông tin phía trên. */
.o-ly-do { display: block; margin: 1rem 0 .3rem; }
.o-ly-do input { width: 100%; }


/* =====================================================================
   V4.0 — TUÂN THỦ CHI TIẾT, BIÊN BẢN, TRANG TRÌNH BÀY
   =====================================================================
   Ba màn hình, ba người đọc khác nhau, nên ba bộ luật riêng:

     .ttct-*  màn hình làm việc — dày thông tin, đọc trên máy
     .bb-*    biên bản in — khổ A4, đen trắng, có chỗ ký
     .tb-*    trang chiếu — chữ to, ít dòng, tương phản cao

   Tên lớp mang tiền tố riêng để không đè lên bộ luật nào đang có; công cụ
   tools/kiem-tra-css.php chặn việc đè nhau đó ngay từ khâu đóng gói.
   ===================================================================== */

/* --- Khối 1: đầu trang màn hình chi tiết --- */
.ttct-dau { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; }
.ttct-tom { flex: 1 1 320px; margin: 0; display: grid;
            grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .92rem; }
.ttct-tom dt { font-weight: 600; color: var(--chu-mo); }
.ttct-tom dd { margin: 0; }
.ttct-thang { flex: 0 0 100%; border-top: 1px solid var(--mau-vien); padding-top: .6rem; }

/* --- Khối 2: bảng "còn thiếu cái gì" --- */
.bang-thieu td { vertical-align: top; }
.ttct-ht { max-width: 20rem; }
.ttct-ho-so summary { cursor: pointer; font-size: .82rem; color: var(--chu-mo); }
.ttct-ho-so ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; }

/* --- Khối 3: bảng mô phỏng và câu kết --- */
.bang-mo-phong td:first-child { width: 2.4rem; text-align: center; }
/* Móc cho phần tính nhẩm ở Khối 3. Không trang trí gì — khai ra để
   tools/kiem-tra-css.php không báo là tên lớp gõ sai, và để người đọc
   mã biết đây là móc JavaScript chứ không phải lớp bị bỏ quên. */
.ttct-chon { cursor: pointer; }
.ttct-ket { margin-top: .8rem; padding: .7rem .9rem; border-radius: 8px;
            background: var(--xanh-nhat, #eef5ff); font-size: 1.02rem; font-weight: 600; }

/* --- Khối 4: khối gấp "đã đạt" --- */
.ttct-dat summary { cursor: pointer; list-style: revert; }
.ttct-dat summary h2 { display: inline; }

/* --- Khối 6: cam kết và ô ghi --- */
.ttct-cam { padding: .3rem 0; border-bottom: 1px dotted var(--mau-vien); }
.ttct-cam:last-child { border-bottom: 0; }
.ttct-ghi summary { cursor: pointer; font-size: .86rem; }
.ttct-ghi label { display: block; margin: .5rem 0 .3rem; font-size: .85rem; }
.ttct-ghi textarea, .ttct-ghi input[type=date] { width: 100%; }

/* Nút "Xem chi tiết" trên dòng cảnh báo của Bảng điều khiển. */
.bao-xem-ct { margin-left: .6rem; }

/* Lưới thẻ nghĩa vụ ở màn hình tổng hợp. */
.tt-luoi { display: grid; gap: 1rem;
           grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.tt-the { border: 1px solid var(--mau-vien); border-radius: 10px; padding: .9rem 1rem; }
.tt-the h3 { margin: 0 0 .4rem; font-size: 1rem; }
.tt-the-so { margin: 0 0 .3rem; font-size: 2.1rem; font-weight: 700; line-height: 1; }
.tt-the-so span { font-size: .95rem; font-weight: 400; }
.tt-the-cq { margin: .5rem 0 .6rem; }
.tt-the-trong { border-style: dashed; opacity: .85; }
.tt-loc label { font-size: .9rem; }
.tt-loc select { max-width: 100%; }

/* --- Biên bản in --- */
.bien-ban { max-width: 19cm; margin: 0 auto; font-size: .93rem; }
.bb-dau { text-align: center; margin-bottom: 1.4rem; }
.bb-cq { margin: 0; font-size: .86rem; text-transform: uppercase; }
.bb-san { margin: .1rem 0 .8rem; font-weight: 700; text-transform: uppercase; }
.bb-dau h1 { font-size: 1.25rem; margin: 0 0 .4rem; letter-spacing: .02em; }
.bb-ve { margin: 0 0 .5rem; }
.bb-can-cu { font-style: italic; font-size: .86rem; margin: 0; }
.bb-bang { width: 100%; font-size: .86rem; }
.bb-bang th { text-align: left; }
.bb-diem { font-size: 1.15rem; }
.bb-can-cu-ds { font-size: .86rem; padding-left: 1.3rem; }
.bb-lap { margin-top: 1.2rem; font-style: italic; font-size: .86rem; }
.bb-ky { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
         margin-top: 1.6rem; text-align: center; }
.bb-ky-nhan { margin: 0; font-weight: 700; font-size: .88rem; }
.bb-ky-cho { height: 3.4cm; }

/* --- Trang trình bày cho đối tác --- */
.trinh-bay { max-width: 44rem; text-align: center; }
.tb-cq { margin: 0; font-size: .95rem; text-transform: uppercase; color: var(--chu-mo); }
.tb-ten { font-size: 1.9rem; margin: .3rem 0 1.4rem; line-height: 1.25; }
.tb-so { display: flex; gap: 1.6rem; align-items: center; justify-content: center;
         flex-wrap: wrap; margin-bottom: 1.6rem; }
.tb-vong { width: 9rem; height: 9rem; }
.tb-dem { font-size: 1.25rem; margin: 0; }
.tb-h2 { font-size: 1.3rem; margin: 0 0 .6rem; }
.tb-xong { font-size: 1.2rem; font-weight: 600; }
.tb-viec { text-align: left; display: inline-block; margin: 0 auto;
           padding-left: 1.6rem; font-size: 1.15rem; }
.tb-viec li { padding: .45rem 0; }
.tb-viec-ten { font-weight: 600; }
.tb-viec-ai { display: block; font-size: .92rem; color: var(--chu-mo); }
.tb-chan { margin-top: 2rem; font-size: .82rem; color: var(--chu-mo); }

/* --- In khổ A4: ràng buộc T6, trang không được vỡ bố cục ---
   Ba việc phải làm khi in: bỏ mọi thứ chỉ dùng để bấm, ép bảng không bị
   cắt ngang qua hai trang, và trả màu nền về trắng để không tốn mực. */
@media print {
  .ttct-dau { display: block; }
  .ttct-tom { display: block; }
  .ttct-tom dt { margin-top: .4rem; }
  .cuon-ngang { overflow: visible !important; }
  .bang-thieu, .bb-bang { page-break-inside: auto; }
  .bang-thieu tr, .bb-bang tr, .ttct-cam { page-break-inside: avoid; }
  .ttct-dat[open] summary ~ * { display: revert; }
  .bien-ban, .trinh-bay { max-width: none; }
  .bb-ky { page-break-inside: avoid; }
  .tt-the { page-break-inside: avoid; }
  .tt-luoi { grid-template-columns: 1fr 1fr; }
  a[href]::after { content: ""; }
}

/* --- Hồ sơ pháp lý của sàn --- */
.hspl-muc { border: 1px solid var(--mau-vien); border-radius: 8px;
            padding: .6rem .9rem; margin-bottom: .55rem; }
.hspl-muc summary { cursor: pointer; }
.hspl-muc summary strong { margin: 0 .35rem; }
.hspl-tt { margin: .7rem 0 0; display: grid;
           grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .88rem; }
.hspl-tt dt { font-weight: 600; color: var(--chu-mo); }
.hspl-tt dd { margin: 0; }
.hspl-form { margin-top: .8rem; display: grid; gap: .5rem .9rem;
             grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
.hspl-form label { display: block; font-size: .84rem; }
.hspl-form input, .hspl-form select, .hspl-form textarea { width: 100%; }
.hspl-rong { grid-column: 1 / -1; }
.hspl-dan-y summary { cursor: pointer; font-size: .82rem; color: var(--chu-mo); }
.hspl-dan-y ol { margin: .35rem 0 .2rem; padding-left: 1.2rem; font-size: .85rem; }

@media print {
  .hspl-muc { page-break-inside: avoid; }
  .hspl-muc[open] > *, .hspl-dan-y[open] > * { display: revert; }
}

/* Chân trang khu quản trị — số hiệu phiên bản đang chạy thật. */
.qt-chan-ban { margin: 2rem 0 .5rem; padding-top: .7rem;
               border-top: 1px solid var(--mau-vien);
               font-size: .78rem; color: var(--chu-mo); text-align: right; }

/* =====================================================================
   V4.1 — KHO SỐ VÀ BIÊN NHẬN KHO ĐIỆN TỬ
   ===================================================================== */

/* Cột chỉ có nghĩa với một loại phiếu — JavaScript bật tắt theo loại. */
.kho-cot-kk { }
.kho-xoa-dong { white-space: nowrap; }
#kho-dong input, #kho-dong select { width: 100%; min-width: 7rem; }
#kho-goi-y { margin-bottom: .5rem; }

/* Thao tác trên biên nhận — mỗi việc một khối gấp riêng, để không ai
   bấm nhầm "chuyển nhượng" khi định bấm "phong toả". */
.bnk-thao-tac { display: grid; gap: .6rem;
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bnk-thao-tac details { border: 1px solid var(--mau-vien); border-radius: 8px; padding: .6rem .9rem; }
.bnk-thao-tac summary { cursor: pointer; font-weight: 600; }
.bnk-thao-tac label { display: block; margin: .5rem 0 .3rem; font-size: .85rem; }
.bnk-thao-tac input, .bnk-thao-tac select { width: 100%; }

/* Cột mã băm trong bảng lịch sử: chữ nhỏ, không xuống dòng giữa chừng. */
.bang-chuoi .bnk-bam code { font-size: .74rem; white-space: nowrap; }

/* Trang tra cứu công khai — người xem là bên thứ ba, không phải cán bộ. */
.bnk-cong-khai { margin-top: 1rem; }
.bnk-dau { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.bnk-dau h2 { margin: .1rem 0 0; font-size: 1.35rem; }
.bnk-tt { font-size: .92rem; padding: .3rem .8rem; }
.bnk-tt-ds { display: grid; grid-template-columns: auto 1fr;
             gap: .4rem 1rem; margin: 1rem 0; font-size: .95rem; }
.bnk-tt-ds dt { font-weight: 600; color: var(--chu-mo); }
.bnk-tt-ds dd { margin: 0; }
.bnk-qr { text-align: center; margin-top: 1.2rem;
          border-top: 1px solid var(--mau-vien); padding-top: 1rem; }
.bnk-qr img { display: inline-block; }
.tra-cuu-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin: 1rem 0; }
.tra-cuu-form label { flex: 0 0 100%; font-size: .88rem; }
.tra-cuu-form input { flex: 1 1 16rem; }

@media print {
  .bnk-thao-tac, .tra-cuu-form { display: none !important; }
  .bang-chuoi tr { page-break-inside: avoid; }
  .bnk-cong-khai { border: 1px solid #000; padding: 1rem; }
}

/* =====================================================================
   V4.2 — KÝ SỐ, GIÁM ĐỊNH, HỒ SƠ DỮ LIỆU CÁ NHÂN
   =====================================================================
   Ba màn hình mới dùng lại gần hết bộ luật đã có (.hspl-*, .ttct-tom,
   .bien-ban). Chỉ thêm đúng phần chưa có, để không sinh ra một bộ luật
   thứ tư nói cùng một thứ. */

@media print {
  /* Hồ sơ trình cơ quan: mỗi nhóm dữ liệu một khối liền, không cắt ngang. */
  .bien-ban section { page-break-inside: auto; }
  .bien-ban section > h2 { page-break-after: avoid; }
}

/* =====================================================================
   V4.3 — BÁN HÀNG ĐA KÊNH, SIÊU THỊ, LOGISTICS
   ===================================================================== */

/* Ô nhập số lượng phân bổ nằm ngay trong bảng — hẹp, số căn phải, để mắt
   dò cột dễ hơn khi có mười kênh. */
.pb-o { width: 8rem; text-align: right; }

/* =====================================================================
   V4.4 — SỔ CÁI, KÝ QUỸ, BÙ TRỪ
   ===================================================================== */

/* Một bút toán và hai vế của nó phải đọc như một khối liền. Tách ra thì
   không ai kiểm được bằng mắt là nó có cân không. */
.sc-but-toan { border: 1px solid var(--mau-vien); border-radius: 8px;
               padding: .7rem .9rem; margin-bottom: .8rem; }
.sc-dau { margin-bottom: .5rem; }
.sc-ve { width: 100%; font-size: .88rem; }
.sc-tong td { border-top: 2px solid var(--mau-vien); }

@media print {
  .sc-but-toan { page-break-inside: avoid; }
}

/* =====================================================================
   V4.5 — BẢNG ĐIỆN GIAO DỊCH VÀ GIÁM SÁT THỊ TRƯỜNG
   ===================================================================== */

/* Hàng ngang cho một cụm điều khiển: nút bấm, ô lọc, ghi chú giải thích.
   Cho phép xuống dòng vì trên màn hình hẹp một hàng dài sẽ tràn ra
   ngoài và đẩy cả bảng lệch. */
.hang { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
        margin-top: .8rem; }
.hang.loc { margin-bottom: .8rem; }
.hang label.rong { flex: 1 1 18rem; }
.hang label.rong input { width: 100%; }

/* Cột số căn phải. Số tiền và khối lượng đọc bằng cách dò hàng đơn vị —
   căn trái thì mắt phải đếm chữ số, và đếm nhầm một hàng là nhầm mười lần. */
.phai { text-align: right; }

/* Dòng được chọn trong bảng tính giá khớp. Đây là dòng trả lời câu hỏi
   "vì sao giá là con số này", nên nó phải nổi bật ngay từ cái liếc mắt
   đầu tiên, không phải sau khi dò từng dòng. */
.dong-chon { background: var(--la-nhat); }
.dong-chon td { border-top: 2px solid var(--la); border-bottom: 2px solid var(--la); }

/* Dòng đã hết hiệu lực trong sổ lệnh: vẫn hiện đầy đủ vì bảng chỉ ghi
   thêm, nhưng làm mờ để không lẫn với lệnh đang còn hiệu lực. */
.mo { opacity: .55; }

/* Phiên mô phỏng. Một sọc vàng nhạt suốt cả dòng, để không ai nhầm số
   liệu tập huấn với số liệu thật. */
.mo-phong { background: var(--vang-nhat); }

/* Chỗ thiếu dữ liệu bắt buộc. Cố ý dùng màu đỏ và in đậm: im lặng ở đây
   nghĩa là mở phiên rồi mới phát hiện thiếu, lúc hai bên đã khớp. */
.thieu { color: var(--do); font-weight: 700; }

/* Khối bằng chứng của một cảnh báo giám sát, gấp lại mặc định. Bằng
   chứng là id lệnh và id phiên — cần khi tra, nhưng bày ra hết thì
   nội dung cảnh báo bị chìm. */
.bang-chung { margin: .6rem 0; border-left: 3px solid var(--vien);
              padding-left: .8rem; }
.bang-chung summary { cursor: pointer; font-size: .9rem; color: var(--chu-mo); }
.bang-chung dd { font-size: .85rem; word-break: break-all; }

/* Danh sách cặp nhãn–giá trị. Dùng cho những khối "thuộc tính của một
   đối tượng": quy cách hợp đồng, mốc thời gian của phiên, bằng chứng
   của cảnh báo. Nhãn hẹp cố định để mắt dò cột giá trị thẳng hàng. */
.cap { display: grid; grid-template-columns: 12rem 1fr; gap: .35rem 1rem;
       margin: .8rem 0; }
.cap dt { font-weight: 600; color: var(--chu-mo); font-size: .9rem; }
.cap dd { margin: 0; }
@media (max-width: 640px) {
  .cap { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .cap dd { margin-bottom: .5rem; }
}