/* HCL ONE — module ĐI THỊ TRƯỜNG (0.7 → 0.9: đi đào tạo / đi giám sát, anh Vũ 28/09). Chỉ lớp tiền tố .dtt-, chỉ dùng biến màu của hệ thiết kế (giao_dien.css) — đúng cả chế độ tối. */

/* ---- ô chỉ tiêu (thẻ trang chủ + đầu màn) */
.dtt-ct-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 4px}
.dtt-ct-luoi.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .dtt-ct-luoi.c4{grid-template-columns:repeat(4,minmax(0,1fr))} .dtt-ct-luoi.c1{grid-template-columns:1fr}
.dtt-ct{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:84px;padding:10px 10px 9px;border-radius:var(--r-vua);background:var(--nen-2);
  border:1px solid var(--vien-2);border-bottom:4px solid var(--vien);color:var(--chu);text-decoration:none;min-width:0}
.dtt-ct b{font:800 22px/1.05 var(--tieu-de);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtt-ct b small{font-size:.62em;opacity:.7;margin-left:1px}
.dtt-ct .n{font-size:12px;line-height:1.25;color:var(--mo)}
.dtt-ct .hc-chip{margin-top:auto;height:20px;font-size:11px;padding:0 7px}
.dtt-ct.xanh{border-bottom-color:var(--xanh)} .dtt-ct.xanh b{color:var(--xanh)}
.dtt-ct.cam{border-bottom-color:var(--cam)} .dtt-ct.cam b{color:var(--cam-dam)}
.dtt-ct.do{border-bottom-color:var(--do)} .dtt-ct.do b{color:var(--do)}
@media (prefers-color-scheme: dark){ .dtt-ct.cam b{color:#FFC46B} }
.hc-hero .dtt-ct{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.hc-hero .dtt-ct .n{color:#C9CDEB} .hc-hero .dtt-ct b{color:#fff}
.hc-hero .dtt-ct.xanh{border-bottom-color:#8FD39A} .hc-hero .dtt-ct.cam{border-bottom-color:var(--vang)} .hc-hero .dtt-ct.do{border-bottom-color:#FF8A80}

/* ---- thẻ trang chủ */
.dtt-tc{padding:14px 14px 10px}
.dtt-tc-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dtt-tc-dau .tc-nhan{margin:0}
.dtt-tc-dau a{font:700 13.5px var(--noi-dung);color:var(--chinh);text-decoration:none;white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}
.dtt-muc-nho{font:700 11.5px/1.2 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--mo);margin:14px 0 2px}
.dtt-ds-gon{box-shadow:none;border:0;border-radius:0;margin:0;background:transparent}
.dtt-ds-gon>.hc-dong{padding:10px 0;min-height:56px;background:transparent}
.dtt-ds-gon>.hc-dong:last-child{border-bottom:0}
.dtt-ds-gon .hc-dong-dau{width:36px;height:36px;border-radius:10px}
.dtt-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-top:6px;padding:0 2px;border-top:1px solid var(--vien-2);
  color:var(--chinh);font:700 14px var(--noi-dung);text-decoration:none}
.dtt-ww-mo{padding:12px 14px}
.dtt-ww-mo .hc-nut{margin-top:10px}
.dtt-ky .hc-the-dau>svg{color:var(--vang-chu);flex:none;align-self:center}

/* ---- danh sách: chữ phụ nhiều dòng, dòng đang chờ gửi, mũi tên cạnh chip */
.dtt-cho{background:var(--vang-nhat)}
.hc-dong .p.chu-do{font-weight:600;color:var(--do)}
.dtt-mui{flex:none;display:inline-flex;margin-left:-4px;color:var(--mo)}
.dtt-dong-nut{flex:none}
.dtt-dong-nut .hc-nut,.hc-nut.nho.dtt-48{min-height:48px}

/* ---- audit: tồn đếm, câu hỏi chủ quán, chip "không" màu đỏ */
.dtt-kv{margin-top:6px;font-size:14px} .dtt-kv dd{font-weight:600}
.dtt-het{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 2px 8px;font:600 14.5px var(--noi-dung);color:var(--chu);cursor:pointer}
.dtt-het input{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--do);flex:none}
.dtt-chon>button[data-v="khong"].chon,.dtt-chon>button[data-v="chua_dat"].chon,.dtt-chon>button[data-v="khong_dat"].chon{background:var(--do);border-color:var(--do);color:#fff}
.dtt-chon>button[data-v="khong_kiem"].chon{background:var(--mo);border-color:var(--mo);color:#fff}
.dtt-chon>button[data-v="co"].chon,.dtt-chon>button[data-v="dat"].chon{background:var(--xanh);border-color:var(--xanh);color:#fff}
.dtt-chon>button{flex:1 1 auto}
.dtt-hoi .hc-truong:last-child{margin-bottom:0}
.dtt-hoi .hc-truong>label{color:var(--chu);font-weight:700;font-size:14.5px}
.dtt-so-sku{font-variant-numeric:tabular-nums}

/* ---- đi cùng: 5 tiêu chí, mỗi tiêu chí 5 nút lớn */
.dtt-tc-hang{padding:10px 0;border-bottom:1px dashed var(--vien-2)}
.dtt-tc-hang:last-child{border-bottom:0;padding-bottom:2px}
.dtt-tc-ten{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 15px var(--noi-dung);margin-bottom:8px}
.dtt-tc-ten span{font:600 12.5px var(--noi-dung);color:var(--mo)}
.dtt-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dtt-5>button{min-height:48px;padding:0;font:800 18px var(--tieu-de)}
.dtt-5>button.chon{background:var(--cham);border-color:var(--cham);color:#fff}
.dtt-5>button.duoi{background:var(--chinh-nhat);border-color:var(--chinh-nhat);color:var(--chinh)}

/* ---- kết quả tiêu chí: 5 ô nhỏ */
.dtt-kq{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--vien-2);font-size:14.5px}
.dtt-kq:last-child{border-bottom:0}
.dtt-kq>span:first-child{flex:1;min-width:0}
.dtt-kq b{font:800 16px var(--tieu-de);min-width:18px;text-align:right}
.dtt-o5{display:inline-flex;gap:3px;flex:none}
.dtt-o5 i{width:16px;height:9px;border-radius:4px;background:var(--vien)}
.dtt-o5 i.co{background:var(--vang)}
.dtt-o5.thap i.co{background:var(--cam)} .dtt-o5.tot i.co{background:var(--xanh)}
.dtt-van{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}

/* ---- so tồn trong phiếu audit */
.dtt-lech{background:var(--do-nhat)}
.dtt-lech .hc-dong-cuoi b{color:var(--do)}
.dtt-chenh{font:800 16px var(--tieu-de);font-variant-numeric:tabular-nums}

/* ---- bảng đi thị trường */
.dtt-gs{padding:12px 14px}
.dtt-gs .hc-so-luoi{margin:10px 0 2px}
.dtt-so-nho .hc-so{padding:8px 4px;background:var(--nen-2)}
.dtt-so-nho .hc-so b{font-size:19px}
.dtt-so-nho .hc-so span{font-size:11px}
.dtt-so-nho .hc-so.xam b{color:var(--mo)}
.dtt-bang-ds{margin-bottom:12px}
.dtt-bang-ds>.hc-the{margin:0}
.dtt-chu-thich{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 2px 12px;font-size:12.5px;color:var(--mo)}
.dtt-chu-thich .dtt-goi-y{flex-basis:100%}

/* ---- khối trên màn điểm bán (module khác chèn) */
.dtt-khoi-diem{padding:12px 14px}
.dtt-khoi-diem b{font:800 15.5px var(--tieu-de)}
.dtt-khoi-diem .hc-phu{margin-top:2px}
.dtt-khoi-diem .hc-nut{flex:none;min-height:48px}

/* ---- phiếu chờ gửi (mất sóng) */
.dtt-cho-gui{border-style:dashed}

/* ================================================================ 0.9 — đi đào tạo / đi giám sát */
/* ---- hai nút lớn đầu màn Đi thị trường */
.dtt-hai-nut{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
.dtt-nut-lon{display:flex;align-items:center;gap:10px;min-height:72px;padding:12px;border-radius:var(--r-vua);border:1.5px solid var(--vien);border-left:5px solid var(--vang);
  background:var(--the);color:var(--chu);text-align:left;font:inherit;cursor:pointer;box-shadow:var(--bong-1)}
.dtt-nut-lon:active{background:var(--nen-2)}
.dtt-nut-lon>svg{flex:none;color:var(--chinh)}
.dtt-nut-lon>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.dtt-nut-lon b{font:800 18px/1.2 var(--tieu-de);color:var(--chinh)}
.dtt-nut-lon small{font-size:12.5px;line-height:1.35;color:var(--mo)}
@media (max-width:360px){ .dtt-hai-nut{grid-template-columns:1fr} }
.dtt-tc-thang{margin:8px 0 2px;font-size:14.5px;color:var(--chu)} .dtt-tc-thang b{font-family:var(--tieu-de);color:var(--chinh)}

/* ---- tấm chọn người / mục tiêu / quán */
.dtt-chon-nguoi{max-height:52vh;overflow:auto;margin-bottom:12px}
.dtt-muc-tieu>button{flex:1 1 auto}
.dtt-muc-tieu>button.chon{background:var(--cham);border-color:var(--cham);color:#fff}
.dtt-ds-sheet{max-height:48vh;overflow:auto;box-shadow:none;margin:10px 0}

/* ---- buổi đào tạo: quán + ghi chú, cam kết */
.dtt-dong-quan .hc-dong-giua{color:var(--chu);text-decoration:none;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.dtt-ghi-tom{color:var(--chu)!important;font-size:13px}
.dtt-ghi-tom.cho{color:var(--cam-dam)!important}
.dtt-tap-trung{font:600 11.5px var(--noi-dung);font-style:normal;color:var(--vang-chu);background:var(--vang-nhat);border-radius:8px;padding:2px 7px;margin-left:6px}
.dtt-them-quan{margin:0 0 14px}
.dtt-ck{padding:12px 14px}
.dtt-ck-nhap{display:grid;grid-template-columns:28px minmax(0,1fr) 150px;gap:8px;align-items:center;margin-bottom:8px}
.dtt-ck-nhap input{min-height:48px;min-width:0}
.dtt-ck-so{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--vang);color:var(--cham-dam);font:800 14px var(--tieu-de)}
@media (max-width:420px){ .dtt-ck-nhap{grid-template-columns:28px minmax(0,1fr)} .dtt-ck-nhap input[type=date]{grid-column:2} }
.dtt-ck-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--vien-2)}
.dtt-ck-dong:last-of-type{border-bottom:0}
.dtt-ck-dong>div:first-child{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.dtt-da-lam{margin:0}
.dtt-da-lam>button[data-v="1"].chon{background:var(--xanh);border-color:var(--xanh);color:#fff}
.dtt-da-lam>button[data-v="0"].chon{background:var(--do);border-color:var(--do);color:#fff}
.dtt-ck-xem .dtt-ck-dong b{font-weight:700}
.dtt-ghi-xem{align-items:flex-start}
.dtt-ghi-xem .p.dtt-tot{color:var(--xanh)} .dtt-ghi-xem .p.dtt-sua{color:var(--do)}
.dtt-anh-nho{display:flex;gap:6px;margin-top:6px}
.dtt-anh-nho img{width:56px;height:56px;object-fit:cover;border-radius:8px}

/* ---- đi giám sát: chọn hình thức, chọn quán, bảng kiểm, kết luận */
.dtt-gs-dau{padding:12px 14px}
.dtt-kieu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 12px}
.dtt-kieu>button{padding:4px 6px;white-space:normal;line-height:1.2;min-height:52px}
.dtt-ngay-chon{overflow-x:auto}
.dtt-chon-diem>.hc-dong.chon{background:var(--xanh-nhat)}
.dtt-chon-diem .hc-dong-giua{min-width:0}
.dtt-chip-dong{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dtt-chip-dong:empty{display:none}
.dtt-chip-dong .hc-chip{height:22px;font-size:11.5px;padding:0 7px;display:inline-flex;align-items:center;gap:3px}
.dtt-kiem-hang{padding:10px 0;border-bottom:1px dashed var(--vien-2)}
.dtt-kiem-hang:last-child{border-bottom:0}
.dtt-kiem-ten{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 14.5px/1.35 var(--noi-dung);color:var(--chu);margin-bottom:8px}
.dtt-kiem-ten span{font:600 12.5px var(--noi-dung);color:var(--mo)}
.dtt-kiem-gc{width:100%;min-height:44px;margin-top:8px;box-sizing:border-box}
.dtt-kl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dtt-kl>button{padding:4px 6px;white-space:normal;line-height:1.2;min-height:52px}
.dtt-kl>button.chon.xanh{background:var(--xanh);border-color:var(--xanh);color:#fff}
.dtt-kl>button.chon.cam{background:var(--cam);border-color:var(--cam);color:var(--cham-dam)}
.dtt-kl>button.chon.do{background:var(--do);border-color:var(--do);color:#fff}
.dtt-kiem-xem .hc-chip{flex:none}

/* ---- bảng tổng hợp (bản web) */
.dtt-bang-web{margin-bottom:12px}
.dtt-hang-bam{cursor:pointer}
.dtt-hang-bam:hover td,.dtt-hang-bam:focus td{background:var(--nen-2)}
.dtt-o-mau{display:inline-block;min-width:44px;padding:2px 8px;border-radius:8px;font-weight:800;font-variant-numeric:tabular-nums}
.dtt-o-mau small{font-size:.75em;opacity:.75}
.dtt-o-mau.xanh{background:var(--xanh-nhat);color:var(--xanh)} .dtt-o-mau.cam{background:var(--cam-nhat);color:var(--cam-dam)} .dtt-o-mau.do{background:var(--do-nhat);color:var(--do)}
.dtt-dong2{margin:8px 0 0;font-size:12.5px}

/* ---- 4 tab (Hôm nay · Đào tạo · Giám sát · Đánh giá tuần) vừa màn 390 px: chia đều, chữ dài xuống dòng */
.dtt-tab4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.dtt-tab4>button{position:relative;padding:2px 6px;white-space:normal;line-height:1.15;font-size:13px;text-align:center}
.dtt-tab4 .dem{position:absolute;top:2px;right:3px;padding:0 5px;font-size:10.5px;line-height:1.5}
/* ---- chỉ tiêu tuần dạng dải gọn (trong khối anh hùng và thẻ trang chủ) */
.dtt-tuan{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 2px}
.dtt-tuan-nhan{font:700 11.5px/1.45 var(--tieu-de);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);padding-top:1px}
.dtt-tuan-o{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 10px;border-radius:10px;background:var(--nen-2);border:1px solid var(--vien-2);
  border-bottom:3px solid var(--vien);color:var(--chu);text-decoration:none;font-size:12.5px}
.dtt-tuan-o b{font:800 15px var(--tieu-de);font-variant-numeric:tabular-nums}
.dtt-tuan-o.xanh{border-bottom-color:var(--xanh)} .dtt-tuan-o.cam{border-bottom-color:var(--cam)} .dtt-tuan-o.do{border-bottom-color:var(--do)}
.hc-hero .dtt-tuan-nhan{color:#C9CDEB}
.hc-hero .dtt-tuan-o{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.hc-hero .dtt-tuan-o.xanh{border-bottom-color:#8FD39A} .hc-hero .dtt-tuan-o.cam{border-bottom-color:var(--vang)} .hc-hero .dtt-tuan-o.do{border-bottom-color:#FF8A80}
.dtt-bang-thang td,.dtt-bang-thang th{white-space:nowrap}
.dtt-bang-thang td.dtt-ten{min-width:210px;white-space:normal}