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

upload

Browse Source
This commit is contained in:
Tieptk
2025-05-12 10:12:41 +07:00
parent 96b9fc06d2
commit 3739ee2baa
21 changed files with 1034 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
account.html
View File

@@ -1,132 +0,0 @@
<!doctype html>
<html lang="vi">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="page-account 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ài khoản
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="mt-5 flex gap-[10px]">
<div class="left w-[20%]">
<div class="bg-white p-2 mb-3">
<div class="flex items-center">
<img src="./src/assets/images/avartar.png"
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
<div class="w-[calc(100%-60px)]">
<b class="block mb-0.3">Chi phạm</b>
<p class="text-[#707070]">Chipham2z@gmail.com</p>
</div>
</div>
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
</div>
<div class="bg-white p-2 py-3 mb-3">
<a href="" class="flex items-center gap-[5px] mb-2.5">
<i class="icon_2025 list_faq"></i>
<span>Danh sách câu hỏi</span>
</a>
<a href="" class="flex items-center gap-[5px] mb-2.5">
<i class="icon_2025 list_raovat"></i>
<span>Danh sách tin rao vặt</span>
</a>
<a href="" class="flex items-center gap-[5px] mb-2.5">
<i class="icon_2025 list_inbox"></i>
<span>Danh sách tin nhắn</span>
</a>
<a href="" class="flex items-center gap-[5px] mb-2.5">
<i class="icon_2025 info_save"></i>
<span>Danh sách các thông tin đã lưu</span>
</a>
</div>
</div>
<div class="right w-[80%]">
<div class="bg-white p-3">
<b class="mb-5 text-xl block">Thông tin cá nhân</b>
<img src="./src/assets/images/avartar_acc.png"
class="block w-[120px] h-[120px] rounded-full m-[0_auto_30px_auto] object-contain" alt="">
<div class="w-[620px] mx-auto pb-[100px]">
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Họ và tên</b>
<b>Chi phạm</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Email</b>
<b class="text-[#707070]">Chipham2z@gmail.com</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Số điện thoại</b>
<b class="text-[#707070]">098.240.2013</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Ngày sinh</b>
<b class="text-[#707070]">13/03/1999</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Tỉnh thành</b>
<b class="text-[#707070]">Hà nội</b>
</div>
<div class="flex items-center justify-between py-2">
<b>Giới tính</b>
<b class="text-[#707070]">Nữ</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

782
account/account.html Normal file
View File

@@ -0,0 +1,782 @@
<!doctype html>
<html lang="vi">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="page-account 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ài khoản
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="mt-5 flex gap-[10px]">
<div class="left w-[20%]">
<div class="bg-white p-2 mb-2">
<div class="flex items-center">
<img src="../src/assets/images/avartar.png"
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
<div class="w-[calc(100%-60px)]">
<b class="block mb-0.3">Chi phạm</b>
<p class="text-[#707070]">Chipham2z@gmail.com</p>
</div>
</div>
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
</div>
<div class="bg-white py-3 mb-3">
<a href="" class="item active flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_faq"></i>
<span>Danh sách câu hỏi</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_raovat"></i>
<span>Danh sách tin rao vặt</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_inbox"></i>
<span>Danh sách tin nhắn</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 info_save"></i>
<span>Danh sách các thông tin đã lưu</span>
</a>
</div>
</div>
<div class="right w-[80%]">
<div class="bg-white p-3">
<b class="mb-5 text-xl block">Thông tin cá nhân</b>
<img src="../src/assets/images/avartar_acc.png"
class="block w-[120px] h-[120px] rounded-full m-[0_auto_30px_auto] object-contain" alt="">
<div class="w-[620px] mx-auto pb-[100px]">
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Họ và tên</b>
<b>Chi phạm</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Email</b>
<b class="text-[#707070]">Chipham2z@gmail.com</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Số điện thoại</b>
<b class="text-[#707070]">098.240.2013</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Ngày sinh</b>
<b class="text-[#707070]">13/03/1999</b>
</div>
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<b>Tỉnh thành</b>
<b class="text-[#707070]">Hà nội</b>
</div>
<div class="flex items-center justify-between py-2">
<b>Giới tính</b>
<b class="text-[#707070]">Nữ</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-account 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ài khoản
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="mt-5 flex gap-[10px]">
<div class="left w-[20%]">
<div class="bg-white p-2 mb-2">
<div class="flex items-center">
<img src="../src/assets/images/avartar.png"
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
<div class="w-[calc(100%-60px)]">
<b class="block mb-0.3">Chi phạm</b>
<p class="text-[#707070]">Chipham2z@gmail.com</p>
</div>
</div>
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
</div>
<div class="bg-white py-3 mb-3">
<a href="" class="item active flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_faq"></i>
<span>Danh sách câu hỏi</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_raovat"></i>
<span>Danh sách tin rao vặt</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_inbox"></i>
<span>Danh sách tin nhắn</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 info_save"></i>
<span>Danh sách các thông tin đã lưu</span>
</a>
</div>
</div>
<div class="right w-[80%]">
<div class="bg-white p-3">
<div class="flex items-center justify-between py-2 border-b-[1px] border-[#e3e3e3]">
<h3 class="text-xl font-bold">Tất cả (203)</h3>
<select name="" id=""
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
<option value="">Tất cả</option>
<option value="">Sản phẩm mới</option>
</select>
</div>
<div class="list mt-3 max-h-[1000px] overflow-auto">
<div
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[40px]">
<div
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
01
</div>
</div>
<div class="w-[calc(100%-100px)]">
<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="../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="../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="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
<div class="btn flex items-center">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 view"></i>
</a>
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 comment"></i>
</a>
</div>
</div>
</div>
<div
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[40px]">
<div
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
01
</div>
</div>
<div class="w-[calc(100%-100px)]">
<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="../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="../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="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
<div class="btn flex items-center">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 view"></i>
</a>
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 comment"></i>
</a>
</div>
</div>
</div>
<div
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[40px]">
<div
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
01
</div>
</div>
<div class="w-[calc(100%-100px)]">
<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="../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="../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="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
<div class="btn flex items-center">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 view"></i>
</a>
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 comment"></i>
</a>
</div>
</div>
</div>
<div
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[40px]">
<div
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
01
</div>
</div>
<div class="w-[calc(100%-100px)]">
<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="../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="../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="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
<div class="btn flex items-center">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 view"></i>
</a>
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 comment"></i>
</a>
</div>
</div>
</div>
<div
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[40px]">
<div
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
01
</div>
</div>
<div class="w-[calc(100%-100px)]">
<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="../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="../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="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
<div class="btn flex items-center">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 view"></i>
</a>
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 comment"></i>
</a>
</div>
</div>
</div>
<div
class="item-review flex gap-[10px] mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[40px]">
<div
class="number w-full h-[40px] bg-[#EEE8FF] block text-center leading-[40px] rounded-[4px] font-bold text-[#462F91] ">
01
</div>
</div>
<div class="w-[calc(100%-100px)]">
<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="../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="../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="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
<div class="time pb-2 text-[#747474]">10:00pm 20/02/2025</div>
<div class="btn flex items-center">
<a href="javascript:void(0)" class="text-[#1877F2] mr-[10px] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 view"></i>
</a>
<a href="javascript:void(0)" class="text-[#1877F2] flex items-center">
<span class="mr-[5px] text-[#595959]">23</span> <i
class="icon_2025 comment"></i>
</a>
</div>
</div>
</div>
</div>
<!-- end list -->
</div>
</div>
</div>
</div>
</div>
<div class="page-account 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ài khoản
</span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
</div>
<div class="mt-5 flex gap-[10px]">
<div class="left w-[20%]">
<div class="bg-white p-2 mb-2">
<div class="flex items-center">
<img src="../src/assets/images/avartar.png"
class="w-[50px] h-[50px] rounded-full block mr-[10px] object-contain" alt="">
<div class="w-[calc(100%-60px)]">
<b class="block mb-0.3">Chi phạm</b>
<p class="text-[#707070]">Chipham2z@gmail.com</p>
</div>
</div>
<a href="" class="text-[#1877F2] font-bold mt-0.5 block">Xem hồ sơ</a>
</div>
<div class="bg-white py-3 mb-3">
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_faq"></i>
<span>Danh sách câu hỏi</span>
</a>
<a href="" class="item active flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_raovat"></i>
<span>Danh sách tin rao vặt</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 list_inbox"></i>
<span>Danh sách tin nhắn</span>
</a>
<a href="" class="item flex items-center gap-[5px] p-2 mb-1">
<i class="icon_2025 info_save"></i>
<span>Danh sách các thông tin đã lưu</span>
</a>
</div>
</div>
<div class="right w-[80%]">
<div class="bg-white">
<div class="flex items-center justify-between py-2 px-3 border-b-[1px] border-[#e3e3e3]">
<h3 class="text-xl font-bold">Tất cả (203)</h3>
<select name="" id=""
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
<option value="">Tất cả</option>
<option value="">Sản phẩm mới</option>
</select>
</div>
<div class="list sort_list mt-3">
<div class="product-item flex gap-[10px]">
<a href="" class="product-image">
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
class="w-full h-full block object-contain" />
</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="flex items-center justify-between">
<div>
<div class="price">15.000.000đ</div>
<div class="flex items-center mb-[5px]">
<div class="locahost-pro flex items-center mr-[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">
<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>
</div>
<a href=""
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
<b class="group-hover:text-white">Chi tiết</b>
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
<div class="user-pro flex items-center">
<img src="../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 flex gap-[10px]">
<a href="" class="product-image">
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
class="w-full h-full block object-contain" />
</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="flex items-center justify-between">
<div>
<div class="price">15.000.000đ</div>
<div class="flex items-center mb-[5px]">
<div class="locahost-pro flex items-center mr-[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">
<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>
</div>
<a href=""
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
<b class="group-hover:text-white">Chi tiết</b>
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
<div class="user-pro flex items-center">
<img src="../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 flex gap-[10px]">
<a href="" class="product-image">
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
class="w-full h-full block object-contain" />
</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="flex items-center justify-between">
<div>
<div class="price">15.000.000đ</div>
<div class="flex items-center mb-[5px]">
<div class="locahost-pro flex items-center mr-[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">
<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>
</div>
<a href=""
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
<b class="group-hover:text-white">Chi tiết</b>
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
<div class="user-pro flex items-center">
<img src="../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 flex gap-[10px]">
<a href="" class="product-image">
<img src="../src/assets/images/box-image.png" alt="Laptop Dell"
class="w-full h-full block object-contain" />
</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="flex items-center justify-between">
<div>
<div class="price">15.000.000đ</div>
<div class="flex items-center mb-[5px]">
<div class="locahost-pro flex items-center mr-[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">
<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>
</div>
<a href=""
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
<b class="group-hover:text-white">Chi tiết</b>
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
</a>
</div>
<div class="user-pro flex items-center">
<img src="../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>
<!-- end list -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>

22
buildpc-detail.html → buildpc/buildpc-detail.html
View File

@@ -6,10 +6,10 @@
<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="./src/assets/css/font.css">
<link rel="stylesheet" href="../src/assets/css/font.css">
<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="./src/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
</head>
@@ -55,15 +55,15 @@
<div class="swiper" id="js-slider-build-big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./src/assets/images/big-product-detail.png"
<img src="../src/assets/images/big-product-detail.png"
class="block w-full h-[400px] object-contain" alt="">
</div>
<div class="swiper-slide">
<img src="./src/assets/images/big-product-detail-3.jpg"
<img src="../src/assets/images/big-product-detail-3.jpg"
class="block w-full h-[400px] object-contain" alt="">
</div>
<div class="swiper-slide">
<img src="./src/assets/images/big-product-detail-4.jpg"
<img src="../src/assets/images/big-product-detail-4.jpg"
class="block w-full h-[400px] object-contain" alt="">
</div>
</div>
@@ -72,15 +72,15 @@
<div thumbsSlider="" class="swiper " id="js-slider-build-small">
<div class="swiper-wrapper">
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-full block h-[80px] object-contain " alt="">
</div>
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-full block h-[80px] object-contain" alt="">
</div>
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-full block h-[80px] object-contain" alt="">
</div>
</div>
@@ -155,7 +155,7 @@
<div
class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
<a href="" class="block">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="">
</a>
<div class="price font-bold">3.700.000Vnđ</div>
@@ -173,7 +173,7 @@
<div
class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
<a href="" class="block">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[28px] object-contain" alt="">
</a>
<div class="price font-bold">3.700.000Vnđ</div>
@@ -270,7 +270,7 @@
<div class="list mt-3">
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
<img src="../src/assets/images/avartar-review-1.png" width="75px" height="75px"
alt="avartar">
<div class="mt-[10px]">
<i class="icon-star star5"></i>

77
buildpc.html → buildpc/buildpc.html
View File

@@ -6,10 +6,10 @@
<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="./src/assets/css/font.css">
<link rel="stylesheet" href="../src/assets/css/font.css">
<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="./src/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
</head>
@@ -83,7 +83,7 @@
</div>
<!-- list button -->
<div class="content-tab hidden" id="create-component">
<div class="content-tab" id="create-component">
<div class="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
<b class="left w-[200px] name-component">
Sản phẩm
@@ -116,7 +116,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -136,7 +136,7 @@
</b>
<div class="supplier col-span-2 flex items-center justify-between">
<a href="">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[30px] object-contain" alt="">
</a>
<div class="btn flex items-center">
@@ -160,7 +160,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -180,7 +180,7 @@
</b>
<div class="supplier col-span-2 flex items-center justify-between">
<a href="">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[30px] object-contain" alt="">
</a>
<div class="btn flex items-center">
@@ -198,7 +198,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -218,7 +218,7 @@
</b>
<div class="supplier col-span-2 flex items-center justify-between">
<a href="">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-full block h-[30px] object-contain" alt="">
</a>
<div class="btn flex items-center">
@@ -241,7 +241,7 @@
CPU Cooler
</b>
<div class="right w-[calc(100%-200px)]">
<a href="javascript:void(0)"
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
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 thêm CPU</a>
</div>
@@ -251,7 +251,7 @@
CPU Cooler
</b>
<div class="right w-[calc(100%-200px)]">
<a href="javascript:void(0)"
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
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 thêm CPU</a>
</div>
@@ -261,7 +261,7 @@
CPU Cooler
</b>
<div class="right w-[calc(100%-200px)]">
<a href="javascript:void(0)"
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
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 thêm CPU</a>
</div>
@@ -271,7 +271,7 @@
CPU Cooler
</b>
<div class="right w-[calc(100%-200px)]">
<a href="javascript:void(0)"
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
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 thêm CPU</a>
</div>
@@ -281,7 +281,7 @@
CPU Cooler
</b>
<div class="right w-[calc(100%-200px)]">
<a href="javascript:void(0)"
<a href="javascript:void(0)" onclick="showPopupBuildpc()"
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 thêm CPU</a>
</div>
@@ -306,7 +306,7 @@
<!-- tổng tiền -->
</div>
<div class="content-tab" id="compare-component">
<div class="content-tab hidden" id="compare-component">
<div class="list-component mt-5">
@@ -314,7 +314,7 @@
<div class="flex items-center border-b-[1px] border-neutral-200 pb-3">
<b class="left w-[200px] name-component">
<a href="" class="block m-[auto_auto_auto_0]">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-[150px] block h-[50px] object-contain" alt="">
</a>
</b>
@@ -346,7 +346,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -384,7 +384,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -425,7 +425,7 @@
<div class="flex items-center border-b-[1px] border-neutral-200 pb-3">
<b class="left w-[200px] name-component">
<a href="" class="block m-[auto_auto_auto_0]">
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
<img src="../src/assets/images/logo-hacom.png" width="100%" height="100%"
class="w-[150px] block h-[50px] object-contain" alt="">
</a>
</b>
@@ -457,7 +457,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -495,7 +495,7 @@
<div class="flex items-center">
<a href=""
class="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%"
height="100%" class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -560,7 +560,7 @@
</form>
</div>
<a href="javascript:void(0)" onclick="close_pupup()" class="w-[54px] flex items-center justify-end">
<a href="javascript:void(0)" onclick="closeBuildpc()" class="w-[54px] flex items-center justify-end">
<i class="icon_2025 close brightness-0 invert-[1]"></i>
</a>
@@ -708,7 +708,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -740,7 +740,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -772,7 +772,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -804,7 +804,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -836,7 +836,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -868,7 +868,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -900,7 +900,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -932,7 +932,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -964,7 +964,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -996,7 +996,7 @@
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
<a href=""
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
<img src="../src/assets/images/lienkien-ram.png" width="100%" height="100%"
class="block w-full h-full object-contain" alt="">
</a>
<a href=""
@@ -1029,6 +1029,19 @@
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function showPopupBuildpc() {
$('#js-modal-popup').removeClass("hidden");
$('#backgroundPopup').addClass('active')
}
function closeBuildpc() {
$('#js-modal-popup').addClass("hidden");
$('#backgroundPopup').removeClass('active')
}
</script>
</body>

0
form_classified.html → classified/form_classified.html
View File

0
page-classified-detail.html → classified/page-classified-detail.html
View File

0
page-classifieds.html → classified/page-classifieds.html
View File

0
page_faq.html → faq/page_faq.html
View File

0
page_faq_detail.html → faq/page_faq_detail.html
View File

0
page_faq_form.html → faq/page_faq_form.html
View File

157
homepage.html → homepage/homepage.html
View File

@@ -20,20 +20,19 @@
},
};
</script>
<link rel="stylesheet" href="./src/assets/css/font.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<main class="flex overflow-hidden flex-col items-center bg-white">
<!-- Header Section -->
<header class="w-full">
<div class="header-main px-16 py-6 bg-global">
<div class="header-main px-16 py-6 bg-[var(--color-global)]">
<div class="container">
<div class="flex items-center justify-between">
<a href="/" class="logo block mr-[100px]">
<img src="./src/assets/images/logo.png" class="object-contain w-[173px] h-[45px] block"
<img src="../src/assets/images/logo.png" class="object-contain w-[173px] h-[45px] block"
alt="Location icon" />
</a>
<div class="flex items-center mr-[100px]">
@@ -495,25 +494,25 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-slider.png"
<img src="../src/assets/images/banner-slider.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-slider.png"
<img src="../src/assets/images/banner-slider.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-slider.png"
<img src="../src/assets/images/banner-slider.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="" class="block w-full h-full rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-slider.png"
<img src="../src/assets/images/banner-slider.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
@@ -523,20 +522,20 @@
</div>
<div class="banner-right w-1/2 grid grid-cols-2 gap-[10px]">
<a href="" class="item relative effect-image block rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-right-slider-1.png"
<img src="../src/assets/images/banner-right-slider-1.png"
class="block w-full h-full object-contain transition-all duration-500 ease-in-out"
width="100%" height="100%" alt="">
</a>
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-right-slider-2.png"
<img src="../src/assets/images/banner-right-slider-2.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-right-slider-3.png"
<img src="../src/assets/images/banner-right-slider-3.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
<a href="" class="item block effect-image rounded-[12px] overflow-hidden">
<img src="./src/assets/images/banner-right-slider-4.png"
<img src="../src/assets/images/banner-right-slider-4.png"
class="block w-full h-full object-contain" width="100%" height="100%" alt="">
</a>
</div>
@@ -582,7 +581,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -603,7 +602,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -624,7 +623,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -645,7 +644,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -666,7 +665,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -687,7 +686,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -708,7 +707,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="box-saleoff">-20%</div>
</a>
<div class="info-product">
@@ -754,8 +753,8 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-1.png" class="object-contain aspect-[1.29] w-[90px]"
alt="Laptop văn phòng" />
<img src="../src/assets/images/icon-cate-1.png"
class="object-contain aspect-[1.29] w-[90px]" alt="Laptop văn phòng" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
Laptop văn phòng
@@ -766,8 +765,8 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-2.png" class="object-contain aspect-[0.96] w-[89px]"
alt="Tản nhiệt, đèn" />
<img src="../src/assets/images/icon-cate-2.png"
class="object-contain aspect-[0.96] w-[89px]" alt="Tản nhiệt, đèn" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
Tản nhiệt, đèn
@@ -778,7 +777,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[1111px] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-3.png"
<img src="../src/assets/images/icon-cate-3.png"
class="object-contain aspect-[1.06] w-[104px]" alt="Linh kiện máy tính" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -790,7 +789,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-4.png"
<img src="../src/assets/images/icon-cate-4.png"
class="object-contain aspect-[1.24] w-[107px]" alt="Bàn phím, chuột" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -802,7 +801,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-1.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-5.png"
<img src="../src/assets/images/icon-cate-5.png"
class="object-contain aspect-[1.02] rounded-[50%] w-[122px] effect-image"
alt="Màn hình, tay treo" />
</div>
@@ -814,8 +813,8 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-6.png" class="object-contain aspect-[0.88] w-[81px]"
alt="Lưu trữ, phần mềm" />
<img src="../src/assets/images/icon-cate-6.png"
class="object-contain aspect-[0.88] w-[81px]" alt="Lưu trữ, phần mềm" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
Lưu trữ,phần mềm
@@ -826,8 +825,8 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] effect-image w-[120px]">
<img src="./src/assets/images/icon-cate-7.png" class="object-contain aspect-[0.93] w-[92px]"
alt="Phụ kiện laptop" />
<img src="../src/assets/images/icon-cate-7.png"
class="object-contain aspect-[0.93] w-[92px]" alt="Phụ kiện laptop" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
Phụ kiện laptop
@@ -838,7 +837,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-8.png" class="object-contain w-20 aspect-[1.18]"
<img src="../src/assets/images/icon-cate-8.png" class="object-contain w-20 aspect-[1.18]"
alt="Phụ kiện PC" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[--color-global]">
@@ -850,8 +849,8 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-9.png" class="object-contain aspect-[1.29] w-[90px]"
alt="Laptop Gaming" />
<img src="../src/assets/images/icon-cate-9.png"
class="object-contain aspect-[1.29] w-[90px]" alt="Laptop Gaming" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
Laptop Gaming
@@ -862,7 +861,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-10.png"
<img src="../src/assets/images/icon-cate-10.png"
class="object-contain aspect-[0.83] w-[85px]" alt="Phụ kiện đi kèm" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -874,7 +873,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-11.png"
<img src="../src/assets/images/icon-cate-11.png"
class="object-contain aspect-[0.93] w-[100px]" alt="PC đồ hoạ, gaming" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -886,7 +885,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-start px-4 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-12.png"
<img src="../src/assets/images/icon-cate-12.png"
class="object-contain aspect-[0.93] w-[100px]" alt="PC Văn phòng" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -898,7 +897,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-3.5 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-13.png"
<img src="../src/assets/images/icon-cate-13.png"
class="object-contain aspect-[0.95] w-[95px]" alt="Thiết bị mạng" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -910,7 +909,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-6 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-14.png"
<img src="../src/assets/images/icon-cate-14.png"
class="object-contain aspect-[0.67] w-[67px]" alt="Loa, tai nghe, mic" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -922,7 +921,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-15.png"
<img src="../src/assets/images/icon-cate-15.png"
class="object-contain aspect-[1.15] w-[100px]" alt="Thiết bị văn phòng" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -934,7 +933,7 @@
<a href="" class="item">
<div
class="flex flex-col justify-center items-center px-3 bg-violet-50 h-[120px] rounded-[50%] w-[120px] effect-image">
<img src="./src/assets/images/icon-cate-16.png"
<img src="../src/assets/images/icon-cate-16.png"
class="object-contain aspect-[1.75] w-[98px]" alt="Game pad" />
</div>
<p class="mt-3 text-xl font-medium text-center text-black hover:text-[var(--color-global)]">
@@ -964,7 +963,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-hacom.png"
<img src="../src/assets/images/logo-hacom.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -972,7 +971,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-anphat.png"
<img src="../src/assets/images/logo-anphat.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -980,7 +979,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-gearvn.png"
<img src="../src/assets/images/logo-gearvn.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -988,7 +987,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-hacom.png"
<img src="../src/assets/images/logo-hacom.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -996,7 +995,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-anphat.png"
<img src="../src/assets/images/logo-anphat.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -1004,7 +1003,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-gearvn.png"
<img src="../src/assets/images/logo-gearvn.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -1012,7 +1011,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-hacom.png"
<img src="../src/assets/images/logo-hacom.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -1020,7 +1019,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-anphat.png"
<img src="../src/assets/images/logo-anphat.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -1028,7 +1027,7 @@
<div class="swiper-slide">
<a href=""
class="block py-[10px] shadow-[1px_2px_8px_0_#72727240] rounded-[4px] overflow-hidden bg-white group">
<img src="./src/assets/images/logo-gearvn.png"
<img src="../src/assets/images/logo-gearvn.png"
class="block w-[full] h-[50px] object-contain translate-y-0 transition-all duration-200 ease-in group-hover:translate-y-[-3px]"
width="100%" height="100%" alt="">
</a>
@@ -1058,7 +1057,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
@@ -1078,7 +1077,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
@@ -1098,7 +1097,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
@@ -1118,7 +1117,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../src/assets/images/box-image.png" alt="Laptop Dell" />
<div class="icon-save"><i class="icon_2025 heart"></i></div>
</a>
<div class="info-product">
@@ -1163,7 +1162,7 @@
<div class="list mt-5">
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1183,7 +1182,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1203,7 +1202,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1223,7 +1222,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1262,7 +1261,7 @@
<div class="list mt-5">
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1282,7 +1281,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1302,7 +1301,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1322,7 +1321,7 @@
</div>
<div class="item-article">
<a href="" class="image-article effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-article line-clamp-1">Xu hướng công nghệ nhìn từ CES 2025</a>
@@ -1360,7 +1359,7 @@
<div class="list mt-5">
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1382,7 +1381,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../src/assets/images/avartar.png"
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b>
@@ -1391,7 +1390,7 @@
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1413,7 +1412,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../src/assets/images/avartar.png"
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b>
@@ -1422,7 +1421,7 @@
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1444,7 +1443,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../src/assets/images/avartar.png"
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b>
@@ -1453,7 +1452,7 @@
</div>
<div class="item-classifieds">
<a href="" class="image-classifieds effect-image">
<img src="./src/assets/images/image-article.png" alt="">
<img src="../src/assets/images/image-article.png" alt="">
</a>
<div class="info">
<a href="" class="name-classifieds line-clamp-1">Xu hướng công nghệ nhìn từ CES
@@ -1475,7 +1474,7 @@
</div>
</div>
<a href="" class="staff flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../src/assets/images/avartar.png"
class="w-[24px] h-[24px] block object-contain rounded-full" width="100%"
height="100%" alt="avartar">
<b class="ml-[5px]">Thanh mai</b>
@@ -1499,19 +1498,19 @@
<div class="container">
<div class="flex gap-[8px]">
<a href="" class="item effect-image">
<img src="./src/assets/images/banner-sale-1.png" width="100%" height="100%"
<img src="../src/assets/images/banner-sale-1.png" width="100%" height="100%"
class="object-contain w-full h-full rounded-xl" alt="">
</a>
<a href="" class="item effect-image">
<img src="./src/assets/images/banner-sale-2.png" width="100%" height="100%"
<img src="../src/assets/images/banner-sale-2.png" width="100%" height="100%"
class="object-contain w-full h-full rounded-xl" alt="">
</a>
<a href="" class="item effect-image">
<img src="./src/assets/images/banner-sale-3.png" width="100%" height="100%"
<img src="../src/assets/images/banner-sale-3.png" width="100%" height="100%"
class="object-contain w-full h-full rounded-xl" alt="">
</a>
<a href="" class="item effect-image">
<img src="./src/assets/images/banner-sale-4.png" width="100%" height="100%"
<img src="../src/assets/images/banner-sale-4.png" width="100%" height="100%"
class="object-contain w-full h-full rounded-xl" alt="">
</a>
</div>
@@ -1534,24 +1533,24 @@
<div class="list flex gap-[8px] mt-6">
<a class="box-big w-full w-[47%] h-[365px]" href="javascript:void(0)" id="js-video"
data-url="https://www.youtube.com/watch?v=LcQBXGLWX8I">
<img src="./src/assets/images/promotions-big.png" width="100%" height="100%"
<img src="../src/assets/images/promotions-big.png" width="100%" height="100%"
class="object-cover w-full h-full rounded-xl" alt="">
</a>
<div class="grid grid-cols-2 w-[53%] gap-[8px]">
<a href="" class="item effect-image">
<img src="./src/assets/images/promotions-1.png"
<img src="../src/assets/images/promotions-1.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
</a>
<a href="" class="item effect-image">
<img src="./src/assets/images/promotions-2.png"
<img src="../src/assets/images/promotions-2.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
</a>
<a href="" class="item effect-image">
<img src="./src/assets/images/promotions-3.png"
<img src="../src/assets/images/promotions-3.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
</a>
<a href="" class="item effect-image">
<img src="./src/assets/images/promotions-4.png"
<img src="../src/assets/images/promotions-4.png"
class="object-contain w-full h-full rounded-xl" width="100%" height="100%" alt="">
</a>
</div>
@@ -1563,7 +1562,7 @@
<footer class="mt-20 border-t-[11px] border-[#1c039b] w-full">
<div class="container">
<a href="/" class="block my-[30px]">
<img src="./src/assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain"
<img src="../src/assets/images/logo-footer.png" class="block w-[180px] h-[45px] object-contain"
width="100%" height="100%" alt="logo">
</a>
<div class="main-footer grid grid-cols-4">

2
index.html
View File

@@ -9,7 +9,7 @@
<link rel="stylesheet" href="./src/assets/css/font.css">
<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="./src/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
</head>

0
category-detail.html → product/category-detail.html
View File

0
category.html → product/category.html
View File

126
product-detail.html → product/product-detail.html
View File

@@ -6,10 +6,10 @@
<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="./src/assets/css/font.css">
<link rel="stylesheet" href="../src/assets/css/font.css">
<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="./src/assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="../src/assets/css/style.css" rel="stylesheet" />
</head>
@@ -56,27 +56,27 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<img src="./src/assets/images/big-product-detail.png" alt="">
<img src="../src/assets/images/big-product-detail.png" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="./src/assets/images/big-product-detail.jpg" alt="">
<img src="../src/assets/images/big-product-detail.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="./src/assets/images/big-product-detail-2.jpg" alt="">
<img src="../src/assets/images/big-product-detail-2.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="./src/assets/images/big-product-detail-3.jpg" alt="">
<img src="../src/assets/images/big-product-detail-3.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="./src/assets/images/big-product-detail-4.jpg" alt="">
<img src="../src/assets/images/big-product-detail-4.jpg" alt="">
</div>
</div>
</div>
@@ -91,32 +91,32 @@
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:void(0)" class="item video">
<img src="./src/assets/images/small-product-detail.png" alt="">
<img src="../src/assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="./src/assets/images/small-product-detail.png" alt="">
<img src="../src/assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="./src/assets/images/small-product-detail.png" alt="">
<img src="../src/assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="./src/assets/images/small-product-detail.png" alt="">
<img src="../src/assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="./src/assets/images/small-product-detail.png" alt="">
<img src="../src/assets/images/small-product-detail.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="javascript:void(0)" class="item">
<img src="./src/assets/images/small-product-detail.png" alt="">
<img src="../src/assets/images/small-product-detail.png" alt="">
</a>
</div>
</div>
@@ -186,7 +186,7 @@
<a href=""
class="group mt-4 flex items-center justify-center w-ful py-[10px] border border-[#D3D3D3] rounded-[4px] text-center hover:bg-[var(--color-global)] hover:text-white">
<img src="./src/assets/images/icon-file-save.png"
<img src="../src/assets/images/icon-file-save.png"
class="w-[18px] h-[24px] block group-hover:brightness-[0] group-hover:invert-[1]"
alt="save">
<b class="ml-[10px] text-base">Lưu sản phẩm lại xem sau</b>
@@ -243,7 +243,7 @@
<div class="flex items-start supplier">
<div class="logo mr-[10px]">
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
<img src="./src/assets/images/logo-hacom.png"
<img src="../src/assets/images/logo-hacom.png"
class="block w-full h-full object-contain m-[0_auto]" width="100%" height="100%"
alt="hacom" />
</div>
@@ -299,7 +299,7 @@
<div class="flex items-start supplier">
<div class="logo mr-[10px]">
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
<img src="./src/assets/images/logo-hacom.png"
<img src="../src/assets/images/logo-hacom.png"
class="block w-full h-full object-contain m-[0_auto]" width="100%" height="100%"
alt="hacom" />
</div>
@@ -355,7 +355,7 @@
<div class="flex items-start supplier">
<div class="logo mr-[10px]">
<div class="w-[70px] h-[70px] p-[10px] block border border-[#F3F3F3] rounded-[4px]">
<img src="./src/assets/images/logo-hacom.png"
<img src="../src/assets/images/logo-hacom.png"
class="block w-full h-full object-contain m-[0_auto]" width="100%" height="100%"
alt="hacom" />
</div>
@@ -473,7 +473,7 @@
<div class="list-review mt-[15px]">
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
<img src="../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>
@@ -492,19 +492,19 @@
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"
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
<a href="./src/assets/images/small-product-detail.png"
<a href="../src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
<a href="./src/assets/images/small-product-detail.png"
<a href="../src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
@@ -521,7 +521,7 @@
</div>
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="./src/assets/images/avartar-review-2.png" width="75px" height="75px"
<img src="../src/assets/images/avartar-review-2.png" width="75px" height="75px"
alt="avartar">
<div class="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b>
@@ -540,19 +540,19 @@
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"
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
<a href="./src/assets/images/small-product-detail.png"
<a href="../src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
<a href="./src/assets/images/small-product-detail.png"
<a href="../src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
@@ -569,7 +569,7 @@
</div>
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
<div class="w-[80px] mr-[20px]">
<img src="./src/assets/images/avartar-review-3.png" width="75px" height="75px"
<img src="../src/assets/images/avartar-review-3.png" width="75px" height="75px"
alt="avartar">
<div class="time mt-[10px]">
<b class="mb-[2px] text-center block">Dino</b>
@@ -588,19 +588,19 @@
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"
<a href="../src/assets/images/small-product-detail.png" data-fancybox="gallery"
class="w-[80px] block mr-[10px]">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
<a href="./src/assets/images/small-product-detail.png"
<a href="../src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
<a href="./src/assets/images/small-product-detail.png"
<a href="../src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="./src/assets/images/small-product-detail.png"
<img src="../src/assets/images/small-product-detail.png"
class="w-[100%] block" alt="">
</a>
</div>
@@ -1119,7 +1119,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1142,7 +1142,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1153,7 +1153,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1176,7 +1176,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1187,7 +1187,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1210,7 +1210,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1221,7 +1221,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1244,7 +1244,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1255,7 +1255,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1278,7 +1278,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1289,7 +1289,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1312,7 +1312,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1345,7 +1345,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1368,7 +1368,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1379,7 +1379,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1402,7 +1402,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1413,7 +1413,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1436,7 +1436,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1447,7 +1447,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1470,7 +1470,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1481,7 +1481,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1504,7 +1504,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1515,7 +1515,7 @@
<div class="swiper-slide">
<div class="product-item">
<a href="" class="product-image">
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
<img src="../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
@@ -1538,7 +1538,7 @@
</div>
<div class="price">15.000.000đ</div>
<div class="user-pro flex items-center">
<img src="./src/assets/images/avartar.png"
<img src="../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>
@@ -1569,7 +1569,7 @@
</div>
<div class="info-form-review w-[500px] mx-[auto]">
<a href="" class="block m-[10px_auto] p-[10px] rounded-[4px] border-[#B1B1B1]">
<img src="./src/assets/images/small-product-detail.png" width="100%" height="100%"
<img src="../src/assets/images/small-product-detail.png" width="100%" height="100%"
class="block w-[100px] h-[100px] m-[0_auto]" alt="">
</a>
<a href="" class="text-center block mb-[10px]">Laptop Gaming Asus TUF FX505GE-BQ037T Core

0
product-save.html → product/product-save.html
View File

27
src/assets/css/style.css
View File

@@ -1191,6 +1191,33 @@ html {
height: 230px;
}
.page-account .left .item.active,
.page-account .left .item:hover {
background: #f5f2ff;
border-left: 3px solid #ac8cb4;
}
.page-account .left .item.active span,
.page-account .left .item:hover span {
font-weight: bold;
color: #462f91;
}
.page-account .left .item.active .list_faq,
.page-account .left .item:hover .list_faq {
background-position: -25px -211px;
}
.page-account .left .item.active .list_raovat,
.page-account .left .item:hover .list_raovat {
background-position: -75px -211px;
}
.page-account .left .item.active .list_inbox,
.page-account .left .item:hover .list_inbox {
background-position: -135px -211px;
}
.page-account .left .item.active .info_save,
.page-account .left .item:hover .info_save {
background-position: -185px -211px;
}
@media (max-width: 1600px) {
#js-box-list-review .list-review {
max-height: 450px;

2
src/assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

26
src/assets/css/style.scss
View File

@@ -1251,6 +1251,32 @@ html {
height: 230px;
}
.page-account {
.left {
.item.active,
.item:hover {
background: #f5f2ff;
border-left: 3px solid #ac8cb4;
span {
font-weight: bold;
color: #462f91;
}
.list_faq {
background-position: -25px -211px;
}
.list_raovat {
background-position: -75px -211px;
}
.list_inbox {
background-position: -135px -211px;
}
.info_save {
background-position: -185px -211px;
}
}
}
}
@media (max-width: 1600px) {
#js-box-list-review {
.list-review {

BIN
src/assets/images/icon_2025.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

0
list-store.html → store/list-store.html
View File