ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 03/02

Browse Source
This commit is contained in:
Dao Duc
2026-02-03 17:20:38 +07:00
parent 6318621cc0
commit 332cb5da14
19 changed files with 1092 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

752
src/components/product/detail/index.tsx
View File

@@ -1,3 +1,4 @@
import parse from 'html-react-parser';
import { formatPrice } from "@/lib/utils";
import ProductImage from "./images";
import Static from "./static";
@@ -10,6 +11,8 @@ import ProductPrice from "./price";
import ProductOffer from "./offer";
import Buttons from "./buttons";
import ProductSummary from "./summary";
import ScrollToReviewButton from "./buttons/ScrollToReviewButton";
import ProductTab from "./products";
import { ReviewData } from "@/data/reviews";
@@ -31,8 +34,6 @@ export default async function ProductDetail({ slug }: any) {
quantity : slug.quantity
}
console.log(slug)
return (
<>
<div className="product-detail-page container">
@@ -48,30 +49,27 @@ export default async function ProductDetail({ slug }: any) {
<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-${ReviewData.summary.avgRate}`} />
<span className="font-500"> ({ReviewData.summary.total}) </span>
</button>
<div className="pb-3 mb-3 border-b border-[#DEE4EC] flex flex-wrap items-center gap-2">
<ScrollToReviewButton
avgRate={ReviewData.summary.avgRate}
total={ReviewData.summary.total}
/>
<i className="w-[1px] h-4 bg-[#DEE4EC]" />
<p className="m-0">
Lượt xem:
<span className="text-[#004BA4] font-500">{formatPrice(slug.visit)}</span>
<span className="text-[#004BA4] font-500">{formatPrice(slug.visit) }</span>
</p>
<i className="w-[1px] h-4 bg-[#DEE4EC]" />
<p className="m-0">
Tình trạng:
<span
dangerouslySetInnerHTML={{
__html: slug.quantity > 0
? '<span class="font-500 text-[#00AD4F]">Còn hàng</span>'
: '<span class="font-500 red">Liên hệ</span>'
}}
/>
{ slug.quantity > 0
? parse('<span class="font-500 text-[#00AD4F]">Còn hàng</span>')
: parse('<span class="font-500 red">Liên hệ</span>')
}
</p>
</div>
@@ -106,7 +104,7 @@ export default async function ProductDetail({ slug }: any) {
/>
}
<div className="pd-comment-container bg-white mb-6 p-8 pt-6 rounded-[24px] text-16 leading-[22px]">
<div className="pd-comment-container bg-white mb-6 p-8 pt-6 rounded-[24px] text-16 leading-[22px]" id="js-comment-container">
<p className="leading-[31px] font-600 text-24 mb-4 pb-4">
Đánh giá và bình luận
</p>
@@ -129,727 +127,7 @@ export default async function ProductDetail({ slug }: any) {
</div>
{/* Sản phẩm tương tự + Sản phẩm đã xem */}
<div className="pd-product-container bg-white px-6 py-8 rounded-[24px]">
<div className="pd-tab-group relative flex mb-8 border-b border-[#DEE4EC] font-600 text-24 gap-10 leading-[31px] pb-5">
<button type="button" aria-label="tab" className="js-pd-tab">
Sản phẩm tương tự
</button>
<button type="button" aria-label="tab" className="js-pd-tab">
Sản phẩm đã xem
</button>
</div>
<div className="relative z-[1] bg-white relative min-h-[300px] js-product-holder">
<div className="swiper overflow-hidden">
<div className="swiper-wrapper">
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-1.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<del>52.000.000 đ</del>
<span className="p-discount">-10%</span>
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 text-[#00AD4F] flex items-center gap-1">
<i className="bx bx-check-circle text-18 w-[18px]" />
<span>Sẵn hàng</span>
</p>
<p className="m-0 text-[#E16B10] flex items-center gap-1">
<i className="bx bx-gift text-18 w-[18px]" />
<span>Quà tặng</span>
</p>
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
<del className="text-[#A0A5AC] font-300">
52.000.000 đ
</del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-6%
</span>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
<div className="last:mb-0 mb-6 px-1">
<p className="text-16 font-600 flex items-center leading-6 mb-2">
<i className="icons icon-screen" />
<span>Thông số sản phẩm</span>
</p>
<div className="tooltip-spec">
<div className="item">
CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
THREAD
</div>
<div className="item">
RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
</div>
<div className="item">
VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
</div>
</div>
</div>
<div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
<p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
<i className="icons icon-gift" />
<span>Khuyến mại hấp dẫn</span>
</p>
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
Hà Nội và Hồ Chí Minh)
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
</strong>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-2.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 red flex items-center gap-1">
<i className="bx bxs-phone text-18 w-[18px]" />
<span>Liên hệ</span>
</p>
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
<del className="text-[#A0A5AC] font-300">
52.000.000 đ
</del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-6%
</span>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
<div className="last:mb-0 mb-6 px-1">
<p className="text-16 font-600 flex items-center leading-6 mb-2">
<i className="icons icon-screen" />
<span>Thông số sản phẩm</span>
</p>
<div className="tooltip-spec">
<div className="item">
CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
THREAD
</div>
<div className="item">
RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
</div>
<div className="item">
VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-3.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<del>52.000.000 đ</del>
<span className="p-discount">-10%</span>
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 red flex items-center gap-1">
<i className="bx bxs-phone text-18 w-[18px]" />
<span>Liên hệ</span>
</p>
<p className="m-0 text-[#E16B10] flex items-center gap-1">
<i className="bx bx-gift text-18 w-[18px]" />
<span>Quà tặng</span>
</p>
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
<del className="text-[#A0A5AC] font-300">
52.000.000 đ
</del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-6%
</span>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
<div className="last:mb-0 mb-6 px-1">
<p className="text-16 font-600 flex items-center leading-6 mb-2">
<i className="icons icon-screen" />
<span>Thông số sản phẩm</span>
</p>
<div className="tooltip-spec">
<div className="item">
CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
THREAD
</div>
<div className="item">
RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
</div>
<div className="item">
VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
</div>
</div>
</div>
<div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
<p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
<i className="icons icon-gift" />
<span>Khuyến mại hấp dẫn</span>
</p>
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
Hà Nội và Hồ Chí Minh)
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
</strong>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-4.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<del>52.000.000 đ</del>
<span className="p-discount">-10%</span>
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 text-[#00AD4F] flex items-center gap-1">
<i className="bx bx-check-circle text-18 w-[18px]" />
<span>Sẵn hàng</span>
</p>
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
<del className="text-[#A0A5AC] font-300">
52.000.000 đ
</del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-6%
</span>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-5.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 text-[#00AD4F] flex items-center gap-1">
<i className="bx bx-check-circle text-18 w-[18px]" />
<span>Sẵn hàng</span>
</p>
<p />
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-7.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<del>52.000.000 đ</del>
<span className="p-discount">-10%</span>
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 red flex items-center gap-1">
<i className="bx bxs-phone text-18 w-[18px]" />
<span>Liên hệ</span>
</p>
<p className="m-0 text-[#E16B10] flex items-center gap-1">
<i className="bx bx-gift text-18 w-[18px]" />
<span>Quà tặng</span>
</p>
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
<del className="text-[#A0A5AC] font-300">
52.000.000 đ
</del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-6%
</span>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
<div className="last:mb-0 mb-6 px-1">
<p className="text-16 font-600 flex items-center leading-6 mb-2">
<i className="icons icon-screen" />
<span>Thông số sản phẩm</span>
</p>
<div className="tooltip-spec">
<div className="item">
CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
THREAD
</div>
<div className="item">
RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
</div>
<div className="item">
VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
</div>
</div>
</div>
<div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
<p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
<i className="icons icon-gift" />
<span>Khuyến mại hấp dẫn</span>
</p>
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
Hà Nội và Hồ Chí Minh)
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
</strong>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="swiper-slide">
<div className="p-item">
<a href="" className="p-img">
<img
src="images/product-6.jpg"
alt=""
width={250}
height={250}
/>
</a>
<div className="p-text">
<div className="p-price-group">
<del>52.000.000 đ</del>
<span className="p-discount">-10%</span>
<p className="p-price">22.000.000 đ</p>
</div>
<a href="" className="p-name">
<h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quos obcaecati totam, atque vel
</h3>
</a>
<div className="p-btn-group flex items-center justify-between text-16 font-500 leading-[23px]">
<div>
<p className="m-0 text-[#00AD4F] flex items-center gap-1">
<i className="bx bx-check-circle text-18 w-[18px]" />
<span>Sẵn hàng</span>
</p>
<p className="m-0 text-[#E16B10] flex items-center gap-1">
<i className="bx bx-gift text-18 w-[18px]" />
<span>Quà tặng</span>
</p>
</div>
<button
type="button"
className="p-btn bx bx-plus bg-btn text-white rounded-full w-9 h-9 text-20"
aria-label="Mua"
/>
</div>
</div>
<div className="p-tooltip hidden">
<div className="bg-white rounded-[20px] overflow-hidden border-2 border-[#EAECF0] shadow-[0px_6px_8px_-2px_#10182814]">
<p className="tooltip-name px-5 py-4 text-white font-600 text-16 leading-[21px] bg-[linear-gradient(180.3deg,#259AFF_-18.56%,_#114CDD_100.92%)] m-0">
[Tặng bàn phím] HHPC ULTRA 7 265K | 32GB DDR5 | NVIDIA RTX
3060 12GB
</p>
<div className="p-4 tooltip-content">
<div className="last:border-0 last:p-0 last:m-0 text-16 border-b border-[#DEE4EC] mb-4 pb-4">
<p className="m-0 flex items-center flex-wrap gap-1">
<b className="font-600">Giá bán:</b>
<b className="font-600 text-[#FF4E2A] text-18">
48.990.000 đ
</b>
<del className="text-[#A0A5AC] font-300">
52.000.000 đ
</del>
<span className="bg-[#FA354A] text-white text-11 px-[6px] leading-[18px] rounded-[20px]">
-6%
</span>
</p>
<p className="m-0">
<b className="font-600">Bảo hành:</b>
<span>Theo từng linh kiện</span>
</p>
</div>
<div className="last:mb-0 mb-6 px-1">
<p className="text-16 font-600 flex items-center leading-6 mb-2">
<i className="icons icon-screen" />
<span>Thông số sản phẩm</span>
</p>
<div className="tooltip-spec">
<div className="item">
CPU: INTEL CORE i5 13400F up 4.6GHz | 10 CORE | 16
THREAD
</div>
<div className="item">
RAM: DDR4 16GB&nbsp;(1x16G) 3200 MHz
</div>
<div className="item">
VGA: NVIDIA RTX&nbsp;3060 12GB&nbsp;GDDR6
</div>
</div>
</div>
<div className="rounded-[12px] bg-[linear-gradient(182.15deg,#FFA480_-18.44%,#EB0C23_60.76%)] p-1 pt-2">
<p className="px-2 text-16 font-600 flex items-center leading-5 mb-2 text-white">
<i className="icons icon-gift" />
<span>Khuyến mại hấp dẫn</span>
</p>
<div className="tooltip-offer rounded-[8px] bg-[#FEF2F2] px-2 py-4">
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Tại Nơi Sử Dụng (Áp Dụng Nội Thành
Hà Nội và Hồ Chí Minh)
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Bảo Hành Siêu Tốc 1 Đổi 1 Trong 24h
</strong>
</span>
</p>
</div>
<div className="item">
<p>
<span style={{ color: "red", fontSize: "12pt" }}>
<strong>
⭐ Miễn Phí 100% Vận Chuyển Toàn Quốc
</strong>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ProductTab item={slug.related} />
</div>
</>