/* HCL ONE — module BÁO LỖI (0.7). Chỉ lớp .bl-*, chỉ biến màu của hệ thiết kế (web/giao_dien.css) — đúng cả chế độ tối. */

/* ---- nút tròn nổi góc dưới trái: trắng viền (không tranh chỗ nút vàng), đứng trên thanh tab đáy / chân nút chính (JS đặt bottom) */
.bl-nut{position:fixed;left:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:8;width:48px;height:48px;padding:0;border-radius:50%;
  display:grid;place-items:center;background:var(--the);color:var(--chinh);border:1.5px solid var(--vien);box-shadow:var(--bong-2);cursor:pointer;
  transition:transform .18s ease,opacity .18s ease}
.bl-nut:active{transform:scale(.93)}
.bl-nut.bl-lui{transform:translateX(-76px);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.bl-nut{transition:none}}
.bl-nut:focus-visible{outline:3px solid var(--chinh-nhat);outline-offset:2px}
.bl-nut[hidden]{display:none}
@media print{.bl-nut{display:none!important}}
/* chừa chỗ dưới cùng trang để nội dung cuối cuộn lên được trên nút (--bl-day do JS tính theo vị trí nút) */
body.bl-co-nut main:not(.rong){padding-bottom:max(calc(96px + env(safe-area-inset-bottom)), var(--bl-day, 0px))}
body.bl-co-nut.co-tab-day main:not(.rong){padding-bottom:max(calc(92px + env(safe-area-inset-bottom)), var(--bl-day, 0px))}
body.bl-co-nut.co-chan main:not(.rong){padding-bottom:max(calc(150px + env(safe-area-inset-bottom)), var(--bl-day, 0px))}

/* ---- tấm trượt "Anh/chị gặp chuyện gì?" */
.bl-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.bl-dau h3{margin:0}
.bl-x{flex:none;width:40px;height:40px;color:var(--mo)}
.bl-tab{margin-bottom:14px}
.bl-tab .dem{margin-left:6px}
.bl-sheet textarea{min-height:104px;resize:vertical}
.goi-y.bl-sai{color:var(--do);font-weight:600}
.bl-anh-o{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:12px;border-radius:var(--r-vua);text-align:left;font:inherit;color:var(--chu)}
.bl-anh-o.them{min-height:64px;border:2px dashed var(--vien);background:var(--nen-2);color:var(--chinh);cursor:pointer}
.bl-anh-o.them>svg{flex:none}
.bl-anh-o.them b{display:block;font:700 15px var(--noi-dung)}
.bl-anh-o.them small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--mo)}
.bl-anh-o.dang{border:1px solid var(--vien-2);background:var(--nen-2)}
.bl-anh-o.dang .hc-tai{width:56px;flex:none;margin:0!important}
.bl-anh-o.co{border:1px solid var(--vien-2);background:var(--the)}
.bl-anh-o.co img{width:64px;height:96px;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--vien-2);flex:none;background:var(--nen-2)}
.bl-anh-chu{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.bl-anh-chu .hc-nut{margin-left:-8px}
.bl-kem{margin:0 0 14px;border:1px solid var(--vien-2);border-radius:var(--r-vua);padding:0 12px;background:var(--nen)}
.bl-kem summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--mo);font:600 14px var(--noi-dung);list-style:none}
.bl-kem summary::-webkit-details-marker{display:none}
.bl-kem[open] summary{color:var(--chinh)}
.bl-kem .hc-kv{font-size:13.5px}
.bl-kem .hc-phu{margin:4px 0 12px}
.bl-ds-toi .hc-dong{align-items:flex-start}
.bl-ghi{display:flex!important;align-items:flex-start;gap:5px;color:var(--chu)!important;background:var(--nen-2);border-radius:8px;padding:6px 8px;margin-top:6px!important}
.bl-ghi svg{flex:none;margin-top:2px;color:var(--chinh)}

/* ---- chép: đã chép / chép tay */
.bl-da-chep{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:4px auto 10px;background:var(--xanh-nhat);color:var(--xanh)}
.bl-da-chep+h3{text-align:center}
.bl-huong{margin:0 0 14px!important}
.bl-de-sau{margin-top:8px}
.bl-van-ban{width:100%;min-height:220px;font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:4px 0 8px}

/* ---- màn #/bao-loi: lọc, danh sách chọn được, chân nút chép */
.bl-loc{margin-bottom:6px}
.bl-ds .bl-dong{padding:10px 12px 10px 6px;gap:6px;align-items:flex-start}
.bl-ds .bl-dong.chon{background:var(--vang-nhat)}
.bl-o-chon{flex:none;width:48px;height:48px;margin:-4px 0;border:0;background:none;color:var(--vien);display:grid;place-items:center;cursor:pointer;border-radius:12px}
.bl-dong.chon .bl-o-chon{color:var(--chinh)}
.bl-o-chon:focus-visible{outline:3px solid var(--chinh-nhat)}
.bl-ds .hc-dong-giua{color:var(--chu);text-decoration:none;padding-top:2px}
.bl-ds .hc-dong-cuoi{padding-top:4px}
.bl-ds .bl-ma{font-size:12px}
.bl-ds .hc-dong .p .bl-so-loi{color:var(--do);font-weight:700}   /* thắng luật chung ".hc-dong .p b" của bao_cao.css */
.bl-co-anh{color:var(--mo);display:inline-grid}
.bl-chan-chu{margin:0 0 6px;text-align:center;font-size:13px;color:var(--mo)}
.bl-dem-nut{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--cham-dam);color:var(--vang);font:800 13px var(--tieu-de);margin-left:2px}

/* ---- chi tiết */
.bl-nhan{font:600 12.5px var(--noi-dung);color:var(--mo);letter-spacing:.02em}
.bl-the h3{margin-top:2px}
.bl-noi-dung{margin:10px 0 0;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bl-the-chan{margin-top:12px}
.bl-anh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:0 0 12px}
.bl-anh-xem{padding:0;border:1px solid var(--vien-2);border-radius:12px;background:var(--nen-2);overflow:hidden;cursor:zoom-in;aspect-ratio:9/16}
.bl-anh-xem img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.bl-anh-chua{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:9/16;padding:10px;border:2px dashed var(--vien);border-radius:12px;
  color:var(--mo);font-size:12.5px;text-align:center}
.bl-xem-anh{text-align:center}
.bl-anh-to{max-width:100%;max-height:72vh;border-radius:12px;border:1px solid var(--vien-2);margin:0 auto 12px;display:block}
.bl-tt{margin-bottom:12px}
.bl-ghi-chu textarea{min-height:84px}
.bl-xu-ly{margin:10px 0 0!important;text-align:center}
.bl-ma{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;overflow-wrap:anywhere}
.bl-ua{font-weight:400;font-size:12px;color:var(--mo);overflow-wrap:anywhere}
.bl-loi-ds{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.bl-loi{background:var(--the);border:1px solid var(--vien-2);border-left:4px solid var(--do);border-radius:var(--r-vua);padding:10px 12px;min-width:0}
.bl-loi-dau{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mo)}
.bl-loi-dau b{color:var(--chu);font-variant-numeric:tabular-nums}
.bl-loi-tin{margin-top:6px;font:600 14.5px/1.4 var(--noi-dung);overflow-wrap:anywhere;color:var(--chu)}
.bl-loi-nguon{margin-top:2px;font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--mo);overflow-wrap:anywhere}
.bl-loi details{margin-top:6px}
.bl-loi summary{cursor:pointer;color:var(--chinh);font:600 13px var(--noi-dung)}
.bl-loi pre{margin:6px 0 0;padding:8px;border-radius:8px;background:var(--nen-2);font:11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--chu-2)}

/* ---- thẻ trang chủ giám đốc: "N báo lỗi mới" */
.bl-the-tc{padding:12px 14px}
.bl-the-tc .hc-the-dau{align-items:center}
.bl-the-tc-chu{flex:1;min-width:0}
.bl-the-tc .hc-the-dau>svg{color:var(--mo);flex:none}