*{box-sizing:border-box}
body{margin:0;font-family:'Be Vietnam Pro',sans-serif;font-size:14px;color:#232323;line-height:1.5}
button,input,select,textarea{font:inherit}button{cursor:pointer}[hidden]{display:none!important}
a{color:#b7102b;text-decoration:none}h1,h2,h3,p{margin:0}
.appnav,.navtab,.navuser{display:flex}.navtab{align-items:center;text-decoration:none}.applogo{text-decoration:none}
.icon-truck{--icon:url('../recruitment/icons/briefcase.svg')}
.page-giaohang .workspace-main{padding:26px 24px;min-height:100vh}
.masthead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.page-giaohang .brand h1{font-size:clamp(23px,2.3vw,34px);font-weight:800}
.brand p{margin-top:4px;color:#77717a}
.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.button{border-radius:7px;min-height:38px;padding:8px 14px;background:#fff;color:#b7102b;border:1px solid #eed5da;font-weight:500}
.button:hover{background:#fff2f4}.button.primary{background:#c8102e;color:#fff;border-color:#c8102e}
.button:disabled{opacity:.45;cursor:not-allowed}.nho-nut{min-height:32px;padding:5px 10px;font-size:12px}
.icon-button{border:1px solid #e6e2e5;background:#fff;color:#68646b;border-radius:7px;padding:7px 12px;font-size:12px}
input,select,textarea{min-height:38px;padding:8px 10px;border:1px solid #e0dce2;border-radius:7px;background:#fff;color:#303038;max-width:100%;width:100%}
textarea{min-height:74px;resize:vertical}
.nhom-nut{display:flex;border:1px solid #eed5da;border-radius:7px;overflow:hidden}
.nhom-nut button{border:0;background:#fff;color:#6e6774;padding:9px 15px;font-weight:600;font-size:12px}
.nhom-nut button[aria-pressed=true]{background:#c8102e;color:#fff}
.notice{background:#f8f5fa;color:#62596a;border:1px solid #ebe5ef;border-radius:7px;padding:9px 13px;font-size:12px;margin:14px 0 10px}
.notice.error{background:#fff2f3;border-color:#f3c5cf;color:#a01026}
.bang-demo{background:#3a2b32;color:#ffd9e0;border-radius:8px;padding:11px 15px;font-size:12px;margin-top:14px;line-height:1.7}
.bang-demo b{color:#fff}
.canh-bao{background:#fff8eb;border:1px solid #f5dfb9;border-radius:8px;padding:11px 14px;font-size:12px;color:#7d5f2b;line-height:1.7;margin-top:14px}
.nho{font-size:12px}.mo{color:#7a7480}.phai{text-align:right}.giua{text-align:center}
.trong{color:#9c94a4;font-size:12px;text-align:center;padding:24px 10px}

/* Tab khu vực — to và nổi bật như tab Design/Media ở trang Order, vì đổi
   khu vực là đổi toàn bộ dữ liệu đang xem, không phải một bộ lọc nhỏ. */
.tab-khu-vuc{display:flex;gap:8px;border-bottom:2px solid #e6e1e6;margin:6px 0 4px}
.tab-khu-vuc button{min-width:190px;padding:15px 34px;font-size:16px;font-weight:700;border:0;
  border-bottom:4px solid transparent;background:#f7f6f8;border-radius:10px 10px 0 0;color:#6e6774;letter-spacing:-.2px}
.tab-khu-vuc button:hover{background:#f1eff3}
.tab-khu-vuc button[aria-selected=true]{background:#fcecef;border-bottom-color:#c8102e;color:#c8102e}

.tab-thanh{display:flex;gap:6px;border-bottom:1px solid #e6e1e6;margin:16px 0 18px;flex-wrap:wrap}
.tab-thanh button{min-width:140px;padding:11px 22px;font-weight:600;border:0;border-bottom:3px solid transparent;background:#f7f6f8;border-radius:8px 8px 0 0;color:#6e6774}
.tab-thanh button[aria-selected=true]{background:#fcecef;border-bottom-color:#c8102e;color:#c8102e}

.thanh-ngay{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;background:#ffffffd9;border:1px solid #e8e5e8;border-radius:10px;padding:12px 15px}
.o-loc{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#77717a;font-weight:500;min-width:150px}
.thanh-ngay .nho{margin-left:auto}

.ban-dieu-phoi{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.hang-doi{background:#fff;border:1px solid #e9e4e9;border-radius:10px;padding:14px}
.hang-doi h3{font-size:15px;display:flex;align-items:center;gap:9px;margin-bottom:5px}
.dem-tron{background:#c8102e;color:#fff;border-radius:20px;font-size:11px;padding:2px 9px;font-weight:700}
.nhac-xac-nhan{font-size:11px;color:#a9640a;background:#fff8eb;border:1px solid #f5dfb9;border-radius:7px;padding:8px 10px;margin-top:10px;line-height:1.6}
.nhac-xac-nhan:empty{display:none}
.nhom-quan{margin-top:13px;border:1px solid #eee9ef;border-radius:8px;overflow:hidden}
.nhom-quan>h4{margin:0;font-size:12px;padding:7px 11px;background:#f4f1f6;color:#5f5866;display:flex;justify-content:space-between}
.the-don{border-top:1px solid #f0ecf1;padding:11px;font-size:12px;cursor:pointer;background:#fff;width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0;min-height:46px}
.the-don:hover{background:#fdf4f6}
.the-don.dang-chon{background:#fcecef;box-shadow:inset 3px 0 #c8102e}
.the-don b{display:block;font-size:12px;color:#2f2b35}
.the-don small{color:#8a8290;display:block;margin-top:2px}
.nhan-loai{display:inline-block;font-size:9px;padding:1px 6px;border-radius:20px;background:#eef2fb;color:#3059a8;margin-top:4px}
.nhan-loai.lap{background:#fdf0e6;color:#a9540a}

.luoi-xep{min-width:0}
.luoi{display:grid;gap:8px;overflow-x:auto}
.o-dau{font-size:12px;font-weight:700;color:#4a4550;padding:7px 9px;background:#f4f1f6;border-radius:7px;position:sticky;top:0}
.o-dau small{display:block;font-weight:400;color:#8a8290;font-size:10px}
.o-khung{font-size:11px;color:#6a6472;font-weight:600;padding:9px 6px;white-space:nowrap;
  position:sticky;left:0;background:#fff;z-index:2}
.o-khung.khong-gio{color:#8d8593;font-style:italic;font-weight:500;white-space:normal;line-height:1.3}
.o-xep{border:1px dashed #ded8e2;border-radius:8px;min-height:64px;padding:5px;background:#fdfcfd}
.o-xep.nhan-duoc{border-color:#c8102e;background:#fff6f8}
/* Thẻ đơn trên lưới. VỊ TRÍ in đậm trên cùng vì đó là thứ quyết định xếp hai
   đơn vào cùng một khung hay tách ra — mã đơn chỉ để đối chiếu. */
.o-xep .xep-don{background:#fff;border:1px solid #e6e0e8;border-radius:7px;padding:7px 9px;
  font-size:11px;margin-bottom:5px;cursor:grab;transition:box-shadow .12s,border-color .12s}
.o-xep .xep-don:hover{border-color:#c8102e;box-shadow:0 2px 8px rgba(40,30,50,.10)}
.o-xep .xep-don:active{cursor:grabbing}
.xep-vitri{font-size:12px;font-weight:700;color:#7a2540;background:#fdeef2;
  border-radius:5px;padding:2px 7px;display:inline-block;margin-bottom:4px}
.o-xep .xep-don b{display:block;color:#2f2b35;font-size:11px}
.o-xep .xep-don small{color:#8a8290;display:block;line-height:1.35}
.xep-khach{color:#4a4550!important;font-weight:600}
.xep-diachi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xep-chan{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.xep-cod{font-weight:700;color:#1f7a4d}
.nhan-loai.nho{font-size:9px;padding:1px 5px}
.xep-canh{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.canh-nho{font-size:9px;font-weight:600;color:#a9640a;background:#fff4e2;border-radius:4px;padding:1px 5px}
.canh-nho.ngoai{color:#2a5d8f;background:#e9f2fb}

/* Kéo thả: trong lúc kéo, mọi ô sáng lên để thấy rõ chỗ thả được. */
body.dang-keo .o-xep{border-color:#e7b9c3;background:#fffafb}
.o-xep.tha-vao{border:2px solid #c8102e;background:#ffeef2}
.o-xep.lech-quan{border-color:#e8b877;border-style:solid;background:#fffaf0}
.canh-lech{font-size:10px;color:#a9640a;font-weight:600;display:block;margin-top:3px}
.ghi-chu-luoi{margin-top:11px;border-top:1px solid #ece7ee;padding-top:9px}

/* Dải bốn con số trả lời "có đơn nào bị bỏ quên không" */
.dai-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:20px}
.the-so-nho{background:#fff;border:1px solid #e9e4e9;border-radius:10px;padding:16px 18px;border-left:4px solid #d8d3da}
.the-so-nho.do{border-left-color:#c8102e;background:#fffafb}
.the-so-nho.cam{border-left-color:#e8a33d;background:#fffdf7}
.the-so-nho .con-so{display:block;font-size:30px;font-weight:800;letter-spacing:-.5px;color:#2d2833;line-height:1.15}
.the-so-nho.do .con-so{color:#c8102e}.the-so-nho.cam .con-so{color:#a9640a}
.the-so-nho .nhan-so{display:block;font-size:12.5px;font-weight:600;color:#4d4753;margin-top:4px}
.the-so-nho small{display:block;font-size:10.5px;color:#8d8593;margin-top:3px;line-height:1.45}

.dau-khoi{margin-bottom:13px;border-left:4px solid #c8102e;padding-left:12px}
.dau-khoi h2{font-size:18px;letter-spacing:-.3px}

/* Hành trình đơn hàng — sáu khâu */
.hanh-trinh{display:grid;gap:10px;overflow-x:auto;padding-bottom:6px;align-items:start}
/* Mỗi khâu một màu, đọc từ trái sang phải là thấy đơn đang đi tới đâu.
   Số thứ tự trước tên khâu để nhìn ra đây là MỘT quy trình có thứ tự,
   không phải sáu danh sách rời nhau.
   "Giao xong" cố ý màu hổ phách vì tiền còn ở ngoài — chưa phải màu xanh. */
.cot-khau{background:var(--nen);border:1px solid var(--vien);border-radius:10px;display:flex;
  flex-direction:column;max-height:640px;--dam:#7545dd;--nen:#f7f3ff;--vien:#e4d5ff}
.cot-khau[data-i="1"]{--dam:#0f766e;--nen:#f0fbfa;--vien:#c6e9e4}
.cot-khau[data-i="2"]{--dam:#c2410c;--nen:#fff6f1;--vien:#f8d4bd}
.cot-khau[data-i="3"]{--dam:#2b68d6;--nen:#f2f7ff;--vien:#d3e4ff}
.cot-khau[data-i="4"]{--dam:#b6700d;--nen:#fff9f1;--vien:#f7e2bf}
.cot-khau[data-i="5"]{--dam:#168844;--nen:#f0fbf5;--vien:#cdeddb}
.dau-khau{padding:12px 14px 10px;border-bottom:1px solid var(--vien);display:grid;
  grid-template-columns:auto 1fr auto;gap:5px 9px;align-items:center;background:var(--nen);border-radius:9px 9px 0 0}
.so-khau{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--dam);color:#fff;font-size:12px;font-weight:800;font-style:normal}
.dau-khau h4{margin:0;font-size:15px;font-weight:800;color:var(--dam);line-height:1.3;letter-spacing:-.2px}
.dau-khau small{grid-column:1/-1;font-size:10.5px;color:#8d8593}
.dau-khau .dem-tron{background:var(--dam);font-size:12px;padding:3px 10px}
.than-khau{padding:9px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:54px}
.the-hanh-trinh{background:#fff;border:1px solid var(--vien);border-radius:8px;padding:11px 12px;
  text-align:left;width:100%;font-size:12px;color:#413b48;line-height:1.55;box-shadow:0 1px 2px #2a1f3308}
.the-hanh-trinh:hover{border-color:var(--dam);box-shadow:0 2px 8px #2a1f3318}
.the-hanh-trinh.tre{border-left:3px solid #c8102e}
/* Vị trí đơn là thứ trưởng kho tìm bằng mắt trước tiên — cho nó màu riêng. */
.nhan-vi-tri{display:inline-block;margin:5px 0 2px;font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:5px;background:var(--dam);color:#fff;letter-spacing:.2px}
.nhan-vi-tri.tai-kho{background:#8b8394}
.the-hanh-trinh b{display:block;font-size:12.5px;color:#241f29}
.the-hanh-trinh .ten-khach{display:block;font-weight:600;font-size:12px;color:#3a3441;margin-top:2px}
.the-hanh-trinh .dong-phu{display:block;color:#8b8394;font-size:11px;margin-top:1px}
/* COD là con số người giao phải thu đúng — tách khỏi dòng phụ, in đậm riêng. */
.the-hanh-trinh .dong-tien{display:block;font-size:12.5px;font-weight:800;color:#241f29;margin-top:3px;
  font-variant-numeric:tabular-nums}
.nhan-canh{display:inline-block;margin-top:5px;font-size:10px;padding:2px 7px;border-radius:20px;background:#fff4e4;color:#a9640a;font-weight:600}
.nhan-canh.do{background:#fff0f2;color:#c8102e}

.nut-phien{grid-column:1/-1;margin-top:8px;border:1px solid #c8102e;background:#c8102e;color:#fff;
  border-radius:8px;padding:9px 10px;font-size:12px;font-weight:700;letter-spacing:.2px}
.nut-phien:hover{background:#a80d26}
.chua-kiem{display:block;font-size:10px;color:#c8102e;font-weight:600;margin-top:2px}

/* Chọn nhiều trên một cột khâu — thao tác hàng loạt. Nút mở chế độ nằm gọn
   trong đầu khâu; thanh thao tác hiện đầu thân khâu thay cho nút đó. */
.nut-nhieu{grid-column:1/-1;margin-top:6px;border:1px dashed #b9b0c1;background:#fff;color:var(--dam);
  border-radius:7px;padding:6px 10px;font-size:11px;font-weight:700}
.nut-nhieu:hover{border-color:var(--dam);background:var(--nen)}
.thanh-chon{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--nen);
  border:1px solid var(--vien);border-radius:8px;padding:7px 9px}
.thanh-chon>b{color:var(--dam);font-size:12.5px}
.chip-nguoi{border:1px solid var(--vien);background:#fff;border-radius:20px;padding:5px 10px;
  font-size:10.5px;font-weight:600;color:#5c5464}
.chip-nguoi:hover{border-color:var(--dam);color:var(--dam)}
.the-hanh-trinh.co-tick,.the-don.co-tick{padding-left:36px;position:relative}
.tick-ao{position:absolute;left:11px;top:12px;width:18px;height:18px;border:2px solid #cfc6d4;
  border-radius:6px;background:#fff}
.the-hanh-trinh.co-tick.on{border-color:var(--dam);box-shadow:0 0 0 2px var(--vien)}
.the-hanh-trinh.co-tick.on .tick-ao,.the-don.co-tick.on .tick-ao{background:var(--dam);border-color:var(--dam)}
.the-hanh-trinh.co-tick.on .tick-ao::after,.the-don.co-tick.on .tick-ao::after{content:'✓';
  position:absolute;inset:0;color:#fff;font-size:12px;font-weight:800;line-height:15px;text-align:center}
.the-don.co-tick.on{background:#fcecef}
/* Đơn không gộp được (ví dụ cần chốt giờ với khách) — tick mờ, không gạt được. */
.the-hanh-trinh.co-tick.khoa{opacity:.55}
.the-hanh-trinh.co-tick.khoa .tick-ao{border-style:dashed;background:var(--nen)}
/* Nút "Chọn nhiều" nằm ngay trên tiêu đề hàng đợi — nhỏ hơn bản trong đầu khâu. */
.nut-nhieu.nut-gon{margin:0 0 0 auto;padding:4px 10px;font-size:10.5px}
.the-don .tick-ao{top:14px}

.tong-phien{margin-top:16px;background:#faf8fb;border:1px solid #eee9ef;border-radius:9px;padding:6px 16px}
.dong-tong{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #efeaf0;font-size:13px}
.dong-tong:last-child{border-bottom:0}
.dong-tong span{color:#7c7584}.dong-tong b{color:#2b2532;font-variant-numeric:tabular-nums}
.dong-tong.nhan-manh b{color:#c8102e;font-size:15px;font-weight:700}
.dong-tong.tong-cuoi{border-top:2px solid #e6dfe8;margin-top:3px;padding-top:12px}
.dong-tong.tong-cuoi span{font-weight:700;color:#3a3441;letter-spacing:.3px}
.dong-tong.tong-cuoi b{font-size:19px;font-weight:800;color:#09803c}
.dong-tong.phai-tra b{color:#c8102e}
.dong-tong.phai-tra span{color:#c8102e}
.tick-don{width:auto;min-height:auto}

.khoi-xep{margin-top:26px;border-top:1px solid #e8e1e8;padding-top:8px}
.khoi-xep>summary{cursor:pointer;padding:10px 0;font-size:14px;color:#4d4753}
.khoi-xep>summary b{color:#c8102e}

/* Hộp thao tác một đơn */
.hai-cot-xem{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:20px}
.cot-tin{background:#faf8fb;border:1px solid #eee9ef;border-radius:9px;padding:14px 16px}
.cot-tin h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#a1949f}
.hang-xem{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:7px 0;border-bottom:1px solid #efeaf0;font-size:13px;align-items:baseline}
.hang-xem:last-child{border-bottom:0}
.hang-xem span{color:#8b8394;font-size:12px}
.hang-xem b{color:#2b2532;font-weight:600;overflow-wrap:anywhere}
.hang-xem b.to{font-size:14px;color:#191521}
.dong-xem{padding:5px 0;font-size:13px;border-bottom:1px solid #efeaf0}
.dong-xem:last-child{border-bottom:0}
.dong-xem b{font-weight:600;color:#2b2532}
.ghi-chu-don{margin-top:12px;background:#fff8eb;border:1px solid #f5dfb9;border-radius:7px;padding:9px 11px;font-size:12px;color:#7d5f2b;line-height:1.6}
.nhan-khau{display:inline-block;margin-left:12px;font-size:11px;font-weight:600;padding:3px 11px;border-radius:20px;background:#fcecef;color:#c8102e;vertical-align:middle}
.khoi-viec{margin-top:20px;border-top:1px solid #ece7ee;padding-top:16px}
.khoi-viec h4{margin:0 0 11px;font-size:14px;color:#c8102e}
.khoi-viec summary{cursor:pointer;color:#7a7480}
#thanHop .viec-form .button{min-height:42px;padding:10px 20px;font-weight:600}
.tick{display:flex;align-items:center;gap:9px;font-size:12px;padding:5px 0}
.tick input{width:auto;min-height:auto}
.dau-hop{display:flex;justify-content:space-between;gap:14px;padding:17px 20px;border-bottom:1px solid #e9e2e8;position:sticky;top:0;background:#fff;z-index:3}
.dau-hop h2{font-size:17px}
dialog{width:min(1180px,96vw);max-height:92vh;padding:0;border:1px solid #e8dfe7;border-radius:13px;box-shadow:0 26px 100px #30202a38;color:#2c2730}
dialog::backdrop{background:#21151e66}
#thanHop{padding:18px 20px}

.khung-form{background:#fff;border:1px solid #e9e4e9;border-radius:10px;padding:22px 26px}
.khung-form h3{font-size:17px}

/* ── Form nhập đơn — chia mục đánh số, quan trọng thì phải nổi ────────────
   Phân loại đơn là thẻ chọn to (nó điều khiển các ô sau), ô hệ thống tự
   điền nằm trong dải xám riêng, COD là con số người giao phải thu đúng nên
   in lớn và nhảy theo phím gõ. */
.khoi-form{margin-top:24px;border-top:1px solid #ece7ee;padding-top:16px}
.khoi-form.dau{margin-top:6px;border-top:0;padding-top:0}
.tieu-muc{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:800;
  color:#241f29;letter-spacing:-.2px;margin-bottom:4px}
.so-muc{display:inline-grid;place-items:center;width:24px;height:24px;flex:0 0 auto;
  border-radius:50%;background:#c8102e;color:#fff;font-size:12px;font-weight:800}
.o-form .sao{color:#c8102e;font-style:normal;font-weight:800}

.chon-loai{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:10px;margin-top:12px}
.the-loai{text-align:left;background:#fdfcfd;border:2px solid #e6e0e8;border-radius:10px;
  padding:13px 14px;min-height:56px;transition:border-color .12s,background .12s}
.the-loai:hover{border-color:#d3b3bb}
.the-loai b{display:block;font-size:13.5px;color:#2f2b35;letter-spacing:-.1px}
.the-loai .lo-flags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.the-loai .lo-flags i{font-style:normal;font-size:10px;font-weight:600;color:#6a6472;
  background:#f1eef3;border-radius:20px;padding:2px 8px}
.the-loai.on{border-color:#c8102e;background:#fcecef}
.the-loai.on b{color:#c8102e}
.the-loai.on .lo-flags i{background:#fff;color:#a01026}

.luoi-o.he-thong{margin-top:14px;background:#f7f5f8;border:1px dashed #e0dae2;
  border-radius:9px;padding:12px 14px 2px}
.luoi-o.he-thong .o-form span{color:#8d8593}

/* COD phải thu — con số duy nhất cần in to trong form */
.luoi-tien{align-items:stretch}
.o-cod{display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:#fcecef;border:1px solid #f0c9d1;border-radius:9px;padding:10px 14px;min-height:60px}
.o-cod>span{font-size:11px;font-weight:700;color:#a01026;text-transform:uppercase;letter-spacing:.4px}
.o-cod b{font-size:22px;font-weight:800;color:#c8102e;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.o-cod b.am{color:#a9540a}
.o-cod small{font-size:10px;color:#b98d97}

.viec-luu{margin-top:24px;border-top:1px solid #ece7ee;padding-top:18px}
.viec-luu .button.primary{min-height:48px;padding:12px 30px;font-size:14px;font-weight:700}
.viec-luu small{flex-basis:100%}
.luoi-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:16px;margin-top:18px}
#panNhapDon .luoi-o{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
#panNhapDon .dong-sp{grid-template-columns:minmax(0,3fr) 170px 120px 54px}
.o-form{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#5c5664;font-weight:500}
.o-form.rong{grid-column:1/-1}
.o-form .tu-tinh{background:#f6f5f7;color:#6a6472}
.khoi-sp{margin-top:20px;border-top:1px solid #ece7ee;padding-top:16px}
.dong-sp{display:grid;grid-template-columns:minmax(0,2fr) 130px 96px 44px;gap:10px;align-items:end;margin-bottom:10px}
.viec-form{display:flex;gap:10px;margin-top:18px;align-items:center;flex-wrap:wrap}

.hai-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px}
.the-so{background:#fff;border:1px solid #e9e4e9;border-radius:10px;overflow:hidden}
.dau-the{padding:14px 16px;border-bottom:1px solid #eee9ef}
.dau-the h3{font-size:15px}

/* ── Sổ công nợ — thẻ theo người/đối tác, không phải bảng nén ─────────────
   Con số chính (tiền đang cầm / thực nhận) in to 24px; mọi chi tiết còn lại
   gom một dòng phụ nhỏ để mắt quét từ trên xuống không bị phân tán. */
.ds-no{display:flex;flex-direction:column;max-height:64vh;overflow:auto}
.the-no{padding:14px 16px;border-bottom:1px solid #eee9ef;display:flex;flex-direction:column;gap:7px}
.the-no:last-child{border-bottom:0}
.no-dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.no-dau>b{font-size:14.5px;color:#241f29;letter-spacing:-.1px}
.no-dau .button{margin-left:auto}
.loai-no{font-size:10.5px;font-weight:600;color:#6a6472;background:#f1eef3;border-radius:20px;padding:2px 9px}
.no-chinh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.no-nhan{font-size:10.5px;font-weight:700;color:#8b8394;text-transform:uppercase;letter-spacing:.5px}
.no-so{font-size:24px;font-weight:800;letter-spacing:-.4px;color:#2b2532;font-variant-numeric:tabular-nums;line-height:1.15}
.no-so.no-do{color:#c8102e}
.no-so.tot{color:#09803c}
.no-phu{font-size:11.5px;color:#7c7584;line-height:1.6}
.no-phu .gio-lau{font-weight:700}
.cuon-bang{overflow:auto;max-height:62vh}
.bang{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
.bang th{text-align:left;font-weight:500;background:#f6f5f7;white-space:nowrap;color:#625c67;position:sticky;top:0;z-index:2}
.bang th,.bang td{padding:9px 12px;border-bottom:1px solid #eeebef}
.bang tbody tr:last-child td{border-bottom:0}
.tien{font-variant-numeric:tabular-nums;font-weight:600}
/* Ô nhập tiền trong bảng chốt giao xong hàng loạt — gọn vừa một con số. */
.bang .so-dong{width:110px;padding:6px 8px;border:1px solid #ddd6e0;border-radius:6px;
  font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;background:#fff}
.bang .ht-don{padding:6px 8px;border:1px solid #ddd6e0;border-radius:6px;font-size:12.5px;background:#fff}
.gio-lau{color:#c8102e;font-weight:700}
.tot{color:#09803c;font-weight:600}

@media(max-width:1100px){
  .ban-dieu-phoi{grid-template-columns:minmax(0,1fr)}
  .page-giaohang .workspace-main{padding:18px 12px}
  .tab-thanh button{min-width:0;flex:1}
}

/* ── Điện thoại — người giao hàng cầm máy là chủ yếu ──────────────────────
   Hành trình đổi từ lưới ngang sang danh sách dọc: đầu khâu dính trên cùng
   khi cuộn, chạm vào để thu gọn khâu không cần nhìn. Hộp thoại chiếm hết
   màn hình, nút và ô nhập đạt 44px cho thao tác một tay. */
@media(max-width:820px){
  .page-giaohang .workspace-main{padding:14px 12px 60px}
  .page-giaohang .masthead{margin-bottom:16px;padding-bottom:12px}
  .tab-khu-vuc{gap:6px;margin:2px 0 0}
  .tab-khu-vuc button{min-width:0;flex:1;padding:13px 8px;font-size:15px}
  .tab-thanh{flex-wrap:nowrap;overflow-x:auto;margin:12px 0 16px;padding-bottom:3px}
  .tab-thanh button{flex:0 0 auto;min-width:0;padding:10px 16px}

  .dai-so{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .the-so-nho{padding:12px 13px;border-radius:9px}
  .the-so-nho .con-so{font-size:24px}
  .dau-khoi h2{font-size:16px}
  .dau-khoi .nho{font-size:11.5px}

  /* align-items:start ở bản màn rộng là để các cột không bị kéo cao bằng nhau.
     Đổi sang xếp dọc thì trục ngang thành trục phụ, nên chính dòng đó lại bóp
     mỗi khâu về đúng bề rộng nội dung — mỗi khâu một bề rộng khác nhau. */
  .hanh-trinh{display:flex;flex-direction:column;align-items:stretch;
    overflow:visible;gap:12px;padding-bottom:0}
  .cot-khau{max-height:none}
  .dau-khau{position:sticky;top:0;z-index:2;cursor:pointer;
    grid-template-columns:auto 1fr auto auto;padding:13px 14px}
  .dau-khau::after{content:'▾';color:var(--dam);font-size:14px;font-weight:700;justify-self:end}
  .cot-khau.tg .dau-khau{border-bottom:0;border-radius:9px}
  .cot-khau.tg .dau-khau::after{content:'▸'}
  .cot-khau.tg .than-khau,.cot-khau.tg .nut-phien{display:none}
  .than-khau{overflow:visible;min-height:0}
  .the-hanh-trinh{font-size:13px;padding:12px 13px;min-height:48px}
  .the-hanh-trinh b{font-size:13.5px}
  .the-hanh-trinh .ten-khach{font-size:12.5px}
  .the-hanh-trinh .dong-tien{font-size:13.5px}

  .thanh-ngay{padding:11px 12px;gap:9px}
  .thanh-ngay .o-loc{min-width:0;flex:1}
  .thanh-ngay .nho{margin-left:0;flex-basis:100%}
  .hang-doi{padding:12px}
  .the-don{font-size:12.5px;min-height:52px}
  .o-khung{min-width:86px;padding:9px 8px}
  .o-xep .xep-don{font-size:12px;padding:7px 9px}
  .ghi-chu-luoi{font-size:11.5px}

  dialog{width:100%;max-width:none;height:100%;height:100dvh;max-height:none;
    margin:0;border:0;border-radius:0}
  .dau-hop{padding:14px 16px}
  .dau-hop h2{font-size:15px;line-height:1.4}
  #thanHop{padding:14px 16px 32px}
  .nhan-khau{margin-left:8px;font-size:10px}
  .hang-xem{grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:12.5px}
  .hang-xem b.to{font-size:13.5px}
  #thanHop .viec-form .button{min-height:48px;font-size:14px}

  /* Cỡ chữ ô nhập phải ≥16px: dưới đó Safari trên iPhone tự phóng to màn hình
     khi chạm vào ô, người giao phải vuốt lại mỗi lần nhập. KHÔNG khoá zoom
     bằng viewport — họ cần phóng to đọc địa chỉ khi đứng ngoài đường. */
  input,select,textarea{min-height:44px;font-size:16px}
  .button{min-height:44px}
  .nho-nut{min-height:38px}
  .icon-button{min-height:40px}

  .dong-sp,#panNhapDon .dong-sp{grid-template-columns:minmax(0,1fr) 84px 44px}
  .dong-sp>.o-form:first-child{grid-column:1/-1}
  .khung-form{padding:16px}
  .khoi-form{margin-top:20px}
  .chon-loai{grid-template-columns:repeat(2,minmax(0,1fr))}
  .the-loai{padding:11px 12px}
  .viec-luu .button.primary{width:100%;justify-content:center}
  .khoi-xep>summary{padding:14px 0;font-size:15px}
  .cuon-bang{max-height:70vh}
}