2025-12-30 18:05:53 +07:00
|
|
|
type Props = {
|
|
|
|
|
slug: string;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default async function ProductDetail({ slug }: Props) {
|
|
|
|
|
|
2025-12-29 17:43:31 +07:00
|
|
|
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 (1x16G) 3200 MHz{" "}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="item-circle">
|
|
|
|
|
{" "}
|
|
|
|
|
VGA: NVIDIA RTX 3060 12GB 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 (1x16G) 3200 MHz
|
|
|
|
|
</div>
|
|
|
|
|
<div className="item">
|
|
|
|
|
VGA: NVIDIA RTX 3060 12GB 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 (1x16G) 3200 MHz
|
|
|
|
|
</div>
|
|
|
|
|
<div className="item">
|
|
|
|
|
VGA: NVIDIA RTX 3060 12GB 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 (1x16G) 3200 MHz
|
|
|
|
|
</div>
|
|
|
|
|
<div className="item">
|
|
|
|
|
VGA: NVIDIA RTX 3060 12GB 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 (1x16G) 3200 MHz
|
|
|
|
|
</div>
|
|
|
|
|
<div className="item">
|
|
|
|
|
VGA: NVIDIA RTX 3060 12GB 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 (1x16G) 3200 MHz
|
|
|
|
|
</div>
|
|
|
|
|
<div className="item">
|
|
|
|
|
VGA: NVIDIA RTX 3060 12GB 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>
|
|
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
