/* HCL ONE — module ĐIỀU HƯỚNG (0.8). Chỉ lớp tiền tố .dh- ; chỉ dùng biến màu của giao_dien.css (trừ #fff). Điện thoại 390 px trước; văn phòng lưới 2–3 cột. */

/* ---- thẻ "NÊN GIAO QUA …" trên màn đặt hàng */
.dh-the{padding:14px 16px}
.dh-nhan{font:700 12px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--vang-chu);padding-top:1px}
.dh-nhan span{letter-spacing:0;text-transform:none;font-weight:600;color:var(--mo)}
.dh-ten{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 2px}
.dh-ten h3{margin:0;font:800 21px/1.25 var(--tieu-de);letter-spacing:-.01em;color:var(--chu);overflow-wrap:anywhere}
/* 0.9.3: một dòng vì sao chọn mối này (mối đang nhập / mối gần đang ít hàng) */
.dh-ly-chinh{margin:6px 0 0;padding:6px 10px;border-radius:10px;background:var(--chinh-nhat);font:700 15px/1.4 var(--noi-dung);color:var(--chinh);overflow-wrap:anywhere}
.dh-ly-do{list-style:none;margin:8px 0 4px;padding:0;display:grid;gap:5px}
.dh-ly-do li{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--chu)}
.dh-ly-do li svg{flex:none;margin-top:3px;color:var(--xanh)}
.dh-ly-do li.thieu{color:var(--cam-dam);font-weight:600}
.dh-ly-do li.thieu svg{color:var(--cam)}
.dh-canh{margin:10px 0 0}
.dh-nut{display:grid;gap:8px;margin-top:12px}
.dh-nut .hc-nut{min-height:56px;font-size:16px;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;padding:8px 14px;text-align:center}
.dh-nut .hc-nut span{overflow-wrap:anywhere}
.dh-nut .hc-nut.dang-chon{box-shadow:0 0 0 3px var(--xanh-nhat),0 3px 0 var(--vang-dam)}
.dh-nut .hc-nut.phu.dang-chon{border-color:var(--xanh)}
.dh-da-chon{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 12px;border-radius:var(--r-vua);background:var(--xanh-nhat);font-size:14px;line-height:1.4}
.dh-da-chon svg{flex:none;margin-top:2px;color:var(--xanh)}
.dh-the.rung{animation:dh-rung .5s ease 1}
@keyframes dh-rung{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.dh-the.rung{animation:none;outline:3px solid var(--cam)}}
.dh-bao-nhap{margin-top:4px}

/* ---- đơn giao qua đầu mối */
.dh-tab{margin-top:4px}
/* điện thoại: 4 thẻ lọc thành lưới 2×2 — không thẻ nào bị giấu ngoài mép màn */
@media (max-width:520px){ .dh-tab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible} .dh-tab>a{padding:0 8px} }
.dh-don h3{font-size:16.5px}
.dh-don-phu{margin:4px 0 0}
.dh-hang{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--chu-2)}
.dh-nguoi-giao{display:flex;align-items:center;gap:8px;margin:10px 0 2px;padding:8px 10px;border-radius:var(--r-nho);background:var(--nen-2);font-size:14px;line-height:1.35}
.dh-nguoi-giao>svg{flex:none;color:var(--chinh)}
.dh-nguoi-giao>span{flex:1;min-width:0;overflow-wrap:anywhere}
.dh-goi{flex:none;text-decoration:none}
.dh-don .hc-nhom-nut{margin:12px 0 0}
.dh-don .hc-nut.chu.khoi{margin-top:4px}
.dh-cho-gui{margin:12px 0 0}
.dh-ly-tc{margin:10px 0 0;font-size:14px;color:var(--do);font-weight:600}
.dh-don>.hc-nut.khoi{margin-top:12px}
.dh-nhap{padding:14px 16px}
.dh-nhap-dau{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dh-nhap-dau b{font:800 16px/1.3 var(--tieu-de);letter-spacing:.01em;color:var(--cham-dam)}
.dh-nhap p{margin:6px 0 0;font-size:14.5px;line-height:1.45;color:var(--chu)}
.dh-nhap .hc-nhom-nut{margin:12px 0 0}
.dh-nhap .hc-nut{text-decoration:none}
@media (prefers-color-scheme: dark){ .dh-nhap-dau b{color:var(--vang)} }

/* ---- đầu mối · duyệt nhập lớn (văn phòng: lưới) */
.dh-luoi{display:grid;gap:12px}
.dh-luoi>.hc-the{margin:0}
@media (min-width:900px){ .dh-luoi{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1280px){ main.hc-may .dh-luoi{grid-template-columns:repeat(3,minmax(0,1fr))} }
.dh-dm-so{margin:10px 0 6px}
.dh-dm-so .hc-so b{font-size:20px}
.dh-dm-phu{margin:0}
.dh-dm-co{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.dh-dm-ls{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;font-size:12.5px}
.dh-dm-ls svg{flex:none;margin-top:2px}
.dh-dm-sua{margin-top:10px}
.dh-dem-tt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dh-link-duyet{text-decoration:none}
.dh-co-ds{display:grid;gap:10px}
.dh-duyet .hc-so-luoi{margin:10px 0 6px}
.dh-chu-thich{margin:14px 2px 8px;font-size:12.5px;line-height:1.5}

/* ---- dòng hàng 3 lớp (giám đốc) */
.dh-ky{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.dh-ky b{font:800 17px var(--tieu-de)}
.dh-ky .hc-nut{min-width:44px;padding:0 10px}
.dh-ky-trong{width:44px}
.dh-hero{padding-bottom:16px}
.dh-lop{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 10px}
.dh-lop-o{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-vua);padding:10px 10px 12px;min-width:0}
.dh-lop-o b{display:block;font:800 26px/1.1 var(--tieu-de);color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0 3px}
.dh-lop-o span{display:block;font-size:12px;line-height:1.35;color:#C9CDEB}
.dh-lop-o .dh-lop-ten{font:700 11.5px/1.45 var(--tieu-de);letter-spacing:.08em;text-transform:uppercase;color:var(--vang);padding-top:1px}
.dh-lop-o.chua b{font-size:19px;color:#C9CDEB}
.dh-cau{margin:4px 0 0!important;font-size:14px!important;line-height:1.45;color:#D9DCF0}
.dh-cau b{color:#fff}
@media (max-width:420px){ .dh-lop{grid-template-columns:1fr} .dh-lop-o{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:8px}
  .dh-lop-o .dh-lop-ten{grid-column:1} .dh-lop-o b{grid-column:2;grid-row:1 / span 2;margin:0;text-align:right} .dh-lop-o span:last-child{grid-column:1} }
.dh-cot2{display:grid;gap:0 16px}
@media (min-width:900px){ .dh-cot2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dh-the-bc .hc-bang-cuon{box-shadow:none;margin:8px 0 6px}
.dh-bc-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dh-bc-dau h3{margin:0;font:800 16px/1.3 var(--tieu-de)}
.dh-bc-dau span{font-size:12.5px;color:var(--mo)}
.dh-dong-nay td{font-weight:700;background:var(--vang-nhat)}
/* bảng 6 tháng: tiêu đề cột được xuống dòng (không đẩy cột "Khách uống" ra ngoài), cột tháng không gãy */
.dh-bang-thang th{white-space:normal;vertical-align:bottom;padding:8px 10px}
.dh-bang-thang th.so{white-space:normal}
.dh-bang-thang td{padding:10px}
.dh-bang-thang td:first-child{white-space:nowrap}
.dh-bc .hc-bang td.mo{color:var(--mo);font-weight:400}
.dh-bc .hc-bang td.dh-tich{color:var(--cam-dam);font-weight:700}
.dh-chua-giao{color:var(--cam-dam);font-weight:600}
.dh-chuoi .hc-tg{margin-top:10px}
.dh-chuoi-tong{margin:0;padding:9px 12px;border-radius:var(--r-nho);background:var(--nen-2);font-size:13.5px;line-height:1.45}
.dh-bc .hc-hero{margin-bottom:4px}

/* ---- trang chủ */
.dh-tc{text-decoration:none}
.dh-tc h3{font-size:16px}
.dh-tc-icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--vang-nhat);color:var(--vang-chu)}

/* ---- 0.8.1 · lối vào chuỗi kéo đơn từ các màn có sẵn */
.dh-nhap-keo{margin:6px 0 0!important;font-size:14px!important;font-weight:600;color:var(--cham)}
.dh-keo-len{margin:10px 0 0;text-decoration:none;justify-content:flex-start;padding-left:0}
.dh-dm-nut{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dh-dm-nut .hc-nut{text-decoration:none;min-height:40px}
.dh-dm-nut .dh-dm-sua{margin-top:0}

/* ---- 0.8.1 · CHUỖI KÉO ĐƠN (#/dieu-huong/keo/…) — điện thoại: cột dọc, gốc ở ĐÁY, đọc từ dưới lên; bản web: ngang trái → phải */
.dh-keo-dau{margin:0 0 12px}
.dh-keo-tong{min-width:0}
.dh-keo-tong .tc-nhan{margin:0 0 2px}
.dh-keo-tong b{display:block;font:800 19px/1.25 var(--tieu-de);letter-spacing:-.01em;color:var(--chu);overflow-wrap:anywhere}
.dh-keo-truoc{margin:0 0 12px}
.dh-keo-truoc .tc-nhan{margin:0 0 2px}
.dh-keo-truoc h3{font-size:16px}
.dh-keo-truoc p{margin:8px 0 0;font-size:13.5px;line-height:1.5}
.dh-keo{display:flex;flex-direction:column-reverse;gap:0;margin:4px 0 8px}
.dh-keo>.hc-the{margin:0}
.dh-keo-goc{padding:14px 16px;background:var(--vang-nhat)}
.dh-keo-goc .tc-nhan{margin:0 0 2px}
.dh-keo-goc h3{margin:0;font:800 18px/1.25 var(--tieu-de)}
.dh-keo-goc .hc-phu{margin:4px 0 0}
.dh-keo-goc .hc-nut{margin-top:6px;padding-left:0;justify-content:flex-start}
.dh-keo-mui{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:var(--mo)}
.dh-keo-mui i{width:2px;height:22px;background:var(--vien-2);border-radius:2px;position:relative}
.dh-keo-mui i::before{content:"";position:absolute;left:50%;top:-1px;width:9px;height:9px;border-left:2px solid var(--cam);border-top:2px solid var(--cam);transform:translateX(-50%) rotate(45deg)}
.dh-keo-mui span{font:700 12.5px/1.3 var(--tieu-de);color:var(--cam-dam);letter-spacing:.02em}
.dh-keo-buoc{padding:14px 16px;position:relative;transition:opacity .2s}
.dh-keo-buoc.de-sau{opacity:.6;border-style:dashed}
.dh-keo-buoc .tc-nhan{margin:0 0 2px}
.dh-keo-buoc h3{margin:0;font:800 18px/1.25 var(--tieu-de);overflow-wrap:anywhere}
.dh-keo-buoc>.hc-the-dau>div>.hc-phu{margin:2px 0 0}
.dh-keo-chip{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:none;max-width:46%}
.dh-keo-buoc .dh-ly-do{margin:10px 0 4px}
.dh-keo-buoc .dh-ly-do li{font-size:14.5px}
.dh-keo-can{display:flex;align-items:baseline;gap:8px;margin:8px 0 4px;padding:10px 12px;border-radius:var(--r-vua);background:var(--cam-nhat);color:var(--cam-dam);line-height:1.35}
.dh-keo-can b{font:800 30px/1 var(--tieu-de);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dh-keo-can span{font-size:13.5px;font-weight:600}
.dh-keo-buoc.vien-xanh .dh-keo-can{background:var(--xanh-nhat);color:var(--xanh)}
.dh-keo-lay{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:9px 12px;border-radius:var(--r-nho);background:var(--nen-2);font-size:14px;line-height:1.4}
.dh-keo-lay svg{flex:none;margin-top:2px;color:var(--chinh)}
.dh-keo-lay.mo{color:var(--cam-dam)}
.dh-keo-lay.mo svg{color:var(--cam)}
.dh-keo-bo{margin:6px 0 0;font-size:12.5px;line-height:1.45}
.dh-keo-noi{margin:10px 0 0;padding:10px 12px 8px 14px;border-left:3px solid var(--vang);border-radius:0 var(--r-nho) var(--r-nho) 0;background:var(--nen-2)}
.dh-keo-noi p{margin:0;font-size:15px;line-height:1.5;font-style:italic;color:var(--chu)}
.dh-keo-noi .hc-nut{margin-top:2px;padding-left:0;justify-content:flex-start}
.dh-keo-khach{margin:10px 0 0}
.dh-keo-khach summary i{font-style:normal;font-weight:800;color:var(--cham)}
.dh-keo-khach-dong{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--vien-2);font-size:14px}
.dh-keo-khach-dong:last-of-type{border-bottom:0}
.dh-keo-khach-dong>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-keo-khach-dong b{font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-keo-khach .hc-phu{margin:8px 0 0}
.dh-keo-chi-hien{margin:8px 0 0;padding:8px 10px;border-radius:var(--r-nho);background:var(--cham-nhat);color:var(--chu);font-size:13px;line-height:1.45}
.dh-keo-nut{margin:12px 0 0}
.dh-keo-nut .hc-nut{text-decoration:none}
.dh-keo-xem{margin-top:6px;padding-left:0;justify-content:flex-start;text-decoration:none}
/* bản web: các bậc xếp NGANG trái → phải (gốc trái), cuộn ngang khi nhiều bậc; mũi tên nằm ngang */
.dh-keo.ngang{flex-direction:row;align-items:stretch;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.dh-keo.ngang>.hc-the{flex:0 0 360px;scroll-snap-align:start}
.dh-keo.ngang>.dh-keo-goc{flex-basis:280px}
.dh-keo.ngang .dh-keo-mui{flex:0 0 64px;flex-direction:column;justify-content:center;padding:0 4px;align-self:center}
.dh-keo.ngang .dh-keo-mui i{width:44px;height:2px}
.dh-keo.ngang .dh-keo-mui i::before{left:auto;right:-1px;top:50%;transform:translateY(-50%) rotate(135deg)}
.dh-keo.ngang .dh-keo-mui span{text-align:center}
body.hc-web .dh-man-keo .dh-keo-dau{margin-bottom:14px}
/* 0.9.3b (k10) — chờ mối xác nhận / chuyển lên cấp trên */
.dh-cho-moi-ghi{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:8px 10px;border-radius:var(--r-nho);background:var(--nen-2);font-size:14px;line-height:1.4;color:var(--chu-2);overflow-wrap:anywhere}
.dh-cho-moi-ghi svg{flex:none;margin-top:2px;color:var(--cam)}
.dh-cho-moi{margin:12px 0 0}
.dh-chuyen{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--chu-2);overflow-wrap:anywhere}
.dh-chuyen svg{flex:none;margin-top:2px;color:var(--chinh)}
.dh-tg-don{margin:12px 0 4px}
.dh-tg-don h4{margin:0 0 6px;font-size:15px}
.dh-tg-don .nd{font-size:14px;line-height:1.4;overflow-wrap:anywhere}