Files
bestpc/template/account/account.html
2025-05-13 09:37:53 +07:00

1100 lines
64 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="/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="/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="/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="/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="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
</div>
<div class="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="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
</div>
<div class="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="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
</div>
<div class="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="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
</div>
<div class="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="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
</div>
<div class="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="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
<a href="/src/assets/images/small-product-detail.png"
class="w-[80px] block mr-[10px]" data-fancybox="gallery">
<img src="/assets/images/small-product-detail.png" class="w-[100%] block"
alt="">
</a>
</div>
<div class="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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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>
<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="/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 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 active 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="list-tab bg-white flex items-center gap-[10px] mb-2">
<a href="javascript:void(0)"
class="item px-7 py-2 font-bold text-[#ff3c00] border-b-[2px] border-[#ff3c00]">Sản
phẩm</a>
<a href="javascript:void(0)"
class="item px-7 py-2 font-bold hover:text-[#ff3c00] hover:border-b-[2px] hover:border-[#ff3c00]">Cửa
hàng</a>
</div>
<div class="bg-white p-2 mb-2">
<div class="flex items-center justify-between">
<div class="w-[85%] relative rounded-[8px] mr-[15px] input-search border border-[#dddddd]">
<form action="/search" enctype="text/plain" method="get"
class="relative w-full h-[40px] bg-white rounded-[8px] overflow-hidden">
<input type="text" name="q" placeholder="Tìm theo tên sản phẩm,mã sản phẩm"
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
onclick="$('.autocomplete-suggestions').show();">
<button type="submit" class="absolute left-[10px] top-[5px] w-[40px] h-[35px] "><i
class="icon_2025 search-2 "></i></button>
</form>
</div>
<select name="" id=""
class="border border-[#dbdbdb] pl-[5px] h-[40px] text-black rounded-[4px]">
<option value="">Tất cả</option>
<option value="">Sản phẩm mới</option>
</select>
</div>
</div>
<div class="bg-white p-2">
<div class="content_tab">
<div class="list">
<div
class="item-product py-2 border-b-[1px] border-[#e3e3e3] flex items-center gap-[20px]">
<div class="flex items-center gap-[10px] w-[70%]">
<a href=""
class="block w-[100px] h-[100px] border border-[#ececec] rounded-[4px]">
<img src="/assets/images/small-product-detail.png"
class="w-full h-full block object-contain" alt=""></a>
<div class="info">
<a href="" class="block font-bold text-base line-clamp-2 mb-1">Máy tính xách
tay Macbook Air 13
2020
M1/8GB/256GB SSD Xám
MGN63SA/A</a>
<select name="" id=""
class="border border-[#dbdbdb] pl-[5px] h-[40px] text-black rounded-[4px]">
<option value="">Màu xám</option>
<option value="">Màu vàng</option>
</select>
<div class="total-shop flex items-center mt-2">
<div
class="box-shop bg-[#FF7A00] w-[24px] h-[24px] rounded-full flex items-center justify-center">
<i
class="icon_2025 shop brightness-0 invert-[1] bg-size-[160px_160px]"></i>
</div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="flex items-center justify-between gap-[10px] w-[30%]">
<div class="">
<b class="block text-lg text-[#d80a00]">15.000.000đ</b>
<del class="text-lg text-[#b0b0b0]">16.500.000đ</del>
</div>
<a href=""
class="py-2 px-4 border-[1px] border-[#ff5900] rounded-[4px] text-[#ff5900]">Chọn
mua</a>
<a href=""><i class="icon_2025 remove"></i></a>
</div>
</div>
<div
class="item-product py-2 border-b-[1px] border-[#e3e3e3] flex items-center gap-[20px]">
<div class="flex items-center gap-[10px] w-[70%]">
<a href=""
class="block w-[100px] h-[100px] border border-[#ececec] rounded-[4px]">
<img src="/assets/images/small-product-detail.png"
class="w-full h-full block object-contain" alt=""></a>
<div class="info">
<a href="" class="block font-bold text-base line-clamp-2 mb-1">Máy tính xách
tay Macbook Air 13
2020
M1/8GB/256GB SSD Xám
MGN63SA/A</a>
<select name="" id=""
class="border border-[#dbdbdb] pl-[5px] h-[40px] text-black rounded-[4px]">
<option value="">Màu xám</option>
<option value="">Màu vàng</option>
</select>
<div class="total-shop flex items-center mt-2">
<div
class="box-shop bg-[#FF7A00] w-[24px] h-[24px] rounded-full flex items-center justify-center">
<i
class="icon_2025 shop brightness-0 invert-[1] bg-size-[160px_160px]"></i>
</div>
<p class="ml-[7px]">Có 12 cửa hàng bán</p>
</div>
</div>
</div>
<div class="flex items-center justify-between gap-[10px] w-[30%]">
<div class="">
<b class="block text-lg text-[#d80a00]">15.000.000đ</b>
<del class="text-lg text-[#b0b0b0]">16.500.000đ</del>
</div>
<a href=""
class="py-2 px-4 border-[1px] border-[#ff5900] rounded-[4px] text-[#ff5900]">Chọn
mua</a>
<a href=""><i class="icon_2025 remove"></i></a>
</div>
</div>
</div>
</div>
<!-- end list product -->
<div class="content_tab">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>