// Xedap.vn — Blog landing page. // Blocks: search → hero → featured stories (image/video toggle) → assembly-clip // videos → category carousels (Kỷ lục / Câu chuyện / Cẩm nang) → owner stories // → store suggestion → product suggestions (bestsellers). const { Badge, PriceTag, Rating, Button, ProductCard } = window.XedapVnDesignSystem_03b1c0; const PIC = (seed, w = 800, h = 600) => `https://picsum.photos/seed/${encodeURIComponent(seed)}/${w}/${h}`; const fmt = (n) => new Intl.NumberFormat("vi-VN").format(n) + "₫"; const YT = (id) => `https://www.youtube.com/embed/${id}?autoplay=1&rel=0&playsinline=1`; const YT_THUMB = (id) => `https://i.ytimg.com/vi/${id}/hqdefault.jpg`; const MAX = 1280; // ── Shared bits ────────────────────────────────────────────────────────── function SectionHead({ title, sort, onSort, size = 30, kicker }) { return (
{kicker && {kicker}}

{title}

{onSort && (
{[["desc", "Mới nhất"], ["asc", "Cũ nhất"]].map(([id, label]) => { const on = sort === id; return ( ); })}
)}
); } // Horizontal scroller with arrows + progress track. function Carousel({ children, gap = 20 }) { const ref = React.useRef(null); const [prog, setProg] = React.useState(0); const [thumb, setThumb] = React.useState(0.4); 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" }); }; const atEnd = prog >= 0.9; return (
{children}