tieptk/bestpc_mobile_html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2025-09-25 10:42:06 +07:00
commit 689936198f
90 changed files with 9368 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

527
template/buildpc/buildpc-detail.html Normal file
View File

@@ -0,0 +1,527 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-buildpc bg-[#F4F4F4] pb-[30px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/buildpc" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Build PC
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<div class="box-content-info bg-white p-[10px] mb-[10px] rounded-[4px]">
<div class="box-image">
<div class="swiper border border-[#B1B1B1 rounded-[12px] mb-[10px]" id="js-slider-big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-2.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-3.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-4.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-button-next right-0"></div>
<div class="swiper-button-prev left-0"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper" id="js-slider-small">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)" class="item video">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
</div>
<div class="swiper-button-next right-[10px] w-[30px] h-[30px]"></div>
<div class="swiper-button-prev left-[10px] w-[30px] h-[30px]"></div>
</div>
</div>
<div class="box-review mt-3">
<div class="flex items-center justify-center">
<b>Người đánh giá</b>
<div class="flex items-center ml-[10px]">
(40 ratings, 4.9 <i class="icon-star star-small ml-1"></i>
)
</div>
</div>
<div class="mt-[10px]">
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
5 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
4 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
3 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
2 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
<p class="w-[11%] text-[var(--color-hover)] font-bold">
1 sao
</p>
<div class="relative w-[79%]">
<div class="block w-full h-[11px] bg-gray-200"></div>
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
</div>
<p class="text-[var(--color-hover)] w-[9%] font-bold">
97%
</p>
</div>
</div>
</div>
<div class="mt-[10px]">
<div class="list">
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
<div class="item py-2.5 border-b-[1px] border-[#ebebeb]">
<div class="flex items-center justify-between">
<a href="" class="block">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="" />
</a>
<a href=""
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">
Mua ngay
</a>
</div>
<div class="status text-blue-500 font-bold">Còn hàng</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giá sản phẩm</p>
<div class="price font-bold text-[#FF0000]">3.700.000Vnđ</div>
<del class="text-[#A5A5A5]">3.400.000 Vnđ</del>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Khuyến mãi</p>
<div class="saleoff text-center font-bold">20%</div>
</div>
<div class="flex items-center gap-[10px] mb-[10px]">
<p class="w-[80px]">Giao hàng</p>
<div class="ship font-bold text-[#33C600] underline">Free</div>
</div>
</div>
</div>
</div>
<div class="mt-[20px]">
<h3 class="title bg-[#EFEFEF] text-[16px] font-bold p-2.5 border-b-[1px] border-[#ABABAB]">
Thông số kỹ thuật
</h3>
<div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Manufacturer</b>
<p>AMD</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Part #</b>
<ul>
<li>100-1000001084WOF</li>
<li>AMD Ryzen 7 9800X3D</li>
<li>100-100001084WOF</li>
</ul>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Series</b>
<p>AMD Ryzen 7</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Microarchitecture</b>
<p>Zen 5</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Core Family</b>
<p>Granite Ridge</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Socket</b>
<p>AM5</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Core</b>
<p>8</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Thread Count</b>
<p>16</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Performance Core Clock</b>
<p>4.7 GHz</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>Performance Core Boost Clock</b>
<p>5.2 GHz</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>L2 Cache</b>
<p>8 MB</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>L3 Cache</b>
<p>96 MB</p>
</div>
<div class="item py-2 border-b-[1px] border-neutral-200">
<b>TDP</b>
<p>120 W</p>
</div>
<div class="item py-2">
<b>Integrated Graphics</b>
<p>Radeon</p>
</div>
</div>
</div>
<div class="mt-[20px]">
<h3 class="title bg-[#EFEFEF] text-[16px] font-bold p-2.5 border-b-[1px] border-[#ABABAB]">
Đánh giá
</h3>
<div class="list mt-3">
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[10px]">
<div class="w-[40px]">
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" />
</div>
<b class="">Dino</b>
<p class="block text-[#747474]">
10:00pm 20/02/2025
</p>
<i class="icon-star star5"></i>
</div>
<p class="content mb-[5px]">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. I
</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[10px]">
<div class="w-[40px]">
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" />
</div>
<b class="">Dino</b>
<p class="block text-[#747474]">
10:00pm 20/02/2025
</p>
<i class="icon-star star5"></i>
</div>
<p class="content mb-[5px]">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. I
</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[10px]">
<div class="w-[40px]">
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" />
</div>
<b class="">Dino</b>
<p class="block text-[#747474]">
10:00pm 20/02/2025
</p>
<i class="icon-star star5"></i>
</div>
<p class="content mb-[5px]">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book. I
</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
</div>
<a href=""
class="block rounded-[4px] w-[160px] h-[35px] leading-[35px] mx-auto text-center text-[500] text-white bg-[#1877F2]">Xem
tất cả bình
luận</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper_small = new Swiper("#js-slider-small", {
loop: true,
spaceBetween: 12,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
navigation: {
nextEl: "#js-slider-small .swiper-button-next",
prevEl: "#js-slider-small .swiper-button-prev",
},
});
var swiper_big = new Swiper("#js-slider-big", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: "#js-slider-big .swiper-button-next",
prevEl: " #js-slider-big .swiper-button-prev",
},
thumbs: {
swiper: swiper_small,
},
});
</script>
</body>
</html>

812
template/buildpc/buildpc.html Normal file
View File

@@ -0,0 +1,812 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-buildpc bg-[#F4F4F4] pb-[30px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/buildpc" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Build PC
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<div class="flex items-center gap-2">
<a href="/buildpc" class="px-3 py-2.5 text-center font-bold text-white bg-violet-900 rounded">
Bắt đầu tạo
</a>
<a href="/template/buildpc/compare_buildpc.html"
class="px-3 py-2.5 text-center font-bold text-stone-500 bg-zinc-100 rounded hover:text-white hover:bg-violet-900">
So sánh giá tại các cửa hàng
</a>
</div>
<div class="bg-white rounded p-[10px] my-[15px]">
<div class="h-[32px] mb-[10px] rounded border border-solid border-neutral-200 flex items-center">
<a class="w-[24px] ml-[10px]" href="javascript:void()">
<i class="icon_2025 copy"></i>
</a>
<input type="text" class="w-full h-full p-[10px] outline-none text-[#1877F2]"
value="https://bestpc.vn/restricted.php" />
</div>
<div class="flex items-center gap-[10px]">
<div
class="w-[calc(100%-126px)] h-[32px] rounded border border-solid border-neutral-200 flex items-center">
<p class="ml-[10px] block whitespace-nowrap">Đặt tên:</p>
<input type="text" class="w-full h-full p-[10px] outline-none" value="" />
</div>
<a href="javascript:void(0)"
class="block w-[32px] h-[32px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
<i class="icon_2025 history group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
<a href="javascript:void(0)"
class="block w-[32px] h-[32px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
<i class="icon_2025 download group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
<a href="javascript:void(0)"
class="block w-[32px] h-[32px] rounded border border-solid border-neutral-200 flex items-center justify-center hover:bg-[var(--color-global)] hover:text-white group">
<i class="icon_2025 return group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
</div>
<div class="bg-white rounded p-[10px]">
<div class="list-buildpc">
<div class="item-component">
<b class="name-component block mb-[10px] text-[15px] font-bold">CPU</b>
<div class="right">
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
<div class="info flex justify-between gap-[10px] mb-[10px]">
<div class="flex w-[calc(100%-90px)]">
<a href="/buildpc/detail"
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<a href="/buildpc/detail"
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
<div class="w-[80px] flex gap-[10px] justify-end">
<a href="javascript:void(0)" class="" onclick="showPopup()">
<i class="icon_edit"></i>
</a>
<a href="javascript:void(0)" class="">
<i class="icon_remove"></i>
</a>
</div>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
<div class="flex mb-[10px] gap-[5px]">
<p>Thành tiền</p>
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p>Khuyến mãi</p>
<b class="price-saleoff font-400">20%</b>
</div>
<div class="supplier flex items-center gap-[5px] ">
<p>Nhà cung cấp</p>
<a href="">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[30px] object-contain" alt="" />
</a>
</div>
</div>
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
<div class="info flex justify-between gap-[10px] mb-[10px]">
<div class="flex w-[calc(100%-90px)]">
<a href="/buildpc/detail"
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<a href="/buildpc/detail"
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
<div class="w-[80px] flex gap-[10px] justify-end">
<a href="javascript:void(0)" class="" onclick="showPopup()">
<i class="icon_edit"></i>
</a>
<a href="javascript:void(0)" class="">
<i class="icon_remove"></i>
</a>
</div>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
<div class="flex mb-[10px] gap-[5px]">
<p>Thành tiền</p>
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p>Khuyến mãi</p>
<b class="price-saleoff font-400">20%</b>
</div>
<div class="supplier flex items-center gap-[5px] ">
<p>Nhà cung cấp</p>
<a href="">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[30px] object-contain" alt="" />
</a>
</div>
</div>
</div>
</div>
<div
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
<b class="name-component block">CPU Cooler</b>
<div class="right">
<a href="javascript:void(0)" onclick="showPopup()"
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">
+ Chọn sản phẩm
</a>
</div>
</div>
<div
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
<b class="name-component block">HDD</b>
<div class="right">
<a href="javascript:void(0)" onclick="showPopup()"
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">
+ Chọn sản phẩm
</a>
</div>
</div>
<div
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
<b class="name-component block">HDD</b>
<div class="right">
<a href="javascript:void(0)" onclick="showPopup()"
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">
+ Chọn sản phẩm
</a>
</div>
</div>
<div
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
<b class="name-component block">HDD</b>
<div class="right">
<a href="javascript:void(0)" onclick="showPopup()"
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">
+ Chọn sản phẩm
</a>
</div>
</div>
<div
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
<b class="name-component block">HDD</b>
<div class="right">
<a href="javascript:void(0)" onclick="showPopup()"
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">
+ Chọn sản phẩm
</a>
</div>
</div>
<div
class="item-component flex items-center justify-between py-2.5 border-b-[1px] border-neutral-200">
<b class="name-component block">HDD</b>
<div class="right">
<a href="javascript:void(0)" onclick="showPopup()"
class="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white">
+ Chọn sản phẩm
</a>
</div>
</div>
</div>
<div class="box-total-price pt-5">
<b class="block text-[15px] text-right text-red-600">
Tổng tiền 2 sản phẩm: 8.000.000đ
</b>
<div class="flex items-center justify-end gap-[10px] mt-3">
<a href="javasript:void(0)"
class="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700">
Mua hàng tại Hacom
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="backgroundPopup" onclick="hidePopup()"></div>
<div class="fixed hidden w-[95%] bg-white left-[50%] top-[40%] translate-x-[-50%] translate-y-[-40%] z-[999]"
id="js-modal-popup">
<div class="header-popup p-[10px] bg-[var(--color-global)]">
<div class="flex items-center justify-between mb-[10px]">
<b class="text-[16px] uppercase text-white">Chọn linh kiện</b>
<a href="javascript:void(0)" onclick="hidePopup()" class="w-[54px] flex items-center justify-end">
<i class="icon_2025 close brightness-0 invert-[1]"></i>
</a>
</div>
<div class="relative input-search">
<form action="/search" enctype="text/plain" method="get"
class="relative w-full h-[35px] bg-white rounded-[3px] overflow-hidden">
<input type="text" name="q" placeholder="Bạn cần tìm linh kiện gì..."
class="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base" />
<button type="submit" class="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]">
<i class="icon_2025 search "></i>
</button>
</form>
</div>
</div>
<div class="content-popup p-[10px] bg-white">
<b class="">230 sản phẩm</b>
<div class="flex gap-[15px] pb-[10px] mb-[10px] border-b-[1px] border-[#e3e3e3] mt-[10px]">
<a href="" class="text-[var(--color-hover)] border-b-[1px] pb-[10px] border-[#1877F2]">
Chọn tất cả
</a>
<a href="">Bỏ chọn tất cả</a>
<a href="">So sánh sản phẩm đã chọn</a>
</div>
<div class="box-filter">
<div class="mt-3 title-filter flex items-center gap-[10px]">
<b class="text-[13px]">Bộ lọc</b>
<i class="icon_2025 filter"></i>
</div>
<div class="flex overflow-auto gap-2 mb-[10px] pb-[10px] border-b-[1px] border-[#e3e3e3]">
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Lọc theo</option>
<option>Giá</option>
<option>Sản phẩm mới</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Thương hiệu</option>
<option>Apple</option>
<option>Samsung</option>
<option>Dell</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Địa chỉ</option>
<option>Hà Nội</option>
<option>TP.HCM</option>
<option>Đà Nẵng</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
</div>
</div>
<div class="list overflow-auto max-h-[400px]">
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
<div class="item py-[10px] border-b-[1px] border-[#dedede]">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="" class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<div class="w-[calc(100%-80px)]">
<a href="" class="name-product text-[13px] font-bold hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor AMD Ryzen 7 9800x3D 4.7 GHz 8-Core
Processor
</a>
<div class="price text-[15px] font-bold text-[#FF0000]">3.400.000đ</div>
</div>
</div>
<a href=""
class="block w-[100px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
+ Add
</a>
</div>
<div class="grid grid-cols-2 gap-[10px] mt-[10px]">
<div class="flex items-center gap-[10px]">
<p>dung lượng</p>
<b class="">8bg</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Độ ồn</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Thế hệ</p>
<b>5</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Màu sắc</p>
<b>Đen</b>
</div>
<div class="flex items-center gap-[10px]">
<p>Bộ nhớ</p>
<b>5</b>
</div>
<div></div>
<div class="flex items-center gap-[10px]">
<p>Đánh giá</p>
<div class="flex items-center">
<i class="icon-star star4 mt-[4px]"></i>
<b class="ml-[5px]">(125)</b>
</div>
</div>
<div class="flex items-center gap-[10px]">
<p>Số lượng</p>
<input type="number" min="1" value="1"
class="w-[60px] h-[30px] border-[1px] border-[#E3E3E3] text-center" />
</div>
</div>
</div>
</div>
<a href="" class="flex items-center py-[5px] mt-[5px] font-bold text-[#FF7A00]">Cuộc để xem thêm <i
class="icon_2025 angle-bottom"></i></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function showPopup() {
$('#backgroundPopup').toggleClass('active')
$('#js-modal-popup').toggleClass('hidden')
}
function hidePopup() {
$('#backgroundPopup').toggleClass('active')
$('#js-modal-popup').toggleClass('hidden')
}
</script>
</body>
</html>

216
template/buildpc/compare_buildpc.html Normal file
View File

@@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-buildpc bg-[#F4F4F4] pb-[30px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/buildpc" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Build PC
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<div class="flex items-center gap-2">
<a href="/buildpc" class="px-3 py-2.5 text-center font-bold bg-white text-stone-500 rounded">
Bắt đầu tạo
</a>
<a href="/template/buildpc/compare_buildpc.html"
class="px-3 py-2.5 text-center font-bold text-white bg-violet-900 rounded hover:text-white hover:bg-violet-900">
So sánh giá tại các cửa hàng
</a>
</div>
<div class="list bg-white rounded p-[10px] mt-[15px]">
<div class="item-compare mb-[40px]">
<a href="" class="block pb-[10px] border-b-[1px] border-[#e3e3e3]">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-[90px] block h-[32px] object-contain" alt="" />
</a>
<div class="list-product">
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
<b class="name-component block font-bold mb-[10px]">CPU Cooler</b>
<div class="info flex justify-between gap-[10px] mb-[10px]">
<div class="flex w-[calc(100%-90px)]">
<a href="/buildpc/detail"
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<a href="/buildpc/detail"
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
<a href=""
class="block w-[80px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
Mua ngay
</a>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giá sản phẩm</p>
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Khuyến mãi</p>
<b class="price-saleoff font-400">20%</b>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giao hàng:</p>
<b class="underline">Liên hệ</b>
</div>
</div>
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
<b class="name-component block font-bold mb-[10px]">SSD</b>
<div class="info flex justify-between gap-[10px] mb-[10px]">
<div class="flex w-[calc(100%-90px)]">
<a href="/buildpc/detail"
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<a href="/buildpc/detail"
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
<a href=""
class="block w-[80px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
Mua ngay
</a>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giá sản phẩm</p>
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Khuyến mãi</p>
<b class="price-saleoff font-400">20%</b>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giao hàng:</p>
<b class="underline">Liên hệ</b>
</div>
</div>
</div>
<div class="flex items-center mt-[10px] justify-center gap-[10px] text-[15px]">
<b>Tổng tiền (2 sản phẩm) : </b>
<b>6.000.000 Vnđ</b>
</div>
</div>
<div class="item-compare mb-[40px]">
<a href="" class="block pb-[10px] border-b-[1px] border-[#e3e3e3]">
<img src="/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-[90px] block h-[32px] object-contain" alt="" />
</a>
<div class="list-product">
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
<b class="name-component block font-bold mb-[10px]">CPU Cooler</b>
<div class="info flex justify-between gap-[10px] mb-[10px]">
<div class="flex w-[calc(100%-90px)]">
<a href="/buildpc/detail"
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<a href="/buildpc/detail"
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
<a href=""
class="block w-[80px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
Mua ngay
</a>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giá sản phẩm</p>
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Khuyến mãi</p>
<b class="price-saleoff font-400">20%</b>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giao hàng:</p>
<b class="underline">Liên hệ</b>
</div>
</div>
<div class="item-info-product py-[10px] border-b-[1px] border-neutral-200">
<b class="name-component block font-bold mb-[10px]">SSD</b>
<div class="info flex justify-between gap-[10px] mb-[10px]">
<div class="flex w-[calc(100%-90px)]">
<a href="/buildpc/detail"
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="" />
</a>
<a href="/buildpc/detail"
class="name-product w-[calc(100%-60px)] text-[13px] text-[500] hover:text-[var(--color-hover)]">
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
</a>
</div>
<a href=""
class="block w-[80px] h-[35px] leading-[35px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">
Mua ngay
</a>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giá sản phẩm</p>
<b class="total-amount font-bold text-[#FF0000]">4.000.000đ</b>
<del class="old-price font-400 text-[#7D7D7D]">4.700.000 Vnđ</del>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Khuyến mãi</p>
<b class="price-saleoff font-400">20%</b>
</div>
<div class="flex mb-[10px] gap-[5px]">
<p class="w-[80px]">Giao hàng:</p>
<b class="underline">Liên hệ</b>
</div>
</div>
</div>
<div class="flex items-center mt-[10px] justify-center gap-[10px] text-[15px]">
<b>Tổng tiền (2 sản phẩm) : </b>
<b>6.000.000 Vnđ</b>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</body>
</html>

631
template/classifieds/detail.html Normal file
View File

@@ -0,0 +1,631 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-classifieds bg-[#F4F4F4] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<p class="font-[600]" itemprop="name">
Tin rao vặt
</p>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="box-content-info bg-white p-[10px] mb-[10px] rounded-[4px] mt-[10px]">
<div class="box-image">
<div class="relative">
<div class="swiper border border-[#B1B1B1 rounded-[12px] mb-[10px]" id="js-slider-big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-2.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-3.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="../../assets/images/big-product-detail-4.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-button-next right-0"></div>
<div class="swiper-button-prev left-0"></div>
</div>
<a href="javavsript:void(0)"
class="absolute right-[10px] top-[10px] bg-white z-[9] flex items-center justify-center w-[110px] h-[40px] justify-center border rounded-full border-[#999999] group hover:bg-red-500">
<span class="font-[500] mr-[5px] text-[13px] group-hover:text-white">Xem sau</span>
<i class="icon_2025 heart-2 group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
<div thumbsSlider="" class="swiper mySwiper" id="js-slider-small">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)" class="item video">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="../../assets/images/small-product-detail.png" alt="">
</a>
</div>
</div>
<div class="swiper-button-next right-[10px] w-[30px] h-[30px]"></div>
<div class="swiper-button-prev left-[10px] w-[30px] h-[30px]"></div>
</div>
</div>
<h1 class="text-[16px] font-bold my-[12px]">iphone 11 vs 11 Pro 11 Pro Max 64GB
256GB
likenew</h1>
<div class="box-spec">
<div class="item flex items-center gap-[10px] mb-2">
<span class="block w-[24px]"><i class="icon_2025 spec"></i></span>
<span class="text-[13px] text-[#303030]">Cấu hình: Intel Core i5 / 8GB / 256GB /
SSD</span>
</div>
<div class="item flex items-center gap-[10px] mb-2">
<span class="block w-[24px]"><i class="icon_2025 faq"></i></span>
<p class="text-[13px] text-[#303030]">Tình trạng: <span
class="text-[var(--color-hover)]">Likenew</span></p>
</div>
<div class="item flex items-center gap-[10px] mb-2">
<span class="block w-[24px]"><i class="icon_2025 map-2 ml-[2px]"></i></span>
<p class="text-[13px] text-[#303030]">Địa chỉ: Quận Thanh Xuân</p>
</div>
<div class="item flex items-center gap-[10px] mb-2">
<span class="block w-[24px]"><i class="icon_2025 time-big ml-[2px]" style="background-size: 200px 206px;
background-position: -2px -72px;width: 22px;height: 22px;"></i></span>
<p class="text-[13px] text-[#303030]">Ngày đăng 12/04/2025 còn <span>2</span> ngày</p>
</div>
</div>
<div class="flex items-center gap-[10px] my-[10px]">
<b class="">Giá sản phẩm</b>
<b class="text-[#D80A00] text-[20px]">19.999.000đ</b>
</div>
<a href="tel:"
class="w-full h-[35px] block text-center leading-[35px] text-white text-[16px] bg-[#2EB000] mt-2 mb-1 rounded-[4px] font-bold hover:bg-green-700">
Gọi cho người bán 098.234.****
</a>
<div class="p-[10px] border border-[#d3d3d3] rounded-[12px] my-3 flex items-center">
<div class="w-1/2 border-r-[1px] border-[#d3d3d3] pr-[10px]">
<div class="flex items-center">
<img src="../../assets/images/avartar.png" width="100%" height="100%"
class="block w-[30px] h-[30px] object-contain rounded-full" alt="">
<div class="ml-[10px]">
<div class="flex items-end">
<b class="mr-2">Thanh Mai</b>
<i class="icon_2025 shop-3"></i>
</div>
<div class="status online flex items-center">
<i class="w-[8px] h-[8px] block rounded-full bg-[#34a853]"></i>
<span class="ml-1 text-[#33c600]">Đang hoạt động</span>
</div>
</div>
</div>
</div>
<div class="w-1/2">
<div class="flex items-center justify-center">
<i class="icon-star star-small mt-[2px]"></i>
<b class="ml-1 underline">28 Đánh giá</b>
</div>
<p class="text-center block text-[#303030]">6 Tin đăng bán</p>
</div>
</div>
<div class="flex flex-wrap items-center gap-[10px]">
<a href=""
class="p-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
tính này còn không?</a>
<a href=""
class="p-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
tính này còn không?</a>
<a href=""
class="p-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
tính này còn không?</a>
<a href=""
class="p-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
tính này còn không?</a>
</div>
<div class="mt-2">
<h3 class="font-bold text-xl mb-2">Thông tin sản phẩm</h3>
<ul class="ml-[20px]">
<li class="list-disc">Chính sách bảo hành:>12 tháng</li>
<li class="list-disc">Kích cỡ màn hình:>= 21 inch</li>
<li class="list-disc">Bộ vi xử lý:Intel Core i5</li>
<li class="list-disc">RAM:8 GB</li>
<li class="list-disc">Card màn hình:Khác</li>
<li class="list-disc">Ổ cứng:256 GB</li>
<li class="list-disc">Xuất xứ:Việt Nam</li>
<Li class="list-disc">Loại ổ cứng:SSD Thông tin sử dụng:In trên bao bì</li>
</ul>
</div>
</div>
<div class="bg-white mb-[10px] rounded-[4px] mt-[10px]">
<h3 class="title text-[16px] p-[10px] font-bold block mb-[10px] border-b-[1px] border-[#B1B1B1]">
Mô tả chi
tiết</h3>
<div id="content-desciption" class="px-[10px]">
<div class="content nd overflow-hidden">
<p style="text-align: justify;"><strong>Laptop HP Victus 16 R0376TX AY8Z2PA
</strong> sở
hữu chip xử lý Intel Core i7
13700HX cùng VGA RTX 3050 6GB để có được trải nghiệm chơi game, làm việc hiệu
quả.
Mẫu <a href="https://cellphones.com.vn/laptop/hp/victus.html" title="HP Victus"
target="_blank"><strong>HP
Victus</strong></a> này còn được trang bị màn hình 16 inch FHD 165Hz
giúp
tái tạo hình ảnh sắc nét, mượt mà.
Kèm theo đó là thiết kế bền bỉ, hiện đại để có thể sử dụng ở nhiều không gian.
</p>
<h2 style="scroll-margin : 154px;"
id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong">
<strong>
Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ, hiển thị ấn tượng
</strong>
</h2>
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card
đồ
họa rời mạnh mẽ sẽ mang tới trải
nghiệm chơi game, làm việc mượt mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm
nổi
bật mà mẫu laptop gaming của
<strong> HP Victus </strong> này sở hữu trong bài viết sau.
</p>
<h3 style="scroll-margin : 154px;" id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx">
<strong> Nâng cao
hiệu
suất
xử
lý với chip&nbsp;Core i7 13700HX</strong>
</h3>
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
con
chip xử lý Core i7 13700HX của
Intel. Con chip Core i7 16 lõi, 24 luồng này sở hữu khả năng ép xung cực đại lên
tới
5GHz để luôn có thể xử lý dữ
liệu trong thời gian ngắn. Với bộ nhớ đệm 30MB, hiệu suất xử lý các tác vụ phức
tạp
của laptop sẽ được giảm đi đáng
kể.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
<p style="text-align: justify;">Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị
cho
phiên bản <a href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
title="laptop Victus 16" target="_blank"><strong>laptop Victus
16</strong></a>
này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ
vậy mà người dùng có thể tự tin trải nghiệm các tựa game với mức cấu hình cao.
Không
dừng ở đó, các nhu cầu chỉnh
sửa hình ảnh, dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện mượt
mà.
</p>
<h3 style="scroll-margin : 154px;" id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon">
<strong> Tích hợp
ổ cứng
tốc
độ cao cùng dung lượng RAM lớn </strong>
</h3>
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2
thanh
RAM chuẩn DDR5 có tốc độ bus lên
tới 4800MT/s. Với tổng dung lượng RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng
tốt
nhu cầu đa nhiệm. Không chỉ các
tác vụ cơ bản mà nhu cầu đa nhiệm nâng cao trong công việc cũng sẽ được thực
hiện
mượt mà mà không cần phải nâng cấp
cấu hình. Ngoài ra, laptop HP Victus 16 R0376TX AY8Z2PA còn sở hữu một ổ cứng
SSD
tốc độ cao có dung lượng
512GB.&nbsp;</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
<h3 style="scroll-margin : 154px;" id="thiet-ke-hien-dai-ben-bi"><strong> Thiết kế
hiện
đại, bền bỉ </strong></h3>
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế
hướng
tới phong cách hiện đại, tối
giản. Tuy vậy nhưng sản phẩm vẫn mang đậm dấu ấn gaming với tông màu đen thu hút
và
mạnh mẽ. Kèm theo đó là một tổng
thể chắc chắn, bền bỉ cùng phần bản lề kích thước lớn.</p>
<p style="text-align: justify;">Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể
tiện lợi mang theo phiên bản laptop
HP Victus này mà không gặp bất tiện. So với các mẫu laptop gaming khác, đây được
coi
là một điểm cộng giúp sản phẩm
đáp ứng nhu cầu chơi game ở nhiều không gian của người dùng.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
<p style="text-align: justify;">Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP
đã
trang bị cho laptop Victus 16
R0376TX AY8Z2PA bộ bàn phím Full-size. Với phần bàn phím số riêng biệt, người
dùng
sẽ cải thiện được tốc độ nhập
liệu trong khi làm việc. Bàn phím của laptop còn được tích hợp hệ thống đèn nền
RGB
1 để hỗ trợ việc gõ phím trong
điều kiện thiếu sáng.</p>
<h3 style="scroll-margin : 154px;" id="hien-thi-sac-net-va-muot-ma"><strong> Hiển
thị
sắc nét và mượt mà </strong></h3>
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không
giản
hiển thị cực lớn khi được trang bị
màn hình có kích thước 16.1 inch. Kèm theo đó là độ phân giải FHD (1920 x 1080p)
giúp nội dung hiển thị luôn có được
độ rõ nét. Nhờ việc sử dụng tấm nền IPS, người dùng còn có thể điều chỉnh góc
nghiêng linh hoạt mà không gây ảnh
hưởng tới chất lượng hình ảnh.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
alt="Hiển thị sắc nét và mượt mà" loading="lazy"></p>
<p style="text-align: justify;">Điểm nổi bật có trên màn hình HP Victus 16 R0376TX
AY8Z2PA chính là tần số quét và độ
phủ màu. Với độ phủ màu 100% sRGB, mẫu laptop gaming HP này sẽ hỗ trợ người dùng
làm
các công việc liên quan tới
sáng tạo hiệu quả. Tần số quét ở mức 165Hz sẽ giúp màn hình tái hiện các chuyển
động
một cách uyển chuyển, mượt mà.
</p>
<p style="text-align: justify;">Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn
được
phủ lớp chống chói và có độ
sáng 300 nits để thoải mái sử dụng ở những nơi có ánh sáng mạnh. Với chuẩn Low
Blue
Light, màn hình còn giảm thiểu
lượng ánh sáng xanh phát ra để hạn chế tình trạng mỏi mắt khi sử dụng laptop
trong
thời gian dài.</p>
<h3 style="scroll-margin : 154px;" id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh">
<strong> Thời lượng pin dài, kết
nối phong phú và ổn định </strong>
</h3>
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
viên
pin Li-ion Polymer 4-cell có dung
lượng ở mức 70Wh. Với dung lượng này, viên pin có thể duy trì trạng thái hoạt
động
cho laptop lên tới nhiều giờ với
các tác vụ hỗn hợp. Laptop còn được trang bị bộ nguồn 200W Smart AC power
adapter để
hỗ trợ sạc pin nhanh 50% trong
khoảng 30 phút.</p>
<p style="text-align: justify;"><img
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
alt="Thời lượng pin dài, kết nối phong phú và ổn định" loading="lazy"></p>
<p style="text-align: justify;">Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu,
HP
còn trang bị cho mẫu laptop Victus
của hàng đầy đủ các cổng kết nối thông dụng. Hai cạnh bên laptop được tích hợp
các
cổng USB Type-A, USB Type-C,
RJ-45, HDMI 2.1, jack audio 3.5mm và bộ chuyển đổi điện xoay chiều thông minh.
</p>
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị
card
wireless Bluetooth 5.3 và Intel
Wi-Fi 6E AX211 (2x2). Điều này sẽ đảm bảo được khả năng kết nối với các thiết bị
ngoại vi, kết nối mạng ổn định,
nhanh chóng cho laptop.</p>
<h2 style="scroll-margin : 154px;"
id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones">
<strong> Mua
laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại CellphoneS </strong>
</h2>
<ul>
<li>
Hãy tới ngay các cửa hàng CellphoneS trên cả
nước để
trải nghiệm và đặt mua <strong>
Laptop HP Victus 16 R0376TX AY8Z2PA </strong> . Mẫu laptop gaming HP này
còn có
mức giá cực kỳ hấp dẫn khi đi
kèm nhiều chương trình ưu đãi, hỗ trợ thu cũ - đổi mới,...
</li>
<li>
Với chính sách hỗ trợ trả góp lãi suất thấp,
khách hàng
sẽ còn dễ dàng sở hữu và trải
nghiệm chiếc laptop này. Ngoài ra, CellphoneS còn hỗ trợ giao hàng toàn quốc
để
khách hàng tiện lợi đặt mua dù ở nơi
đâu.
</li>
</ul>
</div>
</div>
<a href="javascript:void(0)"
class="more-all js-viewmore-content item-btn flex items-center justify-center mt-1 p-[10px] text-[#ff7a00]"
data-content="#content-desciption">
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
</a>
</div>
<div class="bg-white box-spec mb-[10px] rounded-[4px] pb-[10px]">
<h2 class="text-[16px] font-bold p-[10px] border-b-[1px] border-[#b1b1b1]">Sản phẩm tương tự</h2>
<div class="list grid grid-cols-2 gap-[12px] p-[12px]">
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01 ngày</span>
</div>
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01 ngày</span>
</div>
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01 ngày</span>
</div>
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
i7</a>
<div class="summary line-clamp-1">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="locahost-pro flex items-center mb-[5px]">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center mt-[1px]">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01 ngày</span>
</div>
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)"
class="text-[#462F91] flex items-center justify-center m-[10px_auto] w-[130px] h-[32px] leading-[32px] border-[#462F91] border-[1px] rounded-[4px] hover:bg-[#462F91] hover:text-white group">
<span>Xem tất cả</span>
<i class="icon_2025 mouse ml-[5px] group-hover:brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper_small = new Swiper("#js-slider-small", {
loop: true,
spaceBetween: 12,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
navigation: {
nextEl: "#js-slider-small .swiper-button-next",
prevEl: "#js-slider-small .swiper-button-prev",
},
});
var swiper_big = new Swiper("#js-slider-big", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: "#js-slider-big .swiper-button-next",
prevEl: " #js-slider-big .swiper-button-prev",
},
thumbs: {
swiper: swiper_small,
},
});
collapse_content('#content-desciption', 580);
// show content
function collapse_content(item, contentHeight) {
var content = $(item).find($('.content'));
if (content.height() >= contentHeight) {
$(item).find($(".more-all")).css('display', 'flex');
content.css('height', contentHeight);
} else {
$(this).find($(".more-all")).remove();
content.addClass('active');
}
}
$(".js-viewmore-content").click(function () {
var id = $(this).attr("data-content");
var content = $(id).find($('.content'));
$(this).toggleClass("active");
content.toggleClass("active");
if ($(this).hasClass("active")) {
$(this).html('Thu gọn <i class="icon_2025 angle-top ml-[5px]"></i>');
} else {
$(this).html('Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>');
$('html,body').animate({ scrollTop: $(content).offset().top }, 500);
}
});
</script>
</body>
</html>

134
template/classifieds/form.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-form-classifieds bg-[#F4F4F4] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<p class="font-[600]" itemprop="name">
Tin rao vặt
</p>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<p class="font-[600]" itemprop="name">
Đăng tin
</p>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="bg-white mt-[10px] p-[10px] rounded-[4px]">
<form action="">
<h3 class="text-[16px] font-bold mb-3">Hình ảnh và Video sản phẩm</h3>
<div class="box-upload mb-2 grid grid-cols-3 gap-[10px]">
<input id="js-file-upload-id" type="hidden" value="">
<div id="js-container-selector">
<a id="js-select-file" href="javascript:void(0);" class="btn-upload flex flex-col items-center justify-center dz-clickable w-full h-[116px] bg-[#f6f6f6] rounded-[12px] border-[1px] border-dashed
border-[var(--color-global)] hover:border-[2px] hover:border-solid">
<img src="../../assets/images/icon_upload_image.png"
class="w-[50px] h-[50px] block mb-2 object-contain" width="100%" height="100%"
alt="">
<p class="text-center text-[11px]">Có thể đăng tối đa 6 hình ảnh</p>
</a>
</div>
<div id="js-container-selector">
<a id="js-select-file" href="javascript:void(0);"
class="btn-upload flex flex-col items-center justify-center dz-clickable w-full h-[116px] bg-[#f6f6f6] rounded-[12px] border-[1px] border-dashed
border-[var(--color-global)] hover:border-[2px] hover:border-solid">
<img src="../../assets/images/icon_upload_video.png"
class="w-[50px] h-[50px] block mb-2 object-contain" width="100%" height="100%"
alt="">
<p class="text-center text-[11px]">Có thể đăng tối đa 6 hình ảnh</p>
</a>
</div>
</div>
<h3 class="text-[16] font-bold my-[15px]">Nhập thông tin sản phẩm</h3>
<div class="relative select-arrow">
<select name="" id="">
<option value="">CHọn danh mục tin đăng</option>
<option value="">Hà nội</option>
</select>
</div>
<b class="block mb-3"></b>
<div class="form-input mt-[20px]">
<input type="text" name="title" placeholder="Tình trạng" />
<div class="note-error"></div>
</div>
<div class="form-input mt-[20px]">
<input type="text" name="title" placeholder="Cấu hình" />
<div class="note-error"></div>
</div>
<div class="form-input mt-[20px]">
<input type="text" name="title" placeholder="Địa chỉ" />
<div class="note-error"></div>
</div>
<div class="form-input mt-[20px]">
<textarea class="h-[230px]" type="text" name="title"
placeholder="Thông tin sản phẩm"></textarea>
<div class="note-error"></div>
</div>
<div class="form-input mt-[20px]">
<textarea class="h-[230px]" type="text" name="title"
placeholder="Mô tả chi tiết"></textarea>
<div class="note-error"></div>
</div>
<div class="form-input mt-[20px]">
<input type="text" name="title" placeholder="Giá bán" />
<div class="note-error"></div>
</div>
<div class="mt-5 flex items-center justify-end">
<a href=""
class="block text-center w-[245px] px-10 py-2.5 border border-[#000] rounded-[4px] mr-2 font-bold hover:bg-gray-500 hover:text-white">Lưu
bản nháp</a>
<a href=""
class="block text-center w-[245px] px-10 py-2.5 border border-[] rounded-[4px] bg-[var(--color-global)] text-white font-bold hover:bg-purple-900">Đăng
tin</a>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

307
template/classifieds/home.html Normal file
View File

@@ -0,0 +1,307 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-classifieds bg-[#F4F4F4] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<p class="font-[600]" itemprop="name">
Tin rao vặt
</p>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="bg-white p-[10px] rounded-[4px_4px_0_0] mt-[10px]">
<h1 class="text-[16px] font-bold mb-[10px]">Danh mục</h1>
<select name="" id=""
class="w-full h-[35px] rounded-[4px] px-[10px] border-[1px] border-[#7C7C7C] mb-[10px]">
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
<option value="">Laptop văn phòng</option>
</select>
<h3 class="font-bold mb-2">Bộ lọc</h3>
<div class="p-[10px] bg-[#F8F8F8] mb-[15px]">
<div class="flex overflow-auto gap-2">
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Lọc theo</option>
<option>Giá</option>
<option>Sản phẩm mới</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Thương hiệu</option>
<option>Apple</option>
<option>Samsung</option>
<option>Dell</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Địa chỉ</option>
<option>Hà Nội</option>
<option>TP.HCM</option>
<option>Đà Nẵng</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
</div>
</div>
<div class="list">
<div
class="product-item-classifieds flex gap-[10px] border-b-[1px] border-[#E3E3E3] pb-[10px] mb-[10px]">
<a href="" class="product-image w-[80px] h-[70px]">
<img src="../../assets/images/box-image.png" class="block w-full object-contain"
alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-1 text-[15px] font-bold">Laptop văn phòng Dell
RAM 8G Core
i7</a>
<div class="summary line-clamp-1 mb-[3px]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price text-[18px] text-[#D80A00] font-bold">15.000.000đ</div>
<div class="locahost-pro flex items-center">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center ">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
ngày</span>
</div>
</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div
class="product-item-classifieds flex gap-[10px] border-b-[1px] border-[#E3E3E3] pb-[10px] mb-[10px]">
<a href="" class="product-image w-[80px] h-[70px]">
<img src="../../assets/images/box-image.png" class="block w-full object-contain"
alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-1 text-[15px] font-bold">Laptop văn phòng Dell
RAM 8G Core
i7</a>
<div class="summary line-clamp-1 mb-[3px]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price text-[18px] text-[#D80A00] font-bold">15.000.000đ</div>
<div class="locahost-pro flex items-center">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center ">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
ngày</span>
</div>
</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div
class="product-item-classifieds flex gap-[10px] border-b-[1px] border-[#E3E3E3] pb-[10px] mb-[10px]">
<a href="" class="product-image w-[80px] h-[70px]">
<img src="../../assets/images/box-image.png" class="block w-full object-contain"
alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-1 text-[15px] font-bold">Laptop văn phòng Dell
RAM 8G Core
i7</a>
<div class="summary line-clamp-1 mb-[3px]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price text-[18px] text-[#D80A00] font-bold">15.000.000đ</div>
<div class="locahost-pro flex items-center">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center ">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
ngày</span>
</div>
</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div
class="product-item-classifieds flex gap-[10px] border-b-[1px] border-[#E3E3E3] pb-[10px] mb-[10px]">
<a href="" class="product-image w-[80px] h-[70px]">
<img src="../../assets/images/box-image.png" class="block w-full object-contain"
alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-1 text-[15px] font-bold">Laptop văn phòng Dell
RAM 8G Core
i7</a>
<div class="summary line-clamp-1 mb-[3px]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price text-[18px] text-[#D80A00] font-bold">15.000.000đ</div>
<div class="locahost-pro flex items-center">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center ">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
ngày</span>
</div>
</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
<div
class="product-item-classifieds flex gap-[10px] border-b-[1px] border-[#E3E3E3] pb-[10px] mb-[10px]">
<a href="" class="product-image w-[80px] h-[70px]">
<img src="../../assets/images/box-image.png" class="block w-full object-contain"
alt="Laptop Dell" />
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-1 text-[15px] font-bold">Laptop văn phòng Dell
RAM 8G Core
i7</a>
<div class="summary line-clamp-1 mb-[3px]">
Intel Core i5 / 8GB / 256GB / SSD
</div>
<div class="price text-[18px] text-[#D80A00] font-bold">15.000.000đ</div>
<div class="locahost-pro flex items-center">
<i class="icon_2025 map-3"></i>
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
Xuân</span>
</div>
<div class="time-pro flex items-center mb-[5px]">
<i class="icon_2025 time-gray"></i>
<div class="flex items-center ">
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
<span class="ml-[5px]">|</span>
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
ngày</span>
</div>
</div>
<div class="user-pro flex items-center">
<img src="../../assets/images/avartar.png"
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
alt="avartar" />
<b class="ml-[7px]">Thanh Mai</b>
</div>
</div>
</div>
</div>
<a href=""
class="flex items-center justify-center gap-[5px] text-center py-[10px] text-[#FF7A00] font-bold">Xem
thêm
<i class="icon_2025 angle-bottom"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>

316
template/faq/detail.html Normal file
View File

@@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-mb">
<div class="page-faq-form bg-[#F4F4F4] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<p class="font-[600]" itemprop="name">
Hỏi đáp
</p>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="bg-white p-[10px] mt-[10px] rounded-[4px]">
<h1 class="mb-[10px] text-[16px] font-bold">Máy tính của mình đang bị lỗi, mình không khởi động
lại
được, mọi
người ai
biết giúp
mình với?</h1>
<div class="flex items-center">
<img src="../../assets/images/avartar.png" class="w-[32px] h-[32px] block object-contain"
width="100%" height="100%" alt="">
<b class="ml-[5px]">Dino</b>
<span class="ml-[5px] text-gray-500">10:00pm 20/02/2025</span>
</div>
<div class="flex items-center py-[15px] border-b-[1px] border-[#E3E3E3]">
<p class="mr-1">Tags:</p>
<div class="list flex flex-wrap gap-[10px]">
<a href=""
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
</div>
</div>
<div class="content leading-[25px] my-3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.</p>
<a href="" class="block mx-auto my-2 ">
<img src="https://placehold.co/950x600" class="w-full h-full object-contain block m-auto"
alt="">
</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.</p>
</div>
<div class="form-comment mt-[15ox] py-[15px] border-t-[1px] border-neutral-200">
<form
class="form flex flex-col gap-[10px] h-[120px] pb-[10px] border-[1px] border-[#d9d9d9] rounded-[8px]">
<textarea type="text" class="w-full h-full rounded-[8px] p-[10px] outline-none"></textarea>
<div class="flex items-center gap-[10px] justify-end pr-[10px]">
<a href="" class="">
<i class="icon_2025 earth"></i>
</a>
<a href="" class="">
<i class="icon_2025 images"></i>
</a>
<button type="submit"
class="px-5 py-0.5 text-white rounded-[4px] text-center bg-gray-400 uppercase">Gửi</button>
</div>
</form>
<div class="list mt-[20px] ">
<div
class="item-review flex flex-wrap mb-[15px] pb-[15px] gap-[10px] border-b-[1px] border-[#E3E3E3]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar">
</div>
<div class="w-[calc(100%-40px)]">
<div class="p-[10px] bg-[#f8f8f8] rounded-[8px]">
<div class="flex items-center gap-[10px] mb-[10px]">
<b class="">Dino</b>
<p class="block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of
type
and scrambled it to make a type specimen
book. I</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 like"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
</div>
<div class="list-reply mt-[15px] border-l-[1px] border-[#d4d4d4] pl-[30px]">
<div class="item-review flex gap-[10px] pb-[20px]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px"
height="75px" alt="avartar">
</div>
<div class="w-[calc(100%-40px)] relative">
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
<b class="mb-[10px]">Dino</b>
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of
the printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer
took a galley
of
type
and scrambled it to make a type specimen
book. I</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 like"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
">
</div>
</div>
</div>
<div class="item-review flex gap-[10px] pb-[20px]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px"
height="75px" alt="avartar">
</div>
<div class="w-[calc(100%-40px)] relative">
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
<b class="mb-[10px]">Dino</b>
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of
the printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer
took a galley
of
type
and scrambled it to make a type specimen
book. I</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 like"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
">
</div>
</div>
</div>
</div>
</div>
<div
class="item-review flex flex-wrap mb-[15px] pb-[15px] gap-[10px] border-b-[1px] border-[#E3E3E3]">
<div class="w-[30px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar">
</div>
<div class="w-[calc(100%-40px)]">
<div class="p-[10px] bg-[#f8f8f8] rounded-[8px]">
<div class="flex items-center gap-[10px] mb-[10px]">
<b class="">Dino</b>
<p class="block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of
type
and scrambled it to make a type specimen
book. I</p>
<div class="btn flex items-center">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 like"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class=" flex items-center justify-center text-[#ff7a00]">
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
</a>
</div>
</div>
<div class="bg-white mt-[10px] rounded-[4px]">
<h3 class="text-[16px] block p-[10px] font-bold border-b-[1px] border-[#95989a]">Top các câu hỏi
được
quan tâm
</h3>
<div class="list mt-2 p-[10px]">
<a href="" class="flex items-star mb-2.5 gap-[10px]">
<i
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
<span
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
PC cho
người mới bắt đầu như thế
nào, hướng dẫn mình với?</span>
</a>
<a href="" class="flex items-star mb-2.5 gap-[10px]">
<i
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
<span
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
PC cho
người mới bắt đầu như thế
nào, hướng dẫn mình với?</span>
</a>
<a href="" class="flex items-star mb-2.5 gap-[10px]">
<i
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
<span
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
PC cho
người mới bắt đầu như thế
nào, hướng dẫn mình với?</span>
</a>
<a href="" class="flex items-star mb-2.5 gap-[10px]">
<i
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
<span
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
PC cho
người mới bắt đầu như thế
nào, hướng dẫn mình với?</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

293
template/faq/home.html Normal file
View File

@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-mb">
<div class="page-faq bg-[#F4F4F4] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<p class="font-[600]" itemprop="name">
Hỏi đáp
</p>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="bg-white p-[10px] mt-[10px] rounded-[4px]">
<div class="flex items-center justify-between">
<h1 class="text-[16px] font-bold">Hỏi đáp</h1>
<button type="submit"
class="h-[35px] w-[100px] bg-[#0D0D9C] rounded-[4px] text-white font-bold hover:bg-blue-800 ">Đặt
câu
hỏi</button>
</div>
<form action="/search" enctype="text/plain" method="get" class="flex items-center mt-[15px]">
<div class="w-full h-[45px] relative rounded-[8px] input-search border border-[#dddddd]">
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
onclick="$('.autocomplete-suggestions').show();">
<div class="absolute left-0 top-0 w-[40px] h-[45px] flex items-center justify-center"><i
class="icon_2025 search-2 "></i></div>
</div>
</form>
<div class="list-tab mt-[15px] flex items-center gap-[10px]">
<a href="" class="bg-[var(--color-hover)] rounded-[4px] h-[40px] flex items-center px-[15px]">
<i class="block w-[20px] h-[20px] border-2 border-white text-white rounded-[50%] leading-[17px] text-center not-italic
">?</i>
<span class="text-[13px] font-bold ml-[5px] text-white ">Tất cả câu hỏi</span>
</a>
<a href=""
class="h-[40px] flex items-center rounded-[4px] px-[15px] border-[1px] border-[#E3E3E3]">
<i class="icon_2025 tag group-hover:brightness-0 group-hover:invert-[1] "></i>
<span class="text-[13px] font-bold ml-[5px] group-hover:text-white">Tag</span>
</a>
<a href="" class="h-[40px] flex items-center px-[15px] border-[1px] border-[#E3E3E3]">
<i class="icon_2025 faq group-hover:brightness-0 group-hover:invert-[1]"></i>
<span class="text-[13px] font-bold ml-[5px] group-hover:text-white">Quy định</span>
</a>
</div>
<select class="filter w-full p-[10px] border-[1px] border-[#7C7C7C] rounded-[4px] mt-[15px]">
<option value="">Câu hỏi thường gặp</option>
<option value="">Mới</option>
<option value="">Nhiều vote
nhất</option>
<option value="">Chưa trả
lời</option>
</select>
<div class="list my-[15px]">
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[5px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" class="block w-[30px] h-[30px] object-contain ">
<b class="mb-[10px]">Dino</b>
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<i class="icon-star star5"></i>
<p class="content my-[5px] text-[#303030] font-bold">Lorem Ipsum is simply dummy text of the
printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex py-2">
<p class="mr-1">Tags:</p>
<div class="list flex flex-wrap gap-[10px]">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
</div>
</div>
<div class="btn flex items-center mt-[5px]">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[5px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" class="block w-[30px] h-[30px] object-contain ">
<b class="mb-[10px]">Dino</b>
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<i class="icon-star star5"></i>
<p class="content my-[5px] text-[#303030] font-bold">Lorem Ipsum is simply dummy text of the
printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex py-2">
<p class="mr-1">Tags:</p>
<div class="list flex flex-wrap gap-[10px]">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
</div>
</div>
<div class="btn flex items-center mt-[5px]">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
<div class="item-review mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="flex items-center gap-[10px] mb-[5px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar" class="block w-[30px] h-[30px] object-contain ">
<b class="mb-[10px]">Dino</b>
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
</div>
<i class="icon-star star5"></i>
<p class="content my-[5px] text-[#303030] font-bold">Lorem Ipsum is simply dummy text of the
printing
and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex py-2">
<p class="mr-1">Tags:</p>
<div class="list flex flex-wrap gap-[10px]">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
</div>
</div>
<div class="btn flex items-center mt-[5px]">
<div class="flex items-center mr-[10px]">
<b class="mr-[5px]">120</b>
<i class="icon_2025 view"></i>
</div>
<div class="flex items-center">
<b class="mr-[5px]">120</b>
<i class="icon_2025 comment"></i>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)"
class="more-all js-viewmore-content item-btn flex items-center justify-center p-[5px] text-[#ff7a00]"
data-content="#content-desciption">
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
</a>
<div class="box-tag">
<b class="block my-[10px]">Hot tags</b>
<div class="list">
<div class="flex items-center mb-2">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<span>(130 câu hỏi)</span>
</div>
<div class="flex items-center mb-2">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<span>(130 câu hỏi)</span>
</div>
<div class="flex items-center mb-2">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<span>(130 câu hỏi)</span>
</div>
<div class="flex items-center mb-2">
<a href=""
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
<span>(130 câu hỏi)</span>
</div>
</div>
<a href="javascript:void" class="text-blue-600 underline">Xem thêm tags >></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

1245
template/homepage/homepage.html Normal file
View File

File diff suppressed because it is too large Load Diff

195
template/product/category-detail.html Normal file
View File

@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-category mb-[50px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Màn hình máy tính
</span> <i class="icon_2025 angle-right text-[#637381] ml-[12px]"></i>
</a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/aivision.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
AIVISION
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<h1 class="text-[16px] font-bold mt-[5px]">
Máy tính để bàn, máy tính xách tay và linh phụ kiện
</h1>
<div class="bg-[#F5F5F5] my-[15px] p-[10px]">
<h3 class="font-bold mb-2">Bộ lọc</h3>
<div class="flex overflow-auto gap-2">
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Lọc theo</option>
<option>Giá</option>
<option>Sản phẩm mới</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Thương hiệu</option>
<option>Apple</option>
<option>Samsung</option>
<option>Dell</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Địa chỉ</option>
<option>Hà Nội</option>
<option>TP.HCM</option>
<option>Đà Nẵng</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
<select
class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
<option>Nhà cung cấp</option>
<option>Nhà A</option>
<option>Nhà B</option>
</select>
</div>
</div>
<div class="product-list grid grid-cols-2 gap-[12px]">
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM
8G Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px] text-[13px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM
8G Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px] text-[13px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM
8G Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px] text-[13px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="product-item">
<a href="" class="product-image">
<img src="../../assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM
8G Core
i7</a>
<div class="price">15.000.000đ</div>
<div class="flex items-center justify-between mb-[5px]">
<del class="old-price">16.500.000đ</del>
<i class="icon-star star5"></i>
</div>
<div class="total-shop flex items-center">
<div class="box-shop"><i class="icon_2025 shop"></i></div>
<p class="ml-[7px] text-[13px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

132
template/product/category.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="container-mb">
<div class="page-category">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Màn hình máy tính
</span> <i class="icon_2025 angle-right text-[#637381] ml-[12px]"></i>
</a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/aivision.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
AIVISION
</span>
</a>
<meta itemprop="position" content="3">
</li>
</ol>
</div>
<div class="list grid grid-cols-2 gap-[12px] mt-[15px]">
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
<a href="" class="item">
<div
class="flex items-center justify-center w-full h-[125px] border-[1px] border-[#C0C0C0] border border-[#c0c0c0] rounded-[8px]">
<img src="../../assets/images/category-avatar.png"
class="block w-[85px] h-[85px] object-contain mx-auto" alt="">
</div>
<b class="block text-center text-[13px] mt-[10px] line-clamp-1">Máy chủ</b>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

1353
template/product/product-detail.html Normal file
View File

File diff suppressed because it is too large Load Diff

139
template/shop/detail.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-mb">
<div class="page-list-store bg-[#EFEFEF] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Tìm người bán
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="bg-white p-[10px] rounded-[4px] p-[10px] mt-[10px]">
<div class="flex gap-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="/template/shop/detail.html"
class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href="" class="">
<i class="icon_2025 heart "></i>
</a>
</div>
</div>
<div class="bg-white p-[10px] rounded-[4px] p-[15px] mt-[10px]">
<!-- Đánh giá -->
<div class="flex items-center justify-between pb-[15px] border-b">
<div class="flex items-center gap-[10px]">
<i class="fa-regular fa-star text-gray-500 text-[18px] w-[17px]"></i>
<span class="w-[63px]">Đánh giá</span>
<span class="text-red-500 font-semibold">4.6/5</span>
<span class="text-gray-600">4.6 (43 đánh giá)</span>
</div>
<i class="fas fa-chevron-right text-gray-400"></i>
</div>
<!-- Lĩnh vực -->
<div class="flex items-center gap-[10px] py-[15px] border-b">
<i class="icon_2025 shop w-[17px]"></i>
<span class="w-[63px] text-gray-600">Lĩnh vực</span>
<p class="flex-1 text-gray-800">
Chuyên mua bán trao đổi PC, laptop, linh phụ kiện máy tính
</p>
</div>
<!-- Địa chỉ -->
<div class="flex px-4 py-3 border-b">
<span class="w-24 text-gray-600">Địa chỉ</span>
<p class="flex-1 text-gray-800">
Tầng 7, tòa nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3, TP. Hồ Chí Minh
</p>
</div>
<!-- Showroom -->
<div class="flex px-4 py-3 border-b">
<span class="w-24 text-gray-600">Showroom</span>
<p class="flex-1 text-gray-800">Xem 7 showroom</p>
</div>
<!-- Website -->
<div class="flex px-4 py-3 border-b">
<span class="w-24 text-gray-600">Website</span>
<a href="https://cp.com.vn" class="text-blue-600">https://CP.com.vn/</a>
</div>
<!-- Tel -->
<div class="flex px-4 py-3 border-b">
<span class="w-24 text-gray-600">Tel</span>
<a href="tel:18006867" class="text-gray-800">1800 6867 - 1900 6865</a>
</div>
<!-- Social -->
<div class="flex items-center px-4 py-3 border-b">
<span class="w-24 text-gray-600">Social</span>
<div class="flex space-x-4 text-xl">
<a href="#" class="text-blue-600"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-red-500"><i class="fab fa-youtube"></i></a>
<a href="#" class="text-black"><i class="fab fa-tiktok"></i></a>
</div>
</div>
<!-- Mô tả -->
<div class="px-4 py-3">
<span class="block text-gray-600 mb-1">Mô tả</span>
<p class="text-gray-800 leading-relaxed text-sm">
Công ty Cổ phần Đầu tư Công nghệ HACOM (viết tắt là "HACOM", tiền thân là Công ty cổ phần
Máy tính Hà Nội, sở
hữu thương hiệu HANOCOMPUTER), được thành lập vào tháng 9/2001, hoạt động chuyên cung cấp và
bán lẻ các sản phẩm
máy tính và thiết bị văn phòng. Trải qua chặng đường hơn 20 năm phát triển, đến nay HACOM đã
trở thành một trong
những thương hiệu hàng đầu trong lĩnh vực kinh doanh các sản phẩm Công nghệ thông tin tại
Việt Nam với hệ thống
các showroom quy mô và hiện đại trải dài từ Bắc vào Nam.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

981
template/shop/home.html Normal file
View File

@@ -0,0 +1,981 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BESTPC - Trang chủ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-mb">
<div class="page-list-store bg-[#EFEFEF] pb-[100px]">
<div class="container">
<div class="breadcrumb p-[12px_0]">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
class="flex items-center pr-[12px]">
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
<span itemprop="name">
Tìm người bán
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="bg-white p-[10px] rounded-[4px] mt-[10px]">
<h3 class="text-[16px] text-black font-bold mb-[10px]">Danh sách cửa hàng</h3>
<div class="full relative rounded-[8px] input-search border border-[#dddddd]">
<form action="/search" enctype="text/plain" method="get"
class="relative w-full h-[35px] bg-white rounded-[8px] overflow-hidden">
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
onclick="$('.autocomplete-suggestions').show();">
<button type="submit" class="absolute left-[10px] top-0 w-[40px] h-[35px] "><i
class="icon_2025 search-2 "></i></button>
</form>
</div>
<div class="flex items-center mt-[10px] p-[10px] bg-[#f3f3f3]">
<a href=""
class="block-inline border-[#cacaca] border p-[0_10px] h-[40px] leading-[37px] rounded-[4px] bg-[var(--color-global)] text-white mr-[10px]">Gần
tôi
nhất</a>
<a href=""
class="block-inline border-[#cacaca] border p-[0_20px] h-[40px] leading-[37px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đánh
giá tốt nhất</a>
<a href=""
class="block-inline border-[#cacaca] border p-[0_10px] h-[40px] leading-[37px] rounded-[4px] bg-[#fff] mr-[10px] hover:bg-[var(--color-global)] hover:text-white">Đã
xem</a>
</div>
<div class="list mt-[10px]">
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="/template/shop/detail.html"
class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#E2E2E2] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart-2 "></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="/template/shop/detail.html"
class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#FFECEC] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart"></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="/template/shop/detail.html"
class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#E2E2E2] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart-2 "></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="#" class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#E2E2E2] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart-2 "></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="#" class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#E2E2E2] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart-2 "></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="#" class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#E2E2E2] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart-2 "></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
<div class="item-store py-[15px] border-b-[1px] border-[#c8c8c8] ">
<div class="flex gap-[10px] mb-[10px]">
<div class="logo w-[60px] h-[60px] border border-[#d4d4d4] mr-[10px]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full h-full p-[5px] object-contain block" alt="h acom" />
</div>
<div class="w-[calc(100%-90px)]">
<a href="#" class="name-store line-clamp-2 font-bold mb-[3px] text-[16px]">
Hanoicomputer - Công cổ phần máy tính Hà Nội
</a>
</div>
<a href=""
class="bg-[#E2E2E2] rounded-[50%] w-[40px] h-[40px] flex items-center justify-center">
<i class="icon_2025 heart-2 "></i>
</a>
</div>
<a href="" class="flex items-center mb-[5px]">
<i class="icon_2025 shop-blue"></i>
<span class="ml-[5px] text-[#1877f2] text-[13px]">Chuyên mua bán trao đổi PC, laptop,
linh phụ kiện máy tính</span>
</a>
<div class="flex mb-[5px]">
<div class="w-[24px] block">
<i class="icon_2025 map-2"></i>
</div>
<p class="ml-[5px] w-[calc(100%-34px)]">Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh
Khai, phường
6,
quận 3, TP. Hồ
Chí Minh</p>
</div>
<div class="flex items-center gap-[10px]">
<a href="" class="flex items-center mb-[5px]">
<div class="w-[24px]">
<i class="icon_2025 map-4"></i>
</div>
<span class="ml-[5px] text-[#FF7A00] hover:underline ">Google Maps</span>
</a>
<a href="" class="flex items-center">
<div class="w-[24px]">
<i class="icon_2025 showroom"></i>
</div>
<span class="ml-[5px] text-[#1877f2] underline hover:font-bold">Có 7
showroom</span>
</a>
</div>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 phone"></i></div>
<span class="ml-[5px]">Tel: 1800 6867 - 1800 6865</span>
</a>
<a href="" class="flex items-center mt-[5px]">
<div class="w-[24px]"><i class="icon_2025 earth"></i></div>
<span class="ml-[5px]">Web: https:/hacom.com.vn/</span>
</a>
<div class="btn my-[10px]">
<div class="flex items-center">
<i class="icon-star star4"></i>
<span class="mx-[5px]">4.6</span>
<a href="javascript:void(0)" onclick="showListReview()"
class="font-[500] underline hover:text[var(--color-hover)]">(Xem
47 đánh
giá)</a>
</div>
<div class="flex items-center justify-between mt-[5px]">
<a href="javascript:void()" onclick="showReview()"
class="block underline hover:text-[#1877f2]">Đánh giá về
chất
lượng
dịch vụ</a>
<a href=""
class="flex items-center gap-[10px] font-bold text-[#462F91] underline">Liên
hệ <i
class="icon_2025 link-review invert-[20%] sepia-[35%] saturate-[3500%] hue-rotate-[230deg] brightness-[90%] contrast-[90%]"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white p-[10px] rounded-[4px] mt-[10px]">
<div class="flex items-center justify-between">
<p class="text-[#462F91] font-bold">Giới thiệu cửa hàng mới</p>
<a href="javascript:void()" onclick="showFormStoreNew()">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.8 5.59995C19.8 7.03212 19.231 8.40563 18.2184 9.41833C17.2057 10.431 15.8321 11 14.4 11C12.9678 11 11.5943 10.431 10.5816 9.41833C9.5689 8.40563 8.99998 7.03212 8.99998 5.59995C8.99998 4.16778 9.5689 2.79427 10.5816 1.78157C11.5943 0.768878 12.9678 0.199951 14.4 0.199951C15.8321 0.199951 17.2057 0.768878 18.2184 1.78157C19.231 2.79427 19.8 4.16778 19.8 5.59995ZM15 3.19995C15 3.04082 14.9368 2.88821 14.8242 2.77569C14.7117 2.66317 14.5591 2.59995 14.4 2.59995C14.2408 2.59995 14.0882 2.66317 13.9757 2.77569C13.8632 2.88821 13.8 3.04082 13.8 3.19995V4.99995H12C11.8408 4.99995 11.6882 5.06317 11.5757 5.17569C11.4632 5.28821 11.4 5.44082 11.4 5.59995C11.4 5.75908 11.4632 5.91169 11.5757 6.02422C11.6882 6.13674 11.8408 6.19995 12 6.19995H13.8V7.99995C13.8 8.15908 13.8632 8.31169 13.9757 8.42422C14.0882 8.53674 14.2408 8.59995 14.4 8.59995C14.5591 8.59995 14.7117 8.53674 14.8242 8.42422C14.9368 8.31169 15 8.15908 15 7.99995V6.19995H16.8C16.9591 6.19995 17.1117 6.13674 17.2242 6.02422C17.3368 5.91169 17.4 5.75908 17.4 5.59995C17.4 5.44082 17.3368 5.28821 17.2242 5.17569C17.1117 5.06317 16.9591 4.99995 16.8 4.99995H15V3.19995ZM16.2 12.8C16.2 12.5132 16.1328 12.242 16.014 12.0008C16.494 11.8797 16.959 11.705 17.4 11.48V17C17.4 17.6365 17.1471 18.2469 16.697 18.697C16.2469 19.1471 15.6365 19.4 15 19.4H2.99998C2.36346 19.4 1.75301 19.1471 1.30292 18.697C0.852832 18.2469 0.599976 17.6365 0.599976 17V6.19995C0.599976 5.24517 0.97926 4.3295 1.65439 3.65437C2.32952 2.97924 3.2452 2.59995 4.19998 2.59995H8.51998C8.32399 2.9836 8.16603 3.38552 8.04838 3.79995H4.19998C3.56346 3.79995 2.95301 4.05281 2.50292 4.50289C2.05283 4.95298 1.79998 5.56343 1.79998 6.19995V10.4C2.13223 10.1507 2.51263 9.97306 2.91709 9.87844C3.32155 9.78382 3.74125 9.77422 4.14962 9.85025C4.55798 9.92628 4.94611 10.0863 5.28941 10.3201C5.63271 10.554 5.92371 10.8566 6.14398 11.2088C6.51312 10.7276 6.99784 10.3475 7.55314 10.1037C8.10844 9.85995 8.71633 9.76042 9.32038 9.81435C10.2143 10.8924 11.4281 11.6581 12.786 12.0008C12.6633 12.2493 12.5996 12.5228 12.6 12.8V18.2H15C15.3182 18.2 15.6235 18.0735 15.8485 17.8485C16.0735 17.6234 16.2 17.3182 16.2 17V12.8ZM11.4 13.4C11.4 12.7634 11.1471 12.153 10.697 11.7029C10.2469 11.2528 9.6365 11 8.99998 11C8.36346 11 7.75301 11.2528 7.30292 11.7029C6.85283 12.153 6.59998 12.7634 6.59998 13.4V18.2H11.4V13.4ZM1.79998 17C1.79998 17.3182 1.9264 17.6234 2.15145 17.8485C2.37649 18.0735 2.68172 18.2 2.99998 18.2H5.39998V12.8C5.39998 12.3226 5.21033 11.8647 4.87277 11.5272C4.5352 11.1896 4.07737 11 3.59998 11C3.12259 11 2.66475 11.1896 2.32718 11.5272C1.98962 11.8647 1.79998 12.3226 1.79998 12.8V17Z"
fill="#462F91" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="backgroundPopup" onclick="closeBackground()"></div>
<div class="box-form-review hidden fixed left-[50%] top-[50%] w-[95%] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[10px]"
id="js-box-review">
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
<b class="text-center text-xl block">Đánh giá sản phẩm</b>
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
</div>
<div class="info-form-review w-full mx-[auto]">
<a href="" class="block w-[100px] h-[100px] m-[10px_auto] p-[10px] rounded-[4px] border border-[#d4d4d4]">
<img src="../../assets/images/logo-hacom.png" width="100%" height="100%"
class="block w-full h-[100%] m-[auto] object-contain" alt="">
</a>
<a href="" class="text-center block mb-[10px]">Hanoicomputer - Công cổ phần máy tính Hà Nội</a>
<div class="flex justify-center">
<div class="rating-selection">
<input type="radio" class="rating-input" id="star5" name="rating" value="5">
<label for="star5" class="rating-star"></label>
<input type="radio" class="rating-input" id="star4" name="rating" value="4">
<label for="star4" class="rating-star"></label>
<input type="radio" class="rating-input" id="star3" name="rating" value="3">
<label for="star3" class="rating-star"></label>
<input type="radio" class="rating-input" id="star2" name="rating" value="2">
<label for="star2" class="rating-star"></label>
<input type="radio" class="rating-input" id="star1" name="rating" value="1">
<label for="star1" class="rating-star"></label>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="form-input mt-[20px]">
<input type="text" name="title" placeholder="Mời bạn nhập tiêu đề..." />
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<textarea name="content" placeholder="Mời bạn chia sẻ cảm nhận..." id=""></textarea>
<div class="note-error"></div>
</div>
<input id="js-file-upload-id" type="hidden" value="">
<div id="js-container-selector" class="mt-[10px] flex items-center">
<a href="javascript:void(0)" class="flex items-center" id="js-select-file">
<i class="icon_2025 upload_image"></i>
<span class="text-[#1877F2] ml-[5px]">Gửi ảnh thực tế</span>
<span class="px-[5px]">(tối đa 3 ảnh)</span>
</a>
</div>
<div class="mt-[15px] flex items-center">
<p class="mr-[10px]">Chấm điểm theo trải nghiệm cá nhân</p>
<input type="number" name="point" min="1" max="10"
class="w-[70px] h-[35px] p-[10px] border border-[#c1c1c1] rounded-[4px]" />
</div>
<button type="submit"
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
đánh
giá</button>
</div>
<div class="box-list-review hidden fixed left-[50%] top-[50%] w-[95%] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[10px]"
id="js-box-list-review">
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
<b class="text-center text-xl block">Đánh giá của khách hàng</b>
<span class="mt-[5px] text-center block">(102 đánh giá)</span>
<a href="javascript:void(0)" onclick="closeReview()" id="js-close-review"
class="absolute right-0 top-[-5px] text-[#808080] text-[22px] ">x</a>
</div>
<div class="list-review max-h-[600px] overflow-auto">
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
<div class="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p>
</div>
</div>
<div class="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]">
<i class="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex items-center mb-[10px]">
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
</div>
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
<div class="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
Bình luận <span class="ml-[3px] text-black">(23)</span>
</a>
<a href="javascript:void(0)" class="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span>
</a>
</div>
</div>
</div>
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
<div class="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p>
</div>
</div>
<div class="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]">
<i class="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex items-center mb-[10px]">
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
</div>
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
<div class="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
Bình luận <span class="ml-[3px] text-black">(23)</span>
</a>
<a href="javascript:void(0)" class="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span>
</a>
</div>
</div>
</div>
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
<div class="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p>
</div>
</div>
<div class="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]">
<i class="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex items-center mb-[10px]">
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
</div>
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
<div class="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
Bình luận <span class="ml-[3px] text-black">(23)</span>
</a>
<a href="javascript:void(0)" class="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span>
</a>
</div>
</div>
</div>
<div class="item-review flex mb-[15px] py-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="../../assets/images/avartar-review-1.png" width="75px" height="75px" alt="avartar">
<div class="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b>
<p class="text-center">10:00pm 20/02/2025</p>
</div>
</div>
<div class="w-[calc(100%-100px)]">
<div class="flex items-center mb-[5px]">
<i class="icon-star star4"></i>
<b class="ml-[10px]">Laptop Gaming Asus ROG 16GB</b>
</div>
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
typesetting
industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen
book. I</p>
<div class="flex items-center mb-[10px]">
<a href="/src../../assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
<a href="/src../../assets/images/small-product-detail.png" class="w-[80px] block mr-[10px]"
data-fancybox="gallery">
<img src="../../assets/images/small-product-detail.png" class="w-[100%] block" alt="">
</a>
</div>
<div class="mb-[5px]">Đánh giá: <b>8/10</b></div>
<div class="btn">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px]">
Bình luận <span class="ml-[3px] text-black">(23)</span>
</a>
<a href="javascript:void(0)" class="text-[#1877F2]">
Thích <span class="ml-[3px] text-black">(23)</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-form-store hidden fixed left-[50%] top-[50%] w-[95%] bg-white rounded-[12px] translate-x-[-50%] translate-y-[-50%] z-[999] p-[10px]"
id="js-form-store">
<div class="title relative pb-[15px] border-b-[1px] border-[#E4E4E4]">
<b class="text-center text-xl block">Giới thiệu cửa hàng mới</b>
<a href="javascript:void(0)" onclick="closeFormStore()" id="js-close-store"
class="absolute right-0 top-0 text-[#808080] text-[22px] ">x</a>
</div>
<div class="form-input mt-[10px]">
<label for="" class="block mb-[5px]">Tên cửa hàng</label>
<input type="text" name="title" placeholder="Mời bạn nhập tên cửa hàng..." />
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<label for="" class="block mb-[5px]">Website</label>
<input type="text" name="web" placeholder="Mời bạn nhập link website..." />
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<label for="" class="block mb-[5px]">Tỉnh thành</label>
<div class="relative select-arrow">
<select name="" id="">
<option value="">Chọn tỉnh thành</option>
<option value="">Hà nội</option>
</select>
</div>
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<label for="" class="block mb-[5px]">Địa chỉ</label>
<input type="text" name="address" placeholder="Mời bạn nhập địa chỉ cửu hàng..." />
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<label for="" class="block mb-[5px]">Mô tả</label>
<textarea type="text" name="note" placeholder="Mời bạn nhập mô tả..."></textarea>
<div class="note-error"></div>
</div>
<div class="form-input mt-[10px]">
<label for="" class="block mb-[5px]">Thông tin người liên hệ</label>
<input type="text" name="info" placeholder="Mời bạn nhập thông tin..." />
<div class="note-error"></div>
</div>
<button type="submit"
class="mt-[15px] w-full h-[45px] bg-[#C8B7FF] rounded-[4px] text-white leading-[45px] hover:bg-[var(--color-global)]">Gửi
đánh
giá</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function showReview() {
$("#js-box-review").removeClass('hidden');
$("#backgroundPopup").addClass('active');
}
function showListReview() {
$("#js-box-list-review").removeClass('hidden');
$("#backgroundPopup").addClass('active');
}
function closeReview() {
$("#js-box-review").addClass('hidden');
$('#js-box-list-review').addClass('hidden');
$("#backgroundPopup").removeClass('active');
}
function closeFormStore() {
$("#js-form-store").addClass('hidden');
$("#backgroundPopup").removeClass('active');
}
function closeBackground() {
$("#js-box-review").addClass('hidden');
$('#js-box-list-review').addClass('hidden');
$("#js-form-store").addClass('hidden');
$("#backgroundPopup").removeClass('active');
}
function showFormStoreNew() {
$("#js-form-store").removeClass('hidden');
$("#backgroundPopup").addClass('active');
}
</script>
</body>
</html>