/* ════════════════════════════════════════════════════════════════════════════
   VĂN PHÒNG SỐ — TRÌNH KÝ HÀNG LOẠT (NV-KS-HL-2, 24/09/2026). Chỉ lớp .hl-*; mọi giá trị lấy từ token của vp.css (quy chuẩn v2.3).
   ════════════════════════════════════════════════════════════════════════════ */
.hl .khoi.hl-muc{padding:var(--k16);margin-bottom:var(--k16)}
.hl .hl-muc h2{font-size:var(--c16);font-weight:var(--d-dam);display:flex;align-items:center;gap:var(--k8);margin-bottom:var(--k8)}
.hl .hl-muc h2 .chu-phu{font-weight:var(--d-thuong);font-size:var(--c13)}
.hl .hl-muc h3{font-size:var(--c14);font-weight:var(--d-dam);margin:var(--k12) 0 var(--k4)}
.hl .hl-muc > p{margin-bottom:var(--k8)}
.hl .hl-form{max-width:880px}
.hl .hl-luu{display:flex;justify-content:flex-end;margin-bottom:var(--k24)}
.hl .hl-trong{padding:var(--k12) 0}

/* thông tin đầu lô */
.hl .hl-dau{padding:var(--k16);margin-bottom:var(--k16)}
.hl .hl-dau-tt{display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap;margin-bottom:var(--k12)}
.hl .hl-dau-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--k12)}
.hl .hl-dau-luoi small{display:block;font-size:var(--c12);color:var(--chu-phu)}
.hl .hl-dau-luoi b{font-weight:var(--d-vua);overflow-wrap:anywhere}
.hl .hl-luot-tom{display:flex;gap:var(--k8);flex-wrap:wrap;margin-top:var(--k12)}
.hl .hl-chip{background:var(--be-mat-2);border:1px solid var(--vien);border-radius:var(--bo-tron);padding:2px var(--k12);font-size:var(--c13)}

/* người ký theo lượt */
.hl .hl-luot{border:1px solid var(--vien);border-radius:var(--bo-vua);padding:var(--k12);margin-bottom:var(--k12);background:var(--be-mat-2)}
.hl .hl-luot-dau{display:flex;align-items:center;gap:var(--k8);margin-bottom:var(--k8)}
.hl .hl-luot-nut{margin-left:auto;display:flex;gap:var(--k4)}
.hl .hl-luot-nut .nut-bt:disabled{opacity:.35;cursor:default}
.hl .hl-nguoi{list-style:none;margin:0 0 var(--k8);padding:0;display:flex;flex-direction:column;gap:var(--k4)}
.hl .hl-nguoi li{display:flex;align-items:center;gap:var(--k8);background:var(--be-mat);border:1px solid var(--vien);border-radius:var(--bo-nho);padding:var(--k4) var(--k8)}
.hl .hl-nguoi .anh{width:32px;height:32px;border-radius:50%;background:var(--mau-nhat);color:var(--mau);font-size:var(--c12);font-weight:var(--d-dam);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hl .hl-nguoi .ten{flex:1;min-width:0}
.hl .hl-nguoi .ten b{display:block;font-weight:var(--d-vua)}
.hl .hl-nguoi .ten small{color:var(--chu-phu);font-size:var(--c12)}
.hl .hl-them{margin-top:var(--k4)}
.goi-y .ds div.khoa{opacity:.55;cursor:not-allowed}
.goi-y .ds div.khoa:hover{background:transparent}

/* tải tệp */
.hl .hl-tha{display:flex;align-items:center;justify-content:center;gap:var(--k12);min-height:120px;border:2px dashed var(--vien-dam);border-radius:var(--bo-vua);background:var(--be-mat-2);
  color:var(--chu-phu);text-align:center;padding:var(--k16);cursor:pointer;transition:border-color var(--chuyen),background var(--chuyen)}
.hl .hl-tha i{font-size:32px;color:var(--mau)}
.hl .hl-tha b{color:var(--chu)}
.hl .hl-tha:hover,.hl .hl-tha.tren{border-color:var(--mau);background:var(--mau-nhat)}
.hl .hl-tep-chon{margin-top:var(--k12)}
.hl .hl-tep-chon ul,.hl .hl-tep-da ul{list-style:none;margin:var(--k8) 0;padding:0;max-height:240px;overflow:auto}
.hl .hl-tep-chon li,.hl .hl-tep-da li{display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap;padding:var(--k4) 0;border-bottom:1px solid var(--vien);font-size:var(--c13)}
.hl .hl-tep-chon li small,.hl .hl-tep-da li small{color:var(--chu-phu)}
.hl .hl-tep-da{margin-top:var(--k12)}
.hl .hl-tep-da summary{cursor:pointer;font-weight:var(--d-vua)}
.hl .hl-tep-da .hl-loi{color:var(--tt-qua);flex-basis:100%}
.hl .hl-thanh{margin-top:var(--k12)}
.hl .hl-thanh-chu{display:flex;justify-content:space-between;gap:var(--k8);font-size:var(--c13);margin-bottom:var(--k4)}
.hl .hl-thanh-nen{height:8px;border-radius:var(--bo-tron);background:var(--tt-trung-nen);overflow:hidden}
.hl .hl-thanh-nen > div{height:100%;background:var(--mau);transition:width var(--chuyen)}

/* số xanh / vàng / đỏ */
.hl .o-so.hl-xanh b{color:var(--tt-xong)}
.hl .o-so.hl-vang b{color:var(--tt-cho-dam)}
.hl .o-so.hl-do b{color:var(--tt-qua)}

/* lưới ảnh thu nhỏ: điện thoại 2 cột · máy tính 4–6 cột */
.hl .hl-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--k12);margin:var(--k12) 0}
@media (min-width:768px){ .hl .hl-luoi{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} }
@media (min-width:1400px){ .hl .hl-luoi{grid-template-columns:repeat(6,minmax(0,1fr))} }
.hl .hl-o{display:flex;flex-direction:column;gap:var(--k4);text-align:left;background:var(--be-mat);border:1px solid var(--vien);border-top:4px solid var(--vien-dam);
  border-radius:var(--bo-vua);padding:var(--k8);cursor:pointer;min-width:0;font:inherit;color:inherit}
.hl .hl-o:hover{border-color:var(--mau)}
.hl .hl-o.hl-xanh{border-top-color:var(--tt-xong-dam)}
.hl .hl-o.hl-vang{border-top-color:var(--tt-cho-dam)}
.hl .hl-o.hl-do{border-top-color:var(--tt-qua-dam)}
.hl .hl-anh{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:var(--be-mat-2);border-radius:var(--bo-nho);overflow:hidden}
.hl .hl-anh img{width:100%;height:100%;object-fit:contain}
.hl .hl-anh i{font-size:28px;color:var(--chu-phu)}
.hl .hl-o-ten{font-size:var(--c13);font-weight:var(--d-vua);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hl .hl-o-ten small{color:var(--chu-phu);font-weight:var(--d-thuong)}
.hl .hl-o-tt{display:flex;gap:var(--k4);flex-wrap:wrap}
.hl .hl-o-ly{font-size:var(--c12);color:var(--chu-phu)}

/* thanh trình / ký ở đáy */
.hl .hl-day-trinh{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:var(--k12);justify-content:space-between;background:var(--be-mat);
  border:1px solid var(--vien);border-radius:var(--bo-vua);box-shadow:var(--bong-noi);padding:var(--k12) var(--k16);margin-bottom:var(--k16)}
.hl .hl-day-trinh > div{display:flex;flex-direction:column;min-width:0}
.hl .hl-day-trinh .chu-phu{font-size:var(--c13)}
@media (max-width:1023px){ .hl .hl-day-trinh{bottom:calc(var(--day-cao) + var(--k8))} }
@media (max-width:767px){ .hl .hl-day-trinh{flex-direction:column;align-items:stretch} .hl .hl-day-trinh .nut{width:100%} }

/* ký lô */
.hl .hl-ky-tt .hl-cho{display:flex;gap:var(--k8);align-items:flex-start}
.hl .hl-ky-tt .hl-cho i{font-size:24px;color:var(--mau)}
.hl .hl-xong{display:flex;gap:var(--k8);align-items:center;color:var(--tt-xong)}
.hl .hl-xong a{color:var(--mau)}
.hl .hl-ky-lai{margin:var(--k8) 0;padding-left:var(--k16)}
.hl .hl-ky-lai li{margin-bottom:var(--k4);font-size:var(--c13)}

/* theo dõi */
.hl .hl-dai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--k12)}
.hl .hl-dai > li{border-left:4px solid var(--vien-dam);padding:var(--k4) var(--k12)}
.hl .hl-dai > li.hl-dai-xong{border-left-color:var(--tt-xong-dam)}
.hl .hl-dai > li.hl-dai-dang{border-left-color:var(--tt-dang-dam)}
.hl .hl-dai-dau{display:flex;gap:var(--k8);align-items:center;margin-bottom:var(--k4)}
.hl .hl-dai ul{list-style:none;margin:0;padding:0}
.hl .hl-dai ul li{display:flex;justify-content:space-between;gap:var(--k8);flex-wrap:wrap;padding:var(--k4) 0;font-size:var(--c13)}
.hl .hl-dai .ten small{display:block;color:var(--chu-phu);font-size:var(--c12)}
.hl .hl-dem{margin-top:var(--k12);display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap;font-size:var(--c13)}
.hl .hl-tra{list-style:none;margin:0;padding:0}
.hl .hl-tra li{display:flex;justify-content:space-between;gap:var(--k12);flex-wrap:wrap;padding:var(--k8) 0;border-bottom:1px solid var(--vien)}
.hl .hl-tra li small{display:block;color:var(--chu-phu);font-size:var(--c12)}
.hl .hl-tra .hang-nut{display:flex;gap:var(--k8);margin:0}

/* xem toàn văn bản (lớp phủ, ngoài #nd) */
.hl-xem-phu{padding:0}
.hl-xem{background:var(--be-mat);width:100%;height:100%;display:flex;flex-direction:column}
@media (min-width:1024px){ .hl-xem-phu{padding:var(--k16)} .hl-xem{border-radius:var(--bo-lon);max-width:1400px;box-shadow:var(--bong-hop)} }
.hl-xem-dau{display:flex;align-items:flex-start;gap:var(--k12);justify-content:space-between;padding:var(--k12) var(--k16);border-bottom:1px solid var(--vien)}
.hl-xem-dau h2{font-size:var(--c16);font-weight:var(--d-dam);overflow-wrap:anywhere}
.hl-xem-tt{margin-top:var(--k4)}
.hl-xem-than{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:1023px){ .hl-xem-than{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto} .hl-xem-ben{max-height:45vh;border-left:none !important;border-top:1px solid var(--vien)} }
.hl-xem-cuon{overflow:auto;background:var(--be-mat-2);padding:var(--k16);touch-action:pan-x pan-y}
.hl-xem-ben{overflow:auto;padding:var(--k16);border-left:1px solid var(--vien);display:flex;flex-direction:column;gap:var(--k12)}
.hl-xem-ben .hang-nut{display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap;margin:0}
.hl-xem-ben .hl-ly{background:var(--be-mat-2);border:1px solid var(--vien);border-radius:var(--bo-nho);padding:var(--k8) var(--k12);font-size:var(--c13)}
.hl-xem-ben .hl-ly ul{margin:var(--k4) 0 0;padding-left:var(--k16)}
.hl-xem-ben .hl-sua{border-top:1px solid var(--vien);padding-top:var(--k12);display:flex;flex-direction:column;gap:var(--k8)}
.hl-xem-ben .hl-hanh{display:flex;gap:var(--k8);flex-wrap:wrap}
.hl-trang{position:relative;background:#fff;margin:0 auto;box-shadow:var(--bong-noi)}
.hl-trang canvas{display:block}
/* HL-2 sửa (A1): khung xem trước TRONG SUỐT, không nhãn; viền nét đứt chỉ khi rê / chạm / kéo (như ky-chung.js QT-8 2D) */
.hl-khung{position:absolute;background:transparent;user-select:none;-webkit-user-select:none;pointer-events:none}
.hl-khung.sua{cursor:grab;touch-action:none;pointer-events:auto;z-index:3}
.hl-khung.sua:hover,.hl-khung.sua:active,.hl-khung.sua.dang-keo{outline:1px dashed var(--mau)}
.hl-khung.sua.dang-keo{cursor:grabbing}
.hl-khung.moi{outline:1px dashed var(--mau)}                  /* chưa lưu vị trí: luôn thấy để biết chỗ sẽ ký */
.hl .hl-thu-chon{display:flex;gap:var(--k8);align-items:center;cursor:pointer}
.hl .hl-thu-nhan{margin-bottom:var(--k12)}
body.khoa-cuon{overflow:hidden}