Files
appliance_auction/deal-detail-mb.html
2024-11-12 13:32:53 +07:00

1009 lines
65 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=0">
<title>Đấ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="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./assets/css/style-global-mb.css">
</head>
<body class="page-detail pb-[70px]">
<div class="container-mb">
<div
class="header bg-[var(--bg-header)] shadow-[0_1px_6px_#00000040] p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
<div class="container">
<div class="content-main-header flex items-center justify-between">
<a href="/" class="logo w-[66px]">
<img src="./assets/images/logo.png" class="w-[100%] h-[26px] block" width="100%" height="100%"
alt="logo">
</a>
<div class="header-right flex items-center">
<a href="" class="item flex items-center">
<img src="./assets/images/icon-clipboard.png" class="w-[14px] block" alt="">
<span class="ml-[3px] text-[12px] uppercase text-black">Thể lệ đấu giá</span>
</a>
<a href="/taikhoan" class="item flex items-center ml-[10px]">
<img src="./assets/images/icon-user.png" class="w-[14px] block" alt="">
<span class="ml-[3px] text-[12px] uppercase text-black">Tài khoản</span>
<i class="fa-solid fa-caret-down ml-[5px] text-black"></i>
</a>
</div>
</div>
</div>
</div>
<div class="page-detail deal">
<div class="container">
<div class="breadcrumb mt-[10px] flex items-center justify-between">
<a href="javascript:void(0)" onclick="history.back()"
class="link-back shadow-[0_1px_2px_0_#00000029] w-[32px] h-[32px] leading-[32px] text-center block rounded-[50%]">
<i class="fas fa-chevron-left"></i>
</a>
<a href="" class="name text-center w-[calc(100%_-32px)] mr-[16px] line-clamp-1">Đấu giáLaptop Acer
Aspire 7 A715-76-53PJ Laptop Acer
Aspire 7 A715-76-53PJ Laptop Acer Aspire 7 A715-76-53PJ</a>
</div>
<div class="content-main-detail">
<div class="content-top">
<div class="box-group-images mb-[10px]">
<div class="swiper" id="js-slider-image">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="./assets/images/product-detail-big.png" data-fancybox="gallery">
<img src="./assets/images/product-detail-big.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="./assets/images/product-detail-big.png" data-fancybox="gallery">
<img src="./assets/images/product-detail-big.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="./assets/images/product-detail-big.png" data-fancybox="gallery">
<img src="./assets/images/product-detail-big.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="./assets/images/product-detail-big.png" data-fancybox="gallery">
<img src="./assets/images/product-detail-big.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="./assets/images/product-detail-big.png" data-fancybox="gallery">
<img src="./assets/images/product-detail-big.png" alt="">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="content-bottom">
<h2 class="product-name text-[18px] font-[400] mb-[15px]">
Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007 (Intel Core i5-12450H | Đen)
</h2>
<div
class="box-deal-time flex items-center justify-between bg-[var(--bg-time-deal)] p-[10px] rounded-[5px]">
<div class="left flex items-center">
<img src="./assets/images/icon-flash.png" class="w-[22px] h-[29px] block mr-[10px]"
width="100%" height="100%" alt="flash">
<p class="title text-[20px] uppercase font-[700] text-white">Deal hot</p>
</div>
<div class="right flex items-center text-white">
<span class="mr-[10px]">Kết thúc trong</span>
<div class="p-box-time d-flex align-items">
<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>
</div>
</div>
</div>
<div
class="group-price-deail mt-[10px] p-[10px_0] border-b-[1px] border-dashed border-[#e2e2e2]">
<div class="main-price flex items-center">
<div class="price text-[26px] font-[600] mr-[10px] text-[#f00000]">29.490.000 <u>đ</u>
</div>
<div class="old-price text-[#afafaf] text-[14px] mr-[15px]">29.990.000 <u>đ</u></div>
<div class="saleoff">-30%</div>
</div>
<div
class="box-sold-detail w-[100%] h-[18px] leading-[18px] rounded-[26px] relative bg-[#ffe9c2]">
<div class="line absolute left-[0] top-[0] h-[100%] bg-[#f48320] rounded-[26px]"
style="width: 90%;"></div>
<div
class="txt absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center text-[10px] font-[500]">
Đã bán
<span class="ql-sold">8</span>/ <span class="ql-conlai">10</span>
Sản phẩm
</div>
</div>
</div>
<div class="box-specification m-[15px_0]">
<div class="item flex mb-[15px]">
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
<p class="text-[14px]">CPU: Intel Core i5-12450H (3.3GHz up to 4.4GHz 12MB)</p>
</div>
<div class="item flex mb-[15px">
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
<p class="text-[14px]">VGA: NVIDIA® GeForce RTX™ 2050 4GB GDDR6 + Intel UHD Graphics</p>
</div>
<div class="item flex mb-[15px">
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
<p class="text-[14px]">Màn hình: 15.6inch FHD (1920 x 1080) IPS, 144Hz, Slim Bezel, Acer
ComfyView™</p>
</div>
<div class="item flex mb-[15px">
<i class="fas fa-check-circle text-[#166dd8] mr-[10px] mt-[4.3px]"></i>
<p class="text-[14px]">RAM: 8GB (8x1) DDR4 3200MHz (2x SO-DIMM socket, up to 32GB SDRAM)
</p>
</div>
</div>
<div
class="box-btn-deal fixed left-[0] w-[100%] bottom-[-1px] z-[999] hidden p-[15px_10px] bg-white active">
<a href="javascript:void(0)"
class="btn-deal w-full text-center h-[42px] leading-[42px] rounded-[26px] text-white bg-[var(--bg-btn-deal)] uppercase text-[18px] font-[700] block hover:background-white hover:border-blue hover:text-blue"
onclick="addDealCart()">Mua giá sốc</a>
</div>
</div>
</div>
</div>
<div class="content-revew-history mt-[22px] border-t-[10px] border-[#f5f5f5]">
<div class="box-review p-[20px_0]">
<div class="container">
<div class="main-title">
<div class="title-left mb-[5px]">
<div class="title flex items-center">
<h2 class="text-[16px]">Đánh giá sản phẩm</h2>
<span>(100 đánh giá)</span>
</div>
<div class="flex items-center justify-between" style="margin-top: 5px;">
<div class="flex items-center">
<div class="rating">
<i class="icon-star star5"></i>
</div>
<div class="total block ml-[5px] text-[14px]">
<span>4.9</span>
<span>/</span>
<span>5</span>
</div>
</div>
<a href="javascript:void(0)"
class="btn-review w-[146px] h-[32px] leading-[32px] text-center background-blue text-white rounded-[26px]">Gửi
đánh giá</a>
</div>
</div>
</div>
<div class="list-review mt-[15px]">
<div class="item-review flex flex-wrap mb-[10px] relative">
<div class="avatar w-[40px] h-[40px] mr-[7px]">
<img src="./assets/images/avatar-user.png" width="100%" height="100%"
class="w-[100%] h-[100%] object-contain block" alt="avatar">
</div>
<div class="info-cnt w-[calc(100%_-47px)]">
<div class="name-user font-[700]">Anh quang</div>
<div class="total-view text-[14px]">
5.0 <i class="fa fa-star text-[#f1b510]"></i>
</div>
<p class="cnt text-[13px]">Tuần trc mới chơi trúng đấu giá máy tính này xong. Xịn
nha, mượt lắm,
giao hành nhanh, uy tín.</p>
<div class="time-reply flex items-center">
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024, 10:46
am</span>
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả lời</a>
</div>
<div class="list-image flex items-center mt-[10px] mb-[20px]">
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
<img src="./assets/images/image-review-1.png" class="block w-full h-[100%]"
alt="">
</a>
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
<img src="./assets/images/image-review-2.png" class="block w-full h-[100%]"
alt="">
</a>
<a href="" class="item item w-[65px] h-[65px] block mr-[10px]">
<img src="./assets/images/image-review-3.png" class="block w-full h-[100%]"
alt="">
</a>
</div>
</div>
<div class="list-reppy w-[100%] ml-[45px]">
<div
class="item-reply flex relative mb-[10px] after:absolute after:w-[26px] after:h-[115%] after:rounded-[0_0_0_18px] after:content-[''] after:bg-transparent after:left-[-27px] after:bottom-[84%] after:border-t-0 after:border-r-0 after:border-[1px] after:border-[#e2e2e2]">
<div class="avatar w-[40px] h-[40px] mr-[7px]">
<img src="./assets/images/avatar-admin.png"
class="w-[100%] h-[100%] object-contain block" width="100%"
height="100%" alt="avatar">
</div>
<div class="info-cnt w-[calc(100%_-47px)]">
<div class="name-user font-[700]">Anphatcomputer</div>
<p class="cnt text-[13px]">Anphat xin cảm ơn anh Quang đã ủng hộ.
<br> <br>
Anh có thể truy cập website anphatpc.com.vn để cập nhật và nhận thêm
thông tin chương trình khuyến mãi hấp dẫn từ Anphat
ạ! <br>
Trân trọng cảm ơn anh!
</p>
<div class="time-reply flex items-center">
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024,
10:46 am</span>
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả
lời</a>
</div>
</div>
</div>
<div
class="item-reply flex relative mb-[10px] after:absolute after:w-[26px] after:h-[115%] after:rounded-[0_0_0_18px] after:content-[''] after:bg-transparent after:left-[-27px] after:bottom-[84%] after:border-t-0 after:border-r-0 after:border-[1px] after:border-[#e2e2e2]">
<div class="avatar w-[40px] h-[40px] mr-[7px]">
<img src="./assets/images/avatar-admin.png"
class="w-[100%] h-[100%] object-contain block" width="100%"
height="100%" alt="avatar">
</div>
<div class="info-cnt w-[calc(100%_-47px)]">
<div class="name-user font-[700]">Anphatcomputer</div>
<p class="cnt text-[13px]">Anphat xin cảm ơn anh Quang đã ủng hộ.
<br> <br>
Anh có thể truy cập website anphatpc.com.vn để cập nhật và nhận thêm
thông tin chương trình khuyến mãi hấp dẫn từ Anphat
ạ! <br>
Trân trọng cảm ơn anh!
</p>
<div class="time-reply flex items-center">
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024,
10:46 am</span>
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả
lời</a>
</div>
</div>
</div>
</div>
</div>
<div class="item-review flex flex-wrap mb-[10px] relative">
<div class="avatar w-[40px] h-[40px] mr-[7px]">
<img src="./assets/images/avatar-user.png"
class="w-[100%] h-[100%] object-contain block" width="100%" height="100%"
alt="avatar">
</div>
<div class="info-cnt w-[calc(100%_-47px)]">
<div class="name-user font-[700]">Anh quang</div>
<div class="total-view text-[14px]">
5.0 <i class="fa fa-star text-[#f1b510]"></i>
</div>
<p class="cnt text-[13px]">Tuần trc mới chơi trúng đấu giá máy tính này xong. Xịn
nha, mượt lắm,
giao hành nhanh, uy tín.</p>
<div class="time-reply flex items-center">
<span class="time text-[13px] text-[#afafaf] mr-[10px]">20-06-2024, 10:46
am</span>
<a href="javascript:void(0)" class="btn-reply text-[#166dd8]">Trả lời</a>
</div>
<div class="list-image flex items-center mt-[10px] mb-[20px]">
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
<img src="./assets/images/image-review-1.png" class="block w-full h-[100%]"
alt="">
</a>
<a href="" class="item w-[65px] h-[65px] block mr-[10px]">
<img src="./assets/images/image-review-2.png" class="block w-full h-[100%]"
alt="">
</a>
<a href="" class="item item w-[65px] h-[65px] block mr-[10px]">
<img src="./assets/images/image-review-3.png" class="block w-full h-[100%]"
alt="">
</a>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)"
class="more-review flex items-center justify-center text-blue pt-[15px] mt-[15px] border-t-[1px] border-[#f5f5f5]">
<span>Xem tất cả đánh giá</span> <i class="fas fa-chevron-right ml-[5px] mt-[2px]"></i>
</a>
</div>
</div>
<div class="box-question bg-[#f5f5f5] p-[15px_10px]">
<h2 class="title text-[16px] font-[700] mb-[10px]">Hỏi đáp <span class="text-[14ox] font-[400]">(100
bình luận)</span></h2>
<div class="form-question flex">
<textarea name="" id=""
class="input-question shadow-[0_4px_4px_0px_#00000026] bg-white w-[calc(100%_-70px)] h-[94px] rounded-[10px] border-0 outline-none p-[10px_15px]"
placeholder="Xin mời để lại câu hỏi, Anphat sẽ trả lời lại trong 1h, các câu hỏi sau 22h - 8h sẽ được trả lời vào sáng hôm sau"
height=""></textarea>
<button type="submit"
class="btn-question w-[60px] ml-[10px] h-[32px] leading-[32px] background-blue text-white rounded-[26px]">
<i class="fas fa-paper-plane"></i>
<span>Gửi</span>
</button>
</div>
<div class="list-question mt-[15px]">
<div class="item-question flex flex-wrap mb-[15px]">
<div class="avatar w-[20px] h-[20px] mr-[10px] mt-[3px]">
<img src="./assets/images/avatar-user.png" class="w-full h-[100%] block" width="100%"
height="100%" alt="avatar">
</div>
<div class="info-cnt w-[calc(100%_-30px)]">
<div class="info-user flex items-center">
<div class="name-user font-[600] mr-[15px]">Anh Quang</div>
<span class="time text-[#afafaf] text-[13px]">20-06-2024, 10:46 am</span>
</div>
<div
class="cnt bg-white shadow-[0_4px_4px_0px_#00000026] p-[10px_15px] rounded-[10px] text-[13px] font-[300]">
<p>Sau khi thắng đấu gía thời gian bao lâu để thanh toán nhận hàng</p>
<a href="javascript:void(0)"
class="click-question mt-[10px] text-[#166dd8] flex items-center justify-end ">
<i class="fas fa-comments"></i> <span>Trả lời</span>
</a>
</div>
</div>
<div class="list-reply w-full mt-[15px] ml-[30px]">
<div class="reply-question flex mb-[15px]">
<div class="avatar w-[20px] h-[20px] mr-[10px] mt-[3px]">
<img src="./assets/images/avatar-user.png" class="w-full h-[100%] block"
width="100%" height="100%" alt="avatar">
</div>
<div class="info-cnt w-[calc(100%_-30px)]">
<div class="info-user flex items-center">
<div class="name-user font-[600] mr-[15px]">Anh Quang</div>
<span class="time text-[#afafaf] text-[13px]">20-06-2024, 10:46
am</span>
</div>
<div
class="cnt bg-white shadow-[0_4px_4px_0px_#00000026] p-[10px_15px] rounded-[10px] text-[13px] font-[300]">
<p>Sau khi thắng đấu gía thời gian bao lâu để thanh toán nhận hàng</p>
<a href="javascript:void(0)"
class="click-question mt-[10px] text-[#166dd8] flex items-center justify-end ">
<i class="fas fa-comments"></i> <span>Trả lời</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)"
class="more-question mt-[10px] flex items-center justify-center font-[400] text-[#166dd8]">
<span>Xem tất cả hỏi đáp</span> <i class="fas fa-chevron-right ml-[5px]"></i>
</a>
</div>
<div class="list-product-deal mt-[5px]">
<div class="container">
<div class="backgrond-deal bg-[var(--bg-list-deal-ongoing)] p-[10px] rounded-[5px]">
<h2 class="title text-[20px] uppercase font-[700] mb-[10px] text-center text-white">Flash
sale đang diễn ra</h2>
<div class="list flex flex-wrap mr-[-10px]">
<div
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
<div
class="images w-[100%] h-[140px] 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 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 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 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 m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
<div
class="images w-[100%] h-[140px] 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 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 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 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 m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
<div
class="images w-[100%] h-[140px] 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 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 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 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 m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
<div
class="item-deal w-[calc(100%_/_2_-_10px)] mr-[10px] mb-[10px] p-[10px] rounded-[12px] bg-white">
<div
class="images w-[100%] h-[140px] 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 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 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 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 m-[auto] uppercase background-blue hover:background-white hover:text-blue hover:border-blue">Mua
ngay</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-info-product mt-[15px]">
<div class="container">
<div class="tab flex items-center justify-between">
<a href="javascrit:void(0)" data-id="#tab-info"
class="item-tab w-[calc(100%_/2_-10px)] h-[50px] leading-[50px] text-center rounded-[15px_15px_0_0] bg-[#f5f5f5] text-black text-[16px] font-[600] mr-[5px] active">Thông
tin sản
phẩm</a>
</div>
<div class="content-tab hidden active" id="tab-info">
<div class="info mt-[15px]">
<img class="w-[100%] h-[290px] block mr-[10px] object-contain"
src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
<ul class="w-full inside">
<li class="list-disc ml-[20px]">Tên sản phẩm: Laptop Acer Aspire 7 A715-76-53PJ
NH.QGESV.007
</li>
<li class="list-disc ml-[20px]">Dòng Laptop: Laptop | Laptop Acer Aspire | Laptop Đồ
Họa |
Laptop văn phòng</li>
<b>Bộ vi xử lý</b>
<li class="list-disc ml-[20px]">Công nghệ CPU: Intel Core i5-12450H</li>
<li class="list-disc ml-[20px]">Số nhân: 8</li>
<li class="list-disc ml-[20px]">Số luồng: 12</li>
<li class="list-disc ml-[20px]">Tốc độ tối đa: 4.4GHz</li>
<li class="list-disc ml-[20px]">Bộ nhớ đệm: 12MB</li>
<b>Bộ nhớ trong (RAM)</b>
<li class="list-disc ml-[20px]">RAM: 16GB (2x8GB)</li>
<li class="list-disc ml-[20px]">Loại RAM: DDR4</li>
<li class="list-disc ml-[20px]">Tốc độ Bus RAM: 3200Mhz</li>
<li class="list-disc ml-[20px]">Số khe cắm: 2 khe</li>
<li class="list-disc ml-[20px]">Hỗ trợ RAM tối đa: Nâng cấp tối đa 32GB</li>
<b>Ổ cứng</b>
<li class="list-disc ml-[20px]">Dung lượng: 512GB PCIe NVMe SSD</li>
<li class="list-disc ml-[20px]">Tốc độ vòng quay</li>
<li class="list-disc ml-[20px]">Khe cắm SSD mở rộng: nâng cấp tối đa 1 TB SSD PCIe
Gen4, 16
Gb/s, NVMe</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overlay" onclick="closePopop()"></div>
<div class="box-popup popup-add-cart">
<h2 class="title text-[20px] font-700 uppercase text-center mb-[15px]">Thông tin đặt hàng</h2>
<a href="javascript:void(0)"
class='click-close absolute
top-[-15px] right-[-10px] text-[24px] w-[42px] h-[42px] leading-[42px] bg-black border-[3px] border-[#f1b510] rounded-[50%] text-center text-white'
onclick="closePopop()">
<i class="fa fa-times"></i>
</a>
<div class="form-cart">
<div class="title-form flex items-center mb-[10px]">
<i
class="fas fa-map-marker-alt text-[23px] mr-[10px] text-[#f1b510] relative after:absolute after:contnet-[''] after:right-[-3px] after:top-[-2px] after:bg-[#f1b510] after:w-[8px] after:h-[8px] after:rounded-[50%] after:z-[999] after:border-[2px] after:border-[#fff]"></i>
Địa chỉ nhân hàng
</div>
<div class="item-input mb-[10px]">
<input type="text"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
id="name" name="name" placeholder="Họ và tên">
<div class="note-error"></div>
</div>
<div class="item-input mb-[10px]">
<input type="text"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
id="email" name="email" placeholder="Email">
<div class="note-error"></div>
</div>
<div class="item-input mb-[10px]">
<input type="text"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
id="phone" name="phone" placeholder="Số điện thoại">
<div class="note-error"></div>
</div>
<div class="flex items-center justify-between box-select mb-[10px]">
<div class="item-input w-[calc(100%_/2_-5px)]">
<select name="" id="city"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[0_10px] bg-[#f5f5f5] outline-none rounded-[8px]">
<option value="0">Tỉnh/Thành phố</option>
<option value="28">Hà nội</option>
</select>
<div class="note-error"></div>
</div>
<div class="item-input w-[calc(100%_/2_-5px)]">
<select name="" id="district"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[0_10px] bg-[#f5f5f5] outline-none rounded-[8px]">
<option value="0">Quận/Huyện</option>
<option value="2">Láng hạ</option>
</select>
<div class="note-error"></div>
</div>
</div>
<div class="item-input mb-[10px]">
<input type="text"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
id="address" name="address" placeholder="Tòa nhà, Tên đường..">
<div class="note-error"></div>
</div>
<div class="item-input mb-[10px]">
<input type="text"
class="input w-[100%] h-[40px] border-[1px] border-[#e6e6e6] p-[15px] bg-[#f5f5f5] outline-none rounded-[8px]"
name="note" placeholder="Nhập ghi chú cho chúng tôi">
<div class="note-error"></div>
</div>
<div class="box-total-price">
<div class="box-provisional flex items-center justify-between mb-[10px]">
<span>Tạm tính <span>(1 sản phẩm)</span></span>
<div class="provisional">29.000.000 <u>đ</u></div>
</div>
<div class="box-total-amount flex items-center justify-between">
<b>Tổng tiền</b>
<div class="total-amount text-[20px] font-[700] text-[#f00000]">29.000.000 <u>đ</u></div>
</div>
</div>
<a href="javascript:void(0)"
class="btn-send-cart block w-[390px] h-[42px] leading-[42px] text-center m-[20px_auto] uppercase text-white font-[700] rounded-[26px] outline-none border-0 background-blue hover:background-white hover:text-blue hover:border-blue"
onclick="checkbuy()">
Đặt mua
</a>
</div>
</div>
<div class="box-popup popup-buy-success">
<div class="title text-[20px] font-[700] text-center uppercase text-[#a0d427]">
<img src="./assets/images/image-checkbox.png" class="block w-[58px] h-[58px] m-[auto_auto_15px_auto]"
width="100%" height="100%" alt="checkbox">
<h2>Đặt hàng thành công</h2>
</div>
<a href="javascript:void(0)"
class='click-close absolute
top-[-15px] right-[-10px] text-[24px] w-[42px] h-[42px] leading-[42px] bg-black border-[3px] border-[#f1b510] rounded-[50%] text-center text-white'
onclick="closePopop()">
<i class="fa fa-times"></i>
</a>
<div class="content text-center">
<p class="italic">Cảm ơn bạn đã mua hàng tại <a href="#" class="text-red">Anphatpc.com.vn.</a> <br>
Nhân viên <a href="#" class="text-red">Anphatpc.com.vn</a> sẽ liên hệ với bạn trong thời gian sớm
nhất.
</p>
<b class="block m-[15px_0] text-[16px]">Mã đơn hàng của bạn <a href="#" class="text-red">#0061</a></b>
<i>Khi cần hỗ trợ vui lòng liên hệ hotline 1800xx</i>
</div>
</div>
<div class="footer">
<div class="box-faq mt-[15px]">
<div class="container">
<div class="background-faq border-[2px] border-[var(--border-faq)] p-[10px] rounded-[15px]">
<h2
class="title text-center text-[24px] 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 float-left w-[100%] 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-[15px] 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 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 float-left w-[100%] 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-[15px] 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 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 float-left w-[100%] 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-[15px] 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 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 float-left w-[100%] 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-[15px] 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 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 float-left w-[100%] 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 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>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="main-footer bg-[var(--color-bg-footer)] mt-[15px] pb-[20px]">
<div class="container">
<div
class="footer-policies flex flex-wrap items-center p-[25px_0] border-b-[1px] border-[#646386] mr-[-20px]">
<div
class="item-policies flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
<div class="icons w-[40px] h-[30px] block mb-[13px]">
<img src="./assets/images/icon-ship.png" width="100%" height="100%"
class="block w-[100%] h-[100%] object-contain" alt="ship">
</div>
<div class="txt text-center text-white text-[13px]">
<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 flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
<div class="icons w-[40px] h-[30px] block mb-[13px]">
<img src="./assets/images/icon-return.png" width="100%" height="100%"
class="block w-[100%] h-[100%] object-contain" alt="ship">
</div>
<div class="txt text-center text-white text-[13px]">
<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 flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
<div class="icons w-[40px] h-[30px] block mb-[13px]">
<img src="./assets/images/icon-pay.png" width="100%" height="100%"
class="block w-[100%] h-[100%] object-contain" alt="ship">
</div>
<div class="txt text-center text-white text-[13px]">
<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 flex items-center flex-col w-[calc(100%_/2_-20px)] mr-[20px] mb-[20px]">
<div class="icons w-[40px] h-[30px] block mb-[13px]">
<img src="./assets/images/icon-chat.png" width="100%" height="100%"
class="block w-[100%] h-[100%] object-contain" alt="ship">
</div>
<div class="txt text-center text-white text-[13px]">
<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 relative">
<div class="info-contact text-center p-[15px_0_20px_0] text-white">
<b class="uppercase text-[15px] mb-[2px] block">Công ty cổ phần thương mại máy tính an
phát</b>
<p class="font-[300]">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 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 class="font-[300]">Điện thoại: 19000323 Email: Giang@anphat.com.vn</p>
</div>
<a href="tel:19000323" class="btn-phone m-[0_auto] w-[270px] block">
<img src="./assets/images/btn-phone.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
var swiper_big = new Swiper("#js-slider-image", {
slidesPerView: 1,
spaceBetween: 10,
watchSlidesProgress: true,
noSwiping: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
}
});
function addDealCart() {
$('.box-popup').removeClass('active')
$('.overlay').addClass('active')
$('.popup-add-cart').addClass('active')
}
function checkbuy() {
var number_regex1 = /^[0]\d{9}$/i;
var number_regex2 = /^[0]\d{10}$/i;
var error = false;
var name = $('#name').val();
var $name = $('#name');
var email = $('#email').val();
var $email = $('#email');
var phone = $('#phone').val();
var $phone = $('#phone');
var city = $('#city').val();
var $city = $('#city');
var district = $('#district').val();
var $district = $('#district');
var address = $('#address').val();
var $address = $('#address');
var item_name = $name.parents(".item-input");
if (name.length < 4) {
item_name.addClass('error');
item_name.find($('.note-error')).html('Tên quá ngắn')
} else if (name.indexOf('<script') > -1) {
item_name.addClass('error');
item_name.find($('.note-error')).html('Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại');
}
var item_email = $email.parents(".item-input");
if (email.length < 4) {
item_email.addClass('error')
item_email.find($('.note-error')).html("Bạn chưa nhập Email");
error = true;
} else if (!validateEmail(email)) {
item_email.addClass('error')
item_email.find($('.note-error')).html("Địa chỉ email chưa chính xác");
error = true;
} else {
item_email.removeClass('error');
item_email.find($('.note-error')).html("");
}
var item_phone = $phone.parents(".item-input");
if (phone.length < 4) {
item_phone.addClass('error')
item_phone.find($('.note-error')).html("Bạn chưa nhập SĐT");
error = true;
} else if (!phone.match(number_regex1) && !phone.match(number_regex2)) {
item_phone.addClass('error')
item_phone.find($('.note-error')).html("Số điện thoại chưa chính xác");
error = true;
} else {
item_phone.removeClass('error');
item_phone.find($('.note-error')).html("");
}
var item_city = $city.parents('.item-input');
if (city == 0) {
item_city.addClass('error');
item_city.find($('.note-error')).html("Bạn chưa chọn Tỉnh/Thành phố");
error = true;
} else {
item_city.removeClass('error');
item_city.find($('.note-error')).html("");
}
var item_district = $district.parents('.item-input');
if (district == 0) {
item_district.addClass('error');
item_district.find($('.note-error')).html("Bạn chưa chọn Quận/Huyện");
error = true;
} else {
item_district.removeClass('error');
item_district.find($('.note-error')).html("");
}
var item_check_add = $address.parents(".item-input");
if (address.length < 5) {
item_check_add.addClass('error')
item_check_add.find($('.note-error')).html("Địa chỉ quá ngắn");
error = true;
} else if (address.indexOf('<script') > -1) {
item_check_add.addClass('error')
item_check_add.find($('.note-error')).html("Địa chỉ chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
error = true;
} else {
item_check_add.removeClass('error');
item_check_add.find($('.note-error')).html("");
}
if (error) {
alert('Vui lòng kiểm tra lại thông tin đơn hàng');
return false;
} else {
$('.box-popup').removeClass('active');
$('.popup-buy-success').addClass('active')
$('.overlay').addClass('active')
}
}
function closePopop() {
$('.box-popup').removeClass('active');
$('.overlay').removeClass('active')
}
function validateEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}
function validatePhoneNumber(a) {
var number_regex1 = /^[0]\d{9}$/i;
var number_regex2 = /^[0]\d{10}$/i;
if (number_regex1.test(a) == false && number_regex2.test(a) == false) return false;
return true;
}
</script>
</html>