// Xedap.vn — Blog detail (đọc chi tiết một bài viết).
// Layout: breadcrumb → header (kicker/title/meta) → hero → 2 cột (share rail
// dính + nội dung bài) → tags → author box → CTA → bài liên quan → gợi ý sản phẩm.
const { Badge, Button, ProductCardCp: BlogDetailProductCard, Rating } = window.XedapVnDesignSystem_03b1c0;

// Card sản phẩm dùng chung style với homepage_cp (ProductCardCp + hover đổi ảnh).
function BlogDetailCard({ p, onAdd }) {
  const [hover, setHover] = React.useState(false);
  const image = hover && p.img2 ? p.img2 : p.img;
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", minWidth: 0 }}>
      <BlogDetailProductCard
        style={{ flex: 1, minWidth: 0 }}
        product={{
          ...p,
          image,
          status: p.status || "Hàng mới về",
          notes: p.notes || [p.gift, "Trả góp 0% - 0đ phụ phí - 0đ trả trước - kỳ hạn đến 12 tháng"].filter(Boolean),
          delivery: p.delivery ?? "2 Giờ",
        }}
      />
    </div>
  );
}

const PIC = (seed, w = 1200, h = 700) => `https://picsum.photos/seed/${encodeURIComponent(seed)}/${w}/${h}`;
const MAX = 1280;
const COL = 720; // reading column width

// ── Bài viết mẫu ──────────────────────────────────────────────────────────
const ARTICLE = {
  kicker: "CẨM NANG",
  title: "Cách chọn xe touring: cẩm nang mua hàng đầy đủ cho người mới",
  excerpt:
    "Từ chất liệu khung, hệ thống truyền động đến việc gắn baga và túi đồ — tất cả những gì bạn cần biết để chọn được chiếc xe touring bền bỉ cho hành trình đường dài đầu tiên.",
  hero: "https://cdn.hstatic.net/files/200001086651/file/64.png",
  date: "17 Th7, 2026",
  read: "8 phút đọc",
  author: { name: "Nguyễn Hoàng Minh", role: "Biên tập viên Cẩm nang", avatar: "https://i.pravatar.cc/120?img=12" },
  tags: ["Touring", "Đường dài", "Cẩm nang mua hàng", "Khung xe", "Groupset"],
};

// Danh mục điều hướng (mỗi mục có thể mở rộng).
const CAT_MENU = [
  { label: "Cẩm nang chọn mua", children: ["Chọn xe touring", "Chọn xe đi làm", "Cỡ khung & size"] },
  { label: "Bảo dưỡng & sửa chữa", children: ["Vệ sinh xích", "Chỉnh phanh", "Bảo quản pin"] },
  { label: "Kỷ lục & thành tích", children: ["Giải đua địa hình", "Touring xuyên Việt"] },
  { label: "Câu chuyện chủ xe", children: ["Off-ride cuối tuần", "Hành trình 10.000km"] },
  { label: "Sự kiện & cửa hàng", children: ["Khai trương showroom", "Workshop bảo dưỡng"] },
];

// Mục lục (khớp id của các heading trong nội dung).
const TOC = [
  { id: "khung", n: "1", label: "Chất liệu khung" },
  { id: "truyen-dong", n: "2", label: "Hệ thống truyền động" },
  { id: "banh-lop", n: "3", label: "Bánh & lốp" },
  { id: "phu-kien", n: "4", label: "Baga, chắn bùn & phụ kiện" },
  { id: "ngan-sach", n: "5", label: "Ngân sách gợi ý" },
];

const RELATED = [
  { seed: "xd-rel-1", date: "11 Th7, 2026", title: "Chọn xe đi làm hoàn hảo cho người mới bắt đầu", img: "https://cdn.hstatic.net/files/200001086651/file/65.png", kicker: "MUA SẮM", meta: "Cân bằng giữa tốc độ, sự thoải mái và ngân sách cho hành trình mỗi ngày." },
  { seed: "xd-rel-2", date: "02 Th7, 2026", title: "Xe trợ lực điện tốt nhất: hướng dẫn toàn tập", img: "https://cdn.hstatic.net/files/200001086651/file/67.png", kicker: "MUA SẮM", meta: "So sánh phạm vi pin, mô-men xoắn và giá trị của các dòng e-bike phổ biến." },
  { seed: "xd-rel-3", date: "24 Th6, 2026", title: "Chọn xe địa hình đúng nhu cầu và ngân sách", img: "https://cdn.hstatic.net/files/200001086651/file/66.png", kicker: "MUA SẮM", meta: "Hardtail hay full-suspension? Cỡ bánh nào hợp với bạn nhất." },
  { seed: "xd-rel-4", date: "15 Th6, 2026", title: "Cỡ khung & size xe: chọn sao cho vừa vặn", img: "https://cdn.hstatic.net/files/200001086651/file/68.png", kicker: "CẨM NANG", meta: "Bảng quy đổi chiều cao sang size khung và mẹo tinh chỉnh tư thế đạp." },
  { seed: "xd-rel-5", date: "05 Th7, 2026", title: "So sánh phanh đĩa dầu và phanh cơ", img: "https://cdn.hstatic.net/files/200001086651/file/60.png", kicker: "KỸ THUẬT", meta: "Ưu, nhược điểm và chi phí bảo dưỡng của từng loại phanh." },
];

// ── Nguyên thể văn bản (đơn giản, dễ đọc) ──────────────────────────────────
const P = ({ children }) => (
  <p style={{ margin: "0 0 22px", fontSize: "calc(13px + 5px*var(--ts))", lineHeight: 1.75, color: "rgba(17,24,39,.86)", letterSpacing: "-0.003em" }}>{children}</p>
);
const H2 = ({ id, children }) => (
  <h2 id={id} style={{ scrollMarginTop: 88, margin: "44px 0 18px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 15px*var(--ts))", lineHeight: 1.15, letterSpacing: "-0.015em" }}>{children}</h2>
);
const LI = ({ children }) => (
  <li style={{ margin: "0 0 12px", fontSize: "calc(13px + 5px*var(--ts))", lineHeight: 1.7, color: "rgba(17,24,39,.86)" }}>{children}</li>
);

function ArticleBody({ onAdd }) {
  return (
    <article>
      <P><strong>Xe touring</strong> được sinh ra cho những hành trình dài, chở nặng và đi liên tục nhiều ngày. Khác với xe đua hay xe địa hình, ưu tiên số một của touring là <em>độ bền, sự thoải mái và khả năng gắn phụ kiện</em> — chứ không phải tốc độ tối đa. Dưới đây là năm yếu tố quyết định khi bạn chọn chiếc xe touring đầu tiên.</P>

      <H2 id="khung">1. Chất liệu khung</H2>
      <P>Khung thép (chromoly) là lựa chọn kinh điển của dân touring: dẻo dai, êm ái trên đường xấu và — quan trọng nhất — có thể hàn sửa ở bất kỳ đâu trên hành trình. Khung nhôm nhẹ và rẻ hơn nhưng truyền chấn động nhiều hơn. Carbon hiếm khi dùng cho touring vì khó sửa khi gặp sự cố xa nhà.</P>
      <blockquote style={{ margin: "0 0 26px", padding: "6px 0 6px 26px", borderLeft: "4px solid var(--primary)" }}>
        <p style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: "calc(13px + 9px*var(--ts))", lineHeight: 1.4, letterSpacing: "-0.01em", color: "var(--foreground)" }}>“Một khung thép tốt có thể đi cùng bạn hai mươi năm và hàng chục nghìn cây số.”</p>
      </blockquote>

      <H2 id="truyen-dong">2. Hệ thống truyền động</H2>
      <P>Touring cần dải số rộng để leo dốc khi xe chở nặng. Bộ đề ba đĩa (triple crankset) hoặc cassette có lá lớn giúp bạn giữ nhịp đạp thoải mái ở mọi địa hình. Ưu tiên các groupset phổ thông, dễ tìm phụ tùng thay thế thay vì đồ cao cấp khó kiếm.</P>
      <figure style={{ margin: "0 0 26px" }}>
        <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden", background: "var(--secondary)" }}>
          <img src="https://cdn.hstatic.net/files/200001086651/file/60.png" alt="Hệ thống truyền động xe touring" style={{ width: "100%", display: "block", objectFit: "cover" }} />
        </div>
        <figcaption style={{ margin: "10px 2px 0", fontSize: "calc(13px + 0.5px*var(--ts))", color: "var(--muted-foreground)" }}>Groupset phổ thông giúp việc bảo dưỡng dọc đường trở nên dễ dàng.</figcaption>
      </figure>

      <H2 id="banh-lop">3. Bánh & lốp</H2>
      <P>Vành 700C có nhiều lựa chọn lốp và thay thế dễ, trong khi vành 26" bền và phổ biến ở vùng xa. Về lốp, bản 35–45mm cho touring có tải là hợp lý — đủ êm, đủ bám mà vẫn lăn nhẹ. Chọn lốp có lớp chống đâm thủng để tránh vá xăm giữa đường.</P>
      <ul style={{ margin: "0 0 22px", paddingLeft: 22 }}>
        <LI><strong>Đường nhựa, hành lý nhẹ:</strong> lốp 32–35mm.</LI>
        <LI><strong>Touring có tải, đường hỗn hợp:</strong> lốp 38–42mm.</LI>
        <LI><strong>Đường xấu, off-road nhẹ:</strong> lốp 45mm gai thưa.</LI>
      </ul>
      {blogDetailTouringPicks(3)[2] && (
        <div style={{ width: "100%", margin: "0 0 26px" }}>
          <BlogDetailCard p={blogDetailTouringPicks(3)[2]} onAdd={onAdd} />
        </div>
      )}

      <H2 id="phu-kien">4. Baga, chắn bùn & phụ kiện</H2>
      <P>Đây là điểm phân biệt rõ nhất của xe touring: khung phải có <em>đầy đủ lỗ bắt vít</em> để gắn baga trước/sau, chắn bùn, bình nước và túi đồ. Trước khi mua, hãy kiểm tra xe có sẵn các điểm bắt (eyelet) này không — thiếu chúng, việc chở đồ đường dài sẽ rất bất tiện.</P>

      <H2 id="ngan-sach">5. Ngân sách gợi ý</H2>
      <P>Với người mới, tầm 8–15 triệu đồng đã có những mẫu touring khung thép hoặc nhôm đáng tin cậy để bắt đầu. Hãy dành một phần ngân sách cho baga, túi và bộ dụng cụ sửa chữa cơ bản — chúng quan trọng không kém chính chiếc xe.</P>
      <P>Nếu chưa chắc chắn, hãy ghé showroom Xedap.vn để được đo cỡ khung (fit) và chạy thử — cảm giác thực tế luôn nói lên nhiều điều hơn mọi thông số kỹ thuật.</P>

      <div style={{ margin: "36px 0 8px", padding: 22, border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--secondary)" }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: ".14em", color: "var(--primary)", marginBottom: 4 }}>GỢI Ý CHO BẠN</div>
        <h3 style={{ margin: "0 0 18px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 7px*var(--ts))", letterSpacing: "-0.01em" }}>2 mẫu xe touring đáng mua</h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 16 }}>
          {blogDetailTouringPicks(2).map((p) => (
            <div key={p.slug} style={{ minWidth: 0 }}><BlogDetailCard p={p} onAdd={onAdd} /></div>
          ))}
        </div>
      </div>
    </article>
  );
}

// ── Thành phần trang ────────────────────────────────────────────────────────
function Breadcrumb() {
  const link = { color: "var(--muted-foreground)", textDecoration: "none", cursor: "pointer" };
  const sep = <i className="ph ph-caret-right" style={{ fontSize: 12, color: "var(--muted-foreground)", opacity: 0.6 }} />;
  return (
    <nav style={{ maxWidth: MAX, margin: "0 auto", padding: "20px 24px 0", display: "flex", alignItems: "center", gap: 10, fontSize: 13, flexWrap: "wrap" }}>
      <a href="index.html" style={link}>Trang chủ</a>{sep}
      <a href="Blog.html" style={link}>Blog</a>{sep}
      <a href="Blog.html" style={link}>Cẩm nang</a>{sep}
      <span style={{ color: "var(--foreground)", fontWeight: 600 }}>Cách chọn xe touring</span>
    </nav>
  );
}

function ArticleHeader() {
  return (
    <header style={{ maxWidth: COL + 120, margin: "0 auto", padding: "36px 24px 0", textAlign: "center" }}>
      <span style={{ display: "inline-block", fontSize: 11.5, fontWeight: 700, letterSpacing: ".16em", color: "var(--primary)", marginBottom: 18 }}>{ARTICLE.kicker}</span>
      <h1 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 31px*var(--ts))", lineHeight: 1.1, letterSpacing: "-0.025em" }}>{ARTICLE.title}</h1>
      <p style={{ margin: "20px auto 0", maxWidth: 620, fontSize: "calc(13px + 5.5px*var(--ts))", lineHeight: 1.6, color: "var(--muted-foreground)" }}>{ARTICLE.excerpt}</p>
    </header>
  );
}

function HeroImage() {
  return (
    <div style={{ maxWidth: MAX, margin: "36px auto 0", padding: "0 24px" }}>
      <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", background: "#0b0d12", aspectRatio: "16/8" }}>
        <img src={ARTICLE.hero} alt={ARTICLE.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
    </div>
  );
}

// Cột trái dính: Danh mục (menu mở rộng) + chia sẻ.
function ShareRail() {
  const [open, setOpen] = React.useState(0); // chỉ một mục mở tại một thời điểm
  const btn = { width: 40, height: 40, borderRadius: 5, border: "1px solid var(--border)", background: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--foreground)" };
  return (
    <aside style={{ position: "sticky", top: 88, alignSelf: "start", display: "flex", flexDirection: "column", gap: 28 }}>
      <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "22px 22px 8px" }}>
        <h2 style={{ margin: "0 0 14px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 7px*var(--ts))", letterSpacing: "-0.01em" }}>Danh mục</h2>
        <div style={{ height: 1, background: "var(--border)", margin: "0 0 6px" }} />
        <nav>
          {CAT_MENU.map((c, i) => {
            const on = open === i;
            return (
              <div key={c.label} style={{ borderBottom: i < CAT_MENU.length - 1 ? "1px solid var(--border)" : "none" }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "13px 0", border: "none", background: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-sans)", fontSize: "calc(13px + 1.5px*var(--ts))", fontWeight: on ? 700 : 500, color: on ? "var(--primary)" : "var(--foreground)", transition: "color .15s" }}>
                  <span>{c.label}</span>
                  <i className={`ph ph-${on ? "minus" : "plus"}`} style={{ fontSize: "calc(13px + 2px*var(--ts))", flex: "0 0 auto", color: on ? "var(--primary)" : "var(--muted-foreground)" }} />
                </button>
                {on && (
                  <div style={{ padding: "0 0 12px 2px", display: "flex", flexDirection: "column", gap: 9 }}>
                    {c.children.map((ch) => (
                      <a key={ch} style={{ fontSize: "calc(13px + 0.5px*var(--ts))", color: "var(--muted-foreground)", textDecoration: "none", cursor: "pointer" }}>{ch}</a>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </nav>
      </div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".12em", color: "var(--muted-foreground)", marginBottom: 12 }}>CHIA SẺ</div>
        <div style={{ display: "flex", gap: 8 }}>
          {["facebook-logo", "x-logo", "link-simple"].map((ic) => (
            <button key={ic} aria-label={ic} style={btn}><i className={`ph ph-${ic}`} style={{ fontSize: "calc(13px + 4px*var(--ts))" }} /></button>
          ))}
        </div>
      </div>
    </aside>
  );
}

// Cột phải dính: Mục lục (highlight theo scroll).
function TocRail() {
  const [active, setActive] = React.useState(TOC[0].id);
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }); },
      { rootMargin: "-80px 0px -65% 0px", threshold: 0 }
    );
    TOC.forEach((t) => { const el = document.getElementById(t.id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);
  const go = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); };
  return (
    <aside style={{ position: "sticky", top: 88, alignSelf: "start" }}>
      <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "22px 22px 20px" }}>
        <h2 style={{ margin: "0 0 14px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 7px*var(--ts))", letterSpacing: "-0.01em" }}>Mục lục</h2>
        <div style={{ height: 1, background: "var(--border)", margin: "0 0 12px" }} />
        <nav style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          {TOC.map((t) => {
            const on = active === t.id;
            return (
              <button key={t.id} onClick={() => go(t.id)} style={{ display: "flex", gap: 8, textAlign: "left", border: "none", background: "none", cursor: "pointer", padding: "5px 0", fontFamily: "var(--font-sans)", fontSize: "calc(13px + 1px*var(--ts))", lineHeight: 1.4, fontWeight: on ? 700 : 500, color: on ? "var(--primary)" : "var(--foreground)", transition: "color .15s" }}>
                <span style={{ flex: "0 0 auto", color: on ? "var(--primary)" : "var(--muted-foreground)" }}>{t.n}</span>
                <span>{t.label}</span>
              </button>
            );
          })}
        </nav>
      </div>
    </aside>
  );
}

function Tags() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, margin: "38px 0 0" }}>
      {ARTICLE.tags.map((t) => (
        <a key={t} style={{ display: "inline-flex", alignItems: "center", height: 32, padding: "0 14px", borderRadius: "var(--radius-pill)", background: "var(--secondary)", color: "var(--foreground)", fontSize: 13, fontWeight: 600, textDecoration: "none", cursor: "pointer" }}>#{t}</a>
      ))}
    </div>
  );
}

function AuthorBox() {
  const a = ARTICLE.author;
  return (
    <div style={{ display: "flex", gap: 18, alignItems: "center", margin: "36px 0 0", padding: 22, borderRadius: "var(--radius-lg)", background: "var(--secondary)" }}>
      <img src={a.avatar} alt="" style={{ width: 64, height: 64, borderRadius: "50%", objectFit: "cover", flex: "0 0 64px" }} />
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".1em", color: "var(--primary)", marginBottom: 5 }}>{a.role.toUpperCase()}</div>
        <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 6px*var(--ts))" }}>{a.name}</div>
        <p style={{ margin: "6px 0 0", fontSize: "calc(13px + 1px*var(--ts))", lineHeight: 1.55, color: "var(--muted-foreground)" }}>Chuyên viết về cẩm nang chọn mua, bảo dưỡng và những cung đường touring đẹp nhất Việt Nam.</p>
      </div>
      <Button variant="outline" size="sm" style={{ flex: "0 0 auto", boxShadow: "none" }}>Theo dõi</Button>
    </div>
  );
}

// Card kiểu editorial: ảnh ngang → tiêu đề + mô tả bên dưới.
function RelBelowCard({ item, w = 300 }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ flex: `0 0 ${w}px`, width: w, display: "block", textDecoration: "none", cursor: "pointer" }}>
      <div style={{ aspectRatio: "4/3", borderRadius: "var(--radius-md)", overflow: "hidden", background: "var(--secondary)" }}>
        <img src={item.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .5s var(--ease-out)", transform: hover ? "scale(1.04)" : "none" }} />
      </div>
      <h3 style={{ margin: "14px 0 0", fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: "calc(13px + 3px*var(--ts))", lineHeight: 1.28, color: "var(--foreground)" }}>{item.title}</h3>
      <p style={{ margin: "8px 0 0", fontSize: "calc(13px + 0.5px*var(--ts))", lineHeight: 1.55, color: "rgba(51,51,51,.62)" }}>{item.meta}</p>
    </a>
  );
}

const relArrowStyle = { width: 40, height: 40, flex: "0 0 40px", borderRadius: 5, border: "1px solid var(--border)", background: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--foreground)" };

function Related() {
  const ref = React.useRef(null);
  const [sort, setSort] = React.useState("desc");
  const [prog, setProg] = React.useState(0);
  const [thumb, setThumb] = React.useState(0.4);
  const list = sort === "asc" ? [...RELATED].slice().reverse() : RELATED;
  const recalc = React.useCallback(() => {
    const el = ref.current; if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setProg(max > 0 ? el.scrollLeft / max : 0);
    setThumb(el.scrollWidth > 0 ? Math.max(0.12, el.clientWidth / el.scrollWidth) : 1);
  }, []);
  React.useEffect(() => { recalc(); const el = ref.current; if (!el) return; el.addEventListener("scroll", recalc, { passive: true }); window.addEventListener("resize", recalc); return () => { el.removeEventListener("scroll", recalc); window.removeEventListener("resize", recalc); }; }, [recalc]);
  const nudge = (dir) => { const el = ref.current; if (!el) return; el.scrollBy({ left: dir * el.clientWidth * 0.82, behavior: "smooth" }); };
  return (
    <section style={{ borderTop: "1px solid var(--border)", marginTop: 64 }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "56px 24px 0" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 22, flexWrap: "wrap" }}>
          <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".14em", color: "var(--primary)" }}>ĐỌC THÊM</span>
          <h2 style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 15px*var(--ts))", letterSpacing: "-0.015em", lineHeight: 1.05 }}>Bài viết liên quan</h2>
          <div style={{ display: "flex", gap: 6, marginLeft: 4 }}>
            {[["desc", "Mới nhất"], ["asc", "Cũ nhất"]].map(([id, label]) => {
              const on = sort === id;
              return (<button key={id} onClick={() => setSort(id)} style={{ height: 24, padding: "0 12px", borderRadius: 5, border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 11.5, fontWeight: 600, background: on ? "var(--primary)" : "var(--secondary)", color: on ? "#fff" : "var(--muted-foreground)", transition: "background .18s" }}>{label}</button>);
            })}
          </div>
        </div>
        <div ref={ref} style={{ display: "flex", gap: 20, overflowX: "auto", scrollBehavior: "smooth", paddingBottom: 4, scrollbarWidth: "none", msOverflowStyle: "none" }} className="xd-noscrollbar">
          {list.map((r) => <RelBelowCard key={r.seed} item={r} />)}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 20 }}>
          <button onClick={() => nudge(-1)} aria-label="Trước" style={relArrowStyle}><i className="ph ph-arrow-left" style={{ fontSize: "calc(13px + 3px*var(--ts))" }} /></button>
          <button onClick={() => nudge(1)} aria-label="Sau" style={relArrowStyle}><i className="ph ph-arrow-right" style={{ fontSize: "calc(13px + 3px*var(--ts))" }} /></button>
          <div style={{ position: "relative", flex: 1, height: 3, background: "var(--border)", borderRadius: 5 }}>
            <div style={{ position: "absolute", top: 0, height: "100%", borderRadius: 5, background: "var(--foreground)", width: `${thumb * 100}%`, left: `${prog * (1 - thumb) * 100}%`, transition: "left .1s linear" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

// Ảnh + dữ liệu sản phẩm lấy từ api.xedap.vn (nhóm xe touring đường phố).
function blogDetailTouringPicks(n) {
  const api = window.XedapApiData;
  const cat = api && api.byCategory ? api.byCategory("Xe đạp thể thao đường phố") || [] : [];
  const pool = cat.length ? cat : (api && api.PRODUCTS) || (window.KitData && window.KitData.PRODUCTS) || [];
  return pool.slice(0, n);
}

function ProductSuggest({ onAdd }) {
  const products = blogDetailTouringPicks(5);
  return (
    <section style={{ maxWidth: MAX, margin: "64px auto 96px", padding: "0 24px" }}>
      <h2 style={{ margin: "0 0 24px", fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "calc(13px + 15px*var(--ts))", letterSpacing: "-0.015em" }}>Xe touring gợi ý</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,minmax(0,1fr))", gap: 20 }}>
        {products.map((p) => <BlogDetailCard key={p.slug} p={p} onAdd={onAdd} />)}
      </div>
    </section>
  );
}

function BlogDetail({ onAdd }) {
  return (
    <main>
      <Breadcrumb />
      <HeroImage />
      <ArticleHeader />
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "48px 24px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "240px minmax(0,1fr) 240px", gap: 48, alignItems: "start" }}>
          <ShareRail />
          <div style={{ width: "100%" }}>
            <ArticleBody onAdd={onAdd} />
            <Tags />
            <AuthorBox />
          </div>
          <TocRail />
        </div>
      </div>
      <Related />
      <ProductSuggest onAdd={onAdd} />
    </main>
  );
}

Object.assign(window, { BlogDetail });
