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

update

Browse Source
This commit is contained in:
Tieptk
2025-05-12 10:35:33 +07:00
parent af2f1b378d
commit 0797a6bb17
16 changed files with 998 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

890
template/account/account.html Normal file
View File

@@ -0,0 +1,890 @@
<!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>
<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 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 active 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 px-3 mt-3">
<div class="item flex items-center justify-between py-2.5">
<div class="flex items-center gap-[10px] w-[93%]">
<img src="../src/assets/images/avartar.png" alt="">
<div class="info">
<b>Mika203</b>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.?
</p>
</div>
</div>
<div class="right w-[7%]">
<div class="mb-1">11/04/2025</div>
<div
class="total-mess block w-[20px] w-[20px] rounded-full bg-[#ff7a00] text-center leading-[20px] text-white m-[auto] mr-[10px]">
3</div>
</div>
</div>
</div>
<!-- end list -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>