/* ═══════════════ BỘ KHỐI SUKIDS — phần vẽ (24/09 · kế hoạch mục 1b + 1c · U13 · U14) ═══════════════
   Nạp ở `may-chu/trang/index.html` (cổng + giaoanhin) và `app/giao-dien/index.html` (app Sukids Sync) —
   MỘT bản cho ba nơi. Hành vi ở `khoi-sukids.js`. Khối chỉ VẼ: tiền · nợ · tên sản phẩm do máy chủ gửi sẵn.

   MÀU THEO CẶP «nền / chữ trên nền» (cách shadcn/ui đặt token — KHÔNG chép giá trị của shadcn): mỗi cặp
   `--nen-X` / `--chu-tren-X` TRỎ VỀ biến màu SẴN CÓ của `cong.css` / `giao-dien.css` (cùng tên ở hai nơi),
   không thêm mã màu nào. Số bên phải là tỉ lệ tương phản WCAG đo 24/09 (≥ 4,5:1 cho chữ thường) —
   `thu-khoi-sukids-chrome.js` đo lại trong Chrome thật trên CHÍNH giá trị tính ra.
   CSS cũ ngoài gói và 6 bộ màu mùa (`loi/giao-dien-mua.js`) KHÔNG đụng. */
:root{
  --nen-no:var(--loi-100);          --chu-tren-no:var(--loi-700);        /* 4.57:1 — còn nợ · chip đỏ           */
  --nen-du:var(--la-100);           --chu-tren-du:var(--la-800);         /* 4.98:1 — đủ tiền · ô Chờ khách lấy  */
  --nen-le:var(--tim-100);          --chu-tren-le:var(--tim-800);        /* 4.95:1 — khách lẻ · bán thêm        */
  --nen-moi:var(--vang-100);        --chu-tren-moi:var(--vang-800);      /* 6.02:1 — chip vàng                  */
  --nen-xam:var(--nen-3);           --chu-tren-xam:var(--chu-phu);       /* 4.56:1 — chip xám · số đếm          */
  --nen-tin:var(--chinh-100);       --chu-tren-tin:var(--chinh-800);     /* 4.52:1 — chip đang bật · ô Chờ gửi in */
  --nen-lab:var(--coral-100);       --chu-tren-lab:var(--loi-700);       /* 4.57:1 — ô Chưa thu                 */
  --nen-bung:var(--la-100);         --chu-tren-bung:var(--la-900);       /* 7.96:1 — tiêu đề thẻ bấm bung       */
  --nen-bung-re:var(--la-150);      --chu-tren-bung-re:var(--la-900);    /* 7.41:1 — …khi rê chuột              */
  --nen-nut-la:var(--la-500);       --chu-tren-nut-la:var(--la-900);     /* 5.38:1 — «Đã gửi in (N)»           */
  /* rê chuột: bản đầu dùng --la-700 = 4.30:1 (DƯỚI ngưỡng — đo 24/09) → đổi sang --la-300 */
  --nen-nut-la-re:var(--la-300);    --chu-tren-nut-la-re:var(--la-900);  /* 6.36:1                               */
  --nen-bot:var(--loi-100);         --chu-tren-bot:var(--loi-900);       /* 6.73:1 — đang bớt Lab/ngăn          */
  --nen-chon:var(--chinh-100);      --chu-tren-chon:var(--chu);          /* 11.19:1 — dòng sản phẩm đã chọn     */
  --nen-nut-mini:var(--chinh-300);  --chu-tren-nut-mini:var(--chu);      /* 8.02:1 — nút «Chọn»                 */
  --nen-bao:var(--la-50);           --chu-tren-bao:var(--la-800);        /* 5.19:1 — câu báo đã thêm            */
  --nen-cho-tien:var(--nen-phu);    --chu-tren-cho-tien:var(--chinh-800);/* 4.75:1 — «đang chờ tiền»            */
  --nen-thanh:var(--nen-phu);       --chu-tren-thanh:var(--chu-phu);     /* 4.82:1 — thanh gửi in · chữ phụ     */
  --nen-nhan-bang:var(--nen-phu);   --chu-tren-nhan-bang:var(--chu);     /* 11.75:1 — cột nhãn của bảng         */
  --nen-vang:var(--vang-500);       --chu-tren-vang-nut:var(--vang-800); /* 4.73:1 — nút vàng                   */
  --nen-vang-re:var(--vang-300);    --chu-tren-vang-re:var(--vang-800);  /* 5.11:1                               */
  --nen-the:var(--nen);             --chu-tren-the:var(--chu);           /* 12.19:1 — thẻ                       */
  --nen-the-mo:var(--vang-25);      --chu-tren-the-mo:var(--chu);        /* 12.06:1 — thẻ đang bung              */
  /* luật 08 ⑤: nút/chip KHÔNG cùng nền với mặt phẳng nó đứng (thẻ/hộp trắng) → chip tắt · nút − + nền xám nhạt */
  --nen-chip:var(--nen-3);          --chu-tren-chip:var(--chu);          /* 11.11:1                              */
}

/* ── BẢNG KHUÔN CHUNG (N5 · U12): nhãn │ nội dung chữ thường một cỡ · giá ô riêng · chữ nhỏ dưới nhãn · mục trống ẨN ── */
.ks-bang{display:flex;flex-direction:column;border:1px solid var(--vien);border-radius:10px;overflow:hidden;background:var(--nen-the);color:var(--chu-tren-the)}
.ks-hang{display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);border-top:1px solid var(--vien)}
.ks-hang:first-child{border-top:0}
.ks-nhan{padding:8px 10px;font-weight:700;font-size:13px;background:var(--nen-nhan-bang);color:var(--chu-tren-nhan-bang);overflow-wrap:anywhere}
.ks-phu{display:block;font-weight:400;font-size:12px;color:var(--chu-tren-thanh)}
.ks-gt{padding:8px 10px;font-size:14px;min-width:0;overflow-wrap:anywhere}
.ks-chu{white-space:pre-line}
.ks-sp{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ks-sp + .ks-sp{border-top:1px dashed var(--vien);margin-top:3px;padding-top:3px}
.ks-gia{flex:0 0 auto;border-left:1px solid var(--vien);padding-left:10px;min-width:80px;text-align:right}
.ks-chan{border-top:1px solid var(--vien);margin-top:4px;padding-top:4px}   /* luật 08 ②: nội dung không đậm */
@media (max-width:640px){
  .ks-hang{grid-template-columns:minmax(96px,38%) minmax(0,1fr)}
  .ks-gia{min-width:64px;padding-left:6px}
}

/* ── NHÃN TRẠNG THÁI (chip không bấm) ── */
.ks-nhan-chip{border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.ks-nhan-no{background:var(--nen-no);color:var(--chu-tren-no)}
.ks-nhan-du{background:var(--nen-du);color:var(--chu-tren-du)}
.ks-nhan-le{background:var(--nen-le);color:var(--chu-tren-le)}
.ks-nhan-moi{background:var(--nen-moi);color:var(--chu-tren-moi)}
.ks-nhan-xam{background:var(--nen-xam);color:var(--chu-tren-xam)}

/* ── CHIP BẬT / NHÓM CHIP (Toggle Group — APG «toolbar» + aria-pressed) ── trạng thái đọc từ aria-pressed, không lớp riêng */
.ks-chip{border-radius:999px;min-height:var(--cao-nut-nho);padding:0 12px;border:1px solid var(--vien-dam);background:var(--nen-chip);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--chu-tren-chip)}
.ks-chip[aria-pressed="true"]{background:var(--nen-tin);border-color:var(--chinh-500);color:var(--chu-tren-tin)}
.ks-nhom-chip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ks-nhom-lien{display:contents}   /* nhóm nằm lẫn trong một hàng ngang có sẵn — không đổi bố cục */

/* ── Ô SỐ LƯỢNG (Number Field — APG «spinbutton») ── */
.ks-so{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;flex:0 1 auto}
.ks-so-nut{width:var(--cao-nut-nho);height:var(--cao-nut-nho);flex:0 0 auto;border-radius:50%;padding:0;font:inherit;font-size:18px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--vien-dam);background:var(--nen-chip);color:var(--chu-tren-chip)}
.ks-so-nut:disabled{cursor:not-allowed;opacity:.4}
input.ks-so-o{width:72px;flex:0 0 auto;height:var(--cao-chip);box-sizing:border-box;border:2px solid var(--chinh-500);border-radius:10px;text-align:center;font:inherit;font-size:17px;margin:0}
.ks-so-nho input.ks-so-o{width:52px;height:var(--cao-nho);font-size:15px;border-width:1px;border-color:var(--vien-o)}
.ks-so-bao{flex-basis:100%;font-size:12.5px;color:var(--chu-tren-moi);background:var(--nen-moi);border-radius:8px;padding:3px 8px}
.ks-so-bao:empty{display:none}

/* ── NHÓM GẤP / THẺ BUNG (Collapsible — APG «disclosure») ── */
.ks-gap-nut{cursor:pointer}
.ks-gap-nut:focus-visible,.ks-chip:focus-visible,.ks-so-nut:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}

/* ── TRỐNG · ĐANG TẢI ── */
.ks-trong{color:var(--chu-tren-thanh);font-size:13.5px;text-align:center;padding:14px 8px;margin:0}
.ks-dang-tai{color:var(--chu-tren-thanh);font-size:13.5px;padding:14px 8px;margin:0}
.ks-dang-tai::before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border-radius:50%;
  border:2px solid var(--chinh-300);border-top-color:var(--chinh-800);animation:ks-quay .8s linear infinite}
@keyframes ks-quay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ks-dang-tai::before{animation:none}}

/* ── BÁO KẾT QUẢ — một hàng duy nhất, trên mọi hộp (lớp che hộp z 60) ── */
.ks-bao{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:10px;
  max-width:min(560px,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px 10px 16px;border-radius:12px;font-size:14px;
  background:var(--nen-du);color:var(--chu-tren-du);border:1px solid var(--la-300);box-shadow:var(--bong-2)}
.ks-bao.ks-bao-loi{background:var(--nen-no);color:var(--chu-tren-no);border-color:var(--loi-300)}
.ks-bao-chu{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ks-bao-x{flex:0 0 auto;width:var(--cao-nut-nho);height:var(--cao-nut-nho);border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:16px;cursor:pointer;padding:0}
/* ── Ô TIỀN ── */
input.ks-tien{text-align:right}
/* ── ĐIỆN THOẠI (luật 08 ⑩): vùng bấm ≥ 44px — giaoanhin là điện thoại trước ── */
@media (max-width:640px){
  .ks-chip{min-height:var(--cao-bam)}
  .ks-so-nut{width:var(--cao-bam);height:var(--cao-bam)}
  input.ks-so-o{height:var(--cao-bam)}
  .ks-bao-x{width:var(--cao-bam);height:var(--cao-bam)}
}

/* ── HỘP «TRAO TAY» (25/09 · 1.5.34 J): ảnh «đạo đức làm nghề» trọn ngang + lời cảm ơn + nút việc chính / «Quay lại».
   Lớp che trên MỌI hộp (hộp chung z 60 · hộp hỏi z 80 · hàng báo z 70) — hộp này có thể mở ngay trên hộp «Giao ảnh».
   Chữ: tiêu đề hộp đậm 17px (luật ② — đậm chỉ tiêu đề) · dòng dưới 14px `--chu-phu` trên nền trắng (≥ 4,5:1).
   «Quay lại» nền `--nen-chip` — không cùng nền mặt phẳng trắng (luật ⑤). Nút cao `--cao-bam` 44px (luật ⑩). ── */
.ks-tt-man{position:fixed;inset:0;z-index:90;background:var(--man-che);display:flex;align-items:center;justify-content:center;
  padding:var(--k4, 16px);box-sizing:border-box;overflow:auto}
.ks-tt-hop{background:var(--nen-the);color:var(--chu-tren-the);border-radius:var(--bo-hop, 20px);width:min(440px,100%);
  max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--bong-3);display:flex;flex-direction:column;margin:auto}
.ks-tt-anh{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--bo-hop, 20px) var(--bo-hop, 20px) 0 0;flex:none}
.ks-tt-than{padding:var(--k4, 16px) var(--k5, 24px) var(--k5, 24px);display:flex;flex-direction:column;gap:var(--k2, 8px)}
.ks-tt-tieu{margin:0;font-size:17px;line-height:1.4;font-weight:700;overflow-wrap:anywhere}
.ks-tt-phu{margin:0;font-size:14px;line-height:1.5;color:var(--chu-phu);font-weight:400}
/* 1.5.49 D8: CTV nộp thiếu — dòng cảnh báo trong CHÍNH hộp trao tay (một hộp hỏi), cùng cặp màu lỗi `.ks-lh-loi` */
.ks-tt-canh{margin:0;font-size:14px;line-height:1.5;color:var(--loi-700);font-weight:400}
.ks-tt-nut{display:flex;gap:var(--k2, 8px);justify-content:flex-end;margin-top:var(--k2, 8px);flex-wrap:wrap}
.ks-tt-nut .nut{min-height:var(--cao-bam, 44px);padding-left:var(--k4, 16px);padding-right:var(--k4, 16px)}
.ks-tt-nut .nut.phu{background:var(--nen-chip);color:var(--chu-tren-chip)}
@media (max-width:520px){
  .ks-tt-man{padding:var(--k3, 12px)}
  .ks-tt-than{padding:var(--k3, 12px) var(--k4, 16px) var(--k4, 16px)}
  .ks-tt-nut{flex-direction:column-reverse}
  .ks-tt-nut .nut{width:100%}
}

/* ── HỘP «XOÁ BỘ — VÌ SAO?» (1.5.35 M3): dùng lại khung hộp trao tay (lớp che z 90, Esc/Tab ở khoi-sukids.js), rộng
   hơn cho ô mô tả. Ô đỏ = cặp «gấp» sẵn có `--loi-700` trên nền trắng (4.57:1 — luật ⑤ ⑫), chữ lỗi 13px (≥ 12px ①).
   Dòng cảnh báo chữ thường 14px (luật ② — nội dung không đậm). ── */
.ks-lh-hop{width:min(520px,100%)}
.ks-lh-dong{margin:0;font-size:14px;line-height:1.5;color:var(--chu-phu);font-weight:400;overflow-wrap:anywhere}
.ks-lh-nhan{margin-top:var(--k2, 8px);font-size:14px;font-weight:700;color:var(--chu)}
.ks-lh-buoc{font-weight:400;font-size:13px;color:var(--chu-phu)}
.ks-lh-o{width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:var(--chu);background:var(--nen);
  border:1px solid var(--vien-o);border-radius:var(--bo-o, 10px);padding:8px 10px;min-height:var(--cao-bam, 44px)}
.ks-lh-mo-ta{resize:vertical;line-height:1.5;min-height:96px}
.ks-lh-o:focus-visible{outline:3px solid var(--chinh-500);outline-offset:1px}
.ks-lh-o.o-thieu,.ks-lh-o.o-thieu:focus-visible{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.ks-lh-loi{margin:0;font-size:13px;line-height:1.45;color:var(--loi-700);font-weight:400}
.ks-lh-loi[hidden]{display:none}

/* ── HỘP XEM «Cách tính điểm» (26/09 · KS.hopXem): khung hộp trao tay, dòng chữ thường 14px `--chu` trên nền thẻ trắng
   (11.11:1 — luật ①②⑤), không đậm (nội dung). Link sổ tay `--chinh-800` trên trắng 4.93:1, cao ≥ 44px trên điện thoại (⑩). ── */
.ks-hx-hop{width:min(560px,100%)}
.ks-hx-ds{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.ks-hx-dong{margin:0;font-size:14px;line-height:1.5;color:var(--chu);font-weight:400;overflow-wrap:anywhere}
.ks-hx-chua{color:var(--chu-phu)}
.ks-hx-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:var(--cao-nut-nho, 30px);font-size:14px;color:var(--chinh-800)}
.ks-hx-link:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
@media (max-width:640px){ .ks-hx-link{min-height:var(--cao-bam, 44px)} }

/* ── TẤM TRƯỢT TỪ ĐÁY (01/10 · kế hoạch giao diện điện thoại A2 · KS.tamTruot): máy tính = hộp giữa màn; điện thoại (≤ 640px)
   = dán đáy, rộng hết bề ngang, bo góc trên 20px, thanh nút DÍNH ĐÁY tấm + chừa vùng an toàn iPhone. Lớp che z 85 (dưới hộp hỏi
   trao tay z 90 — hộp hỏi «Xoá?» mở từ trong tấm phải nằm TRÊN tấm). Chữ tiêu đề 17px đậm (luật ②), thân 15px. Nút cao
   `--cao-bam` (⑩); nút phụ nền `--nen-chip` ≠ nền tấm trắng (⑤). `100dvh` thay `100vh`: thanh địa chỉ Safari co giãn. ── */
.ks-tam-man{position:fixed;inset:0;z-index:85;background:var(--man-che);display:flex;align-items:center;justify-content:center;
  padding:var(--k4, 16px);box-sizing:border-box}
.ks-tam-hop{background:var(--nen-the);color:var(--chu-tren-the);border-radius:var(--bo-hop, 20px);width:min(480px,100%);
  max-height:calc(100dvh - 32px);display:flex;flex-direction:column;box-shadow:var(--bong-3);overflow:hidden;
  overscroll-behavior:contain}
.ks-tam-quai{display:none}
.ks-tam-dau{display:flex;align-items:center;gap:var(--k2, 8px);padding:var(--k3, 12px) var(--k4, 16px) var(--k2, 8px);flex:none}
.ks-tam-tieu{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.35;font-weight:700;overflow-wrap:anywhere}
.ks-tam-x{flex:none;width:var(--cao-bam, 44px);height:var(--cao-bam, 44px);border-radius:50%;border:1px solid var(--vien);
  background:var(--nen-chip);color:var(--chu-tren-chip);font-size:16px;cursor:pointer;padding:0}
.ks-tam-than{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 var(--k4, 16px) var(--k3, 12px);
  font-size:15px;line-height:1.5;display:flex;flex-direction:column;gap:var(--k2, 8px)}
.ks-tam-chan{flex:none;display:flex;gap:var(--k2, 8px);justify-content:flex-end;flex-wrap:wrap;padding:var(--k2, 8px) var(--k4, 16px)
  calc(var(--k3, 12px) + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--vien);background:var(--nen-the)}
.ks-tam-chan .nut{min-height:var(--cao-bam, 44px);padding-left:var(--k4, 16px);padding-right:var(--k4, 16px)}
.ks-tam-chan .nut.phu{background:var(--nen-chip);color:var(--chu-tren-chip)}
@media (max-width:640px){
  .ks-tam-man{align-items:flex-end;padding:0}
  .ks-tam-hop{width:100%;max-height:92dvh;border-radius:20px 20px 0 0;animation:ksTamLen .18s ease-out}
  .ks-tam-quai{display:block;width:40px;height:5px;border-radius:3px;background:var(--vien-dam);margin:8px auto 0;flex:none}
  .ks-tam-chan .nut{flex:1 1 0}
}
@keyframes ksTamLen{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ks-tam-hop{animation:none}}

/* 01/10 (kế hoạch giao diện điện thoại A3): màn hẹp đưa hàng báo lên ĐẦU, dưới thanh tiêu đề. Ở đáy nó đè lên mọi thanh nút
   dính đáy (khung sửa Tủ đồ «Lưu & đóng» · giaoanhin «Nhận hàng vào kho» · thanh tab) suốt 5–8 giây — đo bằng chạm thật:
   chạm «Lưu & thêm tiếp» trúng hàng báo, không trúng nút. */
@media (max-width:899px){
  .ks-bao{top:calc(64px + env(safe-area-inset-top, 0px));bottom:auto}
}