// Xedap.vn — full cart / review page. Reached from the "Tiến hành thanh toán"
// button in the cart drawer. Reuses SiteHeader + SiteFooter (loaded via Chrome.jsx).
const { Button, IconButton, Input, ProductCard } = window.XedapVnDesignSystem_03b1c0;

const vnd = (n) => new Intl.NumberFormat("vi-VN").format(Math.round(n)) + "đ";
const wrap = { maxWidth: 1440, margin: "0 auto", padding: "0 16px" };
const COLOR_NAMES = { "#142FF7": "Xanh dương", "#142ff7": "Xanh dương", "#111827": "Đen", "#333333": "Xám than", "#e5e7eb": "Xám nhạt", "#b91c1c": "Đỏ", "#334155": "Xám đá", "#6b7280": "Xám", "#f5f5f4": "Trắng ngà", "#0f766e": "Xanh lục", "#78716c": "Nâu xám", "#d6d3d1": "Be", "#07c73c": "Xanh lá" };
const colorName = (hex) => COLOR_NAMES[hex] || COLOR_NAMES[(hex || "").toLowerCase()] || "Mặc định";

const VOUCHERS = {
  XEDAP100: { off: 100000, label: "Giảm 100.000đ", desc: "Giảm trực tiếp 100.000đ cho đơn hàng.", scope: "Tất cả sản phẩm", minOrder: 500000, start: "01/07/2026", end: "31/07/2026" },
  FREESHIP: { off: 0, freeship: true, label: "Miễn phí vận chuyển", desc: "Miễn phí toàn bộ phí giao hàng nội thành.", scope: "Xe đạp & phụ kiện", minOrder: 0, start: "01/07/2026", end: "15/08/2026" },
  SALE10: { pct: 0.1, label: "Giảm 10% (tối đa 1.500.000đ)", cap: 1500000, desc: "Giảm 10% giá trị đơn, tối đa 1.500.000đ.", scope: "Xe đạp địa hình (MTB)", minOrder: 2000000, start: "10/07/2026", end: "20/07/2026" },
};

// Fulfillment options — mirrors the product page's "Hình thức mua hàng" logic.
const CART_STORES = ["Nguyễn Cơ Thạch — TP. Thủ Đức", "Võ Thị Sáu — Quận 3", "Nguyễn Thị Thập — Quận 7", "Emart Gò Vấp — Gò Vấp", "Phạm Văn Đồng — Hà Nội"];

/* ---------- Per-item fulfillment ---------- */
function Fulfillment({ line, onFulfil }) {
  const [openStore, setOpenStore] = React.useState(false);
  const ship = line.fulfil !== "pickup";
  const tab = (active) => ({ display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 12px", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, cursor: "pointer", border: `1.5px solid ${active ? "var(--primary)" : "var(--border)"}`, background: active ? "color-mix(in srgb, var(--primary) 7%, #fff)" : "#fff", color: active ? "var(--primary)" : "var(--muted-foreground)", borderRadius: "var(--radius-md)" });
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 10, paddingTop: 12, borderTop: "1px dashed var(--border)" }}>
      <div style={{ display: "flex", gap: 8 }}>
        <button style={tab(ship)} onClick={() => onFulfil(line.id, { fulfil: "ship" })}><i className="ph ph-truck" /> Giao tận nơi</button>
        <button style={tab(!ship)} onClick={() => onFulfil(line.id, { fulfil: "pickup", store: line.store || CART_STORES[0] })}><i className="ph ph-storefront" /> Nhận tại cửa hàng</button>
      </div>
      {ship ? (
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "#07873c" }}><i className="ph-fill ph-check-circle" /> Giao nhanh nội thành</span>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <button onClick={() => setOpenStore((o) => !o)} style={{ display: "inline-flex", alignItems: "center", gap: 6, alignSelf: "flex-start", border: "none", background: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--foreground)" }}><i className="ph-fill ph-map-pin" style={{ color: "var(--primary)" }} /> {line.store || CART_STORES[0]} <i className={`ph ph-caret-${openStore ? "up" : "down"}`} style={{ fontSize: 10 }} /></button>
          {openStore && (
            <div style={{ display: "flex", flexDirection: "column", gap: 2, border: "1px solid var(--border)", borderRadius: "var(--radius-md)", overflow: "hidden", maxWidth: 320 }}>
              {CART_STORES.map((s) => (
                <button key={s} onClick={() => { onFulfil(line.id, { fulfil: "pickup", store: s }); setOpenStore(false); }} style={{ textAlign: "left", padding: "8px 12px", border: "none", background: (line.store || CART_STORES[0]) === s ? "color-mix(in srgb, var(--primary) 6%, #fff)" : "#fff", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--foreground)" }}>{s}</button>
              ))}
            </div>
          )}
          <span style={{ fontSize: 12, color: "var(--muted-foreground)" }}>Sẵn sàng nhận sau 2 giờ · miễn phí</span>
        </div>
      )}
    </div>
  );
}

/* ---------- Qty stepper ---------- */
function Qty({ value, onChange }) {
  const btn = { width: 38, height: 40, border: "none", background: "#fff", cursor: "pointer", fontSize: 17, color: "var(--foreground)", display: "grid", placeItems: "center" };
  return (
    <div style={{ display: "inline-flex", alignItems: "center", border: "1.5px solid var(--border)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
      <button style={{ ...btn, opacity: value <= 1 ? 0.4 : 1 }} onClick={() => onChange(Math.max(1, value - 1))} aria-label="Giảm">−</button>
      <span style={{ width: 40, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 15 }}>{value}</span>
      <button style={btn} onClick={() => onChange(value + 1)} aria-label="Tăng">+</button>
    </div>
  );
}

/* ---------- Variant dropdown ---------- */
function VariantSelect({ icon, label, value, onChange, options }) {
  const cur = options.find(([v]) => v === value);
  return (
    <label style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--muted-foreground)", background: "var(--secondary)", padding: "4px 26px 4px 10px", borderRadius: 5, cursor: "pointer" }}>
      {icon}
      <span>{label ? `${label} ${cur ? cur[1] : value}` : (cur ? cur[1] : value)}</span>
      <i className="ph ph-caret-down" style={{ position: "absolute", right: 9, fontSize: 11, pointerEvents: "none" }} />
      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0, cursor: "pointer", border: "none", appearance: "none" }}>
        {options.map(([v, lbl]) => <option key={v} value={v}>{label ? `${label} ${lbl}` : lbl}</option>)}
      </select>
    </label>
  );
}

/* ---------- One line item ---------- */
function CartRow({ line, onQty, onRemove, onFulfil }) {
  const p = line.product;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "104px 1fr auto", gap: 20, padding: "22px 0", borderTop: "1px solid var(--border)", alignItems: "start" }}>
      <a href="./ProductDetail.html" style={{ display: "block", width: 104, height: 78, borderRadius: "var(--radius-md)", overflow: "hidden", background: "var(--secondary)", flexShrink: 0 }}>
        <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </a>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 0 }}>
        <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--muted-foreground)" }}>Thương hiệu: {p.brand}</span>
        <a href="./ProductDetail.html" style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.4, color: "var(--foreground)", textDecoration: "none", textWrap: "pretty" }}>{p.name}</a>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <VariantSelect icon={<span style={{ width: 12, height: 12, borderRadius: 5, background: line.color, border: "1px solid rgba(0,0,0,.15)", flexShrink: 0 }} />} value={line.color} onChange={(v) => onFulfil(line.id, { color: v })} options={(p.colors || [line.color]).map((c) => [c, colorName(c)])} />
          <VariantSelect label="Size" value={line.size} onChange={(v) => onFulfil(line.id, { size: v })} options={["S", "M", "L", "XL"].map((s) => [s, s])} />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 20, marginTop: 4 }}>
          <Qty value={line.qty} onChange={(q) => onQty(line.id, q)} />
          <button onClick={() => onRemove(line.id)} style={{ display: "inline-flex", alignItems: "center", gap: 6, border: "none", background: "none", cursor: "pointer", color: "var(--muted-foreground)", fontFamily: "var(--font-sans)", fontSize: 13 }}><i className="ph ph-trash" style={{ fontSize: 16 }} /> Xóa</button>
        </div>
      </div>
      <div style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 4, whiteSpace: "nowrap" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 17, fontWeight: 700, color: "var(--danger)" }}>{vnd(p.price * line.qty)}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted-foreground)", textDecoration: "line-through" }}>{vnd(p.originalPrice * line.qty)}</span>
        {line.qty > 1 && <span style={{ fontSize: 11, color: "var(--muted-foreground)" }}>{vnd(p.price)} / xe</span>}
      </div>
    </div>
  );
}

/* ---------- Empty state ---------- */
function EmptyCart() {
  return (
    <div style={{ ...wrap, padding: "80px 16px 100px", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
      <div style={{ width: 88, height: 88, borderRadius: 5, background: "var(--secondary)", display: "grid", placeItems: "center", color: "var(--muted-foreground)" }}><i className="ph ph-shopping-cart" style={{ fontSize: 40 }} /></div>
      <h1 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 26 }}>Giỏ hàng của bạn đang trống</h1>
      <p style={{ margin: 0, fontSize: 15, color: "var(--muted-foreground)", maxWidth: 420, textWrap: "pretty" }}>Hãy khám phá bộ sưu tập xe đạp chính hãng và thêm sản phẩm yêu thích vào giỏ.</p>
      <a href="./index.html"><Button size="lg" iconStart={<i className="ph ph-arrow-left" />}>Tiếp tục mua sắm</Button></a>
    </div>
  );
}

/* ---------- Order summary (sticky) ---------- */
function Summary({ subtotal, saved, discount, freeship }) {
  const shipBase = 150000;
  const ship = freeship || subtotal >= 5000000 ? 0 : shipBase;
  const total = Math.max(0, subtotal - discount + ship);
  const rows = [
    ["Tạm tính", vnd(subtotal)],
    ["Giảm giá sản phẩm", "−" + vnd(saved), "var(--muted-foreground)"],
  ];
  if (discount > 0) rows.push(["Mã giảm giá", "−" + vnd(discount), "#07873c"]);
  return (
    <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 24, display: "flex", flexDirection: "column", gap: 16, background: "#fff" }}>
      <h2 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19 }}>Tóm tắt đơn hàng</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {rows.map(([k, v, c]) => (
          <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, color: c || "var(--foreground)" }}><span>{k}</span><span style={{ fontFamily: "var(--font-mono)" }}>{v}</span></div>
        ))}
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}><span>Phí vận chuyển</span><span style={{ fontFamily: "var(--font-mono)", color: ship === 0 ? "#07873c" : "var(--foreground)" }}>{ship === 0 ? "Miễn phí" : vnd(ship)}</span></div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingTop: 14, borderTop: "1px dashed var(--border)" }}>
        <span style={{ fontSize: 16, fontWeight: 700 }}>Tổng cộng</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 24, fontWeight: 700, color: "var(--danger)" }}>{vnd(total)}</span>
      </div>
      <span style={{ fontSize: 12, color: "var(--muted-foreground)", textAlign: "right", marginTop: -8 }}>Đã bao gồm VAT</span>
      <Button size="lg" style={{ width: "100%", boxShadow: "none" }}>Tiến hành đặt hàng</Button>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, paddingTop: 6 }}>
        {[["truck", "Giao nhanh 2-4 giờ nội thành"], ["shield-check", "Bảo hành chính hãng 24 tháng"], ["credit-card", "Trả góp 0% lãi suất qua thẻ"]].map(([ic, t]) => (
          <span key={t} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--muted-foreground)" }}><i className={`ph ph-${ic}`} style={{ color: "var(--primary)", fontSize: 15 }} /> {t}</span>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 8, borderTop: "1px solid var(--border)" }}>
        <span style={{ fontSize: 12, color: "var(--muted-foreground)" }}>Thanh toán an toàn qua</span>
        <div style={{ display: "flex", gap: 6, marginLeft: "auto" }}>
          {["credit-card", "wallet", "bank"].map((i) => <span key={i} style={{ width: 32, height: 22, borderRadius: 5, border: "1px solid var(--border)", display: "grid", placeItems: "center", color: "var(--muted-foreground)" }}><i className={`ph ph-${i}`} style={{ fontSize: 13 }} /></span>)}
        </div>
      </div>
    </div>
  );
}

/* ---------- Voucher box ---------- */
function Voucher({ applied, onApply, onClear }) {
  const [code, setCode] = React.useState("");
  const [err, setErr] = React.useState("");
  const [detail, setDetail] = React.useState(null);
  const apply = () => {
    const key = code.trim().toUpperCase();
    if (VOUCHERS[key]) { onApply(key); setErr(""); }
    else setErr("Mã không hợp lệ hoặc đã hết hạn.");
  };
  const vnd0 = (n) => new Intl.NumberFormat("vi-VN").format(n) + "đ";
  const v = detail ? VOUCHERS[detail] : null;
  return (
    <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 20, display: "flex", flexDirection: "column", gap: 12 }}>
      <span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700 }}><i className="ph ph-ticket" style={{ color: "var(--primary)", fontSize: 18 }} /> Mã giảm giá</span>
      {applied ? (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "10px 14px", borderRadius: "var(--radius-md)", background: "color-mix(in srgb, #07c73c 12%, #fff)", border: "1px solid color-mix(in srgb, #07c73c 40%, #fff)" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 600, color: "#07873c" }}><i className="ph-fill ph-seal-check" /> {applied} · {VOUCHERS[applied].label}</span>
          <button onClick={onClear} style={{ border: "none", background: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: 13 }}>Bỏ</button>
        </div>
      ) : (
        <React.Fragment>
          <div style={{ display: "flex", gap: 8 }}>
            <Input placeholder="Nhập mã (VD: XEDAP100)" value={code} onChange={(e) => { setCode(e.target.value); setErr(""); }} onKeyDown={(e) => e.key === "Enter" && apply()} />
            <Button variant="outline" onClick={apply} style={{ flexShrink: 0 }}>Áp dụng</Button>
          </div>
          {err && <span style={{ fontSize: 12, color: "var(--danger)" }}>{err}</span>}
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            {Object.keys(VOUCHERS).map((k) => <button key={k} onClick={() => setDetail(k)} style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, padding: "4px 10px", borderRadius: 5, border: "1px dashed var(--primary)", background: "color-mix(in srgb, var(--primary) 5%, #fff)", color: "var(--primary)", cursor: "pointer" }}>{k}</button>)}
          </div>
        </React.Fragment>
      )}
      {v && (
        <div onClick={() => setDetail(null)} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(11,13,18,.5)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 420, background: "#fff", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "18px 20px", background: "color-mix(in srgb, var(--primary) 8%, #fff)", borderBottom: "1px solid var(--border)" }}>
              <div style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--primary)", color: "#fff", display: "grid", placeItems: "center", flexShrink: 0 }}><i className="ph-fill ph-ticket" style={{ fontSize: 20 }} /></div>
              <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 700, color: "var(--primary)" }}>{detail}</span>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{v.label}</span>
              </div>
              <button onClick={() => setDetail(null)} style={{ marginLeft: "auto", border: "none", background: "none", cursor: "pointer", color: "var(--muted-foreground)", fontSize: 20, lineHeight: 1 }}><i className="ph ph-x" /></button>
            </div>
            <div style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 12 }}>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--foreground)" }}>{v.desc}</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
                {[["ph-tag", "Áp dụng cho", v.scope], ["ph-shopping-bag", "Đơn tối thiểu", v.minOrder ? vnd0(v.minOrder) : "Không yêu cầu"], ["ph-calendar-blank", "Thời gian áp dụng", `${v.start} – ${v.end}`]].map(([ic, k, val]) => (
                  <div key={k} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                    <i className={`ph ${ic}`} style={{ color: "var(--primary)", fontSize: 16, marginTop: 1 }} />
                    <span style={{ color: "var(--muted-foreground)", width: 128, flexShrink: 0 }}>{k}</span>
                    <span style={{ fontWeight: 600, textWrap: "pretty" }}>{val}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: "flex", gap: 10, padding: "0 20px 20px" }}>
              <Button variant="outline" style={{ flex: 1 }} onClick={() => setDetail(null)}>Đóng</Button>
              <Button style={{ flex: 1, boxShadow: "none" }} onClick={() => { onApply(detail); setDetail(null); setErr(""); }}>Áp dụng mã</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- Page ---------- */
function CartPage({ lines, onQty, onRemove, onFulfil, onAdd }) {
  const { PRODUCTS, IMG } = window.KitData;
  const [voucher, setVoucher] = React.useState(null);
  const subtotal = lines.reduce((s, l) => s + l.product.price * l.qty, 0);
  const saved = lines.reduce((s, l) => s + (l.product.originalPrice - l.product.price) * l.qty, 0);
  const count = lines.reduce((s, l) => s + l.qty, 0);
  let discount = 0, freeship = false;
  if (voucher && VOUCHERS[voucher]) {
    const v = VOUCHERS[voucher];
    if (v.off) discount = v.off;
    if (v.pct) discount = Math.min(v.cap || Infinity, Math.round(subtotal * v.pct));
    if (v.freeship) freeship = true;
  }
  const shipCount = lines.filter((l) => l.fulfil !== "pickup").reduce((s, l) => s + l.qty, 0);
  const pickupCount = count - shipCount;
  const suggested = PRODUCTS.filter((p) => !lines.some((l) => l.product.slug === p.slug)).slice(0, 4);

  if (lines.length === 0) return <main><EmptyCart /></main>;

  return (
    <main>
      <div style={{ ...wrap, padding: "24px 16px 8px" }}>
        <nav style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12, color: "var(--muted-foreground)", marginBottom: 12 }}>
          <a href="./index.html" style={{ color: "var(--muted-foreground)", textDecoration: "none" }}>Trang chủ</a>
          <i className="ph ph-caret-right" style={{ fontSize: 10 }} />
          <span style={{ color: "var(--foreground)", fontWeight: 500 }}>Giỏ hàng</span>
        </nav>
        <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
          <h1 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 30, letterSpacing: "-0.01em" }}>Giỏ hàng</h1>
          <span style={{ fontSize: 15, color: "var(--muted-foreground)" }}>{count} sản phẩm</span>
        </div>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginTop: 14, padding: "16px 18px", borderRadius: "var(--radius-md)", background: "color-mix(in srgb, var(--primary) 5%, #fff)", border: "1px solid color-mix(in srgb, var(--primary) 20%, #fff)" }}>
          <i className="ph ph-gift" style={{ color: "var(--primary)", fontSize: 22, marginTop: 2 }} />
          <div style={{ fontSize: 13.5, color: "var(--foreground)", lineHeight: 1.5 }}><strong>Quà tặng:</strong> Mỗi xe được tặng kèm nón bảo hiểm + bộ dụng cụ sửa xe. Miễn phí lắp ráp và giao xe tận nhà nội thành.</div>
        </div>
      </div>

      <div style={{ ...wrap, padding: "16px 16px 64px", display: "grid", gridTemplateColumns: "1fr 380px", gap: 40, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "4px 24px 12px" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 0 4px" }}>
              <span style={{ fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--muted-foreground)" }}>Sản phẩm</span>
              <a href="./index.html" style={{ fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4 }}><i className="ph ph-arrow-left" /> Tiếp tục mua sắm</a>
            </div>
            {lines.map((l) => <CartRow key={l.id} line={l} onQty={onQty} onRemove={onRemove} onFulfil={onFulfil} />)}
          </div>
        </div>

        <div style={{ position: "sticky", top: 84, display: "flex", flexDirection: "column", gap: 16 }}>
          <Voucher applied={voucher} onApply={setVoucher} onClear={() => setVoucher(null)} />
          <Summary subtotal={subtotal} saved={saved} discount={discount} freeship={freeship} />
        </div>
      </div>

      {suggested.length > 0 && (
        <section style={{ background: "color-mix(in srgb, var(--secondary) 40%, #fff)", borderTop: "1px solid var(--border)" }}>
          <div style={{ ...wrap, padding: "56px 16px" }}>
            <h2 style={{ margin: "0 0 28px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 22 }}>Các lựa chọn tương tự</h2>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
              {suggested.map((p) => <ProductCard key={p.slug} product={{ ...p, image: p.img || IMG(p.seed) }} onAdd={onAdd} onClick={() => (window.location.href = "./ProductDetail.html")} />)}
            </div>
          </div>
        </section>
      )}
    </main>
  );
}

Object.assign(window, { CartPage });