/* ═══════════════ KHỐI BÁO LỖI — phần vẽ (1.5.35 M8) ═══════════════
   Nạp SAU khoi-sukids.css ở cổng (`may-chu/trang/index.html`) và app (`app/giao-dien/index.html` · `xem-thu.html`).
   Khung hộp dùng lại `.ks-tt-man` / `.ks-tt-hop` / `.ks-lh-*` của hộp «Xoá bộ — vì sao?» (Esc/Tab ở khoi-bao-loi.js) — ở
   đây CHỈ thêm ô ảnh, bảng «máy tự gửi kèm», khung «đã gửi» và nút trên đầu màn. Mọi màu trỏ về biến SẴN CÓ (luật 08 ⑤),
   tỉ lệ đo 25/09 ghi cạnh; chữ ≥ 12px (①); nội dung không đậm (②); vùng bấm điện thoại ≥ 44px (⑩). */

/* Nút «⚠ Báo lỗi» trên đầu màn (cổng · giaoanhin · app). Nền `--nen-moi` (vàng nhạt) / chữ `--chu-tren-moi` 6.02:1 —
   khác nền thanh đầu trắng (⑤: nút không cùng nền mặt phẳng nó đứng). */
.nut-bao-loi{background:var(--nen-moi);color:var(--chu-tren-moi);border:1px solid var(--vang-300, currentColor);
  border-radius:999px;font:inherit;font-size:13px;font-weight:600;padding:4px 12px;min-height:var(--cao-nut-nho, 32px);
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.nut-bao-loi:hover{filter:brightness(.97)}
.nut-bao-loi:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
@media (max-width:640px){ .nut-bao-loi{min-height:var(--cao-bam, 44px);padding:4px 10px} }
/* Thanh đầu điện thoại hẹp (giaoanhin 375 · sale 390 xếp một hàng): chỉ còn «⚠» — tên đọc qua aria-label/title */
@media (max-width:480px){ .nut-bao-loi{min-width:var(--cao-bam, 44px);padding:4px 8px} .nut-bao-loi-chu{display:none} }

/* Nút nhỏ trong hàng báo lỗi chung `#ks-bao` — chữ kế thừa màu hàng báo lỗi (`--chu-tren-no` 4.57:1). */
.ks-bao-bl{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;color:inherit;background:transparent;
  border:1px solid currentColor;border-radius:999px;padding:2px 10px;min-height:var(--cao-nut-nho, 32px);cursor:pointer}
@media (max-width:640px){ .ks-bao-bl{min-height:var(--cao-bam, 44px)} }

/* Ô ảnh: khung đứt nét trên nền trắng của hộp; ảnh xem trước thu vừa khung. Ảnh sai loại → viền đỏ `--loi-700` (4.57:1). */
.ks-bl-anh{border:1px dashed var(--vien-o);border-radius:var(--bo-o, 10px);background:var(--nen-phu);padding:8px;
  min-height:72px;display:flex;align-items:center;justify-content:center}
.ks-bl-anh.o-thieu{border:2px solid var(--loi-700)}
.ks-bl-xem{display:block;max-width:100%;max-height:220px;height:auto;border-radius:8px;object-fit:contain}
.ks-bl-goi-y{margin:0;font-size:13px;line-height:1.5;color:var(--chu-phu);text-align:center}
.ks-bl-goi-y kbd{font:inherit;font-size:12px;border:1px solid var(--vien-o);border-radius:4px;padding:0 4px;background:var(--nen)}
.ks-bl-nut-anh{display:flex;gap:var(--k2, 8px);flex-wrap:wrap}
.ks-bl-nut-anh .nut{min-height:var(--cao-nut-nho, 32px);font-size:13px;background:var(--nen-chip);color:var(--chu-tren-chip)}
@media (max-width:640px){ .ks-bl-nut-anh .nut{min-height:var(--cao-bam, 44px)} }

/* «Máy tự gửi kèm» — khuôn bảng chung (④): nhãn │ nội dung, nền `--nen-nhan-bang` cho cột nhãn (11.75:1). */
.ks-bl-kem{border:1px solid var(--vien-o);border-radius:var(--bo-o, 10px);overflow:hidden;font-size:13px}
.ks-bl-kem-tieu{padding:6px 10px;font-weight:700;color:var(--chu);background:var(--nen-nhan-bang);border-bottom:1px solid var(--vien-o)}
.ks-bl-kem-dong{display:grid;grid-template-columns:136px minmax(0,1fr);border-top:1px solid var(--vien-o)}
.ks-bl-kem-tieu + .ks-bl-kem-dong{border-top:0}
.ks-bl-kem-nhan{padding:6px 10px;background:var(--nen-nhan-bang);color:var(--chu-tren-nhan-bang)}
.ks-bl-kem-gt{padding:6px 10px;color:var(--chu);overflow-wrap:anywhere;min-width:0}

/* Khung «Đã gửi»: nền `--nen-du` / chữ `--chu-tren-du` 4.98:1 (cặp «đủ» sẵn có). Mã BL-… chữ đơn cách, không đậm thêm. */
.ks-bl-xong{border-radius:var(--bo-o, 10px);background:var(--nen-du);color:var(--chu-tren-du);padding:12px 14px}
.ks-bl-xong .ks-lh-dong{color:var(--chu-tren-du)}
.ks-bl-xong-tieu{margin:0 0 4px;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.ks-bl-ma{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;letter-spacing:.02em}

/* ── Mục «🐞 Báo lỗi» trang quản trị (qt-bao-loi.js) — khuôn thẻ + bảng chung ks-bang (④) ── */
.qt-bl{display:flex;flex-direction:column;gap:12px}
.qt-bl-loc{display:flex;gap:8px;flex-wrap:wrap}
/* Chip lọc: nền `--nen-chip` / `--chu-tren-chip` trên mặt trắng; đang bật `--nen-tin` / `--chu-tren-tin` 4.52:1 (⑤) */
.qt-bl-chip{font:inherit;font-size:14px;border-radius:999px;border:1px solid var(--vien-o);background:var(--nen-chip);
  color:var(--chu-tren-chip);padding:4px 12px;min-height:var(--cao-nut-nho, 32px);cursor:pointer}
.qt-bl-chip[aria-pressed="true"]{background:var(--nen-tin);color:var(--chu-tren-tin);border-color:currentColor}
.qt-bl-chip:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
.qt-bl-so{font-variant-numeric:tabular-nums}
.qt-bl-the{border:1px solid var(--vien-o);border-radius:var(--bo-o, 10px);background:var(--nen);padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;min-width:0}
.qt-bl-dau{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.qt-bl-ma{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:14px;font-weight:700;color:var(--chu)}
.qt-bl-tt{font-size:13px;border-radius:999px;padding:2px 10px;background:var(--nen-xam);color:var(--chu-tren-xam)}
.qt-bl-tt-moi{background:var(--nen-no);color:var(--chu-tren-no)}                 /* 4.57:1 */
.qt-bl-tt-dang-xu-ly{background:var(--nen-moi);color:var(--chu-tren-moi)}        /* 6.02:1 */
.qt-bl-tt-da-xong{background:var(--nen-du);color:var(--chu-tren-du)}             /* 4.98:1 */
.qt-bl-phu{font-size:13px;color:var(--chu-phu);overflow-wrap:anywhere}
.qt-bl-mo-ta{margin:0;font-size:14px;line-height:1.5;color:var(--chu);white-space:pre-wrap;overflow-wrap:anywhere}
.qt-bl-anh{display:block;max-width:100%;max-height:360px;width:auto;height:auto;cursor:zoom-in;border:1px solid var(--vien-o);border-radius:8px}
.qt-bl-lich{margin:0;padding-left:18px;font-size:13px;color:var(--chu-phu)}
.qt-bl-nhan{font-size:13px;font-weight:700;color:var(--chu)}
/* R B1-fwd: nói rõ ô này đi tới người báo khi chốt — chữ thường 13px, màu phụ sẵn có */
.qt-bl-goi-y{margin:0;font-size:13px;line-height:1.45;color:var(--chu-phu);font-weight:400}
.qt-bl-ghi-chu{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:6px 10px;resize:vertical}
/* 1.5.49 D15: chốt «Đã xong» thiếu ghi chú → đỏ TẠI ô (luật 08 ⑫), cặp --loi-700 trên --nen ≥ 4,5:1 */
.qt-bl-ghi-chu.o-thieu,.qt-bl-ghi-chu.o-thieu:focus-visible{border-color:var(--loi-700);outline:2px solid var(--loi-700);outline-offset:0}
.qt-bl-loi{margin:0;font-size:13px;line-height:1.45;color:var(--loi-700);font-weight:400}
.qt-bl-loi[hidden]{display:none}
.qt-bl-nut{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){ .qt-bl-chip,.qt-bl-nut .qt-nut{min-height:var(--cao-bam, 44px)} }
.qt-bl-anh.qt-bl-anh-to{max-height:none;cursor:zoom-out}

/* ═══════════════ NÚT MỞ SỔ TAY (1.5.35 M7 · khoi-so-tay.js) ═══════════════
   «?» góc màn/hộp: tròn, nền `--nen-chip` / chữ `--chu-tren-chip` 11.11:1 — khác nền thanh đầu/hộp trắng (⑤). Máy tính
   32px (`--cao-nut-nho`), điện thoại ≥ 44px (⑩). Chữ «?» là ký hiệu — tên đọc qua aria-label «Hướng dẫn màn này». */
.ks-so-tay{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:var(--cao-nut-nho, 32px);height:var(--cao-nut-nho, 32px);min-width:var(--cao-nut-nho, 32px);padding:0;margin:0;
  border-radius:50%;border:1px solid var(--vien-dam, currentColor);background:var(--nen-chip);color:var(--chu-tren-chip);
  font:inherit;font-size:16px;font-weight:600;line-height:1;cursor:pointer}
.ks-so-tay:hover{filter:brightness(.97)}
.ks-so-tay:focus-visible{outline:3px solid var(--chinh-500);outline-offset:2px}
@media (max-width:640px){ .ks-so-tay{width:var(--cao-bam, 44px);height:var(--cao-bam, 44px);min-width:var(--cao-bam, 44px)} }
/* Hộp app có nút × tuyệt đối góc phải (`.hop > .dong`): «?» đứng ngay bên trái nó, tiêu đề chừa chỗ cho cả hai. */
.hop > .ks-so-tay-goc{position:absolute;top:var(--k3, 12px);right:calc(var(--k4, 16px) + 44px)}
.hop:has(> .ks-so-tay-goc) > h2{padding-right:92px}
/* Thanh đầu hộp Cài đặt app: `.dong` đang `margin-left:auto` — «?» nhận lề tự động, × đứng sát sau nó. */
.cd-dau > .ks-so-tay{margin-left:auto}
.cd-dau > .ks-so-tay + .dong{margin-left:0}
/* Hộp chung «Xoá bộ — vì sao?» (KS.hopLyDoHuy) khi người gọi khai `soTay`: tiêu đề │ «?» */
.ks-tt-dau{display:flex;align-items:flex-start;gap:var(--k2, 8px)}
.ks-tt-dau > .ks-tt-tieu{flex:1 1 auto;min-width:0}

/* «📖 Cách xử lý» cạnh câu lỗi — trong hàng báo chung `#ks-bao` chữ kế thừa màu hàng báo lỗi (`--chu-tren-no` 4.57:1, như
   nút «⚠ Báo lỗi» bên cạnh); trong hộp/chuông nó mang thêm lớp `nut phu` của nơi đặt. */
.ks-so-tay-xl{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.ks-bao .ks-so-tay-xl{color:inherit;background:transparent;border:1px solid currentColor;border-radius:999px;padding:2px 10px;
  min-height:var(--cao-nut-nho, 32px)}
@media (max-width:640px){ .ks-bao .ks-so-tay-xl{min-height:var(--cao-bam, 44px)} }
.ks-tt-nut > .ks-so-tay-xl{margin-right:auto}
.hoi-bao .ks-so-tay-xl{margin-left:var(--k2, 8px);vertical-align:middle;background:var(--nen-chip);color:var(--chu-tren-chip);
  border:1px solid var(--vien-dam, currentColor);border-radius:999px;padding:2px 10px;min-height:var(--cao-nut-nho, 32px)}
.qt-bl-anh + .qt-bl-anh{margin-top:8px}