ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
bf78d0583dd1aee3c1cbe97209953abf5f6dc66d
hoanghapc_nextJs/src/components/product/detail/index.tsx

836 lines
61 KiB
TypeScript
Raw Normal View History

update 28/011
2026-01-28 17:26:02 +07:00
import { formatPrice } from "@/lib/utils";
import ProductImage from "./image";
import Static from "./static";
import ProductDescription from "./description"
import Comment from "./comment";
import Review from "./review";
import ProductSpec from "./specifications";
import Article from "./article";
import ProductPrice from "./price";
import ProductOffer from "./offer";
import Buttons from "./button";
import ProductSummary from "./summary";
update 30/12
2025-12-30 18:05:53 +07:00
update 28/011
2026-01-28 17:26:02 +07:00
export default async function ProductDetail({ slug }: any) {
const {
productName,
review,
visit,
quantity,
productSummary
} = slug
console.log(slug)
update 30/12
2025-12-30 18:05:53 +07:00
upload 29/12
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">
update 28/011
2026-01-28 17:26:02 +07:00
{productName}
upload 29/12
2025-12-29 17:43:31 +07:00
</h1>
update 28/011
2026-01-28 17:26:02 +07:00
upload 29/12
2025-12-29 17:43:31 +07:00
<div className="gap-6 flex flex-wrap items-start leading-[18px]">
update 28/011
2026-01-28 17:26:02 +07:00
<div className="col-left-group w-[424px] sticky top-[90px]">
<ProductImage />
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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-${review.rate}`} />
<span className="font-500"> ({review.total}) </span>
</button>
<i className="w-[1px] h-4 bg-[#DEE4EC]" />
<p className="m-0">
Lượt xem:
<span className="text-[#004BA4] font-500">{formatPrice(visit)}</span>
</p>
<i className="w-[1px] h-4 bg-[#DEE4EC]" />
<p className="m-0">
Tình trạng:
<span
dangerouslySetInnerHTML={{
__html: quantity > 0
? '<span class="font-500 text-[#00AD4F]">Còn hàng</span>'
: '<span class="font-500 red">Liên hệ</span>'
}}
/>
</p>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
{ productSummary &&
<ProductSummary item={productSummary} />
}
<ProductPrice />
<ProductOffer />
<Buttons />
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</p>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<div className="col-right-group w-[264px] sticky top-[90px]">
<Static />
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
upload 29/12
2025-12-29 17:43:31 +07:00
<div className="pd-content-container flex flex-wrap items-baseline gap-6">
<div className="col-left w-[784px]">
update 28/011
2026-01-28 17:26:02 +07:00
<ProductDescription />
{/* Đá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]">
<Review />
<Comment />
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
upload 29/12
2025-12-29 17:43:31 +07:00
<div className="col-right w-[440px]">
update 28/011
2026-01-28 17:26:02 +07:00
<ProductSpec />
<Article />
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
upload 29/12
2025-12-29 17:43:31 +07:00
{/* 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">
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
upload 29/12
2025-12-29 17:43:31 +07:00
<div className="relative z-[1] bg-white relative min-h-[300px] js-product-holder">
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
</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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
</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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
update 28/011
2026-01-28 17:26:02 +07:00
<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>
upload 29/12
2025-12-29 17:43:31 +07:00
</div>
</div>
</div>
</div>
</div>
</div>
</div>
update 28/011
2026-01-28 17:26:02 +07:00
</div>
upload 29/12
2025-12-29 17:43:31 +07:00
</>
);
}
Reference in New Issue Copy Permalink