// Home_page_cp — homepage biến thể theo layout sàn TMĐT: hero 3 cột (rail + slider + cột phải), // dải gợi ý, flashsale, các khối danh mục (banner dọc + tab + lưới 4x2), video, ưu đãi, tin tức. // Header/footer dùng chung từ design system (xem Home_page_cp.html). const { ProductCardCp: HomePageCpProductCard } = window.XedapVnDesignSystem_03b1c0; const useHomecpMobile = () => window.useMq("(max-width: 767px)"); const useHomecpCompact = () => window.useMq("(max-width: 1024px)"); const HOMECP_MENU = [ { label: "Xe đạp thể thao đường phố", icon: "ph-bicycle" }, { label: "Xe đạp địa hình", icon: "ph-mountains" }, { label: "Xe đạp đua", icon: "ph-flag-checkered" }, { label: "Xe đạp gấp", icon: "ph-arrows-in" }, { label: "Xe trợ lực điện", icon: "ph-lightning" }, { label: "Xe đạp nữ", icon: "ph-heart" }, { label: "Xe đạp trẻ em", icon: "ph-baby" }, { label: "Khung sườn", icon: "ph-frame-corners" }, { label: "Phụ kiện cho người đạp", icon: "ph-t-shirt" }, { label: "Phụ kiện cho xe", icon: "ph-toolbox" }, { label: "Phụ tùng thay thế", icon: "ph-gear-six" }, { label: "Bảo trì – bảo dưỡng", icon: "ph-wrench" }, ]; const HOMECP_MEGA_DEFAULT = { cols: [ { title: "Theo dòng xe", items: ["Xe phổ thông", "Xe cao cấp", "Hàng nhập khẩu", "Xe trưng bày"] }, { title: "Theo mức giá", items: ["Dưới 5 triệu", "5 – 10 triệu", "10 – 20 triệu", "20 – 40 triệu", "Trên 40 triệu"] }, ], banner: "https://cdn.hstatic.net/files/200001086651/file/xe_dap_tro_luc.png", }; const HOMECP_MEGA = { "Xe đạp thể thao đường phố": { banner: "https://cdn.hstatic.net/files/200001086651/file/xe_dap_do_thi_cate.png", cols: [ { title: "Theo kiểu xe", items: ["Touring", "Hybrid / City", "Gravel", "Fixed gear", "Single speed"] }, { title: "Theo cỡ bánh", items: ["700C", "27.5 inch", "26 inch", "24 inch"] }, ] }, "Xe đạp địa hình": { banner: "https://cdn.hstatic.net/files/200001086651/file/xe_dia_h_nh_cate.png", cols: [ { title: "Theo hệ thống phuộc", items: ["Hardtail", "Full suspension", "Rigid"] }, { title: "Theo cỡ bánh", items: ["29 inch", "27.5 inch", "26 inch", "24 inch"] }, ] }, "Xe đạp đua": { banner: "https://cdn.hstatic.net/files/200001086651/file/xe_dap_duong_dai_cate.png", cols: [ { title: "Theo chất liệu khung", items: ["Carbon", "Nhôm", "Thép Cr-Mo"] }, { title: "Theo nhóm truyền động", items: ["Shimano 105", "Shimano Ultegra", "Shimano Tiagra", "SRAM Rival", "Campagnolo"] }, ] }, "Xe đạp gấp": { cols: [ { title: "Theo cỡ bánh", items: ["14 inch", "16 inch", "20 inch", "22 inch"] }, { title: "Theo nhu cầu", items: ["Đi làm nội đô", "Mang lên xe buýt", "Du lịch", "Gấp siêu nhẹ"] }, ] }, "Xe trợ lực điện": { cols: [ { title: "Theo kiểu xe", items: ["E-city", "E-MTB", "E-folding", "E-cargo"] }, { title: "Theo quãng đường", items: ["Dưới 40 km", "40 – 70 km", "70 – 100 km", "Trên 100 km"] }, ] }, "Xe đạp nữ": { cols: [ { title: "Theo kiểu dáng", items: ["Xe mini", "City bike", "Xe cổ điển", "Có giỏ trước"] }, { title: "Theo chiều cao", items: ["Dưới 1m50", "1m50 – 1m60", "1m60 – 1m70", "Trên 1m70"] }, ] }, "Xe đạp trẻ em": { cols: [ { title: "Theo độ tuổi", items: ["2 – 4 tuổi", "4 – 6 tuổi", "6 – 9 tuổi", "9 – 12 tuổi"] }, { title: "Theo cỡ bánh", items: ["12 inch", "14 inch", "16 inch", "18 inch", "20 inch"] }, ] }, "Khung sườn": { cols: [ { title: "Theo chất liệu", items: ["Carbon", "Nhôm", "Thép Cr-Mo", "Titanium"] }, { title: "Theo dòng xe", items: ["Khung MTB", "Khung Road", "Khung Gravel", "Khung Fixed gear"] }, ] }, "Phụ kiện cho người đạp": { cols: [ { title: "Trang bị", items: ["Mũ bảo hiểm", "Găng tay", "Kính mắt", "Giày đạp xe"] }, { title: "Quần áo", items: ["Áo đạp xe", "Quần đệm mông", "Áo gió", "Tất – khăn đa năng"] }, ] }, "Phụ kiện cho xe": { cols: [ { title: "Tiện ích", items: ["Đèn xe", "Khoá chống trộm", "Bình nước & gá", "Baga – giỏ"] }, { title: "Điện tử", items: ["Đồng hồ tốc độ", "Cảm biến nhịp", "Camera hành trình", "Chuông – còi"] }, ] }, "Phụ tùng thay thế": { cols: [ { title: "Truyền động", items: ["Xích – líp", "Đùi đĩa", "Củ đề", "Bàn đạp"] }, { title: "Bánh & phanh", items: ["Vành xe", "Lốp – săm", "Phanh đĩa", "Má phanh", "Moay-ơ"] }, ] }, "Bảo trì – bảo dưỡng": { cols: [ { title: "Gói dịch vụ", items: ["Bảo dưỡng cơ bản", "Bảo dưỡng toàn diện", "Cân vành", "Ép bát"] }, { title: "Vật tư", items: ["Dầu xích", "Dung dịch vệ sinh", "Dầu phanh", "Bộ dụng cụ"] }, ] }, }; const HOMECP_IMG = { mtb: "https://cdn.hstatic.net/files/200001086651/file/xe_dia_h_nh_cate.png", city: "https://cdn.hstatic.net/files/200001086651/file/xe_dap_do_thi_cate.png", ebike: "https://cdn.hstatic.net/files/200001086651/file/xe_dap_tro_luc.png", road: "https://cdn.hstatic.net/files/200001086651/file/xe_dap_duong_dai_cate.png", }; function homecpMega(label) { const m = HOMECP_MEGA[label] || {}; return { cols: m.cols || HOMECP_MEGA_DEFAULT.cols, banner: m.banner || HOMECP_MEGA_DEFAULT.banner, label }; } function HomePageCpMegaPanel({ label, onNav, maxWidth }) { const data = homecpMega(label); const brands = (window.KitData.PARTNERS || []).slice(0, 12); return (
{label}
{data.cols.map((c) => (
{c.title}
{c.items.map((it) => ( onNav && onNav(it)} style={{ fontSize: "calc(13px + 1px*var(--ts))", color: "var(--muted-foreground)", textDecoration: "none", cursor: "pointer" }}>{it} ))}
))}
onNav && onNav(label)} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: "calc(13px + 1px*var(--ts))", fontWeight: 700, color: "var(--primary)", textDecoration: "none", cursor: "pointer" }}>Xem tất cả
onNav && onNav(label)} style={{ display: "block", overflow: "hidden", background: "var(--muted)", cursor: "pointer" }}>
Thương hiệu
{brands.map((b, i) => ( onNav && onNav("brand")} style={{ background: "#fff", height: 74, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 14px", cursor: "pointer" }}> ))}
); } // Menu danh mục dùng chung: rail trang chủ + panel dropdown "Danh mục" trên header. function HomePageCpMenu({ onNav, style, onBackdrop, fill }) { const [hover, setHover] = React.useState(null); const [avail, setAvail] = React.useState(1000); const navRef = React.useRef(null); const timer = React.useRef(null); const measure = () => { const n = navRef.current; if (!n) return; const page = document.getElementById("homecp-page"); const right = page ? page.getBoundingClientRect().right - 24 : window.innerWidth - 24; setAvail(right - n.getBoundingClientRect().right); }; React.useEffect(() => { measure(); window.addEventListener("resize", measure); return () => window.removeEventListener("resize", measure); }, []); const enter = (label) => { clearTimeout(timer.current); measure(); setHover(label); }; const leave = () => { clearTimeout(timer.current); timer.current = setTimeout(() => setHover(null), 120); }; return ( {hover ?
{ leave(); onBackdrop && onBackdrop(); }} style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,.38)", zIndex: 1 }} /> : null} ); } // Panel "Danh mục" của header: chính là menu trái, hiện đúng vị trí rail trên trang chủ (không cuộn trang). function HomePageCpMenuFlyout({ onNav, onClose }) { const [box, setBox] = React.useState(null); React.useEffect(() => { const measure = () => { const el = document.getElementById("homecp-rail"); if (el) { const r = el.getBoundingClientRect(); setBox({ left: r.left, width: r.width }); } else { const w = Math.min(1440, window.innerWidth); setBox({ left: (window.innerWidth - w) / 2 + 24, width: 268 }); } }; measure(); window.addEventListener("resize", measure); const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; document.addEventListener("keydown", onKey); return () => { window.removeEventListener("resize", measure); document.removeEventListener("keydown", onKey); }; }, [onClose]); if (!box) return null; return (
); } // (cũ) helper cuộn tới rail + làm nổi bật — giữ lại cho các trang khác nếu cần. function homecpFocusRail() { window.scrollTo({ top: 0, behavior: "smooth" }); const el = document.getElementById("homecp-rail"); if (!el) return; el.classList.remove("homecp-rail-flash"); void el.offsetWidth; el.classList.add("homecp-rail-flash"); setTimeout(() => el.classList.remove("homecp-rail-flash"), 1400); } // Rail danh mục trên mobile: lưới icon + text, 4 cột × 2 hàng mỗi trang, vuốt ngang + dot. function HomePageCpRailMobile({ onNav }) { const rail = React.useRef(null); const [p, setP] = React.useState(0); const items = [{ label: "Gợi ý xe phù hợp", icon: "ph-sparkle", href: "find-your-bike.html", accent: true }].concat(HOMECP_MENU); const pages = []; for (let i = 0; i < items.length; i += 8) pages.push(items.slice(i, i + 8)); const onScroll = () => { const el = rail.current; if (!el) return; setP(Math.max(0, Math.min(pages.length - 1, Math.round(el.scrollLeft / (el.clientWidth || 1))))); }; const go = (i) => { const el = rail.current; if (!el) return; el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" }); setP(i); }; const tile = (m, k) => ( !m.href && onNav && onNav(m.label)} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, minWidth: 0, padding: "2px 2px 4px", textDecoration: "none", cursor: "pointer" }}> {m.label} ); return (
{pages.map((pg, pi) => (
{pg.map(tile)}
))}
{pages.length > 1 && (
{pages.map((_, i) => (
)}
); } function HomePageCpRail({ onNav }) { return ( ); } // ————— Hero: tab + slider giữa, cột phải (tài khoản + ưu đãi + banner), 3 banner dưới ————— const HOMECP_HERO_BANNERS = [ "https://cdn.hstatic.net/files/200001188264/file/banner-home-1.jpg", "https://cdn.hstatic.net/files/200001188264/file/banner-home-2.jpg", "https://cdn.hstatic.net/files/200001188264/file/banner-home-3.jpg", ]; const HOMECP_HERO_SLIDES = [ { tab: "MỪNG KHAI TRƯƠNG", tabSub: "Ưu đãi cực khủng", img: HOMECP_IMG.ebike, eyebrow: "XE TRỢ LỰC ĐIỆN", title: "Giảm đến 3 triệu", sub: "Tặng khoá chống trộm & mũ bảo hiểm", bg: "#142FF7" }, { tab: "RAPTOR MTB 2026", tabSub: "Mở bán tặng quà", img: HOMECP_IMG.mtb, eyebrow: "MTB RAPTOR – JAVA", title: "Địa hình từ 4.99 triệu", sub: "Trả góp 0% – duyệt trong 5 phút", bg: "#0F172A" }, { tab: "GIANT TCR SERIES", tabSub: "Siêu nhẹ, để bứt tốc", img: HOMECP_IMG.road, eyebrow: "ROAD GIANT TCR", title: "Ưu đãi hè 2026", sub: "Bảo dưỡng miễn phí trọn đời", bg: "#B91C1C" }, { tab: "TOURING ĐI PHỐ", tabSub: "Tặng baga & giỏ xe", img: HOMECP_IMG.city, eyebrow: "TOURING – CITY BIKE", title: "Chỉ từ 3.9 triệu", sub: "Giao xe lắp sẵn trong 24 giờ", bg: "#0F172A" }, { tab: "XE ĐẠP TRẺ EM", tabSub: "Tặng bộ bảo hộ", img: HOMECP_IMG.mtb, eyebrow: "BDD – BAMBI", title: "Chỉ từ 1.29 triệu", sub: "Tặng mũ, bọc gối và chuông xe", bg: "#B91C1C" }, { tab: "XE GẤP & FIXED", tabSub: "Gọn cho đô thị", img: HOMECP_IMG.city, eyebrow: "XE GẤP – FIXED GEAR", title: "Giảm thêm 800K", sub: "Gấp trong 15 giây, mang lên xe buýt", bg: "#142FF7" }, { tab: "PHỤ KIỆN CHÍNH HÃNG", tabSub: "Mua combo giảm 20%", img: HOMECP_IMG.road, eyebrow: "MŨ – ĐÈN – KHOÁ", title: "Combo giảm 20%", sub: "Hàng chính hãng, bảo hành 12 tháng", bg: "#0F172A" }, { tab: "THU CŨ ĐỔI MỚI", tabSub: "Trợ giá đến 3 triệu", img: HOMECP_IMG.mtb, eyebrow: "THU CŨ LÊN ĐỜI", title: "Trợ giá đến 3 triệu", sub: "Định giá xe cũ miễn phí tại cửa hàng", bg: "#142FF7" }, { tab: "BẢO DƯỠNG TRỌN GÓI", tabSub: "Giữ xe luôn như mới", img: HOMECP_IMG.ebike, eyebrow: "DỊCH VỤ KỸ THUẬT", title: "Gói năm giảm 1 triệu", sub: "Cân vành, chỉnh đề, vệ sinh truyền động", bg: "#B91C1C" }, ].map((x, k) => ({ ...x, img: HOMECP_HERO_BANNERS[k % HOMECP_HERO_BANNERS.length] })); const HOMECP_OFFER_LIST = [ { group: "Ưu đãi cho giáo dục", items: [["ph-graduation-cap", "Đăng ký", "nhận ưu đãi"], ["ph-graduation-cap", "Deal hot", "học sinh sinh viên"], ["ph-graduation-cap", "Xe đạp", "ưu đãi khủng"]] }, { group: "Thu cũ lên đời giá hời", items: [["ph-arrows-clockwise", "MTB trợ giá", "đến 2 triệu"], ["ph-arrows-clockwise", "Road trợ giá", "đến 3 triệu"]] }, { group: "Khách hàng doanh nghiệp (B2B)", items: [["ph-briefcase", "Đăng ký", "X-Business"], ["ph-briefcase", "Chính sách", "ưu đãi"]] }, ]; function HomePageCpHero({ onNav, mobile }) { const [i, setI] = React.useState(0); const n = HOMECP_HERO_SLIDES.length; React.useEffect(() => { const id = setInterval(() => setI((v) => (v + 1) % n), 5000); return () => clearInterval(id); }, [n]); const s = HOMECP_HERO_SLIDES[i]; const tabsRef = React.useRef(null); React.useEffect(() => { const strip = tabsRef.current; if (!strip) return; const btn = strip.children[i]; if (!btn) return; const left = btn.offsetLeft, right = left + btn.offsetWidth; if (right > strip.scrollLeft + strip.clientWidth) strip.scrollLeft = right - strip.clientWidth; else if (left < strip.scrollLeft) strip.scrollLeft = left; }, [i]); const smalls = [ { title: "Phụ kiện chính hãng", img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-1.jpg" }, { title: "Xe đạp trẻ em", img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-2.jpg" }, { title: "Bảo dưỡng trọn gói", img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-3.jpg" }, { title: "Hàng mới đổ bộ", img: "https://cdn.hstatic.net/files/200001188264/file/banner-duoi-home-2.jpg" }, ]; const [showPhone, setShowPhone] = React.useState(false); return (
{!mobile && (
{HOMECP_HERO_SLIDES.map((x, k) => ( ))}
)} onNav && onNav(s.tab)} style={{ position: "relative", display: "block", overflow: "hidden", background: s.bg, cursor: "pointer", flex: mobile ? "0 0 auto" : 1, minHeight: 0, aspectRatio: mobile ? "16/9" : "auto" }}> {s.tab} {[["left", "ph-caret-left", -1], ["right", "ph-caret-right", 1]].map(([side, icon, d]) => ( ))} {mobile && (
{HOMECP_HERO_SLIDES.map((x, k) => (
)}
{mobile ? : } ); } // Mobile: banner nhỏ dưới hero thành rail 1 hàng × 2 cột, swipe snap từng trang. function HomePageCpHeroSmallRail({ items, onNav }) { const rail = React.useRef(null); const [p, setP] = React.useState(0); const pages = []; for (let i = 0; i < items.length; i += 2) pages.push(i); const onScroll = () => { const el = rail.current; if (!el) return; setP(Math.max(0, Math.min(pages.length - 1, Math.round(el.scrollLeft / (el.clientWidth || 1))))); }; const go = (i) => { const el = rail.current; if (!el) return; el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" }); setP(i); }; return (
{pages.map((_, i) => (
); } // ————— Card sản phẩm (ảnh thật, hover đổi màu) ————— function HomePageCpCard({ product, onAdd, onOpen, style }) { const [hover, setHover] = React.useState(false); const image = hover && product.img2 ? product.img2 : product.img; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", minWidth: 0, ...style }}> onOpen && onOpen(product)} />
); } // Dãy sản phẩm cuộn ngang trên mobile (thay cho lưới 5–6 cột). const homecpRail = { display: "flex", gap: 8, overflowX: "auto", scrollSnapType: "x mandatory", scrollbarWidth: "none", paddingBottom: 6 }; const homecpRailItem = { flex: "0 0 calc((100% - 8px)/2)", scrollSnapAlign: "start" }; function homecpList(cat, brand) { const D = window.XedapApiData; const cats = cat == null ? null : [].concat(cat); let pool = cats ? D.PRODUCTS.filter((p) => cats.includes(p.category)) : D.PRODUCTS; if (brand && brand !== "Tất cả") pool = pool.filter((p) => p.brand === brand); return pool.length ? pool : (cats ? D.PRODUCTS.filter((p) => cats.includes(p.category)) : D.PRODUCTS); } // Trả tối đa n sản phẩm, không lặp lại khi kho ít hàng. function homecpPool(cat, from = 0, brand) { const src = homecpList(cat, brand); const off = src.length ? from % src.length : 0; const rotated = src.slice(off).concat(src.slice(0, off)); return (n) => rotated.slice(0, Math.min(n, rotated.length)); } function homecpBrands(cat) { return [...new Set(homecpList(cat).map((p) => p.brand))].slice(0, 8); } // ————— Dải "Gợi ý cho bạn" ————— function HomePageCpSuggest({ onAdd, onOpen }) { const mobile = useHomecpMobile(); const [page, setPage] = React.useState(0); const items = homecpPool(null, page * 5 + 2)(mobile ? 10 : 5); return (
Gợi ý cho bạn
{items.map((p, i) => )}
{!mobile && ( )}
); } // ————— Flashsale ————— const HOMECP_FLASH_TABS = [{ key: "deal", label: "Deal sốc hôm nay", activeImg: "https://cdn.hstatic.net/files/200001188264/file/deal_soc-12.png", mobileImg: "https://cdn2.cellphones.com.vn/x/media/wysiwyg/Web/landing-page/hang-moi-ve/hotDueHome-mb.png" }, { key: "hot", label: "Sản phẩm hot trend", activeImg: "https://cdn.hstatic.net/files/200001188264/file/deal_soc-13.png", mobileImg: "https://cdn2.cellphones.com.vn/x/media/wysiwyg/Web/landing-page/hang-moi-ve/hotTrendHome-mb.png" }, { key: "new", label: "Hàng mới về", activeImg: "https://cdn.hstatic.net/files/200001188264/file/deal_soc-14.png", mobileImg: "https://cdn2.cellphones.com.vn/x/media/wysiwyg/Web/landing-page/hang-moi-ve/newArrivalHome-mb.png" }]; const HOMECP_FLASH_CHIPS = [ { label: "Tất cả", cat: null }, { label: "Xe địa hình", cat: "Xe đạp địa hình" }, { label: "Xe đường phố", cat: "Xe đạp thể thao đường phố" }, { label: "Xe đua", cat: "Xe đạp đua" }, { label: "Xe trẻ em", cat: "Xe đạp trẻ em" }, { label: "Xe gấp & fixed", cat: ["Xe đạp gấp", "Xe đạp fixed gear"] }, ]; function homecpFlashIcons(src) { const seen = new Map(); src.forEach((p) => { if (!seen.has(p.brand)) seen.set(p.brand, p.img); }); return [...seen].slice(0, 9).map(([label, img]) => ({ label, img })); } function HomePageCpFlash({ onAdd, onOpen }) { const D = window.XedapApiData; const mobile = useHomecpMobile(); const [tab, setTab] = React.useState("deal"); const [chip, setChip] = React.useState(0); const [brand, setBrand] = React.useState("Tất cả"); const [page, setPage] = React.useState(0); const [left, setLeft] = React.useState(9 * 3600 + 9 * 60 + 48); React.useEffect(() => { const id = setInterval(() => setLeft((s) => (s <= 0 ? 12 * 3600 : s - 1)), 1000); return () => clearInterval(id); }, []); React.useEffect(() => { setPage(0); setBrand("Tất cả"); }, [tab, chip]); React.useEffect(() => setPage(0), [brand]); const pad = (n) => String(n).padStart(2, "0"); const digits = [pad(Math.floor(left / 3600)), pad(Math.floor((left % 3600) / 60)), pad(left % 60)]; const c = HOMECP_FLASH_CHIPS[chip]; const cats = c.cat == null ? null : [].concat(c.cat); let base = cats ? D.PRODUCTS.filter((p) => cats.includes(p.category)) : D.PRODUCTS; if (tab === "new") base = [...base].reverse(); if (tab === "hot") base = base.slice(0, Math.max(10, Math.ceil(base.length / 2))); const icons = homecpFlashIcons(base); const src = brand === "Tất cả" ? base : base.filter((p) => p.brand === brand); const pages = Math.max(1, Math.ceil(src.length / 5)); const items = mobile ? src.slice(0, 10) : src.slice(page * 5, page * 5 + 5); const go = (d) => setPage((p) => (p + d + pages) % pages); const round = (side) => ({ position: "absolute", top: "50%", [side]: -6, transform: "translateY(-50%)", width: 30, height: 62, border: 0, borderRadius: side === "left" ? "0 999px 999px 0" : "999px 0 0 999px", cursor: "pointer", background: "rgba(255,255,255,.88)", color: "#0F172A", fontSize: "calc(13px + 7px*var(--ts))", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 3, boxShadow: "0 4px 14px rgba(11,27,63,.28)" }); return (
{HOMECP_FLASH_TABS.map((t) => { const on = t.key === tab; return ( ); })}
{HOMECP_FLASH_CHIPS.map((x, i) => ( ))}
{[{ label: "Tất cả", img: null }, ...icons].map((x) => { const on = x.label === brand; return ( ); })}
{items.map((p, i) => )}
{pages > 1 && !mobile && ( )}
); } // ————— Khối danh mục lớn: banner dọc + tab + lưới 4x2 ————— const HOMECP_SECTIONS = [ { key: "mtb", title: "Xe đạp trẻ em", banner: HOMECP_IMG.mtb, promo: ["MTB", "Giảm đến", "2 Triệu"], banner2: HOMECP_IMG.ebike, promo2: ["Phụ kiện MTB", "Đồng giá từ", "199K"], tabs: [ { label: "Địa hình phổ thông", cat: "Xe đạp địa hình", from: 0 }, { label: "Địa hình cao cấp", cat: "Xe đạp địa hình", from: 4 }, { label: "Khung sườn MTB", cat: "Xe đạp địa hình", from: 8 }, ] }, { key: "city", title: "Xe đạp địa hình", banner: HOMECP_IMG.city, promo: ["Touring", "Chỉ từ", "3.9 Triệu"], banner2: HOMECP_IMG.mtb, promo2: ["City / Hybrid", "Ưu đãi đến", "1.5 Triệu"], tabs: [ { label: "Touring", cat: "Xe đạp thể thao đường phố", from: 0 }, { label: "City / Hybrid", cat: "Xe đạp thể thao đường phố", from: 4 }, { label: "Fixed gear", cat: ["Xe đạp fixed gear", "Xe đạp thể thao đường phố"], from: 0 }, ] }, { key: "road", title: "Xe đạp touring", banner: HOMECP_IMG.road, promo: ["Road Bike", "Trả góp", "0%"], banner2: HOMECP_IMG.city, promo2: ["Gravel", "Giảm thêm", "10%"], tabs: [ { label: "Road nhôm", cat: "Xe đạp đua", from: 0 }, { label: "Road carbon", cat: "Xe đạp đua", from: 4 }, { label: "Gravel", cat: "Xe đạp đua", from: 6 }, ] }, { key: "kids", title: "Xe đạp gấp", banner: HOMECP_IMG.ebike, promo: ["Trẻ em", "Chỉ từ", "1.29 Triệu"], banner2: HOMECP_IMG.road, promo2: ["Xe gấp", "Giảm đến", "800K"], tabs: [ { label: "Xe trẻ em", cat: "Xe đạp trẻ em", from: 0 }, { label: "Xe gấp & fixed gear", cat: ["Xe đạp gấp", "Xe đạp fixed gear"], from: 0 }, { label: "Xe đạp nữ & mini", cat: ["Xe đạp trẻ em", "Xe đạp gấp", "Xe đạp fixed gear"], from: 3 }, ] }, { key: "ebike", title: "Xe đạp đua", banner: HOMECP_IMG.ebike, promo: ["E-Bike", "Trả góp", "0%"], banner2: HOMECP_IMG.city, promo2: ["Pin & sạc", "Giảm đến", "1 Triệu"], tabs: [ { label: "Trợ lực đô thị", cat: "Xe đạp thể thao đường phố", from: 2 }, { label: "Trợ lực địa hình", cat: "Xe đạp địa hình", from: 6 }, { label: "Xe gấp trợ lực", cat: "Xe đạp gấp", from: 1 }, ] }, { key: "touring", title: "Phụ tùng", banner: HOMECP_IMG.road, promo: ["Touring", "Chỉ từ", "6.9 Triệu"], banner2: HOMECP_IMG.mtb, promo2: ["Gravel", "Ưu đãi đến", "2 Triệu"], tabs: [ { label: "Touring đường dài", cat: "Xe đạp thể thao đường phố", from: 1 }, { label: "Gravel", cat: "Xe đạp đua", from: 3 }, { label: "Khung sườn & phụ tùng", cat: ["Xe đạp đua", "Xe đạp địa hình"], from: 5 }, ] }, ]; function HomePageCpSection({ section, onAdd, onOpen }) { const mobile = useHomecpMobile(); const [tab, setTab] = React.useState(0); const [brand, setBrand] = React.useState("Tất cả"); const t = section.tabs[tab]; const brands = ["Tất cả", ...homecpBrands(t.cat)]; const items = homecpPool(t.cat, t.from, brand)(4); return (

{section.title}

{section.tabs.map((x, i) => ( ))}
{!mobile && onOpen && onOpen(items[0])} style={{ fontSize: 13, fontWeight: 600, color: "var(--muted-foreground)", cursor: "pointer", whiteSpace: "nowrap" }}>Xem tất cả }
{brands.map((b) => ( ))}
{items.map((p, i) => )}
); } // ————— Dải phụ kiện nhỏ ————— const HOMECP_ACCESSORIES = [ { label: "Mũ bảo hiểm", img: "https://api.xedap.vn/products/Ph%E1%BB%A5%20ki%E1%BB%87n/flexi-black.jpg" }, { label: "Khoá chống trộm", img: "https://api.xedap.vn/wp-content/uploads/2020/07/520000040-850.jpg" }, { label: "Đèn chiếu sáng", img: "https://api.xedap.vn/products/Ph%E1%BB%A5%20ki%E1%BB%87n/GI/gi-61.jpg" }, { label: "Bơm & dụng cụ", img: "https://api.xedap.vn/wp-content/uploads/2024/09/B-4518-Black.jpg" }, { label: "Săm lốp", img: "https://api.xedap.vn/wp-content/uploads/2022/01/maxxis-pace-850.jpg" }, { label: "Yên & cọc yên", img: "https://api.xedap.vn/products/Ph%E1%BB%A5%20ki%E1%BB%87n/saddle-latte.jpg" }, { label: "Ghi đông", img: "https://api.xedap.vn/wp-content/uploads/2024/04/170000269-275.jpg" }, { label: "Bộ truyền động", img: "https://api.xedap.vn/products/SHIMANO/irdm-8200-gs.jpg" }, { label: "Baga – giá đèo", img: "https://api.xedap.vn/products/Ph%E1%BB%A5%20ki%E1%BB%87n/PK%20RAPTOR/ra-76.jpg" }, { label: "Quần áo đạp xe", img: "https://api.xedap.vn/products/SHIMANO/suki-green.jpeg" }, ]; function HomePageCpAccessoryStrip({ onNav, slot }) { const mobile = useHomecpMobile(); if (mobile) return (
banner mobile — 424×71
); return (
onNav && onNav("Phụ kiện")} style={{ display: "block", cursor: "pointer", borderRadius: 16, overflow: "hidden" }}> Sắm thêm phụ kiện chất lượng
); } // ————— Phụ kiện & bảo dưỡng: 3 banner + dải icon danh mục ————— const HOMECP_ACC_BANNERS = [ { slot: "Banner_1", w: 456, h: 260, title: "Trang bị cho người đạp", cta: "Khám phá ngay" }, { slot: "Banner_2", w: 456, h: 260, title: "Chăm sóc & bảo dưỡng", cta: "Khám phá ngay" }, { slot: "Banner_3", w: 456, h: 260, title: "Phụ tùng thay thế", cta: "Khám phá ngay" }, ]; const HOMECP_ACC_TILES = HOMECP_ACCESSORIES.concat([ { label: "Mũ trẻ em", img: HOMECP_ACCESSORIES[0].img }, { label: "Đồ bảo hộ", img: HOMECP_ACCESSORIES[9].img }, { label: "Bình nước & gá", img: HOMECP_ACCESSORIES[3].img }, { label: "Dầu xích & vệ sinh", img: HOMECP_ACCESSORIES[3].img }, { label: "Bàn đạp", img: HOMECP_ACCESSORIES[7].img }, { label: "Chuông & gương", img: HOMECP_ACCESSORIES[2].img }, ]); function HomePageCpDualPanels({ onNav }) { const mobile = useHomecpMobile(); const strip = React.useRef(null); const bannerRail = React.useRef(null); const [bi, setBi] = React.useState(0); const slide = (d) => { const el = strip.current; if (el) el.scrollBy({ left: d * el.clientWidth * 0.8, behavior: "smooth" }); }; const onBannerScroll = () => { const el = bannerRail.current; if (!el) return; const i = Math.round(el.scrollLeft / (el.clientWidth || 1)); setBi(Math.max(0, Math.min(HOMECP_ACC_BANNERS.length - 1, i))); }; const goBanner = (i) => { const el = bannerRail.current; if (el) el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" }); }; const tilePages = Math.ceil(HOMECP_ACC_TILES.length / 3); const [tp, setTp] = React.useState(0); const tileStep = () => { const el = strip.current; if (!el) return 0; const t = el.children[0]; return t ? (t.offsetWidth + 12) * 3 : el.clientWidth; }; const onTileScroll = () => { const el = strip.current; if (!el) return; if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 2) { setTp(tilePages - 1); return; } const s = tileStep() || 1; const i = Math.round(el.scrollLeft / s); setTp(Math.max(0, Math.min(tilePages - 1, i))); }; const goTiles = (i) => { const el = strip.current; if (!el) return; const max = el.scrollWidth - el.clientWidth; el.scrollTo({ left: Math.min(i * tileStep(), max), behavior: "smooth" }); setTp(Math.max(0, Math.min(tilePages - 1, i))); }; React.useEffect(() => { if (!mobile) return; const t = setInterval(() => { const el = strip.current; if (!el) return; const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 2; setTp((p) => { const next = atEnd ? 0 : Math.min(p + 1, tilePages - 1); const max = el.scrollWidth - el.clientWidth; el.scrollTo({ left: Math.min(next * tileStep(), max), behavior: "smooth" }); return next; }); }, 3200); return () => clearInterval(t); }, [mobile, tilePages]); const arrow = (side) => ({ position: "absolute", top: 52, [side]: -18, transform: "translateY(-50%)", width: 40, height: 40, borderRadius: 999, border: "1px solid rgba(15,23,42,.10)", background: "#fff", boxShadow: "0 6px 18px rgba(15,23,42,.12)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "calc(13px + 5px*var(--ts))", color: "var(--foreground)", zIndex: 2 }); return (

Phụ kiện & bảo dưỡng

{mobile && (
{HOMECP_ACC_BANNERS.map((b, i) => (
)}
{!mobile && } {!mobile && } {mobile && (
{Array.from({ length: tilePages }).map((_, i) => (
)}
); } // ————— Hàng đã xem ————— function HomePageCpViewed({ onAdd, onOpen }) { const mobile = useHomecpMobile(); const items = homecpPool(null, 9)(mobile ? 10 : 5); return (

Sản phẩm bạn đã xem

{items.map((p, i) => )}
); } // ————— Video review ————— function HomePageCpVideos({ onOpen }) { const D = window.XedapApiData; const mobile = useHomecpMobile(); const vids = [ { title: "Đánh giá RAPTOR Mocha 2B sau 500 km", p: D.PRODUCTS[0], cover: "https://cdn.hstatic.net/files/200001188264/file/wqfgamat7efaqmfixly8dyhg4sslqaagkeisf_tplv-photomode-zoomcover_720_720.jpeg" }, { title: "MTB dưới 6 triệu nên mua xe nào?", p: D.PRODUCTS[6], cover: "https://cdn.hstatic.net/files/200001188264/file/ekfbf6gci2uileaacngibu9exvoanhizbhys4_tplv-photomode-zoomcover_720_720.jpeg" }, { title: "Road JAVA vs GIANT TCR – chọn sao?", p: D.PRODUCTS[12], cover: "https://cdn.hstatic.net/files/200001188264/file/yqwy5qhaaokolk8jkfl3eaqm8aewga6ekapdg_tplv-photomode-zoomcover_720_720.avif" }, { title: "Chọn xe đạp cho bé 6–9 tuổi", p: D.PRODUCTS[18], cover: "https://cdn.hstatic.net/files/200001188264/file/kviblqubdvo7ub2eyfbg7qevanaafyfcacqa1_tplv-photomode-zoomcover_720_720.avif" }, ]; return (
{mobile ? : (
{vids.map((v) => )}
)}
); } // Mobile: review rail cuộn ngang, mỗi khung nhìn ~1,5 thẻ để thẻ rộng hơn, không mất chữ. function HomePageCpVideoRail({ vids, onOpen }) { return (
{vids.map((v) => (
))}
); } function HomePageCpVideoCard({ v, onOpen }) { return ( ); } // ————— Ưu đãi 2 cột + thương hiệu + dịch vụ ————— // Mobile: 4 banner ưu đãi thành rail 1 hàng × 2 cột, snap từng trang. function HomePageCpOffersRail({ col }) { const rail = React.useRef(null); const [p, setP] = React.useState(0); const pages = []; for (let i = 0; i < col.items.length; i += 2) pages.push(i); const onScroll = () => { const el = rail.current; if (!el) return; setP(Math.max(0, Math.min(pages.length - 1, Math.round(el.scrollLeft / (el.clientWidth || 1))))); }; const go = (i) => { const el = rail.current; if (!el) return; el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" }); setP(i); }; return (
{pages.map((start) => (
{col.items.slice(start, start + 2).map((it, k) => { const i = start + k; return ; })}
))}
{pages.map((_, i) => (
); } function HomePageCpOfferBanner({ col, i, onNav }) { return ( onNav && onNav(col.title)} style={{ display: "block", position: "relative", aspectRatio: "600/200", cursor: "pointer", overflow: "hidden", background: col.banners[i] ? "#F4F6FB" : "repeating-linear-gradient(135deg,#EDF1FA 0 10px,#E3E9F7 10px 20px)" }}> {col.banners[i] ? : banner {i + 1}} ); } function HomePageCpOffers({ onNav }) { const mobile = useHomecpMobile(); const cols = [ { title: "Ưu đãi học sinh – sinh viên", items: [1, 2, 3, 4], banners: [null, null, null, null] }, { title: "Ưu đãi thanh toán", items: [1, 2, 3, 4], banners: [null, null, null, null] }, ]; return (
{cols.map((c) => (

{c.title}

{c.items.map((it, i) => )}
))}
); } function HomePageCpBrandLogoSlider({ logos }) { const rail = React.useRef(null); const pages = []; for (let i = 0; i < logos.length; i += 4) pages.push(logos.slice(i, i + 4)); const [p, setP] = React.useState(0); const onScroll = () => { const el = rail.current; if (!el) return; setP(Math.max(0, Math.min(pages.length - 1, Math.round(el.scrollLeft / (el.clientWidth || 1))))); }; const go = (i) => { const el = rail.current; if (!el) return; el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" }); setP(i); }; return (
{pages.map((pg, pi) => (
{pg.map((b, i) => (
= 2 ? "1px solid var(--border)" : "none" }}>
))}
))}
{pages.map((_, i) => (
); } function HomePageCpBrandRow({ onNav }) { const mobile = useHomecpMobile(); const P = window.KitData.PARTNERS || []; return (

Chuyên trang thương hiệu

{[{ n: "RAPTOR", img: HOMECP_IMG.mtb, t: "Sale địa hình đến 25%" }, { n: "JAVA", img: HOMECP_IMG.road, t: "Road carbon chính hãng" }, { n: "GIANT", img: HOMECP_IMG.city, t: "Touring & city bike" }].map((b) => ( onNav && onNav(b.n)} style={{ position: "relative", display: "block", overflow: "hidden", background: "#0F172A", cursor: "pointer", minHeight: 132 }}>
{b.n} {b.t}
))}
{mobile ? : (
{P.slice(0, 12).map((b, i) => (
= 6 ? "1px solid var(--border)" : "none" }}>
))}
)}
); } function HomePageCpServiceBanner({ onNav }) { const mobile = useHomecpMobile(); const stats = [["8%", "Chiết khấu cho khách hàng thân thiết"], ["1%", "Hoàn tiền mọi đơn trả góp"], ["24h", "Giao xe lắp sẵn nội thành"]]; return (
onNav && onNav("service")} style={{ marginTop: mobile ? 16 : 24, background: "#B91C1C", color: "#fff", display: "grid", gridTemplateColumns: mobile ? "minmax(0,1fr)" : "minmax(0,1.1fr) repeat(3,minmax(0,1fr))", alignItems: mobile ? "start" : "center", gap: mobile ? 14 : 24, padding: mobile ? "18px 16px" : "22px 26px", cursor: "pointer" }}>
Xe đạp doanh nghiệp
Mua số lượng lớn cho công ty, trường học, khu nghỉ dưỡng
{stats.map((s) => (
{s[0]} {s[1]}
))}
); } function HomePageCpNews() { const D = window.XedapApiData; const mobile = useHomecpMobile(); const posts = [ "Chọn cỡ khung xe đạp theo chiều cao: bảng tra nhanh", "5 lỗi thường gặp khi bảo dưỡng xích và cách xử lý", "Đạp xe 30 phút mỗi ngày thay đổi cơ thể ra sao", "Kinh nghiệm đạp xe đường dài Hà Nội – Ninh Bình", "Nên chọn phanh đĩa dầu hay phanh đĩa cơ?", ]; return (

Tin tức

Xem tất cả
{(mobile ? posts.slice(0, 4) : posts).map((t, i) => (

{t}

 ))}
); } // ————— Flash sale giờ vàng: ribbon đỏ + tab khung giờ + đếm ngược + hàng card có thanh "đã bán" ————— const HOMECP_SLOT_DATES = [{ key: "d1", label: "19/09" }, { key: "d2", label: "20/09" }]; const HOMECP_SLOT_TABS = [ { key: "s1", date: "d1", time: "09-11h", label: "09-11h 19/09", state: "done" }, { key: "s2", date: "d1", time: "14-16h", label: "14-16h 19/09", state: "live" }, { key: "s3", date: "d1", time: "20-22h", label: "20-22h 19/09", state: "soon" }, { key: "s4", date: "d2", time: "09-11h", label: "09-11h 20/09", state: "soon" }, { key: "s5", date: "d2", time: "14-16h", label: "14-16h 20/09", state: "soon" }, { key: "s6", date: "d2", time: "20-22h", label: "20-22h 20/09", state: "soon" }, ]; const homecpSlotPrice = (n) => Number(n || 0).toLocaleString("vi-VN") + "đ"; function HomePageCpSlotCard({ product, sold, quota, onOpen, mobile }) { const pct = Math.min(100, Math.round((sold / quota) * 100)); const off = product.originalPrice && product.originalPrice > product.price ? Math.round((1 - product.price / product.originalPrice) * 100) : 0; return ( { e.preventDefault(); onOpen && onOpen(product); }} style={{ flex: mobile ? "0 0 calc((100% - 8px)/2)" : "0 0 214px", scrollSnapAlign: "start", display: "flex", flexDirection: "column", gap: 8, background: "#fff", borderRadius: 12, padding: 10, textDecoration: "none", color: "var(--foreground)", boxShadow: "0 2px 10px rgba(11,27,63,.18)" }}>
{product.name} {off ? Giảm {off}% : null}

{product.name}

{homecpSlotPrice(product.price)} {product.originalPrice ? {homecpSlotPrice(product.originalPrice)} : null}
55 ? "#fff" : "#0B1BA8" }}>Đã bán {sold}/{quota} suất
); } function HomePageCpFlashSlot({ onOpen }) { const D = window.XedapApiData; const mobile = useHomecpMobile(); const [slot, setSlot] = React.useState("s2"); const [date, setDate] = React.useState("d1"); const [left, setLeft] = React.useState(1 * 3600 + 38 * 60 + 43); const railRef = React.useRef(null); React.useEffect(() => { const id = setInterval(() => setLeft((s) => (s <= 0 ? 2 * 3600 : s - 1)), 1000); return () => clearInterval(id); }, []); const pad = (n) => String(n).padStart(2, "0"); const digits = ["00", pad(Math.floor(left / 3600)), pad(Math.floor((left % 3600) / 60)), pad(left % 60)]; const idx = HOMECP_SLOT_TABS.findIndex((t) => t.key === slot); const slotState = (HOMECP_SLOT_TABS[idx] || {}).state; const items = homecpPool(null, idx * 6)(12); const scroll = (d) => railRef.current && railRef.current.scrollBy({ left: d * 226 * 3, behavior: "smooth" }); const arrow = (side) => ({ position: "absolute", top: "50%", [side]: -6, transform: "translateY(-50%)", width: 30, height: 62, border: 0, cursor: "pointer", background: "rgba(255,255,255,.88)", color: "#0F172A", fontSize: "calc(13px + 7px*var(--ts))", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: side === "left" ? "0 999px 999px 0" : "999px 0 0 999px", zIndex: 3, boxShadow: "0 4px 14px rgba(11,27,63,.28)" }); return (
Flash sale giờ vàng
{!mobile ? (
{HOMECP_SLOT_TABS.filter((t) => t.date === "d1").map((t) => { const on = t.key === slot; return ( ); })}
{slotState === "live" ? "Kết thúc sau" : "Bắt đầu sau"}
{digits.map((d, k) => ( {k > 0 && :} {d} ))}
) : (
{HOMECP_SLOT_DATES.map((d) => { const on = d.key === date; return ( ); })}
{HOMECP_SLOT_TABS.filter((t) => t.date === date).map((t) => { const on = t.key === slot; return ( ); })}
{slotState === "live" ? "Kết thúc sau" : "Bắt đầu sau"}
{digits.map((d, k) => ( {k > 0 && :} {d} ))}
)}
{items.map((p, i) => )}
{!mobile && } {!mobile && }

Áp dụng khi thanh toán online thành công — mỗi số điện thoại mua tối đa 1 sản phẩm cùng loại — không áp dụng đồng thời khuyến mại khác.

); } function HomePageCpUsp() { const mobile = useHomecpMobile(); return (
Trả chậm 0% · Miễn phí giao hàng · Bảo hành đến 5 năm · Miễn phí bảo dưỡng
); } function HomePageCpBackToTop() { const [show, setShow] = React.useState(false); const mobileFab = useHomecpMobile(); React.useEffect(() => { const onScroll = () => setShow(window.scrollY > 600); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } function HomePageCp({ onAdd, onOpen }) { const mobile = useHomecpMobile(); const nav = () => onOpen && onOpen(window.XedapApiData.PRODUCTS[0]); return (
{mobile ? ( ) : (
)} {mobile && } {HOMECP_SECTIONS.slice(0, 2).map((s) => )} {HOMECP_SECTIONS.slice(2, 4).map((s) => )} {HOMECP_SECTIONS.slice(4).map((s) => )}
); } Object.assign(window, { HomePageCp, HomePageCpRailMobile, HomePageCpMenu, HomePageCpMenuFlyout, HomePageCpFlashSlot, homecpFocusRail, useHomecpMobile });