/* =====================================================================================================
   Vèoo — HỆ THỐNG GIAO DIỆN (v37, 30/10/2026; Giao diện A 4/11/2026 — xem khối "GIAO DIỆN A" cuối file). Quản lý bằng biến ở :root.

   Nhận diện:
   • Đỏ cà chua (--brand) = màu thương hiệu. Chỉ dùng cho: 1 nút hành động chính mỗi màn, đầu trang khách,
     logo, banner ưu đãi chính (đầu trang khách nay nền sáng). KHÔNG dùng cho tab, bộ lọc, nút phụ, chữ link thường.
   • Vàng nghệ (--accent) = dấu riêng của Vèoo: vạch "ship cái" (3 vạch tốc độ trong logo), số đếm, sao, điểm nhấn nhỏ.
   • Trung tính lạnh (nền xám rất nhạt, chữ gần đen) cho mọi thứ còn lại. Chọn = mực, không phải đỏ.
   • Xanh lá / cam đất / đỏ đậm CHỈ cho trạng thái (thành công / cảnh báo / lỗi), luôn kèm chữ hoặc icon.
   Tương phản (WCAG AA, đo bằng test/contrast_check.mjs): chữ thường ≥ 4,5:1, chữ lớn & viền điều khiển ≥ 3:1.
   Chữ: Be Vietnam Pro (từ 4/11/2026, như app khách; trước đó dùng font máy). Thang cỡ: 12 · 14 · 15 · 17 · 20 · 24 · 32. Đậm: 400 / 600 / 700 / 800 (chỉ tiêu đề lớn).
   Bo góc (A): 12 (nhỏ) · 16 (ô nhập) · 22 (thẻ, banner, hộp thoại) · 28 (khay dưới) · nút = viên thuốc.
   ===================================================================================================== */
:root{
  /* Giao diện A (4/11/2026) — khớp app khách Flutter (mobile/customer/lib/ui.dart, lớp C): nền xám lạnh rất nhạt, chữ gần đen lạnh,
     đỏ Vèoo CHỈ làm điểm nhấn (nút chính, mục đang chọn, chi tiết nhỏ). Không còn mảng đỏ lớn ở đầu trang. */
  /* Thương hiệu */
  --brand:#D9361F; --brand-hover:#BF2E19; --brand-ink:#FFFFFF; --brand-text:#B42A16; --brand-soft:#FBEBE9; --brand-line:#F3B5AA;
  --accent:#FFC233; --accent-hover:#F5B21A; --accent-ink:#3D2A00; --accent-soft:#FFF4D6; --accent-line:#F2D58A;
  /* Trung tính lạnh (A): bg #F4F5F7 · surface #FFF · surface2 #EEF0F3 (= --surface-3: rãnh tab, ô ảnh, nhãn) · line #E6E8EC */
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF0F3;
  --line:#E6E8EC; --line-strong:#D5D9DF; --line-input: #868C97;
  --ink:#16181D; --ink-2:#3F4550; --muted:#5F6672; --placeholder:#6E747F;
  /* Trạng thái */
  --ok:#1B7F37; --ok-hover:#156B2D; --ok-ink:#1D5130; --ok-bg:#E7F5EC; --ok-line:#A8D8B6;
  --warn:#8F5100; --warn-bg:#FFF4E0; --warn-line:#F1C47A;
  --bad:#C62828; --bad-bg:#FDECEC; --bad-line:#F2B8B8;
  --star:#F5A400;
  /* Chữ: Be Vietnam Pro (Google Fonts, có dấu tiếng Việt) — như app; chưa tải xong thì dùng font máy */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --fs-xs:12px; --fs-sm:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px; --fs-title:28px;
  /* Hình khối (A): thẻ 22 · ô nhập 16 · khay dưới 28 · nút viên thuốc */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --r-card:22px; --r-input:16px; --r-sheet:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sh-1:0 1px 2px rgba(22,24,29,.06);
  --sh-2:0 8px 24px rgba(22,24,29,.08);
  --sh-3:0 10px 30px rgba(22,24,29,.16),0 1px 2px rgba(22,24,29,.06);
  --overlay:rgba(22,24,29,.5);
  /* Tên cũ (JS / HTML cũ còn dùng) → trỏ về token mới */
  --orange:var(--brand); --orange-2:#E8412C; --orange-3:var(--brand-text);
  --river:var(--brand); --river-ink:var(--brand-ink); --river-soft:var(--brand-soft);
  --rice:var(--accent); --rice-ink:var(--accent-ink); --rice-soft:var(--accent-soft);
  --hero:var(--brand); --shadow:var(--sh-3); --card:var(--surface); --brand-old:var(--brand);
  --tile1:var(--surface-3); --tile1-ink:var(--muted); --tile2:var(--surface-3); --tile2-ink:var(--muted);
  --tile3:var(--surface-3); --tile3-ink:var(--muted); --tile4:var(--surface-3); --tile4-ink:var(--muted);
  color-scheme:light;
}

/* ---------- Nền tảng ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-md);line-height:1.5;font-variant-numeric:tabular-nums;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px));overflow-wrap:anywhere}
body.work{padding-bottom:40px}
body.noscroll{overflow:hidden}
.wrap{max-width:480px;margin:0 auto}
.wrap.wide{max-width:1100px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.2px}
h2,.h2{font-size:var(--fs-lg);font-weight:700;margin:0}
h3,.h3{font-size:var(--fs-md);font-weight:700}
p{margin:0}
a{color:var(--brand-text)}
button{font:inherit;color:inherit}
details>summary{cursor:pointer}
.muted{color:var(--muted);font-size:var(--fs-sm)}
.note{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.code{font-family:var(--font);font-weight:700;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.neg{color:var(--bad)} .pos{color:var(--ok)}
.hide{display:none!important} [hidden]{display:none!important}
.sr-only,.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic{flex:none;vertical-align:-.2em}

/* ---------- Bố cục ---------- */
.sec{margin-top:var(--sp-4);display:grid;gap:10px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.stack{display:grid;gap:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;gap:10px;align-items:center}
.grid2{display:grid;gap:14px}
.grid3{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
@media (min-width:760px){.grid2{grid-template-columns:1fr 1fr;align-items:start}}
.form-grid{display:grid;gap:10px}
.form-grid .full{grid-column:1/-1}
@media (min-width:640px){.form-grid.two{grid-template-columns:1fr 1fr}}
.foot{margin:28px 0 0;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
.foot a{color:var(--muted)}

/* ---------- Thẻ ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;min-width:0;box-shadow:var(--sh-1)}
.card.flat{background:var(--surface-2);box-shadow:none}
.ok-card{border-color:var(--ok-line);background:var(--ok-bg)}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}

/* ---------- Nút: chính (đỏ) · phụ (viền trung tính) · nguy hiểm · thành công · chữ ---------- */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--r-md);padding:12px 16px;
  font-weight:700;font-size:var(--fs-md);line-height:1.2;cursor:pointer;background:var(--brand);color:var(--brand-ink);text-align:center;text-decoration:none;min-height:44px}
.btn:hover{background:var(--brand-hover)}
.btn:visited{text-decoration:none}
.btn.block{display:flex;width:100%}
.btn.sm{padding:8px 12px;font-size:var(--fs-sm);border-radius:var(--r-sm);min-height:36px}
.btn.alt{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.alt:hover{background:var(--surface-3)}
.btn.ok{background:var(--ok);color:#fff} .btn.ok:hover{background:var(--ok-hover)}
.btn.bad{background:var(--surface);color:var(--bad);border-color:var(--bad-line)} .btn.bad:hover{background:var(--bad-bg)}
.btn.rice{background:var(--accent);color:var(--accent-ink)} .btn.rice:hover{background:var(--accent-hover)}
/* Nút đang khoá: xám rõ ràng (không phải hồng nhạt dễ tưởng lỗi) */
.btn:disabled,.btn.disabled{background:var(--surface-3);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.btn.disabled{pointer-events:none}
.link{background:none;border:0;color:var(--ink-2);font-weight:600;padding:4px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.link:hover{color:var(--ink);text-decoration-color:currentColor}
/* Nút chữ thêm ở 032–034 (xem chat khách ↔ shipper, khiếu nại của shipper, xoá khuyến mãi): vùng bấm ≥ 32px trên điện thoại */
.link[data-act="admChat"],.link[data-act="ticket"],.link[data-kmact]{min-height:32px;min-width:32px;padding-top:6px;padding-bottom:6px}
.back{background:none;border:0;color:var(--ink-2);font-weight:600;padding:12px 0 0;cursor:pointer;text-decoration:none;display:inline-block}
.back:hover{color:var(--ink)}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ink);text-decoration:none;cursor:pointer}
.iconbtn.fav{color:var(--brand);font-size:20px}
.iconbtn.fav[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-line)}
.x{border:0;background:var(--surface-3);color:var(--ink);width:36px;height:36px;border-radius:var(--r-sm);font-size:22px;line-height:1;cursor:pointer;flex:none}
.small-x{border:1px solid var(--line);background:var(--surface);color:var(--bad);border-radius:var(--r-sm);padding:9px 10px;cursor:pointer}
.info .btn,.warnbox .btn{white-space:nowrap;flex:none}

/* ---------- Ô nhập ---------- */
label{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
input,select,textarea{font:inherit;font-size:var(--fs-md);font-weight:400;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line-input);background:var(--surface);color:var(--ink);width:100%;min-width:0;min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--ink-2)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input[readonly]{background:var(--surface-2);color:var(--muted)}
textarea{resize:vertical;min-height:64px}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px 10px;margin:0;min-width:0}
legend{font-weight:700;font-size:var(--fs-sm);padding:0 4px}
.opt{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;padding:6px 0;color:var(--ink);font-size:var(--fs-md);font-weight:400;cursor:pointer}
.opt input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--brand)}
.chk{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);color:var(--ink);font-weight:400}
.chk input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--brand);flex:none}
.consent{align-items:flex-start} .consent input{margin-top:2px}
.lbl{font-size:var(--fs-sm);font-weight:600}
.moneybox{position:relative;display:block}
.moneybox input{padding-right:30px;font-variant-numeric:tabular-nums}
.moneyunit{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-weight:600}
.moneyerr{display:block;color:var(--bad);font-size:var(--fs-sm);font-weight:600;margin-top:4px}
input[data-money][aria-invalid]{border-color:var(--bad);outline-color:var(--bad)}
.search input{background:var(--surface);color:var(--ink);border:1px solid var(--line-input);padding:13px 16px;border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* ---------- Chọn lựa: tab · bộ lọc · nút chọn ---------- */
/* Thanh tab (trang làm việc): rãnh xám, mục đang chọn nổi trắng chữ mực — không dùng đỏ */
.tabs{display:flex;gap:2px;background:var(--surface-3);border:0;border-radius:var(--r-md);padding:4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;border:0;background:transparent;border-radius:var(--r-sm);padding:8px 12px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--muted);white-space:nowrap;min-height:36px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:700}
/* Quán/shipper trên điện thoại: 4–5 mục chia nhau đủ 1 hàng, chữ dài xuống 2 dòng — không mục nào khuất bên phải */
@media (max-width:559px){
  .work-top .tabs[role="tablist"]{overflow:visible;align-items:stretch}
  .work-top .tabs[role="tablist"] button{flex:1 1 auto;white-space:normal;overflow-wrap:normal;padding:6px 4px;font-size:12.5px;line-height:1.2;min-height:44px;text-align:center;text-wrap:balance}
  .work-top .tabs[role="tablist"] .badge{margin-left:2px;min-width:16px;padding:0 4px;line-height:16px}
}
.tabs .badge,.badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:700;line-height:18px;text-align:center}
/* Bộ lọc dạng viên thuốc: đang chọn = nền mực, chữ trắng */
.ftabs,.filt,.cats{display:flex;gap:6px;flex-wrap:wrap}
.ftabs button,.filt button,.cats button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;min-height:34px}
.ftabs button[aria-pressed="true"],.filt button[aria-pressed="true"],.cats button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
/* Nút chọn trong biểu mẫu (giờ mở cửa, cách trả…) */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:9px 10px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.toggle{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;min-height:34px}
.toggle[aria-pressed="true"]{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.toggle[aria-pressed="false"]{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.toggle[aria-pressed="true"]::before{content:"● "} .toggle[aria-pressed="false"]::before{content:"○ "}

/* ---------- Nhãn, huy hiệu trạng thái ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.chip.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.chip.river{background:var(--surface-3);color:var(--ink);border-color:transparent}
.pill{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px;font-size:var(--fs-xs)}
.tag{font-size:var(--fs-xs);background:var(--accent);color:var(--accent-ink);padding:1px 7px;border-radius:var(--r-pill);font-weight:700;margin-left:4px}
.st{font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:var(--r-pill)}
.st.open{background:var(--ok-bg);color:var(--ok)} .st.off{background:var(--surface-3);color:var(--muted)} .st.attp{background:var(--ok-bg);color:var(--ok)}
.incart{font-size:var(--fs-xs);font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);padding:0 6px;margin-left:4px}

/* ---------- Hộp thông tin / cảnh báo / lỗi / ưu đãi — luôn có icon hoặc chữ, không chỉ màu ---------- */
.info{background:var(--surface-3);color:var(--ink);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm)}
.deal{background:var(--ok-bg);color:var(--ok);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm);font-weight:600}
.warnbox{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm);font-weight:600}
.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-line);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-sm);font-weight:600}
.err::before,.warnbox:not(.between)::before{content:"⚠ ";font-weight:700}
.offline{background:var(--warn-bg);color:var(--warn);font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-sm);padding:6px 10px}
.confirm{background:var(--warn-bg);border-radius:var(--r-sm);padding:10px;display:grid;gap:8px;font-size:var(--fs-sm);color:var(--ink)}
.safe{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ok);background:var(--ok-bg);border-radius:var(--r-sm);padding:9px 12px;margin:0}
.cute{display:block;color:var(--warn);font-weight:700}
.hit{font-size:var(--fs-sm);color:var(--ok);font-weight:600}

/* ---------- Trạng thái tải / trống / lỗi ---------- */
.loading{color:var(--muted);padding:24px 0;text-align:center}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--ink-2);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.empty{color:var(--muted);font-size:var(--fs-sm);padding:6px 0}
.card.empty{padding:20px 16px;text-align:center;background:var(--surface-2);border-style:dashed;box-shadow:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;max-width:min(90vw,420px);box-shadow:var(--sh-3)}
.toast:empty{display:none}
.toast[data-kind="bad"]{background:var(--bad);color:#fff}

/* ---------- Danh sách, bảng tiền ---------- */
.lines{display:grid;gap:6px;font-size:var(--fs-sm)}
.lines>div{display:flex;justify-content:space-between;gap:10px}
.lines>div>span:last-child{text-align:right;white-space:nowrap}
.lines .minus{color:var(--ok)}
.lines .total{font-weight:800;font-size:var(--fs-lg);border-top:1px solid var(--line);padding-top:8px}
.ln{display:flex;justify-content:space-between;gap:10px} .ln>span:last-child{white-space:nowrap}
.split .ln b{font-variant-numeric:tabular-nums}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.olink{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.olink:last-child{border-bottom:0}
.kv{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:var(--fs-sm)}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;min-width:0}
.su-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--fs-sm);margin:0}
.su-meta dt{color:var(--muted)} .su-meta dd{margin:0;min-width:0}
.fee-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.fee-table td{padding:6px 0;border-bottom:1px solid var(--line)}
.fee-table td:last-child{text-align:right;font-weight:600}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th,.tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left;white-space:normal}
.tbl.tbl-promo td:first-child{min-width:8.5em}
.tbl th{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.tbl tr.sum td{font-weight:800;border-top:2px solid var(--line)}
.tbl td.neg,.tbl td .neg{color:var(--bad)}
.daytbl td,.daytbl th{vertical-align:top}
.daytbl td.items{white-space:normal;min-width:180px}
/* Bảng → thẻ khi màn hẹp (.tcards ≤ 719px, .tcards.md ≤ 899px): mỗi dòng 1 thẻ, ô đầu là tiêu đề,
   các ô còn lại "nhãn trên – số dưới" xếp lưới. Nhãn = tiêu đề cột, staff.js tự gắn vào data-l. Màn rộng giữ nguyên bảng. */
@media (max-width:719px){
  .tbl.tcards,.tbl.tcards tbody,.tbl.tcards tfoot{display:block}
  .tbl.tcards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.tcards tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));grid-auto-flow:row dense;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .tbl.tcards tbody tr:last-child{border-bottom:0}
  .tbl.tcards tfoot tr{border-top:2px solid var(--line);border-bottom:0}
  .tbl.tcards td{display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0;overflow-wrap:break-word}
  .tbl.tcards td::before{content:attr(data-l);display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:600;line-height:1.3}
  .tbl.tcards td:first-child,.tbl.tcards td.tc-wide,.tbl.tcards td[colspan]{grid-column:1 / -1}
  .tbl.tcards td:first-child::before,.tbl.tcards td[colspan]::before,.tbl.tcards td[data-l=""]::before{content:none}
  .tbl.tcards td:empty{display:none}
  .tbl.tcards td.items{min-width:0}
}
@media (min-width:720px) and (max-width:899px){
  .tbl.tcards.md,.tbl.tcards.md tbody,.tbl.tcards.md tfoot{display:block}
  .tbl.tcards.md thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl.tcards.md tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-auto-flow:row dense;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .tbl.tcards.md tbody tr:last-child{border-bottom:0}
  .tbl.tcards.md tfoot tr{border-top:2px solid var(--line);border-bottom:0}
  .tbl.tcards.md td{display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0;overflow-wrap:break-word}
  .tbl.tcards.md td::before{content:attr(data-l);display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:600;line-height:1.3}
  .tbl.tcards.md td:first-child,.tbl.tcards.md td.tc-wide,.tbl.tcards.md td[colspan]{grid-column:1 / -1}
  .tbl.tcards.md td:first-child::before,.tbl.tcards.md td[colspan]::before,.tbl.tcards.md td[data-l=""]::before{content:none}
  .tbl.tcards.md td:empty{display:none}
  .tbl.tcards.md td.items{min-width:0}
}
/* Địa chỉ webhook SePay: nhãn trên, địa chỉ dài xuống dòng, nút Chép luôn trong màn hình */
.hookrow{display:grid;gap:4px;font-size:var(--fs-sm)}
.hookrow .hookv{display:flex;gap:8px;align-items:center}
.hookrow .hookv b{flex:1 1 auto;min-width:0;word-break:break-all}
.hookrow .hookv .btn{flex:none}

/* ---------- Đầu trang khách: khối đỏ thương hiệu (chỗ duy nhất có mảng đỏ lớn) ---------- */
header.top{background:var(--brand);color:#fff;border:0;display:grid;gap:10px;padding:12px 16px 14px;border-radius:0 0 var(--r-lg) var(--r-lg);margin:0 -16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topbar .wm{background:none;border:0;padding:0;cursor:pointer;line-height:0;display:grid;justify-items:start;gap:0}
.wm-tag{font-size:11px;font-weight:700;color:#fff;opacity:.92;line-height:1;margin:0 0 1px;letter-spacing:.2px}
.wordmark{height:28px;width:auto;display:block}
.brand{display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand b{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.3px;display:inline-flex;align-items:center;gap:8px}
.brand small{opacity:.85;font-size:var(--fs-xs);display:block}
.brand .logo{width:30px;height:30px;flex:none;border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.ctabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ctabs button{border:1px solid rgba(255,255,255,.45);background:transparent;color:inherit;border-radius:var(--r-pill);padding:5px 12px;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.ctabs button[aria-pressed="true"]{background:#fff;color:var(--brand-text);border-color:#fff}
.topbar .ctabs{flex-wrap:nowrap;gap:6px}
.topbar .ctabs button{padding:5px 10px;white-space:nowrap;border-color:rgba(255,255,255,.4)}
.topbar .ctabs .nb{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;margin-left:2px}
/* Nút tài khoản khách: trắng chữ đỏ (bỏ vàng-trên-đỏ chói mắt) */
.acct{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.6);color:inherit;text-decoration:none;border-radius:var(--r-pill);padding:4px 12px 4px 6px;font-size:var(--fs-sm);font-weight:700;max-width:46%;min-width:0;white-space:nowrap}
.acct:not(:has(.acct-av)){padding-left:12px;background:#fff;color:var(--brand-text);border-color:#fff;max-width:none;flex:none}
.acct-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--brand-text);font-size:var(--fs-xs);flex:none}
.acct-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar .acct-n{max-width:64px;display:inline-block;vertical-align:middle}
.deliverwrap{display:grid;gap:10px}
.deliver{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:var(--r-md);padding:9px 12px;cursor:pointer;font:inherit}
.deliver .dpin{display:grid;place-items:center}
.dtxt{min-width:0;display:grid;line-height:1.2}
.dtxt small{opacity:.88;font-size:var(--fs-xs)}
.dtxt b{font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deliver>span:last-child{font-size:22px;opacity:.9}
.locquick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.locquick .pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #fff;background:#fff;color:var(--brand-text);font-weight:700;padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;font-size:var(--fs-sm)}
.locquick .zonepick summary{color:#fff;opacity:.92;font-size:var(--fs-xs);line-height:18px;padding:11px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.locquick .zonepick[open]{flex-basis:100%}
.zone{display:flex;gap:6px;flex-wrap:wrap}
.zone button{border:1px solid rgba(255,255,255,.45);background:transparent;color:inherit;border-radius:var(--r-pill);padding:5px 11px;font-size:var(--fs-xs);cursor:pointer}
.zone button[aria-pressed="true"]{background:#fff;color:var(--brand-text);border-color:#fff;font-weight:700}
.zonepick summary{cursor:pointer;font-size:var(--fs-xs);opacity:.9;padding:2px 0}
.zonepick .zone{margin-top:6px}
.locbar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);padding:8px 10px}
.locbar .locpin{display:grid;place-items:center}
.loctxt{min-width:0;display:grid;line-height:1.25}
.loctxt b{font-size:var(--fs-sm)} .loctxt small{opacity:.88;font-size:var(--fs-xs)}
.locbar .pill{background:transparent;color:inherit;border-color:rgba(255,255,255,.55);padding:5px 10px;font-size:var(--fs-xs);cursor:pointer;white-space:nowrap}
.locbar .pill.solid{background:#fff;color:var(--brand-text);border-color:#fff;font-weight:700}
.locbar .pill:disabled{opacity:.7;cursor:progress}
.locbtns{display:flex;gap:6px;justify-content:flex-end}
@media (max-width:440px){.locbtns{grid-column:1 / -1;justify-content:flex-start}}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border-radius:var(--r-sm);text-decoration:none;color:inherit}
button.bell{border:0;background:transparent;cursor:pointer}
.bell .dot{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--brand)}
.hero{background:var(--brand);color:#fff;border:0;border-radius:var(--r-lg);padding:18px 16px;margin-top:4px;display:grid;gap:6px}
.hero h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.3px;color:#fff}
.hero p{opacity:.92;font-size:var(--fs-sm)}
/* Khối "Bạn đang đăng nhập Quán…" trên trang khách: 1 dòng gọn, không chiếm chỗ của quán */
.staffgo{padding:8px 12px;background:var(--surface-2);box-shadow:none}
.staffgo b{font-size:var(--fs-sm);font-weight:600}
.staffgo .muted{display:none}

/* ---------- Thanh điều hướng dưới đáy (trang khách): Trang chủ · Đơn hàng · Thông báo · Tài khoản ---------- */
:root{--tb-h:58px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--surface);border-top:1px solid var(--line);
  padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.tabbar[hidden]{display:none}
.tb-in{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);height:var(--tb-h)}
.tb-item{display:grid;justify-items:center;align-content:center;gap:2px;color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600;line-height:1.1;min-width:0;-webkit-tap-highlight-color:transparent}
.tb-item[aria-current="page"]{color:var(--brand-text)}
.tb-item[aria-current="page"] .ic{stroke-width:2.4}
.tb-item:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:var(--r-sm)}
.tb-ic{position:relative;display:grid;place-items:center;height:26px}
.tb-dot{position:absolute;top:-3px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.tb-lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.has-tabbar{padding-bottom:calc(var(--tb-h) + 40px + env(safe-area-inset-bottom,0px))}
body.tb-on{padding-bottom:calc(var(--tb-h) + 110px + env(safe-area-inset-bottom,0px))}
body.tb-on .bar{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px));padding-bottom:10px;box-shadow:none}
body.has-tabbar:not(:has(.tabbar[hidden])) .toast{bottom:calc(var(--tb-h) + 76px + env(safe-area-inset-bottom,0px))}

/* ---------- Tab Tài khoản: danh sách 2 nhóm ---------- */
.acct-hero{display:grid;gap:2px;padding:18px 2px 6px}
.acct-hero small{color:var(--muted);font-size:var(--fs-sm)}
.acct-hero b{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.3px;line-height:1.2}
.acct-hero span{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--fs-md)}
.mlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.mlist.staffgo{padding:0;background:var(--brand-soft);border-color:var(--brand-line)}
.ml-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;width:100%;padding:13px 14px;min-height:54px;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer}
.ml-row:first-child{border-top:0}
.ml-row:hover{background:var(--surface-2)}
.ml-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.mr-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--ink-2)}
.mr-ic.danger{background:var(--bad-bg);color:var(--bad)}
.staffgo .mr-ic{background:var(--surface);color:var(--brand-text)}
.mr-tx{display:grid;min-width:0;line-height:1.3}
.mr-tx b{font-weight:600;font-size:var(--fs-md)}
.mr-tx small{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-go{color:var(--line-strong);display:grid}

/* ---------- Banner ưu đãi: 1 khuôn chung, khác nền ---------- */
.banners{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
.banners::-webkit-scrollbar{display:none}
.banner{scroll-snap-align:start;position:relative;overflow:hidden;border-radius:var(--r-lg);padding:16px;min-height:132px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;border:0;text-align:left;font:inherit;color:inherit;text-decoration:none;width:100%}
button.banner{cursor:pointer}
.bn-body{display:grid;gap:3px;align-content:center;min-width:0;position:relative;z-index:1}
.bn-body b{display:block;font-size:var(--fs-xl);line-height:1.15;font-weight:800;margin:0 0 2px;letter-spacing:-.2px}
.bn-body span{font-size:var(--fs-sm);line-height:1.35;opacity:.92;display:block}
.bn-cta{font-style:normal;justify-self:start;margin-top:8px;font-size:var(--fs-xs);font-weight:700;padding:5px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);color:var(--ink)}
.bn-ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);position:relative;z-index:1}
/* Dấu nhận diện: 3 vạch "ship cái" vàng nghệ ở góc trên phải (như vạch tốc độ trong logo) */
.bn-lines{position:absolute;top:14px;right:14px;display:grid;gap:3px;justify-items:end;opacity:.95}
.bn-lines i{display:block;height:3px;border-radius:3px;background:var(--accent)}
.bn-lines i:nth-child(1){width:18px} .bn-lines i:nth-child(2){width:12px} .bn-lines i:nth-child(3){width:7px}
.promo-brand{background:var(--brand);color:#fff}
.promo-ink{background:var(--ink);color:#fff}
.promo-accent{background:var(--accent);color:var(--accent-ink)}
.promo-accent .bn-ic{background:rgba(61,42,0,.1)} .promo-accent .bn-lines i{background:var(--brand)} .promo-accent .bn-cta{background:var(--accent-ink);color:#fff}
.promo-plain{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.promo-plain .bn-ic{background:var(--surface-3);color:var(--ink-2)} .promo-plain .bn-lines i{background:var(--accent)}
.promo-ink .bn-cta{background:var(--accent);color:var(--accent-ink)}
/* Banner ảnh quán (khi quán có ảnh bìa) */
.banner.pic{padding:0;display:block;color:#fff;background:var(--surface-3);aspect-ratio:2/1;min-height:0}
.banner.pic .thumb{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.banner.pic .thumb>span{display:none}
.bn-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));display:grid;gap:2px}
.bn-cap b{font-size:var(--fs-lg);margin:0}
.bn-cap span{font-size:var(--fs-xs);opacity:.92;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.bn-tag{display:inline-flex;align-items:center;gap:4px;align-self:start;justify-self:start;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:700;margin-bottom:2px}
.bdots{display:flex;justify-content:center;gap:6px;margin-top:-2px}
.bdots i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--line-strong);transition:all .2s}
.bdots i.on{width:18px;background:var(--ink)}

/* ---------- Trang chủ: danh mục, tab sắp xếp, thẻ quán ---------- */
.catgrid{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
.catgrid::-webkit-scrollbar{display:none}
.catgrid button{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 12px 6px 8px;cursor:pointer;font:inherit;color:var(--ink)}
.catgrid i{font-style:normal;font-size:18px}
.catgrid span{font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.catgrid button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.catgrid button[aria-pressed="true"] span{color:#fff}
.stabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin:0 -16px;padding:0 8px}
.stabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 4px;font:inherit;font-weight:600;font-size:var(--fs-sm);color:var(--muted);cursor:pointer}
.stabs button[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--brand)}
.shopgrid,.shoplist{display:grid;gap:10px}
.shopcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;color:inherit;text-decoration:none;box-shadow:var(--sh-1)}
.shopcard:active{transform:scale(.99)}
.shopcard.row{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:10px;align-items:start}
.shopcard.row .sc-body{padding:0;gap:4px;min-width:0}
.shopcard.closed .thumb,.shopcard.row.closed .thumb{filter:grayscale(.75) brightness(.95)}
.shopcard.row.closed{opacity:.75}
.sc-pic{position:relative}
.sc-body{padding:10px 14px 12px;display:grid;gap:4px}
.sc-body h3{font-size:var(--fs-lg);margin:0}
.sc-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.sc-top h3{font-size:var(--fs-md);font-weight:700;margin:0;line-height:1.3}
.sc-cat{font-size:var(--fs-sm);color:var(--muted)}
.sc-meta{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--fs-sm);color:var(--muted);align-items:center}
.sc-meta>span{white-space:nowrap}
.sc-meta>span+span::before{content:"·";margin-right:8px;color:var(--line-strong)}
.sc-meta .warn{color:var(--bad);font-weight:600}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px}
.sc-addr{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-off{position:absolute;inset:auto 10px 10px auto;background:rgba(22,24,29,.82);color:#fff;font-size:var(--fs-xs);font-weight:700;padding:4px 10px;border-radius:var(--r-pill);z-index:2}
.sc-badge{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.95);color:var(--ok);font-size:var(--fs-xs);font-weight:700;padding:3px 8px;border-radius:var(--r-pill)}
.sc-fav{position:absolute;top:6px;right:6px;z-index:2;background:#fff;color:var(--brand);border-radius:var(--r-pill);width:24px;height:24px;display:grid;place-items:center;font-size:13px;box-shadow:var(--sh-1)}
.rt{flex:none;font-weight:700;font-size:var(--fs-sm);white-space:nowrap}
.rt i{font-style:normal;color:var(--star)}
.rt.new{font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--surface-3);padding:1px 8px;border-radius:var(--r-pill)}
.rt.new i{display:none}
.rate b{color:var(--ink)}
.rate.new{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);background:var(--surface-3);padding:1px 8px;border-radius:var(--r-pill)}
.rate.big{text-decoration:none;color:inherit;font-size:var(--fs-md)}
.rate.big b{color:var(--ink);font-size:var(--fs-lg)}
.whyv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.whyv div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 8px;display:grid;justify-items:center;align-content:start;text-align:center;gap:4px}
.whyv i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.whyv b{font-size:var(--fs-sm);line-height:1.25}
.whyv span{font-size:var(--fs-xs);color:var(--muted);line-height:1.3}
.feebox summary{cursor:pointer;font-weight:700;font-size:var(--fs-sm)}
.feebox[open] summary{margin-bottom:8px}
.joinus{flex-wrap:wrap}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{display:none}
@media (min-width:640px){.hscroll{grid-auto-columns:42%}}
.bigcard,.dishcard{scroll-snap-align:start;display:grid;gap:4px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;color:inherit;text-decoration:none;box-shadow:var(--sh-1)}
.bigcard>b,.dishcard>b{font-size:var(--fs-sm);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bigcard .sc-meta{font-size:var(--fs-xs)}
.dishcard .muted{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dishcard .price{font-weight:700;color:var(--ink);font-size:var(--fs-md)}
.bigcard.closed .thumb,.dishcard.closed .thumb{filter:grayscale(.7)}

/* ---------- Ảnh và ảnh thay thế (chưa có ảnh / ảnh lỗi): nền trung tính + icon, không chữ viết tắt ---------- */
.thumb{position:relative;overflow:hidden;width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--line-strong)}
.thumb>span{position:relative;z-index:0;display:grid;place-items:center}
.thumb .ph .ic{width:40%;height:40%;min-width:20px;min-height:20px;max-width:44px;max-height:44px;color:var(--line-strong)}
.thumb img.fill,.thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.thumb.sm{width:40px;height:40px;border-radius:var(--r-sm)}
.thumb.lg{width:84px;height:84px}
.thumb.logo{width:64px;height:64px;border-radius:50%;border:3px solid var(--surface);box-shadow:var(--sh-2)}
.thumb.cover{width:100%;height:auto;aspect-ratio:2.1/1;border-radius:0}
.thumb.big,.thumb.dish{width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--r-sm)}
.thumb.sq{width:88px;height:88px;border-radius:var(--r-sm)}
.t1,.t2,.t3,.t4{background:var(--surface-3);color:var(--muted)}
.sc-ph{display:grid;place-items:center;background:var(--surface-3);border-radius:var(--r-sm);position:relative;overflow:hidden;aspect-ratio:3.4/1}
.sc-ph.sq{width:88px;height:88px;aspect-ratio:auto}
.sc-ph::after{content:"";position:absolute;inset:auto 10px 10px auto;width:14px;height:8px;background:linear-gradient(var(--accent),var(--accent)) 0 0/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 4px 3px/10px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 8px 6px/6px 2px no-repeat;opacity:.9}
.sc-ph i{font-style:normal;font-size:32px;line-height:1;filter:saturate(.9)}
.sc-ph span{display:none}
.shopcard.closed .sc-ph{filter:grayscale(.8)}
.avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;font-weight:700;flex:none;position:relative}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-sm);flex:none}
.photo-big{border-radius:var(--r-md);overflow:hidden;background:var(--surface-3);aspect-ratio:4/3}
.photo-big img{width:100%;height:100%;object-fit:cover;display:block}
.photo-big.sm{aspect-ratio:16/9}

/* ---------- Trang quán (khách xem) + thực đơn ---------- */
.shopnav{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;background:var(--bg);margin:0 -16px;padding:8px 12px}
.shopnav b{font-size:var(--fs-md);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storefront{padding:0;overflow:hidden;display:grid;gap:8px}
.storefront>*:not(.cover){margin:0 14px}
.storefront>:last-child{margin-bottom:14px}
.storefront .sf-head{display:flex;gap:12px;align-items:center;margin-top:14px}
.storefront.has-cover .sf-head{margin-top:-34px;align-items:flex-end}
.storefront.has-cover .sf-head>div:last-child{padding-top:38px}
.storefront .cover{aspect-ratio:16/9;background:var(--surface-3);overflow:hidden}
.storefront .cover img{width:100%;height:100%;object-fit:cover;display:block}
.sf-intro{font-size:var(--fs-sm)}
.sf-meta{gap:12px}
.sf-ship{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--fs-sm)}
.btn.grpbtn{display:grid;gap:2px;justify-items:center;border:1px solid var(--line-strong);color:var(--ink);background:var(--surface)}
.btn.grpbtn:hover{background:var(--surface-3)}
.grpbtn small{font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.sectabs{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;background:var(--bg);padding:8px 0;margin:-4px 0;scrollbar-width:none}
.sectabs a{flex:none;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--fs-sm);font-weight:600}
.menu-sec{scroll-margin-top:56px}
.menu-sec h3{margin:4px 0 2px}
#reviews{scroll-margin-top:12px}
.item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item.out{opacity:.55}
.item-name{font-weight:600}
.item-desc{font-size:var(--fs-sm);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-weight:600}
.item-pic{position:relative;display:grid;justify-items:end;gap:4px}
.item.has-img .item-pic{width:92px}
.item-pic .pic-btn{display:block;width:92px;height:92px;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-3);cursor:zoom-in}
.item-pic .pic-btn img{width:100%;height:100%;object-fit:cover;display:block}
.item.has-img .item-pic .addbtn{position:absolute;right:-4px;bottom:-6px;box-shadow:var(--sh-2)}
.item:not(.has-img) .item-pic{display:flex;align-items:center;gap:10px;align-self:center}
/* Nút "+" thêm món: nền đỏ nhạt chữ đỏ — đủ nhận ra, không thành hàng chục khối đỏ đặc */
.addbtn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand-text);font-size:20px;font-weight:600;line-height:1;cursor:pointer}
.addbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.addbtn:disabled{background:var(--surface-3);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.bestcard{flex:0 0 138px;scroll-snap-align:start;display:grid;gap:4px;min-width:0}
.bestcard .pic-btn,.bestcard .thumb{width:138px;height:104px;border-radius:var(--r-sm);overflow:hidden;padding:0;border:0;background:var(--surface-3)}
.bestcard .pic-btn img{width:100%;height:100%;object-fit:cover;display:block}
.bc-name{font-size:var(--fs-sm);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);font-size:17px;cursor:pointer}
.qty span{min-width:20px;text-align:center;font-weight:600}
.cline{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.promos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.promo{border-radius:var(--r-md);padding:12px;display:grid;gap:2px;font-size:var(--fs-xs)}
.promo b{font-size:var(--fs-sm);line-height:1.3}
.promo.a{background:var(--accent-soft);color:var(--ink)} .promo.b{background:var(--surface-3);color:var(--ink);border:1px solid var(--line)}
.promise{display:grid;gap:8px}
.promise div{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:var(--fs-sm)}
.promise i{font-style:normal;color:var(--ok);font-weight:800}

/* ---------- Thanh dưới cùng + hộp thoại ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);z-index:7;box-shadow:0 -4px 14px rgba(22,24,29,.06);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.bar .in{max-width:480px;margin:0 auto;display:flex;gap:10px;align-items:center}
.bar .sum{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--muted)}
.bar .sum b{display:block;font-size:var(--fs-lg);color:var(--ink)}
.bar .btn{flex:none}
.sheet-wrap{position:fixed;inset:0;z-index:20;display:grid;align-items:end;justify-items:center}
.sheet-bg{position:absolute;inset:0;background:var(--overlay);border:0;cursor:pointer}
.sheet{position:relative;background:var(--surface);width:100%;max-width:520px;max-height:88vh;overflow:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:grid;gap:12px}
.sheet.wide{max-width:720px}
@media (min-width:760px){.sheet-wrap{align-items:center}.sheet{border-radius:var(--r-lg);max-height:90vh}}

/* ---------- Trang đơn: các bước, đánh giá ---------- */
.steps{display:grid;list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;padding-bottom:14px;position:relative}
.steps li::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::before{display:none}
.steps li.done::before{background:var(--ok-line)}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);position:relative;z-index:1}
.steps li.done .dot{background:var(--ok);border-color:var(--ok)}
.steps li.done .dot::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.steps li.now .dot{background:var(--accent);border-color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-soft)}
.steps li.todo{color:var(--muted)}
.stars{display:flex;gap:4px;color:var(--star);letter-spacing:1px}
.stars button{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.stars button[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.starline{color:var(--star);letter-spacing:1px}
.starpick{display:flex;gap:4px}
.starpick button{font-size:32px;line-height:1;background:none;border:0;color:var(--line-strong);cursor:pointer;padding:2px}
.starpick button[aria-pressed="true"]{color:var(--star)}
.tagpick{display:flex;flex-wrap:wrap;gap:6px}
.tagpick button{padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer;min-height:36px}
/* Ô khen tô xanh, ô chê tô đỏ khi chọn (kèm dấu ✓) — không cần đọc chữ mới phân biệt */
.tagpick button[aria-pressed="true"]{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);font-weight:600}
.tagpick button[data-tone="bad"][aria-pressed="true"]{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.tagpick button[aria-pressed="true"]::before{content:"✓ "}
.thumbpick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thumbpick button{min-height:48px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:var(--surface);font:inherit;font-weight:700;font-size:var(--fs-md);cursor:pointer;color:inherit}
.thumbpick button[aria-pressed="true"][data-v="up"]{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.thumbpick button[aria-pressed="true"][data-v="down"]{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.rv-sum{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.rv-big{display:grid;justify-items:center;gap:2px;min-width:84px}
.rv-big>b{font-size:var(--fs-3xl);line-height:1}
.rv-bars{display:grid;gap:3px}
.sbar{display:grid;grid-template-columns:28px 1fr 28px;gap:6px;align-items:center;font-size:var(--fs-xs)}
.sbar i{height:7px;border-radius:9px;background:var(--surface-3);overflow:hidden;display:block}
.sbar i b{display:block;height:100%;background:var(--star)}
.review{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px}
.reply{background:var(--surface-2);border-left:3px solid var(--line-strong);padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm)}
.rvpart{display:grid;gap:4px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.rvpart:last-of-type{border-bottom:0}
.shipcard{display:flex;gap:10px;align-items:center}
.meter{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.notice{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.notice:last-child{border-bottom:0}
.notice.unread b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:6px;vertical-align:middle}
.notice-go{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;cursor:pointer;position:relative;padding-right:22px;min-height:44px}
.notice-go:last-child{border-bottom:0}
.notice-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted)}
.donebox{text-align:center;display:grid;gap:10px;justify-items:center}
.donebox .tick{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:var(--fs-3xl);font-weight:800}
.qrbox{background:#fff;padding:8px;border-radius:var(--r-sm);line-height:0;flex:none;min-width:0;border:1px solid var(--line)}
.qrbox img,.qrbox canvas{width:168px;height:168px;display:block}
.qrwrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qrimg{width:220px;max-width:100%;aspect-ratio:1/1;background:#fff;border-radius:var(--r-sm);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:var(--fs-sm);text-align:center;padding:8px;margin:0 auto}
.qrimg img{width:100%;height:100%;object-fit:contain}
.share{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.linkbox{display:flex;gap:6px}
.linkbox input{font-family:var(--mono);font-size:var(--fs-xs)}
.linkbox button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:0 12px;cursor:pointer}

/* ---------- Đặt nhóm ---------- */
.ghero{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;box-shadow:var(--sh-1)}
.ghero .thumb.lg{width:60px;height:60px}
.gh-txt{min-width:0}.gh-txt .h2{margin:0 0 2px;font-size:var(--fs-lg)}
.gtime{text-align:center;background:var(--surface-3);color:var(--ink);border-radius:var(--r-md);padding:6px 10px;min-width:72px}
.gtime b{display:block;font-size:var(--fs-xl);line-height:1.1;font-variant-numeric:tabular-nums}
.gtime small{font-size:11px;font-weight:600}
.gtime.end{background:var(--surface-3);color:var(--muted)}
.timer{font-size:var(--fs-2xl);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.timer.end{color:var(--bad)}
.invite{gap:10px}
.perk{display:grid;gap:6px;font-size:var(--fs-sm);color:var(--ink)}
.invbtns{display:grid;grid-template-columns:1fr auto;gap:8px}
.qrd summary{cursor:pointer;font-size:var(--fs-sm);color:var(--muted)}
.qrd[open] .qrbox{margin-top:8px}
.member{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.member:last-child{border-bottom:0}
.member.me{background:var(--accent-soft);margin:0 -10px;padding:10px;border-radius:var(--r-sm);border-bottom-color:transparent}
.member .items{font-size:var(--fs-sm);color:var(--muted)}
.grouprow{color:inherit;text-decoration:none;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.grouprow:first-of-type{border-top:0}
.progress{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.progress i,.progress span{display:block;height:100%;background:var(--ok);border-radius:var(--r-pill);transition:width .3s}

/* ---------- Trang làm việc (Quán / Shipper / Điều phối) ---------- */
.work-top{position:sticky;top:0;z-index:8;background:var(--bg);padding:8px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.work-top>*{min-width:0}
.work-top .between{flex-wrap:wrap}
.wt-head{flex-wrap:nowrap!important}
.wt-head>div:first-child{flex:1 1 0;min-width:0}
.wt-head>div:first-child>div{min-width:0;flex:1 1 0}
.wt-head>.row{flex-wrap:nowrap;flex:none;gap:6px}
.wt-head .wt-acct,.wt-head .bell{flex:none}
.work-top .bell,.work-top .wt-acct{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);min-width:40px;min-height:38px}
.work-top .wt-acct{padding:0 10px 0 12px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap}
.work-top .bell .dot{box-shadow:0 0 0 2px var(--surface)}
/* Thanh mục gom nhóm (điều phối): mục chính + bảng thả xuống có icon, tên, mô tả */
.badge[hidden]{display:none}
/* Tìm kiếm điều phối: ô tìm trong mục + bảng tìm kiếm chung (kính lúp trên đầu trang) */
.tabfind{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-input);border-radius:var(--r-pill);padding:0 6px 0 14px;color:var(--muted)}
.tabfind:focus-within{border-color:var(--ink-2);box-shadow:0 0 0 3px var(--accent-soft)}
.tabfind input[type=search]{flex:1;border:0;background:transparent;padding:0;min-height:42px;border-radius:0;box-shadow:none;outline:0}
.tabfind .ic{flex:none}
.tf-n{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;padding-right:8px}
.tf-hide{display:none!important}
.gs-box{margin-bottom:4px}
.gs-hint{padding:8px 4px}
.gs-grp{display:grid;gap:2px;margin-top:12px}
.gs-grp h3{font-size:var(--fs-xs);color:var(--muted);font-weight:700;margin:0 0 2px 8px}
.gs-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:8px;border:0;border-radius:var(--r-md);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.gs-row:hover,.gs-row:focus-visible{background:var(--surface-2)}
.gs-ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2)}
.gs-tx{min-width:0}
.gs-tx b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-tx small{display:block;color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-more{justify-self:start;margin:2px 0 0 8px;font-size:var(--fs-sm)}
.gs-hit{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
/* Danh sách quán (điều phối): điện thoại hẹp → nút xuống dòng, tên quán không bị bẻ từng chữ */
.shoprow{flex-wrap:wrap}
.shoprow>span:not(.row){flex:1 1 170px!important}
.shoprow>.row{margin-left:auto}
.wt-head-nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand act" "nav nav";gap:10px 12px;align-items:center}
.wt-head-nav>.wt-brand{grid-area:brand}.wt-head-nav>.row{grid-area:act}.wt-head-nav>.wnav{grid-area:nav}
.wnav{position:relative;min-width:0}
.wn-bar .wn-top{display:inline-flex;align-items:center;justify-content:center;gap:3px;flex:1 1 auto;padding:8px 8px}
.wn-bar .wn-top .wn-chev{width:14px;height:14px}
.wn-bar .wn-top[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:700}
.wn-bar .wn-top[aria-expanded="true"]{color:var(--ink)}
.wn-bar .wn-top .badge{margin-left:2px}
.wn-chev{flex:none;transition:transform .16s ease}
.wn-top[aria-expanded="true"] .wn-chev{transform:rotate(180deg)}
.wn-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;right:0;display:grid;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);animation:wnIn .16s ease-out}
.wn-panel[hidden]{display:none}
.wn-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
@keyframes wnIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.wn-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto 16px;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:var(--r-md);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.wn-item:hover,.wn-item:focus-visible{background:var(--surface-2)}
.wn-item[aria-current="page"]{background:var(--surface-3)}
.wn-ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center}
.wn-ic.t-brand{background:var(--brand-soft);color:var(--brand-text)}.wn-ic.t-accent{background:var(--accent-soft);color:var(--accent-ink)}
.wn-ic.t-ok{background:var(--ok-bg);color:var(--ok)}.wn-ic.t-warn{background:var(--warn-bg);color:var(--warn)}.wn-ic.t-ink{background:var(--surface-3);color:var(--ink-2)}
.wn-tx{display:grid;gap:2px;min-width:0}
.wn-tx b{font-size:var(--fs-md);font-weight:700}
.wn-tx small{font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.wn-go{color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.wn-item:hover .wn-go,.wn-item:focus-visible .wn-go,.wn-item[aria-current="page"] .wn-go{opacity:1;transform:none}
.wn-cur{display:none;font-weight:600;color:var(--ink-2);white-space:nowrap}
@media (max-width:399px){.wn-bar{gap:0;padding:3px}.wn-bar .wn-top{padding:8px 4px;gap:2px;font-size:13px}.wn-bar .wn-top .badge{min-width:16px;padding:0 3px;margin-left:1px}.wn-bar .wn-top .wn-chev{width:12px;height:12px}}
@media (min-width:640px){.wn-panel{right:auto;width:400px}}
/* Từ 640px: thanh mục chỉ dài vừa chữ, không kéo dãn hết chiều ngang */
@media (min-width:640px){.wn-bar{display:inline-flex;max-width:100%}.wn-bar .wn-top{flex:0 0 auto;padding:8px 12px}}
/* Từ 720px: logo · thanh mục · Tài khoản trên một hàng; nút nhóm hiện tên mục đang mở */
@media (min-width:720px){
  .wt-head-nav{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav act";gap:12px}
  .wt-head-nav .who{display:none}
  /* 720–999px: chỉ để logo, chữ "Điều phối" ẩn khỏi mắt (vẫn cho máy đọc màn hình) để thanh mục + kính lúp đủ chỗ khi có số đếm */
  .wt-head-nav .wt-brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wn-bar{background:transparent;padding:0;overflow:visible}
  .wn-bar .wn-top:hover,.wn-bar .wn-top[aria-expanded="true"]{background:var(--surface-3)}
}
@media (min-width:900px){.wn-cur{display:inline}}
@media (min-width:1000px){.wt-head-nav{gap:16px}.wt-head-nav .who{display:block}.wt-head-nav .wt-brand h1{position:static;width:auto;height:auto;overflow:visible;clip:auto}.wt-head-nav>.wt-brand{min-width:170px}.wn-bar{justify-content:center}}
@media (prefers-reduced-motion:reduce){.wn-panel{animation:none}.wn-chev,.wn-go{transition:none}}

.who{font-size:var(--fs-sm);color:var(--muted)}
.login{max-width:380px;margin:40px auto 0}
.work-h{display:grid;gap:10px;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.work-h .row>label{flex:1 1 200px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;display:grid;gap:2px;box-shadow:var(--sh-1)}
.kpi span{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.kpi b{font-size:var(--fs-xl);font-weight:700}
.kpi.hi{border-color:var(--accent-line);background:var(--accent-soft)}
.ocard{display:grid;gap:8px}
.ocard .items{font-size:var(--fs-sm);display:grid;gap:2px}
.ocard.locked{opacity:.85;border-style:dashed}
.board{display:grid;gap:10px;align-items:start;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.mag{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-top:4px}
.mag i{display:block;height:100%}
.mag i.n{background:var(--bad)} .mag i.p{background:var(--ok)}
.mrow .mthumb{width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;flex:none;position:relative;background:var(--surface-3);display:grid;place-items:center;font-size:20px;color:var(--muted)}
.mrow .mthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Thanh bật thông báo đẩy: 1 dòng gọn, không chiếm nửa màn hình */
.pushbar{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;padding:8px 10px 8px 12px;margin:0;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.4}
.pushbar.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--accent-ink)}
.pushbar.on{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink);padding:6px 10px 6px 12px}
/* Điều phối: gộp “Bật thông báo” + “Mật khẩu quá ngắn” thành 1 dòng nhắc; bấm “Xem” mới bung chi tiết. Màn rộng bung sẵn. */
.wt-alerts{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.wt-alerts.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.wt-alerts>summary{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 10px;min-height:40px;font-size:13px;cursor:pointer;list-style:none;color:var(--accent-ink);font-weight:600}
.wt-alerts.ok>summary{color:var(--ok-ink)}
.wt-alerts>summary::-webkit-details-marker{display:none}
.wt-alerts .wa-sum{flex:1 1 auto;min-width:0;line-height:1.25}
.wt-alerts .wa-more{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm)}
.wt-alerts[open] .wa-more svg{transform:rotate(180deg)}
.wt-alerts .wa-body{display:grid;gap:8px;padding:0 8px 8px}
.wt-alerts .wa-body .link{justify-self:start;font-size:var(--fs-xs);min-height:36px;padding:8px 0}
@media (min-width:720px){.wt-alerts,.wt-alerts.ok{border:0;background:transparent}.wt-alerts>summary{display:none}.wt-alerts .wa-body{padding:0}}
.pushbar span{min-width:0}
.pushbar .btn{flex:none}
/* Nút chỉ đường cho shipper: to dễ bấm, màu trung tính (nút đỏ dành cho "Đã lấy món / Đã giao") */
.navbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-top:8px;min-height:48px;padding:10px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)!important;font-weight:700;font-size:var(--fs-md);text-decoration:none;text-align:center}
.navbtn small{font-weight:500;font-size:var(--fs-xs);color:var(--muted)}
.navbtn.alt{background:var(--warn-bg);border-color:var(--warn-line)}
.navbtn:active{transform:translateY(1px)}
.warn-mark{font-size:16px}

/* ---------- Gian hàng / ảnh / giờ mở cửa / đăng ký ---------- */
.imgslot{display:grid;gap:6px;justify-items:start}
.imgslot .prev{background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-md);overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:var(--fs-sm);position:relative}
.imgslot .prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgslot .prev.cover{width:100%;aspect-ratio:16/9}
.imgslot .prev.sq{width:110px;height:110px}
.imgslot .prev.round{width:96px;height:96px;border-radius:50%}
.uploading{opacity:.6;pointer-events:none}
.optgroup{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:10px;display:grid;gap:8px}
.optchoice{display:grid;grid-template-columns:1fr 110px auto;gap:6px;align-items:end}
.hourspick{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;display:grid;gap:10px;min-width:0}
.hourspick legend{padding:0 4px;font-weight:600}
.hourspick .seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hourspick .seg button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:10px;font-weight:600;cursor:pointer}
.hourspick .seg button[aria-checked="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.hourspick select{font-size:var(--fs-lg);padding:10px;font-variant-numeric:tabular-nums}
.hp-pre .chip{cursor:pointer;font-size:var(--fs-sm);padding:5px 10px}
.hp-pre .chip:hover{border-color:var(--ink-2);color:var(--ink)}
ol.wsteps{display:flex;gap:6px;list-style:none;padding:0;margin:0;counter-reset:s}
ol.wsteps li{flex:1;counter-increment:s;font-size:var(--fs-xs);color:var(--muted);border-top:3px solid var(--line);padding-top:6px}
ol.wsteps li::before{content:counter(s) ". "}
ol.wsteps li[aria-current="step"]{color:var(--ink);border-color:var(--brand);font-weight:700}
ol.wsteps li.done{color:var(--ok);border-color:var(--ok)}
.dob{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:6px;margin-top:4px}
.dob label{display:block} .dob select{width:100%}
.docslot{display:grid;gap:8px} .docslot.ok{border-color:var(--ok)} .docslot.uploading{opacity:.6;pointer-events:none}
.kyc{display:grid;gap:4px;margin:4px 0}
.kycgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:10px 0}
.kycgrid figure{margin:0;display:grid;gap:4px}
.kycgrid figcaption{font-size:var(--fs-sm);font-weight:600}
.kycgrid img{width:100%;border-radius:var(--r-sm);border:1px solid var(--line);background:#000}
.authbox h2{font-size:var(--fs-lg)}
.roles{display:grid;gap:10px}
.rolecard{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 14px;cursor:pointer;color:var(--ink);font:inherit;box-shadow:var(--sh-1)}
.rolecard:hover,.rolecard:focus-visible{border-color:var(--line-strong);background:var(--surface-2)}
.rolecard b{font-size:var(--fs-lg);display:block}
.rolecard .muted{display:block;margin-top:2px}
.rolecard .ic{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;font-size:24px;font-weight:800}
.rolecard .go{color:var(--ink-2);font-size:22px;font-weight:700}
.policy .card h2{font-size:var(--fs-md);margin-top:6px}
.policy .card p{line-height:1.6}

/* ---------- Bản đồ, địa chỉ ---------- */
.locbox{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:10px;display:grid;gap:8px;background:var(--surface-2)}
.loc-ok{display:grid;gap:2px}
.fav-on{color:var(--brand);font-size:.85em}
.maplink{display:inline-block;margin-top:4px;font-weight:600;font-size:var(--fs-sm)}
.maplink::before{content:"↗ "}
.mapbox{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.mapbox .map{height:min(56vh,420px);background:var(--surface-3)}
.mapbox .pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;background:var(--brand);transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35);z-index:500;pointer-events:none}
.mapbox .pin::after{content:"";position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;background:#fff}
.mapbox .maplibregl-ctrl-attrib{font-size:10px}
.shopdot{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--brand);display:grid;place-items:center;font-size:14px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.shopdot.cur{width:32px;height:32px;font-size:17px;border-color:var(--brand-hover);border-width:3px}
.placelist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.placelist li,.placelist .prow{display:flex;gap:6px;align-items:stretch}
.placebtn{flex:1;min-width:0;text-align:left;display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.placebtn:hover,.placebtn:focus-visible{border-color:var(--line-strong);background:var(--surface-2)}
.placebtn b{font-weight:600;overflow-wrap:anywhere}
.placebtn small{color:var(--muted);font-size:var(--fs-sm);overflow-wrap:anywhere}
.placebtn .pic{flex:0 0 24px;text-align:center;font-size:18px;line-height:1.3}
.placebtn .ptx{display:flex;flex-direction:column;gap:2px;min-width:0}
.prow .pchev{align-self:center;font-size:22px;color:var(--muted);padding:0 6px}
.placex{width:40px;border-radius:var(--r-md);border:1px solid var(--line);background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.pmenu{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 4px 46px}
.plh{margin:14px 0 2px;font-size:var(--fs-sm);color:var(--muted);font-weight:600}
#locQ{width:100%}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:700}
.faq p,.faq ul{margin:8px 0 0}

/* ---------- Gợi ý cài app ---------- */
.installbar{position:fixed;left:0;right:0;top:0;z-index:30;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px))}
.installbar-in{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;box-shadow:var(--sh-3)}
.installbar-ic{width:36px;height:36px;border-radius:9px;flex:none;background:url(../icons/icon-192.png?v=27) center/cover,var(--brand)}
.installbar-t{display:grid;min-width:0;font-size:var(--fs-sm);line-height:1.35}
.installbar-t b{font-size:var(--fs-sm)}
.installbar-x{margin-left:auto;flex:none;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer}
.between>.btn,.between>a.btn{white-space:nowrap;flex:none}
.promo-price{font-weight:700;color:var(--ok)}

/* ---------- Đợt 3 (mục 3): thanh mục trang Quán / Shipper theo chuẩn trang điều phối ----------
   Icon + tên ngắn, mục đang chọn nổi trắng, số đếm nằm trên icon. Điện thoại: chia đủ 1 hàng, vùng bấm ≥ 52px cao;
   thiếu chỗ thì cuộn ngang, mép mờ báo còn mục (worknav.js gắn lớp fade-l / fade-r). */
.tabs.tabs-ic button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tabs.tabs-ic .tbi{position:relative;display:inline-flex;flex:none;line-height:0}
.tabs.tabs-ic .tbi .badge{position:absolute;top:-7px;left:13px;margin:0;min-width:17px;padding:0 4px;line-height:17px;font-size:10.5px;box-shadow:0 0 0 2px var(--surface-3)}
.tabs.tabs-ic button[aria-selected="true"] .tbi .badge{box-shadow:0 0 0 2px var(--surface)}
.tabs.tabs-ic button[aria-selected="true"] .tbi{color:var(--brand)}
.tabs.fade-r,.fscroll.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.tabs.fade-l,.fscroll.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);mask-image:linear-gradient(90deg,transparent,#000 32px)}
.tabs.fade-l.fade-r,.fscroll.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
@media (max-width:899px){   /* điện thoại + máy tính bảng dọc: icon trên, tên dưới — 6 mục vẫn đủ 1 hàng */
  .work-top .tabs.tabs-ic[role="tablist"]{overflow-x:auto;overflow-y:hidden;gap:0;padding:3px;align-items:stretch}
  .work-top .tabs.tabs-ic[role="tablist"] button{flex:1 1 0;min-width:52px;flex-direction:column;gap:3px;padding:7px 2px 6px;min-height:52px;font-size:11.5px;line-height:1.15;white-space:normal}
  .tabs.tabs-ic .tbl{display:block;max-width:100%;text-wrap:balance;overflow-wrap:anywhere}
}
/* Bộ lọc nhỏ (lọc đơn quán, nguồn khiếu nại điều phối): 1 hàng cuộn ngang, số đếm trong viên */
.ftabs.fscroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:10px}
.ftabs.fscroll::-webkit-scrollbar{display:none}
.ftabs.fscroll button{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:36px}
.ftabs .fc{display:inline-block;min-width:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-xs);font-weight:700;line-height:18px;text-align:center}
.ftabs button[aria-pressed="true"] .fc{background:rgba(255,255,255,.22);color:#fff}
.subbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.subbar .btn{flex:1 1 auto}
@media (min-width:560px){.subbar .btn{flex:0 0 auto}}
/* Shipper đang chạy xe: nút chính to, dễ chạm */
.btn.go{min-height:50px;font-size:16px;font-weight:700}
/* Khiếu nại / góp ý gửi Vèoo (036) */
.tk-list{display:grid;gap:0}
.tk-item{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
.tk-item:last-child{border-bottom:0}
.tk-body,.kn-body{white-space:pre-wrap;overflow-wrap:anywhere}
.tk-at{font-size:12.5px;display:block}
.tk-wait{font-size:12.5px}
.tk-count{font-size:12px;text-align:right;margin-top:-4px}
.kn-box{display:grid;gap:8px;margin-top:14px}
.kn-head{gap:8px}
.kn-head h2{margin:0}
.kn-st{flex-wrap:nowrap}
.kn-st button{min-height:36px;padding:6px 12px}
.chip.kn-src{background:var(--surface-3)}
.olist-h{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:17px}

/* ===================== Đợt 4 L (1/11/2026): trang làm việc ĐƠN GIẢN · TỐI ƯU — quán, shipper, điều phối =====================
   1 dòng nhắc đầu trang · điện thoại: thanh mục quán/shipper ở đáy màn hình (như trang khách), đầu trang không dính ·
   ≤ 5 mục, mục ít dùng thành mục con · thẻ đơn gọn, 1 nút chính to · điều phối: số đếm 1 hàng, việc cần làm lên trước. */
#wtAlertsSlot:empty{display:none}
.wt-alerts>summary{gap:8px}
.wt-alerts .wa-sum{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-alerts .wa-n{flex:none;min-width:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:700;line-height:20px;text-align:center}
.wt-alerts .wa-act{flex:none;display:inline-flex}
.wt-alerts .wa-act .btn{min-height:34px;padding:6px 12px}
.wt-alerts[open] .wa-act{display:none}
.wt-alerts .wa-body .warnbox,.wt-alerts .wa-body .pushbar{margin:0}
/* Nút Tài khoản: điện thoại hẹp (quán/shipper) chỉ còn biểu tượng người, đủ 44px */
.wt-acct-ic{display:none}
.wt-status{margin-top:2px;line-height:0}
.wt-status .toggle{min-height:32px;padding:4px 10px;font-size:13px;line-height:1.3}
.acct-who{display:grid;gap:2px;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.acct-push:empty{display:none}
/* Mục con (Gian hàng › Đánh giá, Hôm nay › Đánh giá & ảnh): 1 hàng chuyển nhanh đầu nội dung */
.seg.subnav{flex-wrap:nowrap;margin-bottom:10px}
.seg.subnav button{min-height:40px}
.seg.subnav .badge{margin-left:4px}
@media (max-width:559px){
  body.wk-bn{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  body.wk-bn .work-top{position:static}
  body.wk-bn .work-top .tabs.tabs-ic[role="tablist"]{position:fixed;left:0;right:0;bottom:0;z-index:15;margin:0;gap:2px;border-radius:0;overflow:visible;
    padding:4px max(6px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(22,24,29,.08);-webkit-mask-image:none;mask-image:none}
  body.wk-bn .work-top .tabs.tabs-ic[role="tablist"] button{min-height:56px;font-size:12px;border-radius:var(--r-sm)}
  body.wk-bn .work-top .tabs.tabs-ic[role="tablist"] button[aria-selected="true"]{background:var(--brand-soft);color:var(--brand-text);box-shadow:none}
  body.wk-bn .tabs.tabs-ic .tbl{overflow-wrap:normal;word-break:normal}
  body.wk-bn .tabs.tabs-ic .tbi .badge{box-shadow:0 0 0 2px var(--surface)}
  body.wk-bn .tabs.tabs-ic button[aria-selected="true"] .tbi .badge{box-shadow:0 0 0 2px var(--brand-soft)}
  .wt-bn .wt-acct-t,.wt-bn .wt-acct-chev{display:none}
  .wt-bn .wt-acct-ic{display:inline-flex}
  .wt-bn .wt-acct{width:44px;min-height:44px;padding:0;justify-content:center}
  .wt-bn .bell{min-width:44px;min-height:44px;justify-content:center}
}
/* Thẻ đơn gọn: nút chính to, chi tiết thu gọn, mọi nút ≥ 32px (nút trong thẻ ≥ 44px) */
body.work .ocard .btn.sm{min-height:44px}
body.work .ocard .link{min-height:32px}
.ocard-act{flex-wrap:nowrap}
.ocard-act .btn.go{flex:1 1 auto}
.ocard .earn{font-weight:600}
.ocard .earn b{font-size:var(--fs-lg)}
.ocard .pay .link{display:block;font-size:var(--fs-xs)}
.warnbox.pay::before{content:none}
.pay .pay-sub{font-size:12.5px;font-weight:500;color:var(--muted)}
.pay .pay-call{font-size:13px;margin-bottom:6px}
body.work .lines .link{min-height:32px}
.ostop{display:block}
.ostop.later{padding-top:8px;border-top:1px dashed var(--line)}
.navbtn.mini{flex-direction:row;justify-content:flex-start;gap:6px;min-height:40px;margin-top:6px;padding:6px 12px;font-size:var(--fs-sm);font-weight:600;background:var(--surface-2)}
.navbtn.mini small{display:none}
body.work .ocard details>summary,body.work details.qhelp>summary{display:flex;align-items:center;gap:6px;min-height:36px;list-style:none;color:var(--ink-2);font-size:var(--fs-sm);font-weight:600}
body.work .ocard details>summary::-webkit-details-marker,body.work details.qhelp>summary::-webkit-details-marker{display:none}
body.work .ocard details>summary::before,body.work details.qhelp>summary::before{content:"";flex:none;width:7px;height:7px;margin:0 3px 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
body.work .ocard details[open]>summary::before,body.work details.qhelp[open]>summary::before{transform:rotate(45deg)}
/* Số đếm gọn: điều phối 1 hàng viên (cuộn ngang trên điện thoại); quán/shipper Hôm nay 2 ô */
.kpis.kpis-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:10px}
.kpis.kpis-row::-webkit-scrollbar{display:none}
.kpis.kpis-row .kpi{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:var(--r-pill);box-shadow:none}
.kpis.kpis-row .kpi span{font-size:12.5px;white-space:nowrap}
.kpis.kpis-row .kpi b{font-size:var(--fs-md)}
@media (min-width:720px){.kpis.kpis-row{flex-wrap:wrap;overflow:visible}}
.kpis.kpis-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Điều phối › Đơn: ngày + ô tìm cùng 1 hàng */
.ofind{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px;margin-bottom:8px;align-items:end}
@media (min-width:720px){.ofind{grid-template-columns:180px minmax(0,420px)}}

/* Đợt 4 K — trang KHÁCH: đơn giản, tối ưu (1/11/2026) ----------------------------------------------------------
   Chỉ thêm, không đổi khối cũ. Lớp mới đều bắt đầu bằng k- (chỉ trang khách dùng). */
/* Đầu trang chủ: chỗ giao + nút Định vị cùng 1 hàng; “Không bật được vị trí?” là 1 dòng chữ, không phải khung */
header.top.k-top{gap:8px;padding:10px 16px 10px}
.deliverwrap.k-nogeo{grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.deliverwrap.k-nogeo .zonepick{grid-column:1 / -1;margin-top:-4px}
.k-locbtn{display:grid;place-items:center;align-content:center;gap:1px;min-width:64px;min-height:48px;padding:4px 10px;border:1px solid #fff;border-radius:var(--r-md);background:#fff;color:var(--brand-text);font:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer;line-height:1.1}
.k-locbtn:disabled{opacity:.8;cursor:progress}
.k-locbtn .spin{width:18px;height:18px}
.k-top .zonepick summary{color:#fff;opacity:.92;font-size:var(--fs-xs);line-height:18px;padding:11px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.k-top .zone button{min-height:32px}
.k-top .nightnote{color:#fff;opacity:.9;margin-top:6px}
/* Banner ưu đãi thấp hơn (1 khung duy nhất trước danh sách quán) */
.k-banners .banner:not(.pic){min-height:84px;padding:12px 14px;gap:10px}
.k-banners .bn-body b{font-size:var(--fs-lg)}
.k-banners .bn-body span{font-size:var(--fs-xs)}
.k-banners .bn-cta{margin-top:4px;padding:4px 10px}
.k-banners .bn-ic{width:46px;height:46px}
.k-banners .bn-ic .ic{width:24px;height:24px}
.k-banners .bn-lines{top:10px;right:12px}
.k-banners .banner.pic{aspect-ratio:2.4/1}
/* Thanh dưới: bấm dòng tổng → giỏ; nút → bước đặt */
.bar .sum.k-sumlink{display:block;color:var(--muted);text-decoration:none;min-height:40px;padding:2px 0}
.bar .sum.k-sumlink b{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
/* Tab Đơn hàng: tiêu đề + thẻ bấm cả thẻ */
.k-h1{font-size:var(--fs-xl);font-weight:800;padding-top:12px}
.card.k-ocard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;text-decoration:none;color:inherit;min-height:64px}
.k-ocard:active{background:var(--surface-2)}
.k-oc-main{display:grid;gap:4px;min-width:0}
.k-oc-main>.between{gap:8px}
.k-oc-tot{color:var(--ink);white-space:nowrap}
/* 051: việc của dịch vụ khác trong tab Đơn (pub_activity) */
.k-svcrow{display:grid;gap:2px}
.k-svc-ic{display:inline-flex;vertical-align:-3px;margin-right:4px;color:var(--brand)}
.k-need{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.k-help{justify-self:end;font-size:var(--fs-sm);color:var(--muted);padding:6px 4px;min-height:32px}
/* Bước đặt (thanh toán) */
.k-ck .k-cardh{font-size:var(--fs-md);font-weight:700}
.k-who{font-size:var(--fs-sm);color:var(--ink-2);gap:8px;padding:0 2px}
.k-who .ic{vertical-align:-3px}
.k-ck .link,.k-who .link{min-height:32px}
.k-row{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.k-lbl{flex:0 0 70px;font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.k-row .seg{flex:1 1 200px}
.k-row .k-code{flex:1 1 150px;min-width:0;width:auto;font-family:var(--mono);text-transform:uppercase}
.k-pay{display:grid;gap:8px}
.k-paymode button,.k-paymode button[aria-pressed="true"]{flex:0 1 auto;border:0;background:none;color:var(--ink);padding:9px 0;text-align:left;font-weight:700;font-size:var(--fs-md);cursor:default}
.k-more summary{min-height:40px;display:list-item;padding:9px 0;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2)}
.k-more[open] summary{margin-bottom:4px}
.k-loc{padding:8px 10px;border-style:solid}
.k-locbtns{gap:6px;flex-wrap:wrap;align-items:center}
.k-locbtns .btn.sm{min-height:40px}
/* Bảng phí thu gọn: chỉ Tổng + giảm giá + phụ phí đêm; “Chi tiết phí” bung đủ */
#ckSum.k-sum:not(.k-open) .lines>div:not(.minus):not(.total):not(#nightLine){display:none}
#ckSum.k-sum:not(.k-open) .lines>div.total:first-child{border-top:0;padding-top:0}
.k-feebtn{font-size:var(--fs-sm);margin-top:6px}
/* Trang đơn: bước hiện tại, bạn ship + 2 nút to Gọi / Nhắn tin */
.k-steps .steps li{padding-bottom:10px}
.k-steps .steps li.now b{font-size:var(--fs-lg)}
.k-ship .k-shipbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.k-shipbtns .btn{min-height:48px;font-size:16px;font-weight:700}
.k-wait{padding:0 2px}
.k-cancel{gap:10px;padding:2px 2px}
.k-chrow{display:flex;gap:8px;align-items:flex-end}
.k-chrow textarea{flex:1 1 auto;min-width:0;min-height:48px;resize:vertical}
.k-chrow .btn{min-height:48px;flex:none}
.k-don details>summary{padding:6px 0}
.k-foot{text-align:center}
.k-foot a{display:inline-block;padding:6px 0}
/* Nhóm: lời trấn an là 1 dòng chữ, không phải khung */
.k-safe{display:flex;gap:6px;align-items:flex-start;padding:0 2px}
/* Vùng bấm ≥ 32px cho nút chữ / tiêu đề thu gọn trên trang khách; nút “+” thêm món ≥ 44px (việc chính của trang quán) */
.addbtn{width:44px;height:44px;font-size:22px}
.sf-ship .link,.cline .link,[data-act="clearCart"],#tb .link,.foot .link{min-height:32px;min-width:32px}
.faq summary{padding:8px 0}
/* Đợt 4 K (tiếp): ô tìm trong đầu trang đỏ, khoảng cách gọn */
.k-search input{border-color:#fff;box-shadow:none;padding:11px 14px}
.sec.k-home{margin-top:12px}
.k-home .stabs button{padding:9px 4px;min-height:40px}
.k-row .k-code::placeholder{text-transform:none;font-family:var(--font)}
#ckSum.k-sum:not(.k-open) .lines:not(:has(.minus,#nightLine)) .total{border-top:0;padding-top:0}
.k-bill .lines{border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.chk.consent{min-height:32px}
.qrd summary{padding:6px 0;min-height:32px}
.member .link{min-height:32px}
.k-topbar{flex-wrap:wrap;gap:0 8px;min-height:36px}
.k-topbar .zonepick{margin-left:auto;text-align:right}
.k-topbar .zonepick[open]{flex-basis:100%;margin-left:0;text-align:left}
.k-topbar .zonepick summary{padding:11px 0}
.k-groups{padding:10px 12px}
.k-groups .grouprow{gap:10px}

/* Đợt 4 (1/11/2026): bỏ chi tiết trang trí kiểu "AI làm" — vạch vàng trên banner / ô ảnh, vòng tròn mờ sau icon banner.
   Emoji trong giao diện đã thay bằng icon nét (icons.js) hoặc bỏ hẳn; chỉ giữ ★ (sao), ♥ (lưu quán), 👍/👎 (chấm shipper), ⚠ (cảnh báo). */
.bn-lines,.sc-ph::after{display:none}
.bn-ic{background:none!important;width:auto;height:auto}
.sc-ph{color:var(--muted)}
.ok-ic{color:var(--ok);vertical-align:-3px}
.shopdot .ic{display:block}
/* Nút con mắt trong ô mật khẩu */
.pwbox{position:relative;display:block;min-width:0}
.pwbox input{padding-right:50px}
.pweye{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:40px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;border-radius:var(--r-sm);padding:0}
.pweye:hover,.pweye[aria-pressed="true"]{color:var(--ink)}

/* 042 Super App: lưới ô dịch vụ trên trang chủ khách (chỉ hiện khi có ≥ 2 dịch vụ không ẩn) */
.svcgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
.svc{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);text-decoration:none;text-align:center;min-height:64px}
.svc b{font-size:13px;font-weight:700;line-height:1.2}
.svc .svc-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--brand-soft);color:var(--brand)}
.svc.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.svc-tag{font-style:normal;font-size:11px;font-weight:700;line-height:1;padding:2px 6px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--muted)}
.svc-tag.beta{background:var(--accent-soft);color:var(--accent-ink)}
.svc.soon{cursor:default;background:var(--surface-2);border-style:dashed;color:var(--muted)}
.svc.soon .svc-ic svg{opacity:.6}
.svc.soon .svc-ic{color:var(--muted);background:var(--surface-3)}
.svc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 048 (glue): lối vào việc của dịch vụ khác ở trang bạn ship / điều phối */
.svcwork{gap:8px;margin-bottom:12px}
.svcwork-row{display:flex;flex-wrap:wrap;gap:8px}
.svcwork-row .btn{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.svcwork-row .btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =====================================================================================================
   GIAO DIỆN A (4/11/2026) — web khách khớp app khách mới (mobile/customer/lib/ui.dart + ds.dart, GIAO-DIEN-A.md).
   Chỉ đổi hình thức (màu, chữ, bo góc, bóng); không đổi lớp/ID mà JS dùng. Đặt cuối file để đè các khối cũ.
   • Thẻ bo 22, bóng rất nhẹ, không viền đậm · ô nhập bo 16 viền #E6E8EC, đang gõ viền mực 1,4px
   • Nút chính = viên thuốc đỏ chữ trắng đậm, cao ≥ 48 · nút phụ = viên thuốc trắng viền mảnh chữ mực
   • Link = chữ đỏ đậm (brandText), không gạch chân · bộ lọc: đang chọn = nền mực chữ trắng; 2–3 lựa chọn = viên trắng trên rãnh xám
   • Khay dưới bo 28 · tiêu đề trang 28px/800, giãn chữ -0.02em
   • Đầu trang khách: KHÔNG còn khối đỏ — nền sáng, chữ "ship cái" xám nhỏ + chữ Vèoo đỏ; đỏ chỉ là điểm nhấn
   ===================================================================================================== */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1{font-size:var(--fs-title);font-weight:800;letter-spacing:-.02em;line-height:1.15}
h2,.h2{font-weight:800;letter-spacing:-.01em}
h3,.h3{font-weight:800;letter-spacing:-.01em}
/* Tiêu đề trang (trang khách): to, đậm. Tiêu đề nằm trong thẻ / đầu trang làm việc giữ cỡ vừa. */
body:not(.work) h1.h2{font-size:var(--fs-title);line-height:1.15;letter-spacing:-.02em}
body:not(.work) .card h1.h2,body:not(.work) .ghero h1.h2,body:not(.work) .storefront h1.h2,body:not(.work) .dl-top h1.h2,
body:not(.work) .sheet h1.h2,body:not(.work) .work-top h1.h2{font-size:var(--fs-xl);letter-spacing:-.01em}
.k-h1{font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.15}
/* Link chữ: đỏ đậm, không gạch chân (link trong đoạn văn và nút dạng chữ) */
a:not([class]):not([data-act]){color:var(--brand-text);font-weight:700;text-decoration:none}
a:not([class]):not([data-act]):hover{text-decoration:underline;text-underline-offset:3px}
.sectabs a{color:var(--ink);font-weight:600;border-color:var(--line)}
.sectabs a:hover{text-decoration:none}
.link{color:var(--brand-text);font-weight:700;text-decoration:none}
.link:hover{color:var(--brand-hover);text-decoration:none}
.back{color:var(--ink);font-weight:700}
.foot a{color:var(--muted);font-weight:600}

/* Thẻ */
.card{border-color:transparent;border-radius:var(--r-card);padding:16px;box-shadow:var(--sh-1)}
.card.flat{background:var(--surface-3)}
.card.empty{border:1px dashed var(--line-strong);background:var(--surface);border-radius:var(--r-card)}
.ok-card{border-color:var(--ok-line)}
.shopcard,.bigcard,.dishcard,.mlist,.ghero{border-color:transparent;box-shadow:var(--sh-1)}
.shopcard,.mlist,.ghero{border-radius:var(--r-card)}
.bigcard,.dishcard{border-radius:18px}
.whyv div{border-color:transparent;border-radius:18px;box-shadow:var(--sh-1)}
.mlist.staffgo{border-color:transparent}
.staffgo{background:var(--surface)}

/* Nút */
.btn{border-radius:var(--r-pill);min-height:48px;padding:12px 20px;font-weight:700;font-size:15.5px;letter-spacing:0}
.btn.sm{border-radius:var(--r-pill);min-height:36px;padding:8px 14px;font-size:var(--fs-sm)}
.btn.alt,.btn.grpbtn{background:var(--surface);color:var(--ink);border:1.3px solid var(--line)}
.btn.alt:hover,.btn.grpbtn:hover{background:var(--surface-3)}
.btn.bad{border-color:var(--bad-line)}
.btn:disabled,.btn.disabled{background:var(--surface-3);color:var(--muted);border-color:transparent}
.btn.grpbtn{border-radius:var(--r-card)}
.iconbtn{border-color:var(--line);box-shadow:var(--sh-1)}
.x{border-radius:var(--r-pill);background:var(--surface-3)}
.small-x{border-radius:var(--r-pill)}
.addbtn{border-radius:var(--r-pill);border-color:transparent;background:var(--brand-soft)}
.qty button{border-radius:var(--r-pill);border-color:var(--line)}
.linkbox button{border-radius:var(--r-pill)}

/* Ô nhập */
input,select,textarea{border-radius:var(--r-input);border:1px solid var(--line-input);padding:12px 14px;min-height:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 .4px var(--ink)}
input[readonly]{background:var(--surface-3)}
.opt input,.chk input{box-shadow:none}
.search input{border:1px solid var(--line);border-radius:var(--r-input);box-shadow:var(--sh-1);padding:13px 16px}
fieldset{border-radius:var(--r-input)}
.mk-row input,.mk-row select{min-height:44px}

/* Chọn lựa: rãnh xám, mục chọn = viên trắng (2–3 lựa chọn); bộ lọc / nhóm chọn = nền mực chữ trắng */
.tabs{background:var(--surface-3);border-radius:var(--r-pill)}
.tabs button{border-radius:var(--r-pill)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.ftabs button,.filt button,.cats button,.tagpick button,.catgrid button,.sectabs a{border-color:var(--line)}
.seg button{border-radius:var(--r-pill);border-color:var(--line)}
.stabs button[aria-selected="true"]{border-bottom-color:var(--ink)}
.stabs{border-bottom-color:var(--line)}
.thumbpick button{border-color:var(--line);border-radius:var(--r-pill)}
.stars button{border-radius:var(--r-pill)}

/* Nhãn: viên nền xám lạnh, không viền */
.chip{background:var(--surface-3);color:var(--ink-2);border-color:transparent;font-size:12.5px}
.chip.soon{background:var(--accent-soft);color:var(--accent-ink)}
.pill{background:var(--surface-3);border-color:transparent}
.rt.new,.rate.new{background:var(--surface-3)}
/* Hộp báo (như Note trong app): info = nền xám không viền; cảnh báo / lỗi / ok có viền nhạt */
.info{background:var(--surface-3);border-radius:var(--r-input);padding:12px}
.warnbox,.err,.deal,.safe,.confirm{border-radius:var(--r-input);padding:12px}
.toast{border-radius:var(--r-input)}

/* Khay dưới (bottom sheet) + thanh dưới */
.sheet{border-radius:var(--r-sheet) var(--r-sheet) 0 0}
@media (min-width:760px){.sheet{border-radius:var(--r-sheet)}}
.bar{border-top-color:var(--line);box-shadow:0 -4px 14px rgba(22,24,29,.06)}
.tabbar{border-top-color:var(--line)}
.tb-item[aria-current="page"]{color:var(--brand)}

/* ---------- Đầu trang khách (A): nền sáng, chữ Vèoo đỏ, không khối đỏ ---------- */
header.top{background:var(--bg);color:var(--ink);border-radius:0;padding:10px 16px 12px;gap:10px}
header.top.k-top{padding:10px 16px 6px}
.wm-tag{color:var(--muted);opacity:1;font-weight:600;font-size:10.5px;letter-spacing:0;margin-bottom:2px}
.wordmark{height:28px}
.ctabs button,.zone button{border-color:var(--line);background:var(--surface);color:var(--ink)}
.ctabs button[aria-pressed="true"],.zone button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.topbar .ctabs button{border-color:var(--line)}
.acct{border-color:var(--line);background:var(--surface);color:var(--ink)}
.acct:not(:has(.acct-av)){background:var(--surface);color:var(--ink);border-color:var(--line)}
.acct-av{background:var(--brand-soft);color:var(--brand-text)}
.deliver{background:var(--surface);border:1px solid transparent;color:var(--ink);border-radius:var(--r-input);box-shadow:var(--sh-1);padding:10px 14px}
.deliver .dpin{color:var(--brand)}
.dtxt small{color:var(--muted);opacity:1}
.deliver>span:last-child{color:var(--muted)}
.k-locbtn{border:1px solid transparent;border-radius:var(--r-input);background:var(--surface);color:var(--brand-text);box-shadow:var(--sh-1)}
.locquick .pill{border-color:var(--line);background:var(--surface);color:var(--brand-text)}
.locquick .zonepick summary,.k-top .zonepick summary{color:var(--ink-2);opacity:1;text-decoration-color:var(--line-strong)}
.zonepick summary{opacity:1;color:var(--ink-2)}
.k-top .nightnote{color:var(--muted);opacity:1}
.locbar{background:var(--surface);border-color:transparent;box-shadow:var(--sh-1);border-radius:var(--r-input)}
.loctxt small{opacity:1;color:var(--muted)}
.locbar .pill{border-color:var(--line);color:var(--ink)}
.locbar .pill.solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.bell .dot{box-shadow:0 0 0 2px var(--bg)}
.k-search input{border-color:var(--line);box-shadow:var(--sh-1);padding:12px 16px}
/* Khối "hero" cũ (Đăng nhập tài khoản, Đăng ký): thành tiêu đề lớn trên nền sáng */
.hero{background:transparent;color:var(--ink);padding:18px 2px 4px;border-radius:0}
.hero h1{color:var(--ink);font-size:var(--fs-title);letter-spacing:-.02em;line-height:1.15}
.hero p{color:var(--muted);opacity:1;font-size:var(--fs-md)}
.acct-hero b{font-size:var(--fs-title);letter-spacing:-.02em}

/* Banner ưu đãi: bo 22; khối đỏ đặc thành nền đỏ nhạt chữ đỏ đậm (đỏ chỉ là điểm nhấn) */
.banner{border-radius:var(--r-card)}
.promo-brand{background:var(--brand-soft);color:var(--brand-text)}
.promo-brand .bn-cta{background:var(--brand);color:#fff}
.promo-plain{border-color:transparent;box-shadow:var(--sh-1)}
.bn-cta{border-radius:var(--r-pill)}

/* Lưới dịch vụ (042) — như SvcTile của app: ô trắng bo 18, icon trên nền đỏ nhạt */
.svc{border-color:transparent;border-radius:18px;box-shadow:var(--sh-1)}
.svc.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.svc.soon{background:var(--surface);border:1px dashed var(--line-strong);box-shadow:none}
.svc-tag{background:var(--surface-3);color:var(--ink-2)}
.svc:focus-visible{outline-color:var(--ink)}

/* Trang quán / thực đơn */
.shopnav{background:var(--bg)}
.sectabs{background:var(--bg)}
.storefront{border-radius:var(--r-card)}
.item-pic .pic-btn,.thumb.big,.thumb.dish,.thumb.sq,.bestcard .pic-btn,.bestcard .thumb{border-radius:var(--r-input)}
.gtime{border-radius:var(--r-input)}

/* Trang dịch vụ (Giao hàng / Đi chợ / Tạp hoá / Đặt xe / Dịch vụ tại nhà) */
.dl-head h1.h2,.mk h1,.mk-top h1,.rd-top h1{font-size:var(--fs-title);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.mk-top h1{font-size:24px}

/* Linh vật Vèoo (bộ 3D giống app) — màn trống, đăng nhập, lời chào trang chủ */
.illus{display:block;height:auto;max-width:100%}
.card.empty.ill{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 16px}
.card.empty.ill .illus{width:110px}
.k-hello{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:10px 12px 10px 16px;background:var(--brand-soft);border-radius:18px}
.k-hello b{display:block;font-size:var(--fs-md,1.05rem);color:var(--ink)}
.k-hello span{display:block;color:var(--ink-2);font-size:var(--fs-sm,.9rem);margin-top:2px}
.k-hello .illus{width:84px;flex:0 0 auto;margin:-6px 0}