:root{
  --do:#e8303c; --do-dam:#c4202c; --xanh:#2f6fb0; --xanh-nhat:#e8f0fa; --den:#1a1a1a; --xam:#6b7280; --xam-nhat:#f3f4f6;
  --vien:#e5e7eb; --trang:#fff; --xanh-la:#16a34a; --vang:#f59e0b; --cam-nhat:#fff4e5; --do-nhat:#fde8ea; --xanh-la-nhat:#e7f7ec;
  --bo:14px; --chu:17px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:var(--chu);color:var(--den);background:var(--xam-nhat);padding-bottom:84px}
a{color:var(--xanh);text-decoration:none}
h1{font-size:22px;margin:0 0 6px}h2{font-size:19px;margin:18px 0 8px}h3{font-size:17px;margin:12px 0 6px}
.dau{position:sticky;top:0;z-index:20;background:var(--trang);border-bottom:1px solid var(--vien);padding:10px 14px;display:flex;align-items:center;gap:10px}
.dau img{height:34px}.dau .ten{font-weight:700;font-size:17px;flex:1}.dau .vai{font-size:13px;color:var(--xam)}
.dau .chuong{position:relative;font-size:22px;padding:4px 8px}
.dau .chuong .so{position:absolute;top:0;right:0;background:var(--do);color:#fff;font-size:11px;border-radius:10px;padding:1px 5px;font-weight:700}
.noi{padding:14px;max-width:760px;margin:0 auto}
.the{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo);padding:14px;margin-bottom:12px}
.the.nhan{padding:10px 14px}
.hang{display:flex;align-items:center;gap:10px}.hang .no{flex:1}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:14px 18px;font-size:17px;font-weight:700;cursor:pointer;background:var(--do);color:#fff;width:100%;text-align:center}
.nut.phu{background:var(--xanh-nhat);color:var(--xanh)}.nut.xam{background:var(--xam-nhat);color:var(--den)}.nut.xanh{background:var(--xanh)}.nut.la{background:var(--xanh-la)}
.nut.nho{padding:8px 12px;font-size:15px;width:auto;border-radius:10px}.nut.nhonho{padding:6px 10px;font-size:14px;width:auto;border-radius:8px}
.nut:disabled{opacity:.5}
.luoi2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.so-to{font-size:30px;font-weight:800;line-height:1.1}.so-to.do{color:var(--do)}.so-to.la{color:var(--xanh-la)}.so-to.xanh{color:var(--xanh)}
.nhan-nho{font-size:13px;color:var(--xam);text-transform:uppercase;letter-spacing:.3px}
.the-tt{display:inline-block;font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--xam-nhat);color:var(--den)}
.tt-CHO_DUYET{background:#fff4e5;color:#b45309}.tt-DA_DUYET{background:var(--xanh-nhat);color:var(--xanh)}.tt-DA_GUI_XE,.tt-DANG_GIAO{background:#ede9fe;color:#6d28d9}
.tt-DA_GIAO{background:var(--xanh-la-nhat);color:var(--xanh-la)}.tt-TU_CHOI,.tt-HUY{background:var(--do-nhat);color:var(--do)}
.tt-DA{background:var(--xanh-la-nhat);color:var(--xanh-la)}.tt-CHUA{background:var(--do-nhat);color:var(--do)}
.danh-sach .muc{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--vien)}.danh-sach .muc:last-child{border-bottom:none}
.danh-sach .muc .no{flex:1;min-width:0}.danh-sach .muc .ten{font-weight:700}.danh-sach .muc .phu{font-size:14px;color:var(--xam)}
.muc a.khoi{display:flex;align-items:center;gap:10px;color:inherit;flex:1}
input,select,textarea{width:100%;font-size:17px;padding:12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font-family:inherit}
textarea{min-height:80px}label{display:block;font-size:14px;color:var(--xam);margin:10px 0 4px;font-weight:600}
.o-pin{font-size:30px;letter-spacing:10px;text-align:center}
.loi{background:var(--do-nhat);color:var(--do);padding:10px 12px;border-radius:10px;margin:8px 0;font-weight:600}
.ok{background:var(--xanh-la-nhat);color:var(--xanh-la);padding:10px 12px;border-radius:10px;margin:8px 0;font-weight:600}
.canh{background:var(--cam-nhat);color:#92400e;padding:10px 12px;border-radius:10px;margin:8px 0}
.day{position:fixed;bottom:0;left:0;right:0;background:var(--trang);border-top:1px solid var(--vien);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.day a{flex:1;text-align:center;padding:9px 2px 7px;font-size:12px;color:var(--xam);font-weight:600}.day a .bieu{display:block;font-size:22px;line-height:1.2}
.day a.dang{color:var(--do)}
.sp{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--vien)}
.sp .bieu{width:48px;height:48px;border-radius:10px;background:var(--xanh-nhat);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.sp .no{flex:1;min-width:0}.sp .ten{font-weight:700;font-size:16px}.sp .gia{color:var(--do);font-weight:800}.sp .phu{font-size:13px;color:var(--xam)}
.dem{display:flex;align-items:center;gap:6px}.dem button{width:40px;height:40px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;font-size:22px;font-weight:700;cursor:pointer}
.dem input{width:52px;text-align:center;padding:8px 4px;font-weight:700}
.chon-dv{display:inline-flex;border:1px solid #cbd5e1;border-radius:8px;overflow:hidden;font-size:13px}.chon-dv span{padding:4px 8px;cursor:pointer}.chon-dv span.dang{background:var(--xanh);color:#fff}
.gio-noi{position:fixed;bottom:64px;left:0;right:0;z-index:25;padding:0 14px}
.gio-noi .nut{box-shadow:0 6px 20px rgba(0,0,0,.2)}
.tab{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px}.tab a{white-space:nowrap;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--vien);font-weight:600;color:var(--den);font-size:15px}.tab a.dang{background:var(--do);color:#fff;border-color:var(--do)}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--vien);vertical-align:top}th{font-size:13px;color:var(--xam);text-transform:uppercase}
td.so,th.so{text-align:right;white-space:nowrap}
.ghi{font-size:14px;color:var(--xam)}
.tt-dong{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cuon{overflow-x:auto}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--xam-nhat);font-size:13px;margin:2px 2px 0 0}
@media(min-width:720px){.noi{padding:20px}.luoi3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}}
.trung-tam{text-align:center}.mo{opacity:.6}.nho{font-size:14px}
.dang-nhap{max-width:420px;margin:40px auto;padding:20px}
.dang-nhap img{height:90px;display:block;margin:0 auto 10px}
.tb-moi{border-left:4px solid var(--do)}
/* danh mục: nền xanh đậm chữ trắng (anh chốt 26/10) */
:root{--xanh-dam:#1e3a8a;--xanh-dam-2:#1d4ed8}
.the-dm{display:block;background:linear-gradient(160deg,var(--xanh-dam),var(--xanh-dam-2));color:#fff;border-radius:var(--bo);padding:16px 14px;min-height:118px;box-shadow:0 4px 14px rgba(30,58,138,.25)}
.the-dm .bieu{font-size:30px;line-height:1}.the-dm .ten{font-weight:800;font-size:18px;margin-top:6px}.the-dm .phu{font-size:13px;opacity:.9;margin-top:4px;line-height:1.4}
.the-dm .cham{margin-top:8px;display:flex;gap:4px}.the-dm .cham span{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.9);display:inline-block}
.bieu-to{width:84px;height:84px;border-radius:16px;background:var(--xanh-nhat);display:flex;align-items:center;justify-content:center;font-size:44px;flex-shrink:0}
.nut-mau{display:flex;flex-wrap:wrap;gap:8px}
.nut-mau .mau{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:2px solid #cbd5e1;background:#fff;font-size:16px;font-weight:600;cursor:pointer}
.nut-mau .mau.dang{border-color:var(--do);background:var(--do-nhat);color:var(--do)}
.nut-mau .cham{width:18px;height:18px;border-radius:50%;border:1px solid #d1d5db;display:inline-block}
#ct-dv .nut{border:2px solid transparent}#ct-dv .nut.dang{border-color:var(--do);background:var(--do-nhat);color:var(--do)}
.dem-to{display:flex;align-items:center;justify-content:space-between;background:var(--xam-nhat);border-radius:999px;padding:6px}
.dem-to button{width:56px;height:56px;border-radius:50%;border:none;background:#fff;font-size:28px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.dem-to .so{font-size:22px}
.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;opacity:0;transition:.25s;z-index:40;pointer-events:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.toast.hien{opacity:1;transform:translateX(-50%) translateY(0)}
.dau img{height:36px;width:auto}
/* ảnh sản phẩm */
.bieu-to.co-anh{background:#fff;border:1px solid var(--vien);overflow:hidden}.bieu-to img{width:100%;height:100%;object-fit:contain}
.anh-dm{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:10px;padding:3px;display:block}
.nut-mau .anh-nho{width:26px;height:26px;object-fit:contain;border-radius:6px;background:#fff}