/* Module ĐIỀU HÀNH — kiểu riêng (tiền tố .dhh-), CHỈ dùng biến của web/giao_dien.css (đúng cả chế độ sáng / tối).
   Bản web (main.dhh-web): 6 ô một hàng, 2 bản đồ cạnh nhau. Bản điện thoại (main.dhh-dt): 2 cột, bản đồ nhân viên + danh sách. */
main.dhh{padding-top:12px}
body.hc-web main.dhh{padding-top:20px}

/* ---- đầu màn: tiêu đề mục + cập nhật lúc · chip phạm vi + chọn ngày */
.dhh-dau{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px}
.dhh-dau-trai{min-width:0}
.dhh-dau-phai{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dhh-tieu{margin:22px 0 10px;font:800 20px/1.25 var(--tieu-de);letter-spacing:-.01em;color:var(--chu);text-transform:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dhh-dau .dhh-tieu{margin:0}
.dhh-tieu-phu{font:600 13px var(--noi-dung);color:var(--mo);letter-spacing:0}
.dhh-cap-nhat{display:block;margin-top:3px;font-size:12.5px;color:var(--mo)}
.dhh-ngay{display:inline-flex;align-items:center;gap:6px;height:40px;margin:0;padding:0 8px 0 10px;border:1.5px solid var(--vien);border-radius:12px;background:var(--the);color:var(--mo);cursor:pointer}
.dhh-ngay input{width:auto;min-height:0;height:36px;margin:0;padding:0 2px;border:0;border-radius:0;background:none;outline:0;box-shadow:none;color:var(--chu);font:600 14px var(--noi-dung);cursor:pointer}
.dhh-ngay:focus-within{border-color:var(--chinh-2);box-shadow:0 0 0 3px var(--chinh-nhat)}
#dhh-lam-moi.quay svg{animation:dhh-quay 1s linear infinite}
@keyframes dhh-quay{to{transform:rotate(360deg)}}

/* ---- dải 6 ô màu: nhãn IN HOA + biểu tượng · số to · ▲▼ chênh · "Hôm trước: …" · dòng phụ · "Xem thêm…"
   Màu ô = màu nhận diện có sẵn của hệ (mỗi ô một màu đậm, chữ trắng ≥ 4,5:1; giữ nguyên ở chế độ tối vì là hằng thương hiệu) */
.dhh-o-luoi{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 14px}
@media (min-width:700px){ .dhh-o-luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} }
@media (min-width:1180px){ body.hc-web .dhh-o-luoi{grid-template-columns:repeat(6,minmax(0,1fr))} }
.dhh-o{position:relative;display:flex;flex-direction:column;gap:2px;min-height:150px;padding:10px 12px 34px;border-radius:14px;color:#fff;text-decoration:none;
  background:var(--cham);box-shadow:var(--bong-1);overflow:hidden;min-width:0}
.dhh-o.hc-tai{padding:0;min-height:150px}
div.dhh-o{padding-bottom:12px}   /* không có quyền mở màn liên quan → không có chân "Xem thêm…" */
a.dhh-o{cursor:pointer;transition:transform .12s,box-shadow .12s}
a.dhh-o:hover{transform:translateY(-1px);box-shadow:var(--bong-2)}
a.dhh-o:focus-visible{outline:3px solid var(--vang);outline-offset:2px}
.dhh-o.o1{background:var(--bia-mua)}                                   /* đơn hàng — đỏ gạch */
.dhh-o.o2{background:var(--vang-dam)}                                  /* doanh số — vàng đậm */
.dhh-o.o3{background:var(--cham);background:color-mix(in srgb,var(--bia-chieu) 72%,#000)}   /* thùng tới điểm bán lẻ — xanh chiều (đậm cho đủ tương phản) */
.dhh-o.o4{background:var(--bia-do)}                                    /* lượt ghé — đỏ bia */
.dhh-o.o5{background:var(--gao)}                                       /* điểm mua — xanh lá */
.dhh-o.o6{background:var(--cham)}                                      /* điểm mới — chàm */
.dhh-o-dau{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px}
.dhh-o-nhan{font:700 11.5px/1.3 var(--tieu-de);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.92);padding-top:2px;min-width:0;overflow-wrap:anywhere}
.dhh-o-icon{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;align-self:flex-start}
/* 6 ô một hàng trên máy 1366 (nội dung ~1060 px): nhãn nhỏ hơn một chút để "THÙNG VỀ QUÁN" vừa một dòng */
@media (min-width:1180px) and (max-width:1500px){ body.hc-web .dhh-o-nhan{font-size:10.5px;letter-spacing:.045em} body.hc-web .dhh-o-so{font-size:31px} }
.dhh-o-so{display:block;margin-top:4px;font:800 34px/1.05 var(--tieu-de);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhh-o-so.dai{font-size:26px}
.dhh-bien{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:4px;padding:2px 8px 2px 6px;border-radius:99px;background:rgba(255,255,255,.14);font:700 12.5px/1.4 var(--noi-dung);color:#fff;white-space:nowrap;max-width:100%;overflow:hidden}
.dhh-bien i{font-style:normal;font-size:11px}
.dhh-bien.len i{color:#9BE29F} .dhh-bien.xuong i{color:#FFB4A8} .dhh-bien.ngang i{color:rgba(255,255,255,.7)}
.dhh-bien small{font-size:11.5px;font-weight:600;opacity:.9}
.dhh-o-truoc{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhh-o-phu{font-size:12px;color:rgba(255,255,255,.8);line-height:1.3;white-space:normal;overflow-wrap:anywhere}   /* 0.9.3 (R3-05): số không bị cắt — xuống dòng thay vì "…" */
.dhh-o-phu b{color:#fff;font-weight:800}
.dhh-o-phu b.dat{color:#9BE29F} .dhh-o-phu b.gan{color:#FFD98A} .dhh-o-phu b.thieu{color:#FFB4A8}
.dhh-o-chan{position:absolute;left:0;right:0;bottom:0;padding:6px 12px;background:rgba(0,0,0,.18);font:600 12.5px var(--noi-dung);color:rgba(255,255,255,.9)}
a.dhh-o:hover .dhh-o-chan{background:rgba(0,0,0,.28);color:#fff}
@media (max-width:420px){ .dhh-o{padding:8px 10px 32px;min-height:140px} .dhh-o-so{font-size:28px} .dhh-o-so.dai{font-size:22px} .dhh-o-icon{width:26px;height:26px} }

/* ---- 2 bản đồ cạnh nhau (web), thu gọn còn bản đồ nhân viên (điện thoại) */
.dhh-bd-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:4px 0 6px}
@media (min-width:1000px){ body.hc-web .dhh-bd-luoi{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dhh-bd{margin:0;padding:12px 14px 12px;min-width:0;display:flex;flex-direction:column}
.dhh-bd-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.dhh-bd-dau h3{margin:0;font:800 16px/1.3 var(--tieu-de);color:var(--chu)}
.dhh-bd-dau span{font-size:13px;color:var(--mo);white-space:nowrap}
.dhh-bd-dau span b{color:var(--chu)}
.dhh-map{position:relative;height:420px;flex:1 0 auto;border-radius:12px;overflow:hidden;background:var(--nen-2);z-index:0}
.dhh-map.nho{height:280px}
.dhh-map .hc-tai{height:100%;border-radius:0}
.dhh-map .leaflet-container{width:100%;height:100%;font-family:var(--noi-dung)}
.dhh-map-trong{position:absolute;left:12px;right:12px;top:12px;z-index:400;padding:8px 12px;border-radius:10px;background:var(--the);color:var(--mo);font-size:13px;box-shadow:var(--bong-1);text-align:center}
.dhh-map .hc-rong{padding:36px 16px}
.dhh-map .hc-rong a{color:var(--chinh);font-weight:700}
.dhh-nhan{background:var(--the);color:var(--chu);border:1px solid var(--vien);border-radius:8px;font:700 11.5px var(--noi-dung);padding:2px 6px;box-shadow:var(--bong-1)}
.dhh-nhan::before{border-top-color:var(--vien)}
.dhh-pop{min-width:180px;font:14px/1.4 var(--noi-dung);color:var(--chu)}
.dhh-pop>b{font:800 15px var(--tieu-de)}
.dhh-pop-ten{font-weight:700;margin-top:4px}
.dhh-pop .hc-nut{margin-top:8px;display:inline-flex}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--the);color:var(--chu)}
.dhh-chu-giai{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12.5px;color:var(--mo)}
.dhh-chu-giai i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:2px solid var(--the);box-shadow:0 0 0 1px var(--vien)}
.dhh-chu-giai b{color:var(--chu)}
.dhh-chu-thich{display:flex;align-items:center;gap:6px;margin:8px 2px 0;font-size:12.5px;color:var(--mo)}
.dhh-chu-thich svg{flex:none;color:var(--mo)}
/* danh sách gọn tên + chip online/offline dưới bản đồ nhân viên */
.dhh-nv-ds{display:flex;flex-direction:column;margin-top:8px;max-height:176px;overflow:auto;border-top:1px solid var(--vien-2);scrollbar-width:thin}
.dhh-nv{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;margin:0;padding:4px 4px;border:0;border-bottom:1px solid var(--vien-2);background:none;color:var(--chu);font:inherit;text-align:left;cursor:pointer}
.dhh-nv:last-child{border-bottom:0}
.dhh-nv:hover{background:var(--nen)} .dhh-nv[data-khong]{cursor:default}
.dhh-nv:focus-visible{outline:2px solid var(--chinh-2);outline-offset:-2px}
.dhh-nv b{flex:0 0 auto;font:700 13.5px var(--noi-dung);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.dhh-nv>span:not(.hc-chip){flex:1;min-width:0;font-size:12.5px;color:var(--mo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dhh-nv em{font-style:normal;color:var(--cam-dam)}
.dhh-nv .hc-chip{flex:none;height:20px;font-size:11px;padding:0 7px}
.dhh-cham{flex:none;width:10px;height:10px;border-radius:50%;background:#8A8FA8}
.dhh-cham.on{background:var(--xanh);box-shadow:0 0 0 3px var(--xanh-nhat)}
.dhh-don-dt{margin:8px 0 0;font-size:12.5px;color:var(--mo)}
.dhh-bd-dt .dhh-map{margin-bottom:0}

/* ---- việc chờ xử lý (chip bấm được) + 3 số tuần cạnh nhau trên web */
.dhh-hai{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
@media (min-width:1000px){ body.hc-web .dhh-hai{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.dhh-viec{display:flex;flex-wrap:wrap;gap:8px}
.dhh-viec-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:12px;border:1px solid var(--vien-2);background:var(--the);color:var(--chu);
  font:600 14px var(--noi-dung);text-decoration:none;box-shadow:var(--bong-1);max-width:100%}
.dhh-viec-chip b{font:800 18px var(--tieu-de);font-variant-numeric:tabular-nums}
.dhh-viec-chip>svg:first-child{flex:none;color:var(--cam-dam)} .dhh-viec-chip>svg:last-child{flex:none;color:var(--mo)}
.dhh-viec-chip.cam{border-color:var(--cam);background:var(--cam-nhat)} .dhh-viec-chip.cam b{color:var(--cam-dam)}
.dhh-viec-chip.do{border-color:var(--do);background:var(--do-nhat)} .dhh-viec-chip.do b,.dhh-viec-chip.do>svg:first-child{color:var(--do)}
.dhh-viec-chip.xanh{border-color:var(--xanh);background:var(--xanh-nhat)} .dhh-viec-chip.xanh>svg:first-child{color:var(--xanh)}
.dhh-viec-chip.xam>svg:first-child{color:var(--mo)}
.dhh-viec-chip.khong-bam{box-shadow:none;font-weight:500;color:var(--chu-2)}
a.dhh-viec-chip:hover{box-shadow:var(--bong-2);transform:translateY(-1px)}
a.dhh-viec-chip:focus-visible{outline:3px solid var(--chinh-nhat)}
.dhh-tuan{margin:0}
.dhh-tuan .hc-so span b{display:inline;font-size:12px;margin-left:4px}
@media (max-width:640px){ .hc-so-luoi.dhh-tuan{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---- khối của các module (trang chủ web) · chân trang */
.dhh-mod-luoi{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px;align-items:start}
@media (min-width:1000px){ body.hc-web .dhh-mod-luoi{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))} }
.dhh-mod-o{min-width:0} .dhh-mod-o>*{width:100%}
.dhh-nguon{margin:18px 2px 0;font-size:12.5px;color:var(--mo);text-align:center}
.dhh-nguon a{color:var(--chinh);font-weight:700}
.dhh-rong{padding:24px 12px}
main.dhh .hc-rong.dhh-rong{margin:0}
/* điện thoại: tiêu đề mục gọn hơn, chân ô bám sát */
main.dhh-dt .dhh-tieu{font-size:18px;margin-top:18px}
main.dhh-dt .dhh-dau{margin-bottom:10px}