export default function ProductDetail() {
    return (
        <>
            <div className="product-detail-page container">
                <div className="pd-info-container static bg-white rounded-[24px] p-6 mb-6">
                    <h1 className="leading-8 text-[#004BA4] text-24 mb-6 font-600">
                    {" "}
                    HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX 3060 12GB{" "}
                    </h1>
                    <div className="gap-6 flex flex-wrap items-start leading-[18px]">
                    <div className="col-left-group w-[424px] sticky top-[90px]">
                        <div className="pd-image-top mb-3">
                        <a
                            className="MagicZoom"
                            id="Zoomer"
                            rel="selectors-effect-speed: 600"
                            href="images/product-1.jpg"
                        >
                            <img src="images/product-1.jpg" alt="" />
                        </a>
                        <a
                            href="javascript:void(0)"
                            className="pd-image-btn"
                        />
                        <a
                            href="javascript:void(0)"
                            className="pd-image-btn btn-next"
                        />
                        </div>
                        <div className="pd-gallery-list">
                        <div className="swiper w-full" id="js-pd-gallery">
                            <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <a
                                href="images/product-1.jpg"
                                rel="zoom-id:Zoomer"
                                rev="images/product-1.jpg"
                                >
                                <img src="images/product-1.jpg" alt="" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a
                                href="images/product-2.jpg"
                                rel="zoom-id:Zoomer"
                                rev="images/product-2.jpg"
                                >
                                <img src="images/product-2.jpg" alt="" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a
                                href="images/product-3.jpg"
                                rel="zoom-id:Zoomer"
                                rev="images/product-3.jpg"
                                >
                                <img src="images/product-3.jpg" alt="" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a
                                href="images/product-4.jpg"
                                rel="zoom-id:Zoomer"
                                rev="images/product-4.jpg"
                                >
                                <img src="images/product-4.jpg" alt="" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a
                                href="images/product-5.jpg"
                                rel="zoom-id:Zoomer"
                                rev="images/product-5.jpg"
                                >
                                <img src="images/product-5.jpg" alt="" />
                                </a>
                            </div>
                            <div className="swiper-slide">
                                <a
                                href="images/product-6.jpg"
                                rel="zoom-id:Zoomer"
                                rev="images/product-6.jpg"
                                >
                                <img src="images/product-6.jpg" alt="" />
                                </a>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div className="col-middle-group w-[464px]">
                        <div className="pb-3 mb-3 border-b border-[#DEE4EC] flex flex-wrap items-center gap-2">
                        <button type="button" className="m-0 flex items-center gap-1">
                            <i className="star star-1 star-2 star-3 star-4 star-5" />
                            <span className="font-500"> (0) </span>
                        </button>
                        <i className="w-[1px] h-4 bg-[#DEE4EC]" />
                        <p className="m-0">
                            {" "}
                            Lượt xem: <span className="text-[#004BA4] font-500">0</span>{" "}
                        </p>
                        <i className="w-[1px] h-4 bg-[#DEE4EC]" />
                        <p className="m-0">
                            Tình trạng:
                            <span className="font-500 text-[#00AD4F]"> Còn hàng </span>
                            <span className="font-500 red"> Liên hệ </span>
                        </p>
                        </div>
                        <div className="mb-3 pd-summary-group">
                        <p className="leading-6 mb-2 text-16 font-600"> Thông số sản phẩm </p>
                        <div>
                            <div className="item-circle">
                            {" "}
                            CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16 THREAD{" "}
                            </div>
                            <div className="item-circle">
                            {" "}
                            RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz{" "}
                            </div>
                            <div className="item-circle">
                            {" "}
                            VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6{" "}
                            </div>
                        </div>
                        </div>
                        {/* Deal */}
                        <div className="pd-deal-group rounded-[12px] bg-[#FEF2F2] overflow-hidden border border-[#FA354A] ">
                        <div className="group-title p-2 bg-[linear-gradient(270.05deg,#CB0F23_0.04%,#FF3246_99.97%)] flex items-center flex-wrap justify-between gap-2">
                            <p className="m-0 leading-7 font-600 text-18 flex items-center gap-[6px] text-white">
                            <i className="icons icon-flame animation-beat" />
                            <span> BIG SALE </span>
                            </p>
                            <div className="relative bg-[#EBEBEB] rounded-[20px] text-center font-500 text-13 leading-[22px] px-[51px]">
                            <i
                                className="w-[22px] h-[28px] absolute left-[-8px] top-[-4px] z-[1] bg-no-repeat bg-center bg-[length:100%_100%] animation-bounce lazy"
                                data-bg="url(images/deal-icon-bolt.png)"
                            />
                            <i
                                className="bg-[#FFE078] absolute inset-0 max-w-[100%] rounded-[20px]"
                                style={{ width: "50%" }}
                            />
                            <span className="relative z-[1] block"> Còn: 3/5 sản phẩm </span>
                            </div>
                        </div>
                        <div className="p-4">
                            <div className="leading-8 flex items-baseline flex-wrap mb-1">
                            <p className="pd-price text-[#FF4E2A] font-bold mb-0 mr-3 text-24">
                                {" "}
                                48.990.000 đ{" "}
                            </p>
                            <del className="mr-2 text-16"> 52.000.000 đ </del>
                            <span className="pd-discount bg-[#FA354A] text-white leading-4 rounded-[20px] px-[6px] font-500">
                                {" "}
                                -6%{" "}
                            </span>
                            </div>
                            <div className="flex flex-wrap gap-1 font-500 text-[#2563EB] leading-[22px]">
                            <p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
                                {" "}
                                Giá đã bao gồm VAT{" "}
                            </p>
                            <p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
                                {" "}
                                Bảo hành theo từng linh kiện{" "}
                            </p>
                            <p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2"> Liên hệ </p>
                            </div>
                            <div className="my-2 flex items-center leading-6 gap-2">
                            <p className="m-0"> Kết thúc sau: </p>
                            <div className="deal-time-holder flex items-center gap-5 text-white text-14 font-600">
                                <p> 00 </p> <p> 00 </p> <p> 00 </p> <p> 00 </p>
                            </div>
                            </div>
                            <p className="m-0 font-600 text-13 leading-4 text-[#FF4E2A] mt-3">
                            {" "}
                            *KHÔNG ÁP DỤNG CỘNG DỒN CHƯƠNG TRÌNH KHUYẾN MẠI KHÁC{" "}
                            </p>
                        </div>
                        </div>
                        {/* Price */}
                        <div className="my-3 border border-[#FA354A] rounded-[12px] leading-[22px] p-4 pd-price-group">
                        <div className="leading-8 flex items-baseline flex-wrap mb-1">
                            <p className="pd-price text-[#FF4E2A] font-bold mb-0 mr-3 text-24">
                            {" "}
                            48.990.000 đ{" "}
                            </p>
                            <del className="mr-2 text-16"> 52.000.000 đ </del>
                            <span className="pd-discount bg-[#FA354A] text-white leading-4 rounded-[20px] px-[6px] font-500">
                            {" "}
                            -6%{" "}
                            </span>
                        </div>
                        <div className="flex flex-wrap gap-1 font-500 text-[#2563EB]">
                            <p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
                            {" "}
                            Giá đã bao gồm VAT{" "}
                            </p>
                            <p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2">
                            {" "}
                            Bảo hành theo từng linh kiện{" "}
                            </p>
                            <p className="m-0 bg-[#EFF6FF] rounded-[6px] px-2"> Liên hệ </p>
                        </div>
                        </div>
                        {/* Khuyến mại hấp dẫn */}
                        <div className="pd-offer-group mb-4 bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2 rounded-[8px]">
                        <div className="group-title font-600 text-white flex items-center leading-[22px] mb-2 px-2 text-16">
                            <i className="icons icon-discount mr-[6px] animation-tada" />
                            <span> Khuyến mại hấp dẫn </span>
                        </div>
                        <div className="rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                            <div className="item">
                            {" "}
                            Giảm ngay 100.000đ khi mua thêm Màn Hình Máy Tính.
                            </div>
                            <div className="item"> Giảm ngay 100.000đ khi mua thêm RAM </div>
                            <div className="item">
                            {" "}
                            Giảm ngay 100.000đ khi mua thêm Card màn hình{" "}
                            </div>
                        </div>
                        </div>
                        {/* Quà tặng và ưu đãi kèm theo */}
                        <div className="pd-offer-group mb-4 bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2 rounded-[8px]">
                        <div className="group-title font-600 text-white flex items-center leading-[22px] mb-2 px-2 text-16">
                            <i className="icons icon-gift mr-2 animation-tada -mt-1" />
                            <span> Quà tặng và ưu đãi kèm theo </span>
                        </div>
                        <div className="rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                            <div className="item">
                            {" "}
                            Giảm ngay 100.000đ khi mua thêm Màn Hình Máy Tính.
                            </div>
                            <div className="item"> Giảm ngay 100.000đ khi mua thêm RAM </div>
                            <div className="item">
                            {" "}
                            Giảm ngay 100.000đ khi mua thêm Card màn hình{" "}
                            </div>
                        </div>
                        </div>
                        {/* Mua sp */}
                        <div className="pd-button-group my-5 gap-2 grid grid-cols-2 text-18 font-500">
                        <button
                            type="button"
                            className="col-span-2 uppercase rounded-[12px] text-white h-[52px] border border-[#FFD83E] bg-[linear-gradient(148.21deg,#FFD83E_-14.02%,#FF4E2A_70.14%)]"
                            aria-label="Mua sản phẩm"
                        >
                            {" "}
                            Mua ngay{" "}
                        </button>
                        <button
                            type="button"
                            className="col-span-1 flex items-center justify-center uppercase rounded-[12px] text-white h-[52px] border border-[#259AFF] bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)]"
                            aria-label="Mua sản phẩm"
                        >
                            <i className="icons icon-cart !w-[22px] !h-[22px] mr-[6px]" />
                            <span> Thêm vào giỏ </span>
                        </button>
                        <button
                            type="button"
                            className="col-span-1 flex items-center justify-center uppercase rounded-[12px] text-white h-[52px] border border-[#259AFF] bg-[linear-gradient(165.29deg,#259AFF_8.53%,#114CDD_93.19%)]"
                            aria-label="Mua sản phẩm"
                        >
                            <i className="icons icon-card w-[22px] h-[22px] mr-[6px]" />
                            <span> Mua trả góp </span>
                        </button>
                        </div>
                        <p className="m-0 flex items-center gap-3 text-16 leading-[22px]">
                        <i className="icons icon-truck-2 !w-6" />
                        <span> Miễn phí giao hàng trên toàn quốc </span>
                        </p>
                    </div>
                    <div className="col-right-group w-[264px] sticky top-[90px]">
                        <div className="group relative border border-[#D6DAE1] leading-[38px] rounded-[8px] pl-3 pr-2 mb-3">
                        <p className="m-0 flex items-center justify-between cursor-pointer">
                            <span> Xem chi nhánh còn hàng </span>
                            <i className="bx bx-chevron-down text-[#A0A5AC] text-18 transition-all group-hover:rotate-[-180deg]" />
                        </p>
                        <div className="absolute shadow border bg-white opacity-0 z-[-1] right-0 top-[100%] transition group-hover:opacity-100 group-hover:z-[5] leading-[22px] p-1 border border-[#D6DAE1] rounded-[12px] w-full">
                            <div className="my-3">
                            <b className="block underline px-2 font-600 mb-2">
                                Showroom Miền Bắc:
                            </b>
                            <a
                                href="https://goo.gl/maps/56ARHjWKoVhpWBCF6"
                                target="_blank"
                                rel="nofollow"
                                className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
                            >
                                <i className="icons icon-location" />
                                <span> 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội </span>
                            </a>
                            <a
                                href="https://g.page/hoanghapc?share"
                                target="_blank"
                                rel="nofollow"
                                className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
                            >
                                <i className="icons icon-location" />
                                <span> 94E-94F Đường Láng, Phường Đống Đa, Hà Nội </span>
                            </a>
                            </div>
                            <div className="my-3">
                            <b className="block underline px-2 font-600 mb-2">
                                Showroom Miền Trung:
                            </b>
                            <a
                                href="https://goo.gl/maps/1HQrD6mdf4VMYccs6"
                                target="_blank"
                                rel="nofollow"
                                className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
                            >
                                <i className="icons icon-location" />
                                <span>72 Lê Lợi, Thành Vinh, Nghệ An </span>
                            </a>
                            </div>
                            <div className="my-3">
                            <b className="block underline px-2 font-600 mb-2">
                                Showroom Miền Nam:
                            </b>
                            <a
                                href="https://g.page/hoanghapchcm?share"
                                target="_blank"
                                rel="nofollow"
                                className="flex gap-1 p-[6px_8px] rounded-[8px] mb-[1px] hover:bg-[#F2F2F2]"
                            >
                                <i className="icons icon-location" />
                                <span>
                                {" "}
                                K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh
                                </span>
                            </a>
                            </div>
                            <i className="block red my-3 px-2">
                            Chú ý: Sản phẩm có thể điều chuyển kho theo yêu cầu của quý khách.
                            </i>
                        </div>
                        </div>
                        {/* Yên Tâm Mua Sắm Tại HoangHaPC */}
                        <div className="pd-static-group mb-3 rounded-[12px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,#114CDD_100.92%)] p-1 pt-2">
                        <p className="group-title text-white leading-[21px] text-16 font-600 mb-2 text-center">
                            {" "}
                            Yên Tâm Mua Sắm Tại HoangHaPC{" "}
                        </p>
                        <div className="pd-static-list bg-white p-[16px_8px] leading-[18px] font-500 rounded-[8px]">
                            <p className="last:mb-0 mb-2 item-circle">
                            {" "}
                            Đội ngũ kỹ thuật tư vấn chuyên sâu{" "}
                            </p>
                            <p className="last:mb-0 mb-2 item-circle">
                            {" "}
                            Thanh toán thuận tiện{" "}
                            </p>
                            <p className="last:mb-0 mb-2 item-circle">
                            {" "}
                            Sản phẩm 100% chính hãng{" "}
                            </p>
                            <p className="last:mb-0 mb-2 item-circle">
                            {" "}
                            Bảo hành 1 đổi 1 tại nơi sử dụng{" "}
                            </p>
                            <p className="last:mb-0 mb-2 item-circle">
                            {" "}
                            Giá cạnh tranh nhất thị trường{" "}
                            </p>
                        </div>
                        </div>
                        {/* Liên Hệ Với Kinh Doanh Online */}
                        <div className="pd-static-group mb-3 rounded-[12px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,#114CDD_100.92%)] p-1 pt-2">
                        <p className="group-title text-white leading-[21px] text-16 font-600 mb-2 text-center">
                            {" "}
                            Liên Hệ Với Kinh Doanh Online{" "}
                        </p>
                        <div className="pd-static-list bg-white p-[16px_8px] leading-[18px] font-500 rounded-[8px]">
                            <div className="last:mb-0 mb-2 flex gap-2">
                            <i className="icons icon-phone" />
                            <p className="m-0">
                                Hotline Hà Nội:{" "}
                                <a href="tel:0969123666" className="red font-500">
                                {" "}
                                0969123666{" "}
                                </a>
                            </p>
                            </div>
                            <div className="last:mb-0 mb-2 flex gap-2">
                            <i className="icons icon-phone" />
                            <p className="m-0">
                                Hotline Vinh, Nghệ An:{" "}
                                <a href="tel:0988.163.666" className="red font-500">
                                {" "}
                                0988.163.666{" "}
                                </a>
                            </p>
                            </div>
                            <div className="last:mb-0 mb-2 flex gap-2">
                            <i className="icons icon-phone" />
                            <p className="m-0">
                                Hotline Hồ Chí Minh:{" "}
                                <a href="tel:0968.123.666" className="red font-500">
                                {" "}
                                0968.123.666{" "}
                                </a>
                            </p>
                            </div>
                            <div className="last:mb-0 mb-2 flex gap-2">
                            <i className="icons icon-phone" />
                            <p className="m-0">
                                Hotline Bảo Hành:{" "}
                                <a href="tel:1900.6100" className="red font-500">
                                {" "}
                                1900.6100{" "}
                                </a>
                            </p>
                            </div>
                        </div>
                        </div>
                        <div className="border border-[#0678DB] rounded-[12px] px-3 py-4 gap-[6px] flex flex-wrap items-center">
                        <a
                            href="https://hoanghapc.vn/media/lib/17-10-2022/qr-hoang-ha-pc-nhom.png"
                            data-fancybox=""
                            className="w-[110px]"
                        >
                            <img
                            data-src="https://hoanghapc.vn/media/lib/17-10-2022/qr-hoang-ha-pc-nhom.png"
                            alt="QR code"
                            width={110}
                            height={110}
                            className="block m-auto lazy"
                            />
                        </a>
                        <p className="m-0 font-500 w-[calc(100%-116px)]">
                            {" "}
                            Tham gia Cộng đồng "Cẩm Nang Build PC - Đồ Họa, Render, Giả Lập" để
                            theo dõi các ưu đãi dành riêng cho thành viên{" "}
                        </p>
                        </div>
                    </div>
                    </div>
                </div>
                <div className="pd-content-container flex flex-wrap items-baseline gap-6">
                    <div className="col-left w-[784px]">
                    <div className="pd-box-group bg-white mb-6 p-8 pt-6 rounded-[24px]">
                        <p className="group-title border-b border-[#D0D8E3] leading-[31px] font-600 text-24 mb-4 pb-4">
                        {" "}
                        Đánh giá HHPC CORE i7 14700 | 32G DDR5 | NVIDIA RTX 3060 12G{" "}
                        </p>
                        <div className="js-static-container static-container leading-[135%]">
                        <div className="js-static-content static-content text-16 leading-[22px] text-justify">
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                            <p>
                            {" "}
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
                            neque facere tenetur, harum maiores aperiam ratione veniam
                            molestias error sunt nostrum deleniti, beatae est? Est ipsam
                            dignissimos vel optio a!{" "}
                            </p>
                        </div>
                        <div className="static-btn">
                            <button
                            type="button"
                            aria-label="Xem thêm"
                            className="js-showmore-button"
                            >
                            Xem thêm <i className="bx bx-chevron-down" />
                            </button>
                            <button
                            type="button"
                            aria-label="Thu gọn"
                            className="js-showless-button"
                            >
                            Thu gọn <i className="bx bx-chevron-up" />
                            </button>
                        </div>
                        </div>
                    </div>
                    {/* Đánh giá và bình luận */}
                    <div className="pd-comment-container bg-white mb-6 p-8 pt-6 rounded-[24px] text-16 leading-[22px]">
                        <p className="leading-[31px] font-600 text-24 mb-4 pb-4">
                        {" "}
                        Đánh giá và bình luận{" "}
                        </p>
                        {/* Rating */}
                        <div className="pd-rating-conatiner mb-9" id="js-pd-rating">
                        <div className="flex flex-wrap justify-between gap-6">
                            <div className="w-[200px] text-center">
                            <p className="font-600 text-[40px] leading-[48px] mb-2"> 0 </p>
                            <p className="my-2 text-[#6B7280]"> 0 lượt đánh giá </p>
                            <i className="star star-3" />
                            <button
                                className="rating-btn block h-10 w-full text-white text-14 font-500 rounded-[30px] bg-btn uppercase mt-3"
                                type="button"
                                aria-label="đánh giá"
                            />
                            </div>
                            <div className="w-[calc(100%_-_224px)] text-14 font-500 leading-[18px] flex flex-col gap-4">
                            <div className="flex items-center justify-between gap-2 flex-wrap">
                                <p className="m-0 flex gap-[3px] w-[30px]">
                                {" "}
                                <span>5</span>{" "}
                                <i className="bx bxs-star text-[#FBBF24] text-16" />{" "}
                                </p>
                                <div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
                                <i
                                    className="max-w-[100%] bg-[#0678DB] absolute inset-0"
                                    style={{ width: "0%" }}
                                />
                                </div>
                                <p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
                            </div>
                            <div className="flex items-center justify-between gap-2 flex-wrap">
                                <p className="m-0 flex gap-[3px] w-[30px]">
                                <span>4</span>{" "}
                                <i className="bx bxs-star text-[#FBBF24] text-16" />
                                </p>
                                <div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
                                <i
                                    className="max-w-[100%] bg-[#0678DB] absolute inset-0"
                                    style={{ width: "0%" }}
                                />
                                </div>
                                <p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
                            </div>
                            <div className="flex items-center justify-between gap-2 flex-wrap">
                                <p className="m-0 flex gap-[3px] w-[30px]">
                                <span>3</span>{" "}
                                <i className="bx bxs-star text-[#FBBF24] text-16" />
                                </p>
                                <div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
                                <i
                                    className="max-w-[100%] bg-[#0678DB] absolute inset-0"
                                    style={{ width: "0%" }}
                                />
                                </div>
                                <p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
                            </div>
                            <div className="flex items-center justify-between gap-2 flex-wrap">
                                <p className="m-0 flex gap-[3px] w-[30px]">
                                <span>2</span>{" "}
                                <i className="bx bxs-star text-[#FBBF24] text-16" />
                                </p>
                                <div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
                                <i
                                    className="max-w-[100%] bg-[#0678DB] absolute inset-0"
                                    style={{ width: "0%" }}
                                />
                                </div>
                                <p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
                            </div>
                            <div className="flex items-center justify-between gap-2 flex-wrap">
                                <p className="m-0 flex gap-[3px] w-[30px]">
                                <span>1</span>{" "}
                                <i className="bx bxs-star text-[#FBBF24] text-16" />
                                </p>
                                <div className="relative bg-[#E8ECF6] overflow-hidden rounded-[30px] h-3 w-[calc(100%_-_71px)]">
                                <i
                                    className="max-w-[100%] bg-[#0678DB] absolute inset-0"
                                    style={{ width: "0%" }}
                                />
                                </div>
                                <p className="m-0 text-[#6B7280] w-[25px] text-right"> 0 </p>
                            </div>
                            </div>
                        </div>
                        <div className="pd-rating-form mt-8 hidden">
                            <div className="flex items-center mb-4 gap-4">
                            <p className="m-0"> Chọn đánh giá của bạn </p>
                            <div className="rating-comment clearfix">
                                <input
                                type="radio"
                                className="rating-input"
                                id="rating-input-review-0-5"
                                defaultValue={5}
                                data-title="Quá tuyệt vời"
                                name="user_post[rate]"
                                defaultChecked={true}
                                />
                                <label
                                htmlFor="rating-input-review-0-5"
                                className="rating-star js-rating-star"
                                data-title="Quá tuyệt vời"
                                />
                                <input
                                type="radio"
                                className="rating-input"
                                id="rating-input-review-0-4"
                                defaultValue={4}
                                data-title="Rất tốt"
                                name="user_post[rate]"
                                />
                                <label
                                htmlFor="rating-input-review-0-4"
                                className="rating-star js-rating-star"
                                data-title="Rất tốt"
                                />
                                <input
                                type="radio"
                                className="rating-input"
                                id="rating-input-review-0-3"
                                defaultValue={3}
                                data-title="Bình thường"
                                name="user_post[rate]"
                                />
                                <label
                                htmlFor="rating-input-review-0-3"
                                className="rating-star js-rating-star"
                                data-title="Bình thường"
                                />
                                <input
                                type="radio"
                                className="rating-input"
                                id="rating-input-review-0-2"
                                defaultValue={2}
                                data-title="Tạm được"
                                name="user_post[rate]"
                                />
                                <label
                                htmlFor="rating-input-review-0-2"
                                className="rating-star js-rating-star"
                                data-title="Tạm được"
                                />
                                <input
                                type="radio"
                                className="rating-input"
                                id="rating-input-review-0-1"
                                defaultValue={1}
                                data-title="Không thích"
                                name="user_post[rate]"
                                />
                                <label
                                htmlFor="rating-input-review-0-1"
                                className="rating-star js-rating-star"
                                data-title="Không thích"
                                />
                            </div>
                            <span
                                id="js-star-tip"
                                className="star-tip bg-[#2b8ae0] text-white rounded-[3px] relative px-2 leading-[26px]"
                            >
                                {" "}
                                Quá tuyệt vời{" "}
                            </span>
                            </div>
                            <div className="lg:grid grid-cols-2 gap-3">
                            <textarea
                                className="w-full block p-3 resize-none h-[100px] outline-none border border-[#DDDDDD] rounded-[12px]"
                                placeholder="Nhập đánh giá của bạn"
                                defaultValue={""}
                            />
                            <div className="grid lg:grid-cols-2 gap-2">
                                <input
                                type="text"
                                className="border border-[#DDDDDD] rounded-[8px] px-3"
                                placeholder="Họ tên*"
                                />
                                <input
                                type="tel"
                                className="border border-[#DDDDDD] rounded-[8px] px-3"
                                inputMode="numeric"
                                pattern="[0-9]{10,11}"
                                maxLength={11}
                                placeholder="Số điện thoại*"
                                />
                                <input
                                type="text"
                                className="border border-[#DDDDDD] rounded-[8px] px-3"
                                placeholder="Email*"
                                />
                                <button
                                type="button"
                                className="bg-btn text-white rounded-[8px]"
                                aria-label="Đánh giá"
                                >
                                {" "}
                                Gửi đánh giá{" "}
                                </button>
                            </div>
                            <p className="red font-600"> </p>
                            </div>
                        </div>
                        <div className="text-14 leading-[18px] mt-4" id="">
                            <div className="last:border-0 border-b border-[#DDDDDD] py-5">
                            <div className="flex items-center gap-2 mb-2">
                                <b className="font-600 capitalize"> tên khách hàng </b>
                                <i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
                                <span className="text-[#6B7280]"> 11-11-2025, 11:11 </span>
                            </div>
                            <div className="flex flex-wrap gap-3">
                                <i className="star star-3 scale-[0.8] ml-[-7px]" />
                                <div className="w-[calc(100%-98px)]">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
                                illum deserunt similique cumque accusantium qui assumenda
                                quod. Saepe illum beatae aspernatur odit, voluptatum voluptate
                                maiores dolore expedita similique officia consequuntur?
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                        {/* Comment */}
                        <div>
                        <div className="flex items-center justify-between leading-8 gap-2 mb-4">
                            <p className="m-0 text-18 font-500"> 0 Bình luận </p>
                            <div className="flex flex-wrap gap-2 text-14 font-500 pd-comment-btn">
                            <button
                                className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-8 hover:border-[#0678DB] hover:text-[#0678DB] current"
                                type="button"
                                aria-label="Đánh giá"
                            >
                                {" "}
                                Tất cả{" "}
                            </button>
                            <button
                                className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
                                type="button"
                                aria-label="Đánh giá"
                            >
                                {" "}
                                5 <i className="bxr bx-star" />{" "}
                            </button>
                            <button
                                className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
                                type="button"
                                aria-label="Đánh giá"
                            >
                                {" "}
                                4 <i className="bxr bx-star" />{" "}
                            </button>
                            <button
                                className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
                                type="button"
                                aria-label="Đánh giá"
                            >
                                {" "}
                                3 <i className="bxr bx-star" />{" "}
                            </button>
                            <button
                                className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
                                type="button"
                                aria-label="Đánh giá"
                            >
                                {" "}
                                2 <i className="bxr bx-star" />{" "}
                            </button>
                            <button
                                className="h-8 border border-[#D1D5DB] rounded-[40px] flex items-center gap-[3px] px-4 hover:border-[#0678DB] hover:text-[#0678DB]"
                                type="button"
                                aria-label="Đánh giá"
                            >
                                {" "}
                                1 <i className="bxr bx-star" />{" "}
                            </button>
                            </div>
                        </div>
                        <div className="border border-[#DDDDDD] rounded-[12px] overflow-hidden ">
                            <textarea
                            className="p-3 w-full resize-none h-[96px] outline-none border-none"
                            defaultValue={""}
                            />
                            <div className="border-t border-[#DDDDDD] bg-[#F5F6F7] p-[10px_12px] text-right">
                            <button
                                className="bg-btn text-white h-10 px-9 text-18 font-500 rounded-[30px]"
                                type="button"
                                aria-label="submit"
                            >
                                {" "}
                                GỬI{" "}
                            </button>
                            </div>
                        </div>
                        <div id="">
                            <div className="first:border-t first:mt-4 first:pt-4 border-[#D1D5DB] mb-5 flex gap-3 text-14 leading-[18px]">
                            <div className="w-10 h-10 rounded-full bg-[#9CA3AF] leading-10 text-center uppercase text-white font-600 overflow-hidden">
                                <span>p</span>
                                {/* <img src="images/avatar-admin.png" class="block w-full h-full"/> */}
                            </div>
                            <div className="w-[calc(100%_-_52px)]">
                                <div className="flex items-center gap-2 mb-1">
                                <b className="capitalize"> tên khách hàng </b>
                                <i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
                                <span className="text-[#6B7280]"> 11-11-2025, 11:11 </span>
                                </div>
                                <i className="star star-2" />
                                <div className="my-2">
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                Fugiat magnam ipsam pariatur mollitia ratione distinctio magni
                                corrupti ad expedita. Natus, ullam inventore. Amet
                                consequuntur aspernatur deserunt accusantium, tempore
                                blanditiis magni!
                                </div>
                                <div className="flex gap-2 leading-[30px]">
                                <button
                                    className="group flex items-center gap-[6px] border border-[#D1D5DB] px-3 rounded-[20px] hover:border-[#0678DB] hover:text-[#0678DB]"
                                    type="button"
                                    aria-label="actions"
                                >
                                    {" "}
                                    <i className="group-hover:text-[#0678DB] text-[#928FA8] bxr bx-heart" />{" "}
                                    0{" "}
                                </button>
                                <button
                                    className="group flex items-center gap-[6px] border border-[#D1D5DB] px-3 rounded-[20px] hover:border-[#0678DB] hover:text-[#0678DB]"
                                    type="button"
                                    aria-label="actions"
                                >
                                    {" "}
                                    <i className="group-hover:text-[#0678DB] text-[#928FA8] bxr bx-reply-stroke" />{" "}
                                    Trả lời{" "}
                                </button>
                                </div>
                                <div className="bg-[#F3F4F6] rounded-[12px] overflow-hidden mt-3">
                                <div className="first:border-0 flex items-start gap-3 p-3 border-t border-[#D1D5DB]">
                                    <div className="w-10 h-10 rounded-full bg-[#9CA3AF] leading-10 text-center uppercase text-white font-600 overflow-hidden">
                                    {/* <span>p</span> */}
                                    <img
                                        src="images/avatar-admin.png"
                                        className="block w-full h-full"
                                    />
                                    </div>
                                    <div className="w-[calc(100%_-_52px)]">
                                    <div className="flex items-center gap-2 mb-1">
                                        <b className="capitalize"> tên khách hàng </b>
                                        <span className="bg-[linear-gradient(70.1deg,#75798B_62.94%,#ADB5CD_100%)] text-white px-[6px] leading-[18px] rounded-[20px] font-500 text-10">
                                        {" "}
                                        Quản trị viên{" "}
                                        </span>
                                        <i className="bxr bxs-radio-circle text-[7px] text-[#6B7280]" />
                                        <span className="text-[#6B7280]">
                                        {" "}
                                        11-11-2025, 11:11{" "}
                                        </span>
                                    </div>
                                    <div className="my-2" style={{ whiteSpace: "pre-line" }}>
                                        Lorem ipsum dolor, sit amet consectetur adipisicing
                                        elit. Fugiat magnam ipsam pariatur mollitia ratione
                                        distinctio magni corrupti ad expedita. Natus, ullam
                                        inventore. Amet consequuntur aspernatur deserunt
                                        accusantium, tempore blanditiis magni!{" "}
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        {/* xem thêm */}
                        <div className="text-center mt-4">
                            <button
                            type="button"
                            className="border border-[#0678DB] text-[#0678DB] rounded-[30px] h-10 px-6 hover:bg-[#0678DB] hover:text-white"
                            aria-label="Xem thêm"
                            >
                            XEM THÊM{" "}
                            <i className="bx bx-chevron-down text-20 align-middle mt-[-3px]" />
                            </button>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div className="col-right w-[440px]">
                    {/* Thông số kỹ thuật */}
                    <div className="pd-box-group bg-white mb-6 px-4 py-6 rounded-[24px]">
                        <p className="group-title border-b border-[#D0D8E3] leading-[31px] font-600 text-24 mb-4 pb-4">
                        {" "}
                        Thông số kỹ thuật{" "}
                        </p>
                        <div className="pd-spec-group">
                        <table>
                            <tbody>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>STT</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>MÃ HÀNG</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>TÊN HÀNG</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>THỜI HẠN BẢO HÀNH</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>1</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>CPU</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/cpu-intel-core-ultra-7-265k">
                                    INTEL CORE ULTRA 7 265K UP 5.5GHz | 20 CORE | 20 THREAD
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>2</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>MAIN</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/mainboard-colorful-battle-ax-z890m-plus-v20">
                                    COLORFUL BATTLE-AX Z890M-PLUS V20 DDR5
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>3</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>TẢN NHIỆT</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/tan-nhiet-cpu-id-cooling-frozn-a620-pro-se-argb">
                                    ID-COOLING FROZN A620 PRO SE ARGB
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>12 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>4</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>RAM</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/ram-ddr5-teamgroup-t-create-expert-32gb-6000mhz">
                                    DDR5 TEAMGROUP T-CREATE EXPERT 32GB 6000MHz (2x16GB)
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>5</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>SSD</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/o-cung-ssd-teamgroup-g50-1tb">
                                    TEAMGROUP G50 1TB PCIE Gen4x4 - RW 5000MB/s
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>60 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>6</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <span style={{ color: "#000" }}>
                                    <strong>VGA</strong>
                                </span>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/vga-colorful-rtx-3060-nb-duo-12g-v4-l-v">
                                    COLORFUL RTX 3060 NB DUO 12G V4 L-V GDDR6
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>7</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>PSU</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/nguon-deepcool-pl750d-750w">
                                    DEEPCOOL PL750D 750W 80 PLUS BRONZE | ATX 3.1 | PCIE 5.1
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>60 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>8</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>CASE</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/vo-case-xigmatek-gaming-x-ii-3f-3fan-rgb">
                                    XIGMATEK GAMING X II 3F - 3FAN RGB
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }} />
                            </tr>
                            </tbody>
                        </table>
                        </div>
                        <a
                        href="#fancybox-spec"
                        data-fancybox=""
                        className="table m-auto mt-4 text-white leading-10 uppercase rounded-[40px] bg-btn font-500 text-16 px-6"
                        >
                        {" "}
                        Xem tất cả thông số{" "}
                        </a>
                        <div
                        className="pd-spec-group p-3"
                        id="fancybox-spec"
                        style={{ display: "none" }}
                        >
                        <table>
                            <tbody>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>STT</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>MÃ HÀNG</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>TÊN HÀNG</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>THỜI HẠN BẢO HÀNH</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>1</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>CPU</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/cpu-intel-core-ultra-7-265k">
                                    INTEL CORE ULTRA 7 265K UP 5.5GHz | 20 CORE | 20 THREAD
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>2</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>MAIN</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/mainboard-colorful-battle-ax-z890m-plus-v20">
                                    COLORFUL BATTLE-AX Z890M-PLUS V20 DDR5
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>3</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>TẢN NHIỆT</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/tan-nhiet-cpu-id-cooling-frozn-a620-pro-se-argb">
                                    ID-COOLING FROZN A620 PRO SE ARGB
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>12 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>4</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>RAM</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/ram-ddr5-teamgroup-t-create-expert-32gb-6000mhz">
                                    DDR5 TEAMGROUP T-CREATE EXPERT 32GB 6000MHz (2x16GB)
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>5</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>SSD</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/o-cung-ssd-teamgroup-g50-1tb">
                                    TEAMGROUP G50 1TB PCIE Gen4x4 - RW 5000MB/s
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>60 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>6</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <span style={{ color: "#000" }}>
                                    <strong>VGA</strong>
                                </span>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/vga-colorful-rtx-3060-nb-duo-12g-v4-l-v">
                                    COLORFUL RTX 3060 NB DUO 12G V4 L-V GDDR6
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>36 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>7</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>PSU</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/nguon-deepcool-pl750d-750w">
                                    DEEPCOOL PL750D 750W 80 PLUS BRONZE | ATX 3.1 | PCIE 5.1
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>60 THÁNG</strong>
                                </td>
                            </tr>
                            <tr>
                                <td style={{ textAlign: "center" }}>
                                <strong>8</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>CASE</strong>
                                </td>
                                <td style={{ textAlign: "center" }}>
                                <strong>
                                    <a href="https://hoanghapc.vn/vo-case-xigmatek-gaming-x-ii-3f-3fan-rgb">
                                    XIGMATEK GAMING X II 3F - 3FAN RGB
                                    </a>
                                </strong>
                                </td>
                                <td style={{ textAlign: "center" }} />
                            </tr>
                            </tbody>
                        </table>
                        </div>
                    </div>
                    {/* Tin tức mới nhất */}
                    <div className="pd-box-group bg-white mb-6 px-4 py-6 rounded-[24px]">
                        <p className="text-20 font-600 mb-4"> Tin tức mới nhất </p>
                        {/* limit: 5 */}
                        <div className="pd-article-holder flex flex-col gap-4">
                        <div className="art-item">
                            <a href="" className="art-img">
                            <img
                                src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
                                alt=""
                                width={1}
                                height={1}
                            />
                            </a>
                            <div className="art-text">
                            <a href="" className="art-title">
                                <h3>
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                                quidem asperiores provident dicta veniam deleniti eaque
                                repudiandae cum esse, ducimus officiis quibusdam pariatur
                                neque voluptates voluptas. Quisquam qui minus dolorum?
                                </h3>
                            </a>
                            <div className="art-summary">
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
                                obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
                                nostrum fugit facere illo quos. Ad error suscipit, quidem optio
                                aut laudantium at!
                            </div>
                            <div className="art-time">
                                <i className="bx bx-calendar-alt" />
                                <time>23/4/2024</time>
                                <i className="w-[1.5px] h-[12px] bg-[#A0A5AC] mx-1" />
                                <span>Mai Văn Học</span>
                            </div>
                            </div>
                        </div>
                        <div className="art-item">
                            <a href="" className="art-img">
                            <img
                                src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
                                alt=""
                                width={1}
                                height={1}
                            />
                            </a>
                            <div className="art-text">
                            <a href="" className="art-title">
                                <h3>
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                                quidem asperiores provident dicta veniam deleniti eaque
                                repudiandae cum esse, ducimus officiis quibusdam pariatur
                                neque voluptates voluptas. Quisquam qui minus dolorum?
                                </h3>
                            </a>
                            <div className="art-summary">
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
                                obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
                                nostrum fugit facere illo quos. Ad error suscipit, quidem optio
                                aut laudantium at!
                            </div>
                            <div className="art-time">
                                <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
                                <time>23/4/2024</time>
                                <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
                                <span>Mai Văn Học</span>
                            </div>
                            </div>
                        </div>
                        <div className="art-item">
                            <a href="" className="art-img">
                            <img
                                src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
                                alt=""
                                width={1}
                                height={1}
                            />
                            </a>
                            <div className="art-text">
                            <a href="" className="art-title">
                                <h3>
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                                quidem asperiores provident dicta veniam deleniti eaque
                                repudiandae cum esse, ducimus officiis quibusdam pariatur
                                neque voluptates voluptas. Quisquam qui minus dolorum?
                                </h3>
                            </a>
                            <div className="art-summary">
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
                                obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
                                nostrum fugit facere illo quos. Ad error suscipit, quidem optio
                                aut laudantium at!
                            </div>
                            <div className="art-time">
                                <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
                                <time>23/4/2024</time>
                                <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
                                <span>Mai Văn Học</span>
                            </div>
                            </div>
                        </div>
                        <div className="art-item">
                            <a href="" className="art-img">
                            <img
                                src="https://hoanghapccdn.com/media/news/14_100__c___u_h__nh_m__y_t__nh_______h___a_theo_ng__n_s__ch.jpg"
                                alt=""
                                width={1}
                                height={1}
                            />
                            </a>
                            <div className="art-text">
                            <a href="" className="art-title">
                                <h3>
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
                                quidem asperiores provident dicta veniam deleniti eaque
                                repudiandae cum esse, ducimus officiis quibusdam pariatur
                                neque voluptates voluptas. Quisquam qui minus dolorum?
                                </h3>
                            </a>
                            <div className="art-summary">
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
                                obcaecati ducimus veritatis aliquid sunt accusamus unde nisi
                                nostrum fugit facere illo quos. Ad error suscipit, quidem optio
                                aut laudantium at!
                            </div>
                            <div className="art-time">
                                <i className="bx bx-calendar-alt text-16 text-[#A0A5AC]" />
                                <time>23/4/2024</time>
                                <i className="w-[1.5px] h-[12px] bg-[#A0A5AC]" />
                                <span>Mai Văn Học</span>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                {/* Sản phẩm tương tự + Sản phẩm đã xem */}
                <div className="pd-product-container bg-white px-6 py-8 rounded-[24px]">
                    <div className="pd-tab-group relative flex mb-8 border-b border-[#DEE4EC] font-600 text-24 gap-10 leading-[31px] pb-5">
                    <button type="button" aria-label="tab" className="js-pd-tab">
                        {" "}
                        Sản phẩm tương tự{" "}
                    </button>
                    <button type="button" aria-label="tab" className="js-pd-tab">
                        {" "}
                        Sản phẩm đã xem{" "}
                    </button>
                    </div>
                    <div className="relative z-[1] bg-white relative min-h-[300px] js-product-holder">
                    <div className="swiper overflow-hidden">
                        <div className="swiper-wrapper">
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-1.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <del>52.000.000 đ</del>
                                <span className="p-discount">-10%</span>
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                    <i className="bx bx-check-circle text-18 w-[18px]" />
                                    <span>Sẵn hàng</span>
                                    </p>
                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                    <i className="bx bx-gift text-18 w-[18px]" />
                                    <span>Quà tặng</span>
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                        <del className="text-[#A0A5AC] font-300">
                                        52.000.000 đ
                                        </del>
                                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                        -6%
                                        </span>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                    <div className="last:mb-0 mb-6 px-1">
                                    <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                        <i className="icons icon-screen" />
                                        <span>Thông số sản phẩm</span>
                                    </p>
                                    <div className="tooltip-spec">
                                        <div className="item">
                                        CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                        THREAD
                                        </div>
                                        <div className="item">
                                        RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                        </div>
                                        <div className="item">
                                        VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                        </div>
                                    </div>
                                    </div>
                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                    <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                        <i className="icons icon-gift" />
                                        <span>Khuyến mại hấp dẫn</span>
                                    </p>
                                    <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                Hà Nội và Hồ Chí Minh)
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-2.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 red flex items-center gap-1">
                                    <i className="bx bxs-phone text-18 w-[18px]" />
                                    <span>Liên hệ</span>
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                        <del className="text-[#A0A5AC] font-300">
                                        52.000.000 đ
                                        </del>
                                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                        -6%
                                        </span>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                    <div className="last:mb-0 mb-6 px-1">
                                    <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                        <i className="icons icon-screen" />
                                        <span>Thông số sản phẩm</span>
                                    </p>
                                    <div className="tooltip-spec">
                                        <div className="item">
                                        CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                        THREAD
                                        </div>
                                        <div className="item">
                                        RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                        </div>
                                        <div className="item">
                                        VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-3.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <del>52.000.000 đ</del>
                                <span className="p-discount">-10%</span>
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 red flex items-center gap-1">
                                    <i className="bx bxs-phone text-18 w-[18px]" />
                                    <span>Liên hệ</span>
                                    </p>
                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                    <i className="bx bx-gift text-18 w-[18px]" />
                                    <span>Quà tặng</span>
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                        <del className="text-[#A0A5AC] font-300">
                                        52.000.000 đ
                                        </del>
                                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                        -6%
                                        </span>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                    <div className="last:mb-0 mb-6 px-1">
                                    <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                        <i className="icons icon-screen" />
                                        <span>Thông số sản phẩm</span>
                                    </p>
                                    <div className="tooltip-spec">
                                        <div className="item">
                                        CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                        THREAD
                                        </div>
                                        <div className="item">
                                        RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                        </div>
                                        <div className="item">
                                        VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                        </div>
                                    </div>
                                    </div>
                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                    <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                        <i className="icons icon-gift" />
                                        <span>Khuyến mại hấp dẫn</span>
                                    </p>
                                    <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                Hà Nội và Hồ Chí Minh)
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-4.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <del>52.000.000 đ</del>
                                <span className="p-discount">-10%</span>
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                    <i className="bx bx-check-circle text-18 w-[18px]" />
                                    <span>Sẵn hàng</span>
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                        <del className="text-[#A0A5AC] font-300">
                                        52.000.000 đ
                                        </del>
                                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                        -6%
                                        </span>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-5.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                    <i className="bx bx-check-circle text-18 w-[18px]" />
                                    <span>Sẵn hàng</span>
                                    </p>
                                    <p />
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-7.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <del>52.000.000 đ</del>
                                <span className="p-discount">-10%</span>
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 red flex items-center gap-1">
                                    <i className="bx bxs-phone text-18 w-[18px]" />
                                    <span>Liên hệ</span>
                                    </p>
                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                    <i className="bx bx-gift text-18 w-[18px]" />
                                    <span>Quà tặng</span>
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                        <del className="text-[#A0A5AC] font-300">
                                        52.000.000 đ
                                        </del>
                                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                        -6%
                                        </span>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                    <div className="last:mb-0 mb-6 px-1">
                                    <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                        <i className="icons icon-screen" />
                                        <span>Thông số sản phẩm</span>
                                    </p>
                                    <div className="tooltip-spec">
                                        <div className="item">
                                        CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                        THREAD
                                        </div>
                                        <div className="item">
                                        RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                        </div>
                                        <div className="item">
                                        VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                        </div>
                                    </div>
                                    </div>
                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                    <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                        <i className="icons icon-gift" />
                                        <span>Khuyến mại hấp dẫn</span>
                                    </p>
                                    <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                Hà Nội và Hồ Chí Minh)
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div className="swiper-slide">
                            <div className="p-item">
                            <a href="" className="p-img">
                                <img
                                src="images/product-6.jpg"
                                alt=""
                                width={250}
                                height={250}
                                />
                            </a>
                            <div className="p-text">
                                <div className="p-price-group">
                                <del>52.000.000 đ</del>
                                <span className="p-discount">-10%</span>
                                <p className="p-price">22.000.000 đ</p>
                                </div>
                                <a href="" className="p-name">
                                <h3>
                                    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                    Suscipit quos obcaecati totam, atque vel
                                </h3>
                                </a>
                                <div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
                                <div>
                                    <p className="m-0 text-[#00AD4F] flex items-center gap-1">
                                    <i className="bx bx-check-circle text-18 w-[18px]" />
                                    <span>Sẵn hàng</span>
                                    </p>
                                    <p className="m-0 text-[#E16B10] flex items-center gap-1">
                                    <i className="bx bx-gift text-18 w-[18px]" />
                                    <span>Quà tặng</span>
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
                                    aria-label="Mua"
                                />
                                </div>
                            </div>
                            <div className="p-tooltip hidden">
                                <div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
                                <p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
                                    [Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
                                    3060 12GB
                                </p>
                                <div className="p-4 tooltip-content">
                                    <div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
                                    <p className="m-0 flex items-center flex-wrap gap-1">
                                        <b className="font-600">Giá bán:</b>
                                        <b className="font-600 text-[#FF4E2A] text-18">
                                        48.990.000 đ
                                        </b>
                                        <del className="text-[#A0A5AC] font-300">
                                        52.000.000 đ
                                        </del>
                                        <span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
                                        -6%
                                        </span>
                                    </p>
                                    <p className="m-0">
                                        <b className="font-600">Bảo hành:</b>
                                        <span>Theo từng linh kiện</span>
                                    </p>
                                    </div>
                                    <div className="last:mb-0 mb-6 px-1">
                                    <p className="text-16 font-600 flex items-center leading-6 mb-2">
                                        <i className="icons icon-screen" />
                                        <span>Thông số sản phẩm</span>
                                    </p>
                                    <div className="tooltip-spec">
                                        <div className="item">
                                        CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
                                        THREAD
                                        </div>
                                        <div className="item">
                                        RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
                                        </div>
                                        <div className="item">
                                        VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
                                        </div>
                                    </div>
                                    </div>
                                    <div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
                                    <p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
                                        <i className="icons icon-gift" />
                                        <span>Khuyến mại hấp dẫn</span>
                                    </p>
                                    <div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
                                                Hà Nội và Hồ Chí Minh)
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                        <div className="item">
                                        <p>
                                            <span style={{ color: "red", fontSize: "12pt" }}>
                                            <strong>
                                                ⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
                                            </strong>
                                            </span>
                                        </p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                </div>

        </>
    );
}