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

up

Browse Source
This commit is contained in:
Tieptk
2024-10-22 10:02:57 +07:00
parent cc6e2d7419
commit 6911b0180e
15 changed files with 5815 additions and 2796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

731
home.html
View File

@@ -6,122 +6,154 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đấu giá</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./assets/css/style-global.css">
</head>
<body>
<div class="header">
<div class="header bg-[var(--bg-header)] p-[6px_0]">
<div class="container">
<div class="header-main d-flex align-items space-between">
<div class="header-main flex items-center justify-between">
<div class="header-left">
<a href="/" class="logo">
<img src="./assets/images/logo.png" alt="logo">
<img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
</a>
</div>
<div class="header-right d-flex align-items">
<a href="" class="item">
<img src="./assets/images/icon-clipboard.png" alt="">
<span>Thể lệ đấu giá</span>
<div class="header-right flex items-center">
<a href="" class="item flex items-center">
<img src="./assets/images/icon-clipboard.png" class="w-[15px]" alt="">
<span class="text-white p-[0_5px] hover:text-yellow">Thể lệ đấu giá</span>
</a>
<a href="./account.html" class="item">
<img src="./assets/images/icon-user.png" alt="">
<span>Tài khoản</span>
<i class="fa-solid fa-caret-down"></i>
<a href="./account.html" class="item flex items-center ml-[20px]">
<img src="./assets/images/icon-user.png" class="w-[15px]" alt="">
<span class="text-white p-[0_5px] hover:text-yellow">Tài khoản</span>
<i class="fa-solid fa-caret-down text-white"></i>
</a>
</div>
</div>
</div>
</div>
<div class="homepage">
<div class="banner">
<div class="banner mb-[30px]">
<a href="">
<img src="./assets/images/banner.png" alt="">
<img src="./assets/images/banner.png" class="w-[100%] block" alt="">
</a>
</div>
<div class="box-top-auction">
<div class="container">
<h2 class="title">Top đấu giá sôi động</h2>
<div class="list-auction d-flex">
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<h2
class="title uppercase w-[390px] h-[55px] leading-[55px] rounded-[26px] font-[600] text-[32px] text-center text-white background-red bg-[var(--bg-top-auction)]">
Top đấu giá sôi động</h2>
<div class="list-auction flex mt-[20px] mr-[-15px] ">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000 <u>đ</u>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-list-auction">
<div class="box-list-auction mt-[65px]">
<div class="container">
<div class="background-auction">
<h2 class="title">Đấu giá kịch tính từ 0Đ</h2>
<div class="tab-list d-flex align-items space-center">
<a href="javascript:void(0)" class="item active">
<p>Đang diễn ra 20:00</p>
<span>Còn lại</span>
<div class="bg-[var(--bg-list-auction)] rounded-[15px] p-[15px]">
<h2
class="title bg-[var(--color-list-auction)] w-[430px] h-[70px] leading-[70px] text-center text-[32px] font-[600] uppercase m-[-45px_auto_auto_auto] text-white rounded-[35px]">
Đấu giá kịch tính từ 0Đ</h2>
<div class="tab-list auction flex items-center justify-center m-[25px_0_30px_0]">
<a href="javascript:void(0)"
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] active">
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
<span class="text-[13px] mr-[5px]">Còn lại</span>
<div class="box-time">
<div class="item-time"><b>02</b></div>
<div class="item-time"><b>16</b></div>
<div class="item-time"><b>42</b></div>
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
</div>
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
</div>
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
</div>
</div>
</a>
<a href="javascript:void(0)" class="item">
<p>Sắp diễn ra 22:00</p>
<span>Còn lại</span>
<a href="javascript:void(0)"
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-yellow">
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
<span class="text-[13px] mr-[5px]">Còn lại</span>
<div class="box-time">
<div class="item-time"><b>02</b></div>
<div class="item-time"><b>16</b></div>
@@ -129,131 +161,173 @@
</div>
</a>
</div>
<div class="list-auction d-flex flex-wrap">
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div class="list-auction flex flex-wrap">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
inch - 4K -
IPS
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
<u>đ</u>
</div>
<a href="./detail.html" class="btn-add continue">Tiếp tục Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add continue">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
inch - 4K -
IPS
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
<u>đ</u>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
inch - 4K -
IPS
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
<u>đ</u>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
inch - 4K -
IPS
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
<u>đ</u>
</div>
<a href="/detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
inch - 4K -
IPS
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
<u>đ</u>
</div>
<a href="./detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
<div class="item-auction">
<div class="images">
<a href="./detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="box-join">
<div
class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px] w-[calc(100%_/_3_-_15px)] mr-[15px] mb-[15px] bg-white">
<div class="images block relative w-[120px] h-[120px] mr-[10px] overflow-hidden">
<a href="./detail.html">
<img class="block w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="box-join absolute left-[0] top-[0] w-[55px] h-[20px] leading-[55px] text-center text-white bg-[#f1b510] flex items-center justify-center rounded-[10px]">
<i class="icon_auction"></i>
<span>220</span>
<span class="ml-[3px]">220</span>
</div>
</div>
<div class="info">
<a href="./detail.html" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0
inch - 4K -
IPS
<div class="info w-[calc(100%_-_130px)]">
<a href="./detail.html"
class="name line-clamp-2 font-[500] leading-[16px] hover:text-blue">Màn Hình Dell
UltraSharp U2723QE (27.0
inch - 4K - IPS
Black</a>
<div class="old-price">Giá gốc: 280.490.000 <u>đ</u></div>
<div class="price-auction d-flex align-items">
<p class="txt">Trả cao nhất:</p>
<p class="price-highest">230.490.000 <u>đ</u></p>
<div class="old-price block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
<u>đ</u>
</div>
<a href="/detail.html" class="btn-add">Đấu giá</a>
<div class="price-auction flex items-center">
<p class="txt text-[16px] font-[500] mr-[10px]">Trả cao nhất:</p>
<p class="price-highest text-red text-[16px] font-[600]">230.490.000 <u>đ</u></p>
</div>
<a href="./detail.html" class="btn-add ">Đấu giá</a>
</div>
</div>
</div>
@@ -263,26 +337,31 @@
</div>
</div>
</div>
<div class="box-deal-hot">
<div class="box-deal-hot mt-[30px]">
<div class="container">
<div class="background-deal">
<h2 class="title">
<div class="background-deal bg-[var(--bg-deal)] rounded-[15px] p-[15px]">
<h2 class="title flex items-center justify-center">
<i class="icon-deal"></i>
<p>Deal hot</p>
<p class="uppercase text-[32px] font-[700] text-white">Deal hot</p>
</h2>
<div class="tab-list d-flex align-items space-center">
<a href="javascript:void(0)" class="item active">
<p>Đang diễn ra 20:00</p>
<span>Còn lại</span>
<div class="tab-list flex items-center justify-center m-[25px_0_30px_0]">
<a href="javascript:void(0)"
class="item flex items-center justify-center text-white p-[10px] rounded-[15px_15px_0_0] mr-[15px] background-blue hover:background-blue">
<p class="text-[16px] font-[700] pr-[5px] uppercase">Đang diễn ra 20:00</p>
<span class="text-[13px] mr-[5px]">Còn lại</span>
<div class="box-time">
<div class="item-time"><b>02</b></div>
<div class="item-time"><b>16</b></div>
<div class="item-time"><b>42</b></div>
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">02</b>
</div>
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">16</b>
</div>
<div class="item-time"><b class="bg-black w-[26px] h-[26px] leading-[26px] ">42</b>
</div>
</div>
</a>
<a href="javascript:void(0)" class="item">
<p>Sắp diễn ra 22:00</p>
<span>Còn lại</span>
<a href="javascript:void(0)"
class="item flex items-center justify-center bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
<p class="text-[16px] font-[700] pr-[5px] uppercase">Sắp diễn ra 20:00</p>
<span class="text-[13px] mr-[5px]">Còn lại</span>
<div class="box-time">
<div class="item-time"><b>02</b></div>
<div class="item-time"><b>16</b></div>
@@ -290,125 +369,198 @@
</div>
</a>
</div>
<div class="product-list d-flex">
<div class="item-deal">
<div class="images">
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div class="product-list flex mr-[-15px]">
<div
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
alt=""></a>
</div>
<div class="info">
<div class="box-sold">
<div class="line" style="width: 90%;"></div>
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
class="ql-conlai">10</span> Sản phẩm</div>
<div class="info ">
<div
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
style="width: 90%;"></div>
<div
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
phẩm</div>
</div>
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
<a href="/deal-detail.html"
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
Floorstanding Focal
Loudspeaker Aria Evo X
N4</a>
<div class="group-price">
<div class="price">28.490.000 <u>đ</u></div>
<div class="d-flex align-items space-center">
<del class="old-price">30.490.000 <u>đ</u></del>
<div class="group-price mb-[10px]">
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
<u>đ</u>
</div>
<div class="flex items-center justify-center">
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
<u>đ</u></del>
<div class="saleoff">-30%</div>
</div>
</div>
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
<a href="./deal-detail.html"
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div class="item-deal">
<div class="images">
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
alt=""></a>
</div>
<div class="info">
<div class="box-sold">
<div class="line" style="width: 90%;"></div>
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
class="ql-conlai">10</span> Sản phẩm</div>
<div class="info ">
<div
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
style="width: 90%;">
</div>
<div
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
phẩm</div>
</div>
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
<a href="/deal-detail.html"
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
Floorstanding Focal
Loudspeaker Aria Evo X
N4</a>
<div class="group-price">
<div class="price">28.490.000 <u>đ</u></div>
<div class="d-flex align-items space-center">
<del class="old-price">30.490.000 <u>đ</u></del>
<div class="group-price mb-[10px]">
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
<u>đ</u>
</div>
<div class="flex items-center justify-center">
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
<u>đ</u></del>
<div class="saleoff">-30%</div>
</div>
</div>
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
<a href="./deal-detail.html"
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div class="item-deal">
<div class="images">
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
alt=""></a>
</div>
<div class="info">
<div class="box-sold">
<div class="line" style="width: 90%;"></div>
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
class="ql-conlai">10</span> Sản phẩm</div>
<div class="info ">
<div
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
style="width: 90%;">
</div>
<div
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
phẩm</div>
</div>
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
<a href="/deal-detail.html"
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
Floorstanding Focal
Loudspeaker Aria Evo X
N4</a>
<div class="group-price">
<div class="price">28.490.000 <u>đ</u></div>
<div class="d-flex align-items space-center">
<del class="old-price">30.490.000 <u>đ</u></del>
<div class="group-price mb-[10px]">
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
<u>đ</u>
</div>
<div class="flex items-center justify-center">
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
<u>đ</u></del>
<div class="saleoff">-30%</div>
</div>
</div>
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
<a href="./deal-detail.html"
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div class="item-deal">
<div class="images">
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
alt=""></a>
</div>
<div class="info">
<div class="box-sold">
<div class="line" style="width: 90%;"></div>
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
class="ql-conlai">10</span> Sản phẩm</div>
<div class="info ">
<div
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
style="width: 90%;">
</div>
<div
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
phẩm</div>
</div>
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
<a href="/deal-detail.html"
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
Floorstanding Focal
Loudspeaker Aria Evo X
N4</a>
<div class="group-price">
<div class="price">28.490.000 <u>đ</u></div>
<div class="d-flex align-items space-center">
<del class="old-price">30.490.000 <u>đ</u></del>
<div class="group-price mb-[10px]">
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
<u>đ</u>
</div>
<div class="flex items-center justify-center">
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
<u>đ</u></del>
<div class="saleoff">-30%</div>
</div>
</div>
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
<a href="./deal-detail.html"
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div class="item-deal">
<div class="images">
<a href="/deal-detail.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
<div
class="item-deal w-[calc(100%_/_5_-_15px)] mr-[15px] mb-[15px] p-[10px] rounded-[12px] bg-white">
<div class="images w-[100%] h-[200px] block m-[auto_auto_10px_auto] overflow-hidden">
<a href="/deal-detail.html" class="block"><img src="./assets/images/icon-pro-top.png"
class="block m-[auto] w-[100%] h-[100%] object-contain scale-[1] duration-[0.3s] hover:scale-[1.05] hover:duration-[0.3s]"
alt=""></a>
</div>
<div class="info">
<div class="box-sold">
<div class="line" style="width: 90%;"></div>
<div class="txt">Đã bán <span class="ql-sold">8</span>/ <span
class="ql-conlai">10</span> Sản phẩm</div>
<div class="info ">
<div
class="box-sold w-full bg-[#ffe9c2] relative h-[18px] leading-[18px] rounded-[26px]">
<div class="line absolute left-[0] top-0 h-[100%] background-yellow rounded-[26px]"
style="width: 90%;"></div>
<div
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-full text-center z-9 text-[10px]">
Đã bán <span class="ql-sold">8</span>/ <span class="ql-conlai">10</span> Sản
phẩm</div>
</div>
<a href="/deal-detail.html" class="name line-clamp-2">Loa Floorstanding Focal
<a href="/deal-detail.html"
class="name line-clamp-2 mt-[8px] text-[16px] font-[500] text-center leading-[15px] h-[30px] hover:text-blue">Loa
Floorstanding Focal
Loudspeaker Aria Evo X
N4</a>
<div class="group-price">
<div class="price">28.490.000 <u>đ</u></div>
<div class="d-flex align-items space-center">
<del class="old-price">30.490.000 <u>đ</u></del>
<div class="group-price mb-[10px]">
<div class="price text-center text-[16px] font-[600] text-red m-[5px_0]">28.490.000
<u>đ</u>
</div>
<div class="flex items-center justify-center">
<del class="old-price text-[#afafaf] text-[13px] mr-[15px]">30.490.000
<u>đ</u></del>
<div class="saleoff">-30%</div>
</div>
</div>
<a href="./deal-detail.html" class="btn-add">Mua ngay</a>
<a href="./deal-detail.html"
class="btn-add m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
</div>
@@ -420,49 +572,68 @@
</div>
</div>
<div class="footer">
<div class="box-faq">
<div class="box-faq mt-[25px]">
<div class="container">
<div class="background-faq">
<h2 class="title">Câu hỏi thường gặp</h2>
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
<h2 class="title text-center text-[32px] font-[600] uppercase text-[var(--color-faq)] mb-[20px]">Câu
hỏi
thường gặp
</h2>
<div class="content-faq">
<div class="item">
<a href="javascript:void(0)" class="faqlink">
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
<a href="javascript:void(0)"
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
<span>Đấu giá trực tuyến có phức tạp không?</span>
<i class="fas fa-chevron-right"></i>
</a>
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
mọi lúc mọi nơi chỉ cần có smartphone và
internet
</div>
</div>
<div class="item">
<a href="javascript:void(0)" class="faqlink">
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
<a href="javascript:void(0)"
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
<span>Làm thế nào để xác thực tài khoản đấu giá thành công?</span>
<i class="fas fa-chevron-right"></i>
</a>
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
<div class="item">
<a href="javascript:void(0)" class="faqlink">
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
<a href="javascript:void(0)"
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
<span>Tại sao nên chọn đấu giá trực tuyến tại Anphatpc?</span>
<i class="fas fa-chevron-right"></i>
</a>
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
<div class="item">
<a href="javascript:void(0)" class="faqlink">
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
<a href="javascript:void(0)"
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
<span>Quy trình đấu giá sản phẩm của Anphatpc như thế nào?</span>
<i class="fas fa-chevron-right"></i>
</a>
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
<div class="item">
<a href="javascript:void(0)" class="faqlink">
<div class="item float-left w-[calc(100%_/_2_-_15px)] mr-[15px] mb-[10px]
border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[var(--title-faq)]">
<a href="javascript:void(0)"
class="faqlink flex items-center justify-between text-16px font-[600] text-[#3a3a3a]">
<span>Điều kiện để chiến thắng đấu giá là gì?</span>
<i class="fas fa-chevron-right"></i>
</a>
<div class="content">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và internet
<div class="content hidden m-[5px_0_0_10px] font-[400] text-[14px]">Rất dễ dàng, tham gia
mọi lúc mọi nơi chỉ cần có smartphone và internet
</div>
</div>
</div>
@@ -470,56 +641,59 @@
</div>
</div>
</div>
<div class="main-footer">
<div class="main-footer background-footer mt-[20px]">
<div class="container">
<div class="footer-policies d-flex align-items space-between">
<div class="item-policies">
<div class="icons">
<div
class="footer-policies flex items-center justify-between p-[25px_0] border-b-[1px] border-[#646386]">
<div class="item-policies flex items-center w-[calc(100%_/4)]">
<div class="icons w-[35px] h-[30px] block mr-[13px]">
<img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
</div>
<div class="txt">
<b>Chính sách giao hàng</b>
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
<b class="uppercase">Chính sách giao hàng</b>
<p>Nhận hàng & thanh toán tại nhà</p>
</div>
</div>
<div class="item-policies">
<div class="icons">
<div class="item-policies flex items-center w-[calc(100%_/4)]">
<div class="icons w-[26px] h-[30px] block mr-[13px]">
<img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
</div>
<div class="txt">
<b>Đổi mới 15 ngày đầu</b>
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
<b class="uppercase">Đổi mới 15 ngày đầu</b>
<p>Áp dụng với sản phẩm laptop</p>
</div>
</div>
<div class="item-policies">
<div class="icons">
<div class="item-policies flex items-center w-[calc(100%_/4)]">
<div class="icons w-[35px] h-[30px] block mr-[13px]">
<img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
</div>
<div class="txt">
<b>Thanh toán tiện lợi</b>
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
<b class="uppercase">Thanh toán tiện lợi</b>
<p>Trả tiền mặt, CK, trả góp 0%</p>
</div>
</div>
<div class="item-policies">
<div class="icons">
<div class="item-policies flex items-center w-[calc(100%_/4)]">
<div class="icons w-[35px] h-[30px] block mr-[13px]">
<img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
</div>
<div class="txt">
<b>Hỗ trợ nhiệt tình</b>
<div class="txt w-[calc(100%_-35px_-13px)] text-white text-[16px]">
<b class="uppercase">Hỗ trợ nhiệt tình</b>
<p>Tư vấn, giải pháp mọi thắc mắc</p>
</div>
</div>
</div>
<div class="contact-footer">
<div class="info-contact text-center">
<b>Công ty cổ phần thương mại máy tính an phát</b>
<div class="contact-footer relative">
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
<b class="uppercase text-[15px] mb-[2px]">Công ty cổ phần thương mại máy tính an phát</b>
<p>Giấy chứng nhận ĐKDN số 0108940873 do Sở kế hoạch và Đầu tư Thành phố Hà Nội cấp ngày
11/10/2019</p>
<p>Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành phố Hà nội, Việt
<p class="font-[300]">Trụ sở: Tầng 5, Số 49 phố Thái Hà, Phương Trung Liệt, Quận Đống Đa, Thành
phố Hà nội, Việt
Nam</p>
<p>Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
<p class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
</div>
<a href="tel:19000323" class="btn-phone">
<a href="tel:19000323"
class="btn-phone w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
<img src="./assets/images/btn-phone.png" alt="">
</a>
</div>
@@ -528,6 +702,9 @@
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>