diff --git a/account-mb.html b/account-mb.html
index ec224c0..da0df4a 100644
--- a/account-mb.html
+++ b/account-mb.html
@@ -6,28 +6,31 @@
     <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="./assets/css/style-mb.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>
     <div class="container-mb">
-        <div class="header">
+        <div class="header background-blue p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
             <div class="container">
-                <div class="content-main-header d-flex align-items space-between">
-                    <a href="/" class="logo">
-                        <img src="./assets/images/logo-mobile.png" width="100%" height="100%" alt="logo">
+                <div class="content-main-header flex items-center justify-between">
+                    <a href="/" class="logo w-[66px]">
+                        <img src="./assets/images/logo-mobile.png" class="w-[100%] h-[26px] block" width="100%"
+                            height="100%" alt="logo">
                     </a>
-                    <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-[14px] block" alt="">
+                            <span class="ml-[3px] text-[12px] uppercase text-white">Thể lệ đấu giá</span>
                         </a>
-                        <a href="/taikhoan" 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="/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-white">Tài khoản</span>
+                            <i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
                         </a>
                     </div>
                 </div>
@@ -35,68 +38,89 @@
         </div>
         <div class="page-account">
             <div class="container">
-                <div class="breadcrumb">
-                    <a href="javascript:void(0)" onclick="history.back()" class="link-back">
+                <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 block line-clamp-1">Tài khoản</a>
+                    <a href="" class="name text-center w-[calc(100%_-32px)] mr-[16px] line-clamp-1">Tài khoản</a>
                 </div>
-                <div class="content-account">
-                    <div class="name-avatar d-flex align-items">
-                        <div class="avatar">P</div>
+                <div class="content-account mb-[20px]">
+                    <div class="name-avatar flex items-center mb-[20px]">
+                        <div
+                            class="avatar w-[40px] h-[40px] mr-[10px] leading-[40px] text-[24px] font-[600] bg-[#d9d9d9] rounded-[50%] text-center">
+                            P
+                        </div>
                         <div class="info">
                             <span>Tài khoản của</span>
-                            <b>Phương Phạm</b>
+                            <b class="block text-[18px] leading-[20px]">Phương Phạm</b>
                         </div>
                     </div>
-                    <div class="tab d-flex align-items">
-                        <a href="javascript:void(0)" data-id="#form-info" class="item-tab active">
-                            <i class="fas fa-address-card"></i>
-                            <span>Thông tin tài khoản</span>
+                    <div class="tab">
+                        <a href="javascript:void(0)" data-id="#form-info"
+                            class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px] active">
+                            <i class="fas fa-address-card mr-[15px]"></i>
+                            <span class="text-[14px]">Thông tin tài khoản</span>
                         </a>
-                        <a href="javascript:void(0)" data-id="#table-history" class="item-tab">
-                            <i class="fas fa-shopping-cart"></i>
-                            <span>Lịch sửa mua hàng</span>
+                        <a href="javascript:void(0)" data-id="#table-history"
+                            class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
+                            <i class="fas fa-shopping-cart mr-[15px]"></i>
+                            <span class="text-[14px]">Lịch sửa mua hàng</span>
                         </a>
-                        <a href="/logout.php" class="item-tab">
-                            <i class="fas fa-sign-in-alt"></i>
-                            <span>Đăng xuất tài khoản</span>
+                        <a href="/logout.php"
+                            class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
+                            <i class="fas fa-sign-in-alt mr-[15px]"></i>
+                            <span class="text-[14px]">Đăng xuất tài khoản</span>
                         </a>
                     </div>
-                    <div class="content-tab active" id="form-info">
+                    <div class="content-tab hidden active active" id="form-info">
                         <div class="form-info" id="">
-                            <input type="text" class="input" name="name" placeholder="Họ và tên">
-                            <input type="text" class="input" name="email" placeholder="Email">
-                            <div class="d-flex align-items box-phone">
-                                <input type="text" class="input" name="phone" placeholder="Số điện thoại">
-                                <a href="javascript:void(0)" class="btn-otp" onclick="checkOTP()">Gửi mã xác
+                            <input type="text"
+                                class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                name="name" placeholder="Họ và tên">
+                            <input type="text"
+                                class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                name="email" placeholder="Email">
+                            <div class="flex items-center box-phone relative">
+                                <input type="text"
+                                    class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                    name="phone" placeholder="Số điện thoại">
+                                <a href="javascript:void(0)"
+                                    class="btn-otp absolute right-[0] top-0 block w-[130px] h-[40px] leading-[40px] text-center bg-[#f1b510] rounded-[8px] text-white hover:background-white hover:text-yellow hover:border-yellow"
+                                    onclick="checkOTP()">Gửi mã
+                                    xác
                                     thực</a>
                             </div>
 
-                            <div class="box-sex d-flex align-items">
+                            <div class="box-sex flex items-center mb-[10px]">
                                 <span>Giới tính</span>
-                                <div class="item">
+                                <div class="item ml-[15px]">
                                     <label class="radio-checkbox">Nam
                                         <input type="radio" checked="checked" name="sex" value="1" name="radio">
                                         <span class="checkmark"></span>
                                     </label>
                                 </div>
-                                <div class="item">
+                                <div class="item ml-[15px]">
                                     <label class="radio-checkbox">Nữ
                                         <input type="radio" checked="checked" name="sex" value="2" name="radio">
                                         <span class="checkmark"></span>
                                     </label>
                                 </div>
                             </div>
-                            <input type="text" class="input" name="address" placeholder="Địa chỉ">
+                            <input type="text"
+                                class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                name="address" placeholder="Địa chỉ">
 
-                            <button type="submit" class="btn-update">Cập nhật</button>
+                            <button type="submit"
+                                class="btn-update block m-[20px_auto_auto_auto] w-[180px] h-[42px] leading-[42px] text-center text-white bg-[#f00000] rounded-[8px] outline-none border-0 text-[18px] font-[700] uppercase">Cập
+                                nhật</button>
                         </div>
                     </div>
-                    <div class="content-tab" id="table-history">
-                        <div class="table-history">
-                            <h2 class="title">Lịch sử mua hàng</h2>
-                            <table class="table">
+                    <div class="content-tab hidden" id="table-history">
+                        <div class="table-history w-full">
+                            <h2 class="title text-[20px] font-[600] text-center uppercase mb-[20px]">Lịch sử mua hàng
+                            </h2>
+                            <table class="table text-left">
                                 <thead>
                                     <tr>
                                         <th>Tên sản phẩm</th>
@@ -221,54 +245,72 @@
         </div>
 
         <div class="footer">
-            <div class="box-faq">
+            <div class="box-faq mt-[15px]">
                 <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-[#166dd8] p-[10px] rounded-[15px]">
+                        <h2 class="title text-center text-[24px] font-[600] uppercase text-[#110e83] 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-[100%] mb-[10px]
+                                                    border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
+                                <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">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
+                                <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-[100%] mb-[10px]
+                                                    border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
+                                <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">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-[100%] mb-[10px]
+                                                    border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
+                                <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">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-[100%] mb-[10px]
+                                                    border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
+                                <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">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-[100%] mb-[10px]
+                                                    border-[1px] border-[#e2e2e2] rounded-[8px] p-[10px] bg-[#f8f8f8]">
+                                <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>
@@ -276,57 +318,69 @@
                     </div>
                 </div>
             </div>
-            <div class="main-footer">
+            <div class="main-footer bg-[#110e83] mt-[15px] pb-[20px]">
                 <div class="container">
-                    <div class="footer-policies d-flex flex-wrap">
-                        <div class="item-policies">
-                            <div class="icons">
-                                <img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
+                    <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">
-                                <b>Chính sách giao hàng</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Đổi mới 15 ngày đầu</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Thanh toán tiện lợi</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Hỗ trợ nhiệt tình</b>
+                            <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">
-                        <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>
-                            <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
+                    <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>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,
+                            <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 m-[0_auto] w-[270px] block">
                             <img src="./assets/images/btn-phone.png" alt="">
                         </a>
                     </div>
diff --git a/account.html b/account.html
index fc5594c..22c78fd 100644
--- a/account.html
+++ b/account.html
@@ -4,31 +4,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <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">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.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-[#166dd8] 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>
@@ -36,17 +36,20 @@
     </div>
     <div class="page-account">
         <div class="container">
-            <div class="breadcrumb">
-                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
-                        <a href="/" itemprop="item" class="nopad-l">
-                            <span itemprop="name"><span>Trang chủ</span></span>
-                        </a> <i>/</i>
+            <div class="breadcrumb w-full float-left p-0 m-0 bg-none">
+                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
+                        <a href="/" itemprop="item" class="nopad-l text-[14px]">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
+                                    chủ</span></span>
+                        </a> <i class="leading-[40px] m-[0_10px]">/</i>
                         <meta itemprop="position" content="1">
                     </li>
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
                         <a href="/" itemprop="item">
-                            <span itemprop="name">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]">
                                 Tài khoản
                             </span>
                         </a>
@@ -55,67 +58,87 @@
                 </ol>
             </div>
             <div class="clearfix"></div>
-            <div class="content-account">
-                <div class="name-avatar d-flex align-items">
-                    <div class="avatar">P</div>
+            <div class="content-account mb-[20px]">
+                <div class="name-avatar flex items-center mb-[20px]">
+                    <div
+                        class="avatar w-[40px] h-[40px] mr-[10px] leading-[40px] text-[24px] font-[600] bg-[#d9d9d9] rounded-[50%] text-center">
+                        P
+                    </div>
                     <div class="info">
                         <span>Tài khoản của</span>
-                        <b>Phương Phạm</b>
+                        <b class="block text-[18px] leading-[20px]">Phương Phạm</b>
                     </div>
                 </div>
 
-                <div class="content d-flex">
-                    <div class="content-left">
+                <div class="content flex">
+                    <div class="content-left w-[187px] mr-[32px]">
                         <div class="tab">
-                            <a href="javascript:void(0)" data-id="#form-info" class="item-tab active">
-                                <i class="fas fa-address-card"></i>
-                                <span>Thông tin tài khoản</span>
+                            <a href="javascript:void(0)" data-id="#form-info"
+                                class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px] active">
+                                <i class="fas fa-address-card mr-[15px]"></i>
+                                <span class="text-[13px]">Thông tin tài khoản</span>
                             </a>
-                            <a href="javascript:void(0)" data-id="#table-history" class="item-tab">
-                                <i class="fas fa-shopping-cart"></i>
-                                <span>Lịch sửa mua hàng</span>
+                            <a href="javascript:void(0)" data-id="#table-history"
+                                class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
+                                <i class="fas fa-shopping-cart mr-[15px]"></i>
+                                <span class="text-[13px]">Lịch sửa mua hàng</span>
                             </a>
-                            <a href="/logout.php" class="item-tab">
-                                <i class="fas fa-sign-in-alt"></i>
-                                <span>Đăng xuất tài khoản</span>
+                            <a href="/logout.php"
+                                class="item-tab w-full h-[42px] leading-[42px] mb-[10px] rounded-[5px] flex items-center bg-[#afafaf] text-white p-[0_16px]">
+                                <i class="fas fa-sign-in-alt mr-[15px]"></i>
+                                <span class="text-[13px]">Đăng xuất tài khoản</span>
                             </a>
                         </div>
                     </div>
-                    <div class="content-right">
-                        <div class="content-tab active" id="form-info">
-                            <div class="form-info" id="">
-                                <input type="text" class="input" name="name" placeholder="Họ và tên">
-                                <input type="text" class="input" name="email" placeholder="Email">
-                                <div class="d-flex align-items box-phone">
-                                    <input type="text" class="input" name="phone" placeholder="Số điện thoại">
-                                    <a href="javascript:void(0)" class="btn-otp" onclick="checkOTP()">Gửi mã xác
+                    <div class="content-right w-[calc(100%_-187px_-32px)]">
+                        <div class="content-tab hidden active" id="form-info">
+                            <div class="form-info w-[567px]" id="">
+                                <input type="text"
+                                    class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                    name="name" placeholder="Họ và tên">
+                                <input type="text"
+                                    class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                    name="email" placeholder="Email">
+                                <div class="flex items-center box-phone relative">
+                                    <input type="text"
+                                        class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                        name="phone" placeholder="Số điện thoại">
+                                    <a href="javascript:void(0)"
+                                        class="btn-otp absolute right-[0] top-0 block w-[130px] h-[40px] leading-[40px] text-center bg-[#f1b510] rounded-[8px] text-white hover:background-white hover:text-yellow hover:border-yellow"
+                                        onclick="checkOTP()">Gửi mã
+                                        xác
                                         thực</a>
                                 </div>
 
-                                <div class="box-sex d-flex align-items">
+                                <div class="box-sex flex items-center mb-[10px]">
                                     <span>Giới tính</span>
-                                    <div class="item">
+                                    <div class="item ml-[15px]">
                                         <label class="radio-checkbox">Nam
                                             <input type="radio" checked="checked" name="sex" value="1" name="radio">
                                             <span class="checkmark"></span>
                                         </label>
                                     </div>
-                                    <div class="item">
+                                    <div class="item ml-[15px]">
                                         <label class="radio-checkbox">Nữ
                                             <input type="radio" checked="checked" name="sex" value="2" name="radio">
                                             <span class="checkmark"></span>
                                         </label>
                                     </div>
                                 </div>
-                                <input type="text" class="input" name="address" placeholder="Địa chỉ">
+                                <input type="text"
+                                    class="input w-full h-[40px] rounded-[8px] border-[1px] border-[#e6e6e6] outline-none p-[15px] mb-[10px] bg-[#f5f5f5]"
+                                    name="address" placeholder="Địa chỉ">
 
-                                <button type="submit" class="btn-update">Cập nhật</button>
+                                <button type="submit"
+                                    class="btn-update block m-[20px_auto_auto_auto] w-[180px] h-[42px] leading-[42px] text-center text-white bg-[#f00000] rounded-[8px] outline-none border-0 text-[18px] font-[700] uppercase">Cập
+                                    nhật</button>
                             </div>
                         </div>
-                        <div class="content-tab" id="table-history">
-                            <div class="table-history">
-                                <h2 class="title">Lịch sử mua hàng</h2>
-                                <table class="table">
+                        <div class="content-tab hidden" id="table-history">
+                            <div class="table-history w-full">
+                                <h2 class="title text-[24px] font-[600] text-center uppercase mb-[20px]">Lịch sử mua
+                                    hàng</h2>
+                                <table class="table text-left">
                                     <thead>
                                         <tr>
                                             <th>Tên sản phẩm</th>
@@ -144,7 +167,7 @@
                                             <td>1</td>
                                             <td>
                                                 <p class="status cancel">
-                                                    Đã hủ<y></y>
+                                                    Đã hủy
                                                 </p>
                                             </td>
                                         </tr>
@@ -217,76 +240,108 @@
 
     <div class="overlay"></div>
     <div class="box-popup popup-thongbao">
-        <div class="title">Vui lòng xác thực SĐT của bạn</div>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Vui lòng xác thực SĐT của bạn
+        </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>
 
-        <p>Vui lòng xác thực SĐT của bạn tại trang tài khoản</p>
+        <p class="text-center text-[14px]">Vui lòng xác thực SĐT của bạn tại trang tài khoản</p>
 
-        <a href="javascript:void(0)" class="btn-submit" onclick="SendcheckOTP()">
+        <a href="javascript:void(0)"
+            class="btn-submit block w-[168px] 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="SendcheckOTP()">
             ok
         </a>
     </div>
 
 
     <div class="box-popup popup-input-opt">
-        <div class="title">Vui lòng xác nhận bằng mã OTP</div>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Vui lòng xác nhận bằng mã OTP
+        </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>
 
-        <input type="text" class="input-otp" placeholder="Vui lòng nhập OTP">
+        <input type="text"
+            class="input-otp w-[390px] h-[40px] outline-none border-b-[1px] border-[#bdbdbd] m-[0_auto] block text-center"
+            placeholder="Vui lòng nhập OTP">
 
-        <a href="javascript:void(0)" class="btn-submit" onclick="checkOTP()">
+        <a href="javascript:void(0)"
+            class="btn-submit block w-[168px] h-[42px] leading-[42px] text-center m-[20px_auto_0_auto] uppercase text-white font-[700] rounded-[26px] outline-none border-0 background-blue hover:background-white hover:text-blue hover:border-blue"
+            onclick="checkOTP()">
             Xác nhận
         </a>
     </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-[#166dd8] p-[10px] rounded-[15px]">
+                    <h2 class="title text-center text-[32px] font-[600] uppercase text-[#110e83] 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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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>
@@ -294,56 +349,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>
@@ -353,7 +411,41 @@
 </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="./assets/js/main.js"></script>
+<!-- <script src="./assets/js/main.js"></script> -->
+
+
+<script>
+
+    Tab();
+    function Tab() {
+        $(".tab .item-tab").click(function () {
+            var datatab = $(this).attr("data-id");
+            $(".tab .item-tab").removeClass("active");
+            $('.content-tab').removeClass("active");
+            $(this).addClass("active");
+            $(datatab).addClass("active");
+        });
+    }
+
+    function checkOTP() {
+        $('.box-popup').removeClass('active');
+        $('.overlay').addClass('active')
+        $('.popup-thongbao').addClass('active')
+    }
+
+    function SendcheckOTP() {
+        $('.box-popup').removeClass('active');
+        $('.overlay').addClass('active')
+        $('.popup-input-opt').addClass('active')
+    }
+
+
+    function closePopop() {
+        $('.box-popup').removeClass('active');
+        $('.overlay').removeClass('active')
+    }
+</script>
 
 </html>
\ No newline at end of file
diff --git a/assets/css/style-global-mb.css b/assets/css/style-global-mb.css
new file mode 100644
index 0000000..53cb3e7
--- /dev/null
+++ b/assets/css/style-global-mb.css
@@ -0,0 +1,614 @@
+@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+/* thay đổi màu sắc */
+:root {
+  --main-color: #166dd8; /* màu chính */
+  --color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
+  --color-bg-title-2: #f1b510; /* màu nền chữ vàng */
+  --color-box-auction: #166dd8; /* màu nền đấu giá kịch tính */
+  --color-bg-footer: #110e83; /* màu nền footer */
+  --bg-header: #166dd8; /* màu nền header */
+  --bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
+  --bg-list-auction: #166dd8; /* màu nền danh sách đấu giá  */
+  --color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá  */
+  --bg-deal: #ea3e00; /* màu nền box deal */
+  --border-faq: #110e83; /* màu border câu hỏi thường gặp */
+  --color-faq: #110e83; /* màu tiêu đề câu hỏi thường gặp */
+  --title-faq: #f8f8f8; /* màu tiêu đề faq */
+  --bg-time-auction: #166dd8; /* màu nền ngày hội đấu giá */
+  --bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
+  --bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
+  --bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
+  --bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
+  --bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
+  --bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 5px;
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #a4a4a4;
+  border-radius: 20px;
+  background-image: -webkit-gradient(
+    linear,
+    0 0,
+    0 100%,
+    color-stop(0.7, #a4a4a4),
+    color-stop(0.5, transparent),
+    to(transparent)
+  );
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Kanit", sans-serif;
+}
+
+body {
+  color: #222;
+  font-family: "Kanit", sans-serif;
+  font-size: 15px;
+  margin: 0 auto;
+  background: #fff;
+}
+
+html {
+  font-size: 100%;
+  font-family: "Kanit", sans-serif;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  text-decoration: none;
+  color: #000;
+}
+
+.clearfix {
+  content: "";
+  clear: both;
+}
+
+li,
+ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.ol,
+.ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.container-mb {
+  padding: 0;
+  max-width: 430px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+.container {
+  padding: 0 10px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.icon_auction {
+  background: url(../images/icon-auction.png) no-repeat;
+  width: 14px;
+  height: 14px;
+  display: block;
+  background-size: contain;
+}
+.icon-deal {
+  display: block;
+  width: 29px;
+  height: 29px;
+  background: url(../images/icon-flash.png) no-repeat;
+  background-size: contain;
+}
+
+.icon-star {
+  background: url(../images/icon-star.png) no-repeat;
+  width: 80px;
+  height: 12px;
+  display: block;
+  background-size: 100%;
+}
+.icon-star.star5 {
+  background-position: 0 0;
+}
+.icon-star.star4 {
+  background-position: 0 -17px;
+}
+.icon-star.star3 {
+  background-position: 0 -34px;
+}
+.icon-star.star2 {
+  background-position: 0 -50px;
+}
+.icon-star.star1 {
+  background-position: 0 -67px;
+}
+.icon-star.star0 {
+  background-position: 0 -84px;
+}
+.icon.auction {
+  background: url(../images/icon-auction.png) no-repeat;
+  background-size: contain;
+  width: 15px;
+  height: 15px;
+  display: block;
+  margin-right: 3px;
+}
+.icon.time {
+  background: url(../images/icon-fire-time.png) no-repeat;
+  background-size: contain;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 3px;
+}
+
+.icon-cup {
+  background: url(../images/icon-cup.png) no-repeat;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-right: 10px;
+}
+
+.saleoff {
+  width: 42px;
+  height: 20px;
+  line-height: 20px;
+  padding-left: 10px;
+  background: #f00000;
+  font-size: 12px;
+  color: #fff;
+  border-radius: 5px;
+  font-weight: 600;
+  position: relative;
+}
+.saleoff::before {
+  position: absolute;
+  left: -6px;
+  top: 0;
+  width: 15px;
+  height: 20px;
+  content: "";
+  background: url(../images/icon-flash.png) no-repeat;
+  background-size: cover;
+}
+
+.background-blue {
+  background: var(--main-color) !important;
+}
+.background-red {
+  background: var(var(--color-bg-title-1)) !important;
+}
+.background-yellow {
+  background: var(var(--color-bg-title-2)) !important;
+}
+.background-footer {
+  background: var(--color-bg-footer) !important;
+}
+
+.hover\:text-blue:hover {
+  color: var(--main-color) !important;
+}
+.hover\:background-blue:hover {
+  background: var(--main-color) !important;
+}
+.hover\:background-yellow:hover {
+  background: var(var(--color-bg-title-2)) !important;
+}
+
+.hover\:background-white:hover {
+  background: #fff !important;
+}
+
+.hover\:text-yellow:hover {
+  color: var(var(--color-bg-title-2)) !important;
+}
+
+.hover\:text-red:hover {
+  color: #f00000 !important;
+}
+.hover\:border-red:hover {
+  border: 1px solid #f00000 !important;
+}
+
+.hover\:border-blue:hover {
+  border: 1px solid var(--main-color) !important;
+}
+
+.hover\:border-yellow:hover {
+  border: 1px solid var(var(--color-bg-title-2)) !important;
+}
+
+.text-red {
+  color: #f00000;
+}
+
+.btn-add {
+  width: 140px;
+  height: 32px;
+  line-height: 30px;
+  text-align: center;
+  background: #f00000;
+  color: #fff;
+  text-align: center;
+  border-radius: 26px;
+  display: block;
+  margin-top: 10px;
+}
+
+.btn-add:hover {
+  border: 1px solid #f00000;
+  color: #f00000;
+  background: #fff;
+}
+.btn-add.continue {
+  background: #5f00b1;
+}
+
+.btn-add.continue:hover {
+  border: 1px solid #5f00b1;
+  color: #5f00b1;
+  background: #fff;
+}
+
+.btn-add.coming {
+  background: #afafaf;
+}
+.btn-add.coming:hover {
+  border: 1px solid #afafaf;
+  color: #afafaf;
+  background: #fff;
+}
+
+.header.header-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.swiper-pagination {
+  bottom: 0 !important;
+}
+.swiper-pagination-bullet {
+  width: 10px;
+  height: 10px;
+}
+.swiper-pagination-bullet.swiper-pagination-bullet-active {
+  background: var(var(--color-bg-title-2));
+}
+
+.box-time {
+  display: flex;
+  align-items: center;
+}
+.box-time .item-time {
+  margin-left: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+  flex-direction: column;
+}
+.box-time .item-time b {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  color: #fff;
+  font-weight: 700;
+  position: relative;
+  border-radius: 5px;
+}
+.box-time .item-time b::after {
+  content: ":";
+  position: absolute;
+  right: -8px;
+  color: #fff;
+  top: 0;
+}
+.box-time .item-time:first-child {
+  margin-left: 0;
+}
+.box-time .item-time:last-child b {
+  margin: 0;
+}
+.box-time .item-time:last-child b::after {
+  content: none;
+}
+
+.item-tab.active {
+  background: var(--main-color);
+  color: #fff;
+}
+.item-tab:hover {
+  background: var(--main-color);
+  color: #fff;
+}
+.tab-list .box-time b {
+  background: #000;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+  color: #fff;
+  font-weight: 700;
+  position: relative;
+  border-radius: 5px;
+}
+
+.btn-more-all {
+  width: 110px;
+  height: 32px;
+  line-height: 31px;
+  display: block;
+  border-radius: 5px;
+  border: 1px solid #fff;
+  margin: 0 auto auto auto;
+  text-align: center;
+  color: #fff;
+}
+.btn-more-all:hover {
+  background: #fff;
+  color: #ee4d2d;
+}
+.box-faq .item.active .content {
+  display: block;
+}
+
+.page-auction .item-tab.active,
+.page-auction .item-tab:hover {
+  background: #fff;
+  color: var(--main-color);
+}
+.page-detail .swiper-pagination {
+  width: 41px !important;
+  height: 28px;
+  background: #0000004d;
+  border-radius: 14px;
+  line-height: 28px;
+  text-align: center;
+  display: block;
+  right: 10px;
+  bottom: 10px;
+  left: unset !important;
+}
+.page-detail .swiper-pagination {
+  color: #fff !important;
+}
+.active {
+  display: block !important;
+}
+
+.tab-history .item-tab.active,
+.tab-history .item-tab:hover {
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px #00000040;
+  color: #000;
+  border-radius: 20px;
+}
+
+.table-tab thead {
+  background: #fff;
+}
+
+.table-tab th {
+  position: sticky;
+  top: 0;
+  width: calc(100% / 3);
+  height: 35px;
+  background: #fff;
+  border-bottom: 1px solid #dfdfdf;
+  font-size: 13px;
+}
+.table-tab td {
+  font-size: 13px;
+  width: calc(100% / 3);
+  height: 35px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 999;
+  display: none;
+}
+.overlay.active {
+  display: block;
+}
+
+.box-popup {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid var(var(--color-bg-title-2));
+  width: 97%;
+  border-radius: 30px;
+  padding: 15px;
+  background: #fff;
+  z-index: 999;
+  display: none;
+}
+
+.input-checkbox {
+  margin-top: 12px;
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.input-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.input-checkbox input:checked ~ .checkmark {
+  background-color: #3194fc;
+}
+.input-checkbox .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 15px;
+}
+.input-checkbox .checkmark:after {
+  content: "";
+  position: absolute;
+  display: block;
+}
+.input-checkbox:hover input ~ .checkmark {
+  background-color: #3194fc;
+}
+.input-checkbox input:checked ~ .checkmark:after {
+  display: block;
+}
+.input-checkbox .checkmark:after {
+  left: 8px;
+  top: 4px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+}
+
+.radio-checkbox {
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  line-height: 20px;
+}
+.radio-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+.radio-checkbox .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 50%;
+}
+.radio-checkbox:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+.radio-checkbox input:checked ~ .checkmark {
+  background-color: var(--main-color);
+}
+.radio-checkbox .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+.radio-checkbox input:checked ~ .checkmark:after {
+  display: block;
+}
+.radio-checkbox .checkmark:after {
+  top: 6px;
+  left: 5.5px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: white;
+}
+
+.popup-success::before {
+  position: absolute;
+  content: "";
+  background: url(../images/background-firework.png) no-repeat;
+  background-size: contain;
+  width: 100px;
+  height: 85px;
+  left: 0;
+  top: 20px;
+}
+.popup-success::after {
+  position: absolute;
+  content: "";
+  background: url(../images/background-firework.png) no-repeat;
+  background-size: contain;
+  width: 100px;
+  height: 85px;
+  right: 0;
+  top: 20px;
+  transform: scaleX(-1);
+}
+
+.table-history thead {
+  position: sticky;
+  top: 0;
+}
+.table-history th {
+  background: #e2e2e2;
+  height: 40px;
+  padding: 0 10px;
+}
+.table-history td {
+  height: 40px;
+  padding: 5px;
+  border-bottom: 0.5px solid #e2e2e2;
+}
+.table-history .status.ship {
+  color: #17c967;
+}
+.table-history .status.cancel {
+  color: #d00000;
+}
+.table-history .status.processing {
+  color: #f48320;
+}
+.table-history .status.success {
+  color: #0caaf9;
+}
diff --git a/assets/css/style-global.css b/assets/css/style-global.css
new file mode 100644
index 0000000..7803817
--- /dev/null
+++ b/assets/css/style-global.css
@@ -0,0 +1,622 @@
+@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+/* thay đổi màu sắc */
+:root {
+  --main-color: #166dd8; /* màu chính */
+  --color-bg-title-1: #ea3e00; /* màu nền chữ đỏ */
+  --color-bg-title-2: #f1b510; /* màu nền chữ vàng */
+  --color-box-auction: #166dd8; /* màu nền đấu giá kịch tính */
+  --color-bg-footer: #110e83; /* màu nền footer */
+  --bg-header: #166dd8; /* màu nền header */
+  --bg-top-auction: #ea3e00; /* màu nền tiêu đề top đấu giá sôi động */
+  --bg-list-auction: #166dd8; /* màu nền danh sách đấu giá  */
+  --color-list-auction: #f1b510; /* màu nền tiều đề danh sách đấu giá  */
+  --bg-deal: #ea3e00; /* màu nền box deal */
+  --border-faq: #110e83; /* màu border câu hỏi thường gặp */
+  --color-faq: #110e83; /* màu tiêu đề câu hỏi thường gặp */
+  --title-faq: #f8f8f8; /* màu tiêu đề faq */
+  --bg-time-auction: #166dd8; /* màu nền ngày hội đấu giá */
+  --bg-timeout-detail: #ea3e00; /* màu nền thời gian đếm ngược đấu giá */
+  --bg-user-win: #ffe0ac; /* màu nền người chiến thắng đấu giá */
+  --bg-btn-auction: #f00000; /* màu nền nút tham gia đấu giá */
+  --bg-time-deal: #ee4d2d; /* màu nền thời gian đếm ngược deal */
+  --bg-btn-deal: #166dd8; /* màu nền nút mua sp deal */
+  --bg-list-deal-ongoing: #ee4d2d; /* màu nền danh sách sản phẩm đang diễn ra chi tiết deal */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 5px;
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #a4a4a4;
+  border-radius: 20px;
+  background-image: -webkit-gradient(
+    linear,
+    0 0,
+    0 100%,
+    color-stop(0.7, #a4a4a4),
+    color-stop(0.5, transparent),
+    to(transparent)
+  );
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Kanit", sans-serif;
+}
+
+body {
+  color: #222;
+  font-family: "Kanit", sans-serif;
+  font-size: 15px;
+  margin: 0 auto;
+  background: #fff;
+}
+
+html {
+  font-size: 100%;
+  font-family: "Kanit", sans-serif;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  text-decoration: none;
+  color: #000;
+}
+
+.clearfix {
+  content: "";
+  clear: both;
+}
+
+li,
+ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.ol,
+.ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.container {
+  padding: 0 10px;
+  width: 1210px !important;
+  margin: 0 auto;
+}
+
+.icon_auction {
+  background: url(../images/icon-auction.png) no-repeat;
+  width: 14px;
+  height: 14px;
+  display: block;
+  background-size: contain;
+}
+.icon-deal {
+  display: block;
+  width: 29px;
+  height: 29px;
+  background: url(../images/icon-flash.png) no-repeat;
+  background-size: contain;
+}
+
+.icon-star {
+  background: url(../images/icon-star.png) no-repeat;
+  width: 80px;
+  height: 12px;
+  display: block;
+  background-size: 100%;
+}
+.icon-star.star5 {
+  background-position: 0 0;
+}
+.icon-star.star4 {
+  background-position: 0 -17px;
+}
+.icon-star.star3 {
+  background-position: 0 -34px;
+}
+.icon-star.star2 {
+  background-position: 0 -50px;
+}
+.icon-star.star1 {
+  background-position: 0 -67px;
+}
+.icon-star.star0 {
+  background-position: 0 -84px;
+}
+.icon.auction {
+  background: url(../images/icon-auction.png) no-repeat;
+  background-size: contain;
+  width: 15px;
+  height: 15px;
+  display: block;
+  margin-right: 3px;
+}
+.icon.time {
+  background: url(../images/icon-fire-time.png) no-repeat;
+  background-size: contain;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 3px;
+}
+
+.icon-cup {
+  background: url(../images/icon-cup.png) no-repeat;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  display: block;
+  margin-right: 10px;
+}
+
+.background-blue {
+  background: var(--main-color) !important;
+}
+.background-red {
+  background: var(--color-bg-title-1) !important;
+}
+.background-yellow {
+  background: var(--color-bg-title-2) !important;
+}
+.background-footer {
+  background: var(--color-bg-footer) !important;
+}
+
+.hover\:text-blue:hover {
+  color: var(--main-color) !important;
+}
+.hover\:background-blue:hover {
+  background: var(--main-color) !important;
+}
+.hover\:background-yellow:hover {
+  background: var(--color-bg-title-2) !important;
+}
+
+.hover\:background-white:hover {
+  background: #fff !important;
+}
+
+.hover\:text-yellow:hover {
+  color: var(--color-bg-title-2) !important;
+}
+
+.hover\:text-red:hover {
+  color: #f00000 !important;
+}
+.hover\:border-red:hover {
+  border: 1px solid #f00000 !important;
+}
+
+.hover\:border-blue:hover {
+  border: 1px solid var(--main-color) !important;
+}
+
+.hover\:border-yellow:hover {
+  border: 1px solid var(--color-bg-title-2) !important;
+}
+
+.text-red {
+  color: #f00000;
+}
+
+.btn-add {
+  width: 140px;
+  height: 32px;
+  line-height: 30px;
+  text-align: center;
+  background: #f00000;
+  color: #fff;
+  text-align: center;
+  border-radius: 26px;
+  display: block;
+  margin-top: 10px;
+}
+
+.btn-add:hover {
+  border: 1px solid #f00000;
+  color: #f00000;
+  background: #fff;
+}
+.btn-add.continue {
+  background: #5f00b1;
+}
+
+.btn-add.continue:hover {
+  border: 1px solid #5f00b1;
+  color: #5f00b1;
+  background: #fff;
+}
+
+.box-time {
+  display: flex;
+  align-items: center;
+}
+.box-time .item-time {
+  margin-left: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+  flex-direction: column;
+}
+.box-time .item-time b {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  color: #fff;
+  font-weight: 700;
+  position: relative;
+  border-radius: 5px;
+}
+.box-time .item-time b::after {
+  content: ":";
+  position: absolute;
+  right: -8px;
+  color: #fff;
+  top: 0;
+}
+.box-time .item-time:first-child {
+  margin-left: 0;
+}
+.box-time .item-time:last-child b {
+  margin: 0;
+}
+.box-time .item-time:last-child b::after {
+  content: none;
+}
+
+.tab-list .box-time b {
+  background: #000;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+  color: #fff;
+  font-weight: 700;
+  position: relative;
+  border-radius: 5px;
+}
+
+.more-all {
+  width: 110px;
+  height: 32px;
+  line-height: 31px;
+  display: block;
+  border-radius: 5px;
+  border: 1px solid #fff;
+  margin: 10px auto auto auto;
+  text-align: center;
+  color: #fff;
+}
+
+.more-all:hover {
+  background: #fff;
+  color: var(--main-color);
+}
+
+.saleoff {
+  width: 42px;
+  height: 20px;
+  line-height: 20px;
+  padding-left: 10px;
+  background: #f00000;
+  font-size: 12px;
+  color: #fff;
+  border-radius: 5px;
+  font-weight: 600;
+  position: relative;
+}
+.saleoff::before {
+  position: absolute;
+  left: -6px;
+  top: 0;
+  width: 15px;
+  height: 20px;
+  content: "";
+  background: url(../images/icon-flash.png) no-repeat;
+  background-size: cover;
+}
+
+.box-faq .item.active .content {
+  display: block;
+}
+
+.box-thumbImage .swiper-button-next::after {
+  font-size: 16px;
+  color: #000;
+  font-weight: 700;
+}
+
+.box-thumbImage .swiper-button-next {
+  position: absolute;
+  top: 468px;
+  transform: rotate(90deg);
+  left: 35%;
+}
+
+.box-thumbImage .swiper-button-prev {
+  position: absolute;
+  top: 0;
+  transform: rotate(90deg);
+  left: 35%;
+}
+
+.box-thumbImage .swiper-button-prev::after {
+  font-size: 16px;
+  color: #000;
+  font-weight: 700;
+}
+
+.box-thumbImage .swiper-slide {
+  cursor: pointer;
+}
+.box-thumbImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.box-thumbImage .swiper-slide-thumb-active img {
+  opacity: 1;
+  border: 1px solid transparent;
+  border-image: linear-gradient(
+    359.53deg,
+    #3935c8 82.81%,
+    #1355f0 92%,
+    #0caaf9 99.12%
+  );
+  border-image-slice: 1;
+  border-radius: 10px;
+}
+
+.item-tab.active {
+  background: var(--main-color);
+  color: #fff;
+}
+
+.item-tab:hover {
+  background: var(--main-color);
+  color: #fff;
+}
+
+.tab-history .item-tab.active,
+.tab-history .item-tab:hover {
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px #00000040;
+  color: #000;
+  border-radius: 20px;
+}
+
+.active {
+  display: block !important;
+}
+
+.table-tab thead {
+  background: #fff;
+}
+
+.table-tab th {
+  position: sticky;
+  top: 0;
+  width: 30%;
+  height: 35px;
+  background: #fff;
+  border-bottom: 1px solid #dfdfdf;
+}
+.table-tab td {
+  width: 30%;
+  height: 35px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 99;
+  display: none;
+}
+.overlay.active {
+  display: block;
+}
+
+.box-popup {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid var(--color-bg-title-2);
+  width: 590px;
+  border-radius: 30px;
+  padding: 15px;
+  background: #fff;
+  z-index: 999;
+  display: none;
+  &.active {
+    display: block;
+  }
+}
+
+.input-checkbox {
+  margin-top: 12px;
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.input-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.input-checkbox input:checked ~ .checkmark {
+  background-color: #3194fc;
+}
+.input-checkbox .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 15px;
+}
+.input-checkbox .checkmark:after {
+  content: "";
+  position: absolute;
+  display: block;
+}
+.input-checkbox:hover input ~ .checkmark {
+  background-color: #3194fc;
+}
+.input-checkbox input:checked ~ .checkmark:after {
+  display: block;
+}
+.input-checkbox .checkmark:after {
+  left: 8px;
+  top: 4px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+}
+
+.radio-checkbox {
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  line-height: 20px;
+}
+.radio-checkbox input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+.radio-checkbox .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: #eee;
+  border-radius: 50%;
+}
+.radio-checkbox:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+.radio-checkbox input:checked ~ .checkmark {
+  background-color: var(--main-color);
+}
+.radio-checkbox .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+.radio-checkbox input:checked ~ .checkmark:after {
+  display: block;
+}
+.radio-checkbox .checkmark:after {
+  top: 6px;
+  left: 5.5px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: white;
+}
+
+.popup-success::before {
+  position: absolute;
+  content: "";
+  background: url(../images/background-firework.png) no-repeat;
+  background-size: contain;
+  width: 120px;
+  height: 85px;
+  left: 0;
+  top: 20px;
+}
+.popup-success::after {
+  position: absolute;
+  content: "";
+  background: url(../images/background-firework.png) no-repeat;
+  background-size: contain;
+  width: 120px;
+  height: 85px;
+  right: 0;
+  top: 20px;
+  transform: scaleX(-1);
+}
+
+.item-input.error .note-error {
+  color: #f00000;
+  font-size: 12px;
+}
+
+.table-history thead {
+  position: sticky;
+  top: 0;
+}
+.table-history th {
+  background: #e2e2e2;
+  height: 40px;
+  padding: 0 10px;
+}
+.table-history td {
+  height: 40px;
+  padding: 0 10px;
+}
+.table-history .status.ship {
+  color: #17c967;
+}
+.table-history .status.cancel {
+  color: #d00000;
+}
+.table-history .status.processing {
+  color: #f48320;
+}
+.table-history .status.success {
+  color: #0caaf9;
+}
+.tab-list.auction .item.active,
+.tab-list.auction .item:hover {
+  background: var(--color-bg-title-2);
+  display: flex !important;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index a34423b..5aa65a8 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -13,7 +13,14 @@
 ::-webkit-scrollbar-thumb {
   background: #a4a4a4;
   border-radius: 20px;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #a4a4a4), color-stop(0.5, transparent), to(transparent));
+  background-image: -webkit-gradient(
+    linear,
+    0 0,
+    0 100%,
+    color-stop(0.7, #a4a4a4),
+    color-stop(0.5, transparent),
+    to(transparent)
+  );
 }
 
 * {
@@ -212,7 +219,7 @@ table {
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
   transform: scale(1);
   transition: 0.3s;
 }
@@ -333,7 +340,8 @@ table {
   background: #afafaf;
   color: #fff;
 }
-.box-list-auction .tab-list .item.active, .box-list-auction .tab-list .item:hover {
+.box-list-auction .tab-list .item.active,
+.box-list-auction .tab-list .item:hover {
   background: #f1b510;
 }
 .box-list-auction .tab-list .item p {
@@ -439,7 +447,8 @@ table {
   background: #afafaf;
   color: #fff;
 }
-.box-deal-hot .tab-list .item.active, .box-deal-hot .tab-list .item:hover {
+.box-deal-hot .tab-list .item.active,
+.box-deal-hot .tab-list .item:hover {
   background: #166dd8;
 }
 .box-deal-hot .tab-list .item p {
@@ -525,7 +534,7 @@ table {
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
   transform: scale(1);
   transition: 0.3s;
 }
@@ -811,7 +820,8 @@ table {
   background: #afafaf;
   color: #fff;
 }
-.page-auction .tab-list .item.active, .page-auction .tab-list .item:hover {
+.page-auction .tab-list .item.active,
+.page-auction .tab-list .item:hover {
   background: #f1b510;
 }
 .page-auction .tab-list .item p {
@@ -873,7 +883,8 @@ table {
   display: block;
   color: #fff;
 }
-.paging .item.active, .paging .item:hover {
+.paging .item.active,
+.paging .item:hover {
   background: #f1b510;
   border: 1px solid #f1b510;
 }
@@ -948,13 +959,23 @@ table {
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .page-detail .box-thumbImage .swiper-slide-thumb-active img {
   opacity: 1;
   border: 1px solid transparent;
-  -o-border-image: linear-gradient(359.53deg, #3935c8 82.81%, #1355f0 92%, #0caaf9 99.12%);
-     border-image: linear-gradient(359.53deg, #3935c8 82.81%, #1355f0 92%, #0caaf9 99.12%);
+  -o-border-image: linear-gradient(
+    359.53deg,
+    #3935c8 82.81%,
+    #1355f0 92%,
+    #0caaf9 99.12%
+  );
+  border-image: linear-gradient(
+    359.53deg,
+    #3935c8 82.81%,
+    #1355f0 92%,
+    #0caaf9 99.12%
+  );
   border-image-slice: 1;
   border-radius: 10px;
 }
@@ -1243,7 +1264,8 @@ table {
   font-weight: 600;
   margin-right: 5px;
 }
-.page-detail .box-info-product .item-tab.active, .page-detail .box-info-product .item-tab:hover {
+.page-detail .box-info-product .item-tab.active,
+.page-detail .box-info-product .item-tab:hover {
   background: #166dd8;
   color: #fff;
 }
@@ -1262,7 +1284,7 @@ table {
   margin-right: 10px;
   height: 290px;
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .page-detail .box-info-product .content-tab .info ul {
   width: calc(100% - 300px);
@@ -1437,7 +1459,7 @@ table {
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
   display: block;
 }
 .box-review .info-cnt {
@@ -1774,7 +1796,8 @@ table {
   height: 34px;
   line-height: 34px;
 }
-.box-history .tab-history .item-tab.active, .box-history .tab-history .item-tab:hover {
+.box-history .tab-history .item-tab.active,
+.box-history .tab-history .item-tab:hover {
   background: #fff;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
   color: #000;
@@ -2078,14 +2101,26 @@ table {
   font-size: 24px;
   font-weight: 600;
   text-align: center;
-  background: linear-gradient(90deg, #d00000 11.46%, #ff2929 29.26%, #eb2121 47.05%, #d00000 88.22%);
+  background: linear-gradient(
+    90deg,
+    #d00000 11.46%,
+    #ff2929 29.26%,
+    #eb2121 47.05%,
+    #d00000 88.22%
+  );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-transform: uppercase;
   font-weight: 700;
 }
 .popup-success .note-title {
-  background: linear-gradient(90deg, #d00000 11.46%, #ff2929 29.26%, #eb2121 47.05%, #d00000 88.22%);
+  background: linear-gradient(
+    90deg,
+    #d00000 11.46%,
+    #ff2929 29.26%,
+    #eb2121 47.05%,
+    #d00000 88.22%
+  );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 20px;
@@ -2389,7 +2424,8 @@ table {
 .page-account .item-tab span {
   font-size: 13px;
 }
-.page-account .item-tab.active, .page-account .item-tab:hover {
+.page-account .item-tab.active,
+.page-account .item-tab:hover {
   background: #116dd8;
   color: #fff;
 }
@@ -2532,7 +2568,8 @@ table {
   background: #afafaf;
   color: #fff;
 }
-.page-list-deal .tab-list .item.active, .page-list-deal .tab-list .item:hover {
+.page-list-deal .tab-list .item.active,
+.page-list-deal .tab-list .item:hover {
   background: #166dd8;
 }
 .page-list-deal .tab-list .item p {
@@ -2862,4 +2899,4 @@ table {
 .popup-buy-success .content b {
   display: block;
   margin: 15px 0;
-}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+} /*# sourceMappingURL=style.css.map */
diff --git a/assets/images/icon-clipboard.png b/assets/images/icon-clipboard.png
index 3f6cfb7..4c765cf 100644
Binary files a/assets/images/icon-clipboard.png and b/assets/images/icon-clipboard.png differ
diff --git a/assets/js/deal_detail.js b/assets/js/deal_detail.js
new file mode 100644
index 0000000..469b783
--- /dev/null
+++ b/assets/js/deal_detail.js
@@ -0,0 +1,157 @@
+var swiper_thumb = new Swiper(".thumbImage", {
+    spaceBetween: 10,
+    slidesPerView: 4,
+    direction: "vertical",
+    loop: true,
+    on: {
+        init: (swiper) => {
+            let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
+            let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
+            swiper.el.style.height = containerHeight + 'px';
+        },
+    },
+});
+
+var swiper_big = new Swiper(".BigImage", {
+    spaceBetween: 10,
+    watchSlidesProgress: true,
+    noSwiping: true,
+    navigation: {
+        nextEl: "#js-image-next",
+        prevEl: "#js-image-prev",
+    },
+    thumbs: {
+        swiper: swiper_thumb,
+    },
+});
+
+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;
+}
diff --git a/deal-detail.html b/deal-detail.html
index 05661df..648ddc2 100644
--- a/deal-detail.html
+++ b/deal-detail.html
@@ -4,49 +4,66 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <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">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
-
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="./assets/css/style-global.css">
 </head>
 
 <body>
+    <div class="header bg-[#166dd8] p-[6px_0]">
+        <div class="container">
+            <div class="header-main flex items-center justify-between">
+                <div class="header-left">
+                    <a href="/" class="logo">
+                        <img src="./assets/images/logo.png" class="h-[35px]" alt="logo">
+                    </a>
+                </div>
+                <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 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="page-detail deal">
         <div class="container">
-            <div class="breadcrumb">
-                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
-                        <a href="/" itemprop="item" class="nopad-l">
-                            <span itemprop="name"><span>Trang chủ</span></span>
-                        </a> <i>/</i>
+            <div class="breadcrumb w-full float-left p-0 m-0 bg-none">
+                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
+                        <a href="/" itemprop="item" class="nopad-l text-[14px]">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
+                                    chủ</span></span>
+                        </a> <i class="leading-[40px] m-[0_10px]">/</i>
                         <meta itemprop="position" content="1">
                     </li>
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
                         <a href="/" itemprop="item">
-                            <span itemprop="name">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]">
                                 Flash sale
                             </span>
-                        </a><i>/</i>
-                        <meta itemprop="position" content="2">
-                    </li>
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
-                        <a href="/" itemprop="item">
-                            <span itemprop="name">
-                                Đấu giá
-                            </span>
                         </a>
                         <meta itemprop="position" content="2">
                     </li>
                 </ol>
             </div>
             <div class="clearfix"></div>
-            <div class="content-main-detail d-flex">
-                <div class="content-left">
-                    <div class="box-group-images d-flex">
-                        <div class="box-thumbImage">
+            <div class="content-main-detail flex mt-[20px]">
+                <div class="content-left w-[calc(100%_-490px_-32px)] mr-[32px]">
+                    <div class="box-group-images flex">
+                        <div class="box-thumbImage w-[85px] h-[560px] relative p-[30px_0]">
                             <div class="swiper-button swiper-button-next" id="js-image-next"></div>
-                            <div thumbsSlider="" class="swiper thumbImage">
+                            <div thumbsSlider="" class="swiper thumbImage h-[400px]">
                                 <div class="swiper-wrapper">
                                     <div class="swiper-slide">
                                         <img src="./assets/images/image-thumb-1.png" alt="">
@@ -67,7 +84,8 @@
                             </div>
                             <div class="swiper-button swiper-button-prev" id="js-image-prev"></div>
                         </div>
-                        <div class="swiper BigImage">
+                        <div class="swiper BigImage w-[calc(100%_-_85px_-_32px)]
+                ml-[32px]">
                             <div class="swiper-wrapper">
                                 <div class="swiper-slide">
                                     <img src="./assets/images/product-detail-big.png" alt="">
@@ -88,17 +106,19 @@
                         </div>
                     </div>
                 </div>
-                <div class="content-right">
-                    <h2 class="product-name">
+                <div class="content-right w-[490px]">
+                    <h2 class="product-name text-[20px] 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 d-flex align-items space-between">
-                        <div class="left d-flex align-items">
-                            <img src="./assets/images/icon-flash.png" width="100%" height="100%" alt="flash">
-                            <p class="title">Deal hot</p>
+                    <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 d-flex align-items">
-                            <span>Kết thúc trong</span>
+                        <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>
@@ -108,210 +128,253 @@
                             </div>
                         </div>
                     </div>
-                    <div class="group-price-deail">
-                        <div class="main-price d-flex align-items">
-                            <div class="price">29.490.000 <u>đ</u></div>
-                            <div class="old-price">29.990.000 <u>đ</u></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">
-                            <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="box-sold-detail w-[290px] 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">
-                        <div class="item">
-                            <i class="fas fa-check-circle"></i>
-                            <p>CPU: Intel Core i5-12450H (3.3GHz up to 4.4GHz 12MB)</p>
+                    <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">
-                            <i class="fas fa-check-circle"></i>
-                            <p>VGA: NVIDIA® GeForce RTX™ 2050 4GB GDDR6 + Intel UHD Graphics</p>
+                        <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">
-                            <i class="fas fa-check-circle"></i>
-                            <p>Màn hình: 15.6inch FHD (1920 x 1080) IPS, 144Hz, Slim Bezel, Acer ComfyView™</p>
+                        <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">
-                            <i class="fas fa-check-circle"></i>
-                            <p>RAM: 8GB (8x1) DDR4 3200MHz (2x SO-DIMM socket, up to 32GB SDRAM)</p>
+                        <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>
-                    <a href="javascript:void(0)" class="btn-deal" onclick="addDealCart()">Mua giá sốc</a>
+                    <a href="javascript:void(0)"
+                        class="btn-deal w-full text-center h-[42px] leading-[42px] rounded-[26px] text-white background-blue 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 class="content-revew-history d-flex">
-                <div class="content-left">
-                    <div class="box-review">
-                        <div class="main-title d-flex align-items space-between">
+            <div class="content-revew-history flex mt-[22px]">
+                <div class="content-left w-[calc(100%_-490px_-18px)] mr-[18px]">
+                    <div class="box-review shadow-[0_4px_4px_4px_#00000026] bg-white rounded-[15px] p-[20px_15px]">
+                        <div class="main-title flex items-center justify-between">
                             <div class="title-left">
-                                <div class="title d-flex align-items">
-                                    <h2>Đánh giá sản phẩm</h2>
+                                <div class="title flex items-center">
+                                    <h2 class="text-[16px] mr-[10px] font-[700]">Đánh giá sản phẩm</h2>
                                     <span>(100 đánh giá)</span>
                                 </div>
-                                <div class="d-flex align-items">
+                                <div class="flex items-center">
                                     <div class="rating">
                                         <i class="icon-star star5"></i>
                                     </div>
-                                    <div class="total">
+                                    <div class="total block ml-[5px] text-[14px]">
                                         <span>4.9</span>
                                         <span>/</span>
                                         <span>5</span>
                                     </div>
                                 </div>
                             </div>
-                            <a href="javascript:void(0)" class="btn-review">Gửi đánh giá</a>
+                            <a href="javascript:void(0)"
+                                class="btn-review w-[146px] h-[32px] leading-[32px] text-center background-blue text-white rounded-[26px] hover:background-white hover:text-blue hover:border-blue">Gửi
+                                đánh giá</a>
                         </div>
 
-                        <div class="list-review">
-                            <div class="item-review d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                        <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">
-                                    <div class="name-user">Anh quang</div>
-                                    <div class="total-view">
-                                        5.0 <i class="fa fa-star"></i>
+                                <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">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,
+                                    <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 d-flex align-items">
-                                        <span class="time">20-06-2024, 10:46 am</span>
-                                        <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                    <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 d-flex align-items">
-                                        <a href="" class="item">
-                                            <img src="./assets/images/image-review-1.png" alt="">
+                                    <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">
-                                            <img src="./assets/images/image-review-2.png" alt="">
+                                        <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">
-                                            <img src="./assets/images/image-review-3.png" alt="">
+                                        <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">
-                                    <div class="item-reply d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                <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">
-                                            <div class="name-user">Anphatcomputer</div>
-                                            <p class="cnt">Anphat xin cảm ơn anh Quang đã ủng hộ.
+                                        <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 d-flex align-items">
-                                                <span class="time">20-06-2024, 10:46 am</span>
-                                                <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                            <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 d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                    <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">
-                                            <div class="name-user">Anphatcomputer</div>
-                                            <p class="cnt">Anphat xin cảm ơn anh Quang đã ủng hộ.
+                                        <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 d-flex align-items">
-                                                <span class="time">20-06-2024, 10:46 am</span>
-                                                <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                            <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 d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                            <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">
-                                    <div class="name-user">Anh quang</div>
-                                    <div class="total-view">
-                                        5.0 <i class="fa fa-star"></i>
+                                <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">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,
+                                    <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 d-flex align-items">
-                                        <span class="time">20-06-2024, 10:46 am</span>
-                                        <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                    <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 d-flex align-items">
-                                        <a href="" class="item">
-                                            <img src="./assets/images/image-review-1.png" alt="">
+                                    <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">
-                                            <img src="./assets/images/image-review-2.png" alt="">
+                                        <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">
-                                            <img src="./assets/images/image-review-3.png" alt="">
+                                        <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">
-                            <span>Xem tất cả đánh giá</span> <i class="fas fa-chevron-right"></i>
+                        <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 class="box-question">
-                        <h2 class="title">Hỏi đáp <span>(100 bình luận)</span></h2>
-                        <div class="form-question">
-                            <textarea name="" id="" class="input-question"
+                    <div class="box-question mt-[25px] bg-[#f5f5f5] p-[15px] rounded-[15px]">
+                        <h2 class="title text-[16px] mb-[10px] font-[700]">Hỏi đáp <span
+                                class="text-[14px] 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">
+                            <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">
-                            <div class="item-question d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                        <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">
-                                    <div class="info-user d-flex align-items">
-                                        <div class="name-user">Anh Quang</div>
-                                        <span class="time">20-06-2024, 10:46 am</span>
+                                <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">
+                                    <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">
+                                        <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">
-                                    <div class="reply-question d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                <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">
-                                            <div class="info-user d-flex align-items">
-                                                <div class="name-user">Anphatcomputer</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">
-                                                <p>Dạ, bộ phận CSKH sẽ liên hệ với người chiến thắng ngay trong ngày để
-                                                    hướng dẫn thanh toán nhận hàng ạ</p>
-                                                <a href="javascript:void(0)" class="click-question">
+                                            <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>
@@ -320,136 +383,219 @@
                                 </div>
                             </div>
                         </div>
-                        <a href="javascript:void(0)" class="more-question">
-                            <span>Xem tất cả hỏi đáp</span> <i class="fas fa-chevron-right"></i>
+                        <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="box-info-product">
-                        <div class="tab d-flex align-items">
-                            <a href="javascrit:void(0)" data-id="#tab-info" class="item-tab active">Thông tin sản
-                                phẩm</a>
-                        </div>
-                        <div class="content-tab active" id="tab-info">
-                            <div class="d-flex info">
-                                <img src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
-                                <ul>
-                                    <li>Tên sản phẩm: Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</li>
-                                    <li>Dòng Laptop: Laptop | Laptop Acer Aspire | Laptop Đồ Họa | Laptop văn phòng</li>
+                    <div class="box-info-product mt-[20px]">
+                        <a href="javascrit:void(0)" data-id="#tab-info"
+                            class="item-tab active block w-[222px] h-[50px] leading-[50px] text-center rounded-[15px_15px_0_0] bg-[#f5f5f5] text-black text-[16px] font-[600] mr-[5px] ">Thông
+                            tin sản
+                            phẩm</a>
+
+                        <div class="content-tab" id="tab-info">
+                            <div class="flex info mt-[15px]">
+                                <img class="w-[290px] h-[290px] block mr-[10px] object-contain"
+                                    src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
+                                <ul class="w-[calc(100%_-300px)] 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>Công nghệ CPU: Intel Core i5-12450H</li>
-                                    <li>Số nhân: 8</li>
-                                    <li>Số luồng: 12</li>
-                                    <li>Tốc độ tối đa: 4.4GHz</li>
-                                    <li>Bộ nhớ đệm: 12MB</li>
+                                    <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>RAM: 16GB (2x8GB)</li>
-                                    <li>Loại RAM: DDR4</li>
-                                    <li>Tốc độ Bus RAM: 3200Mhz</li>
-                                    <li>Số khe cắm: 2 khe</li>
-                                    <li>Hỗ trợ RAM tối đa: Nâng cấp tối đa 32GB</li>
+                                    <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>Dung lượng: 512GB PCIe NVMe SSD</li>
-                                    <li>Tốc độ vòng quay</li>
-                                    <li>Khe cắm SSD mở rộng: nâng cấp tối đa 1 TB SSD PCIe Gen4, 16 Gb/s, NVMe</li>
+                                    <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 class="content-right">
-                    <div class="list-product-deal">
-                        <h2 class="title">Flash sale đang diễn ra</h2>
-                        <div class="list d-flex flex-wrap">
-                            <div class="item-deal">
-                                <div class="images">
-                                    <a href=""><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                <div class="content-right w-[490px]">
+                    <div class="list-product-deal bg-[var(--bg-list-deal-ongoing)] mt-[15px] rounded-[15px] p-[15px]">
+                        <h2 class="title text-[20px] font-[700] uppercase text-center mb-[10px] text-white">Flash sale
+                            đang diễn ra
+                        </h2>
+                        <div class="list flex flex-wrap mr-[-15px]">
+                            <div
+                                class="item-deal w-[calc(100%_/_2_-_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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                                    <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="" 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=""><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                            <div
+                                class="item-deal w-[calc(100%_/_2_-_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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                                    <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="" 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=""><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                            <div
+                                class="item-deal w-[calc(100%_/_2_-_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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                                    <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="" 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=""><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                            <div
+                                class="item-deal w-[calc(100%_/_2_-_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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                                    <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="" 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>
@@ -460,65 +606,83 @@
     </div>
 
 
-    <div class="overlay"></div>
-    <div class="box-popup popup-add-cart">
-        <h2 class="title">Thông tin đặt hàng</h2>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+    <div class="overlay" onclick="closePopop()"></div>
+    <div class="box-popup popup-add-cart ">
+        <h2 class="title text-[24px] 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 d-flex align-items">
-                <i class="fas fa-map-marker-alt"></i>
+            <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">
-                <input type="text" class="input" id="name" name="name" placeholder="Họ và tên">
+            <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">
-                <input type="text" class="input" id="email" name="email" placeholder="Email">
+            <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">
-                <input type="text" class="input" id="phone" name="phone" placeholder="Số điện thoại">
+            <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="d-flex align-items space-between box-select">
-                <div class="item-input">
-                    <select name="" id="city" class="input">
+            <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">
-                    <select name="" id="district" class="input">
+                <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">
-                <input type="text" class="input" id="address" name="address" placeholder="Tòa nhà, Tên đường..">
+            <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">
-                <input type="text" class="input" name="note" placeholder="Nhập ghi chú cho chúng tôi">
+            <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 d-flex align-items space-between">
+                <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 d-flex align-items space-between">
+                <div class="box-total-amount flex items-center justify-between">
                     <b>Tổng tiền</b>
-                    <div class="total-amount">29.000.000 <u>đ</u></div>
+                    <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" onclick="checkbuy()">
+            <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>
@@ -526,192 +690,160 @@
 
 
     <div class="box-popup popup-buy-success">
-        <div class="title">
-            <img src="./assets/images/image-checkbox.png" width="100%" height="100%" alt="checkbox">
+        <div class="title text-[24px] 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' onclick="closePopop()">
+        <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">
-            <p>Cảm ơn bạn đã mua hàng tại <a href="#">Anphatpc.com.vn.</a> <br>
-                Nhân viên <a href="#">Anphatpc.com.vn</a> sẽ liên hệ với bạn trong thời gian sớm nhất.</p>
-            <b>Mã đơn hàng của bạn <a href="#">#0061</a></b>
+        <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-[25px]">
+            <div class="container">
+                <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 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 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-[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 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-[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 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-[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 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-[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 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 background-footer mt-[20px]">
+            <div class="container">
+                <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 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 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 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 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 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 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 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 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 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 w-[235px] block absolute right-0 top-[50%] translate-x-[0] translate-y-[-50%]">
+                        <img src="./assets/images/btn-phone.png" alt="">
+                    </a>
+                </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>
-
-    var swiper_thumb = new Swiper(".thumbImage", {
-        spaceBetween: 10,
-        slidesPerView: 4,
-        direction: "vertical",
-        loop: true,
-        on: {
-            init: (swiper) => {
-                let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
-                let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
-                swiper.el.style.height = containerHeight + 'px';
-            },
-        },
-    });
-
-    var swiper_big = new Swiper(".BigImage", {
-        spaceBetween: 10,
-        watchSlidesProgress: true,
-        noSwiping: true,
-        navigation: {
-            nextEl: "#js-image-next",
-            prevEl: "#js-image-prev",
-        },
-        thumbs: {
-            swiper: swiper_thumb,
-        },
-    });
-</script>
-
-
-<script>
-
-    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>
+<script src="./assets/js/deal_detail.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/detail-mobile.html b/detail-mobile.html
index 0e45aa9..a0c3717 100644
--- a/detail-mobile.html
+++ b/detail-mobile.html
@@ -6,28 +6,31 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
     <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-mb.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" style="overflow: hidden;">
+<body class="page-detail pb-[70px]">
     <div class="container-mb">
-        <div class="header">
+        <div class="header bg-[var(--bg-header)] p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
             <div class="container">
-                <div class="content-main-header d-flex align-items space-between">
-                    <a href="/" class="logo">
-                        <img src="./assets/images/logo-mobile.png" width="100%" height="100%" alt="logo">
+                <div class="content-main-header flex items-center justify-between">
+                    <a href="/" class="logo w-[66px]">
+                        <img src="./assets/images/logo-mobile.png" class="w-[100%] h-[26px] block" width="100%"
+                            height="100%" alt="logo">
                     </a>
-                    <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-[14px] block" alt="">
+                            <span class="ml-[3px] text-[12px] uppercase text-white">Thể lệ đấu giá</span>
                         </a>
-                        <a href="/taikhoan" 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="/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-white">Tài khoản</span>
+                            <i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
                         </a>
                     </div>
                 </div>
@@ -35,17 +38,19 @@
         </div>
         <div class="page-detail">
             <div class="container">
-                <div class="breadcrumb">
-                    <a href="javascript:void(0)" onclick="history.back()" class="link-back">
+                <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 block line-clamp-1">Laptop Acer Aspire 7 A715-76-53PJ Laptop Acer
+                    <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">
+                        <div class="box-group-images mb-[10px]">
                             <div class="swiper" id="js-slider-image">
                                 <div class="swiper-wrapper">
                                     <div class="swiper-slide">
@@ -80,20 +85,24 @@
                         </div>
                     </div>
                     <div class="content-bottom">
-                        <h2 class="product-name">
+                        <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-group-time d-flex align-items space-between">
-                            <div class="left d-flex align-items">
-                                <img src="./assets/images/icon-auction-2.png" alt="">
-                                <p class="title">Ngày hội đấu giá</p>
+                        <div
+                            class="box-group-time flex items-center justify-between bg-[var(--bg-time-auction)] w-full p-[10px] rounded-[5px]">
+                            <div class="left flex items-center ">
+                                <img src="./assets/images/icon-auction-2.png" alt="" class="w-[26px] block mr-[5px]">
+                                <p class="title text-[15px] uppercase font-[700] text-white ml-[5px]">Ngày hội đấu giá
+                                </p>
                             </div>
-                            <div class="right d-flex align-items">
-                                <div class="total-auction">
+                            <div class="right flex items-center">
+                                <div
+                                    class="total-auction w-[62px] h-[27px] leading-[27px] text-center text-white rounded-[14px] flex items-center justify-center background-yellow">
                                     <i class="icon auction"></i>
                                     <span>200</span>
                                 </div>
-                                <div class="p-box-time d-flex align-items">
+                                <div class="p-box-time flex items-center justify-center bg-[var(--bg-timeout-detail)] w-[115px] h-[28px] leading-[28px]
+                                                    rounded-[14px] ml-[10px]">
                                     <i class="icon time"></i>
                                     <div class="box-time">
                                         <div class="item-time"><b>02</b></div>
@@ -103,157 +112,314 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="group-price-detail d-flex align-items">
-                            <div class="box-starting-price">
-                                <p>Giá khởi điểm</p>
-                                <div class="starting-price">110.490.000 <u>đ</u></div>
+                        <div
+                            class="group-price-detail flex items-center mt-[10px] p-[10px_0] border-t-[1px] border-b-[1px] border-dashed border-[#e2e2e2]">
+                            <div class="box-starting-price w-[50%] border-r-[1px] border-dashed border-[#e2e2e2]">
+                                <p class="text-[13px] leading-[18px] uppercase">Giá khởi điểm</p>
+                                <div class="starting-price text-[20px] font-[600]">110.490.000 <u>đ</u></div>
                             </div>
-                            <div class="box-price-step">
-                                <p>Bước giá</p>
-                                <div class="price-step">300.000 <u>đ</u></div>
+                            <div class="box-price-step pl-[20px]">
+                                <p class="text-[13px] leading-[18px] uppercase">Bước giá</p>
+                                <div class="price-step text-[20px] font-[600]">300.000 <u>đ</u></div>
                             </div>
                         </div>
-                        <div class="box-user-win">
-                            <div class="price-win d-flex">
-                                <p>Giá thắng cuộc:</p>
-                                <div class="price">125.000.000 <u>đ</u></div>
+                        <div class="box-user-win border-t-[1px] border-dashed border-[#e2e2e2] mt-[15px] pt-[10px] ">
+                            <div class="price-win flex items-end">
+                                <p class="font-[700] mr-[5px] uppercase mb-[7px]">Giá thắng cuộc:</p>
+                                <div class="price text-[28px] text-[#ef0000] font-[700]">125.000.000 <u>đ</u></div>
                             </div>
-                            <div class="info-user-win d-flex align-items">
+                            <div
+                                class="info-user-win flex items-center bg-[var(--bg-user-win)] w-full h-[40px] leading-[40px] p-[0_20px] rounded-[5px] mt-[5px]">
                                 <i class="icon-cup"></i>
-                                <p>Người chiến thắng:</p>
-                                <b class="js-user-win">Mai Phương</b>
+                                <p class="text-[#f00000] mr-[5px]">Người chiến thắng:</p>
+                                <b class="js-user-win font-[500] text-[#f00000]">Mai Phương</b>
                             </div>
                         </div>
-                        <div class="box-specification">
-                            <div class="item">
-                                <i class="fas fa-check-circle"></i>
-                                <p>CPU: Intel Core i5-12450H (3.3GHz up to 4.4GHz 12MB)</p>
+                        <div class="box-specification m-[20px_0_27px_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">
-                                <i class="fas fa-check-circle"></i>
-                                <p>VGA: NVIDIA® GeForce RTX™ 2050 4GB GDDR6 + Intel UHD Graphics</p>
+                            <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">
-                                <i class="fas fa-check-circle"></i>
-                                <p>Màn hình: 15.6inch FHD (1920 x 1080) IPS, 144Hz, Slim Bezel, Acer ComfyView™</p>
+                            <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">
-                                <i class="fas fa-check-circle"></i>
-                                <p>RAM: 8GB (8x1) DDR4 3200MHz (2x SO-DIMM socket, up to 32GB SDRAM)</p>
+                            <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-add-auction active">
-                            <a href="javascript:void(0)" class="btn-auction" onclick="checkAucton()">Tham gia đấu
+                        <div
+                            class="box-add-auction fixed left-[0] w-[100%] bottom-[-1px] z-[999] hidden p-[15px_10px] bg-white active">
+                            <a href="javascript:void(0)"
+                                class="btn-auction w-full text-center h-[42px] leading-[42px] rounded-[26px] text-white bg-[var(--bg-btn-auction)] uppercase text-[18px] font-[700] block"
+                                onclick="checkAucton()">Tham gia đấu
                                 giá</a>
                         </div>
-                        <div class="box-live-auction active">
-                            <div class="main-title-live">
-                                <a href="javascript:void(0)" class="close" onclick="closeLiveAction()">
+                        <div
+                            class="box-live-auction fixed hidden w-[100%] left-[0] top-[38px] bg-white z-[999] p-[10px] h-[100vh]">
+                            <div class="main-title-live flex items-center mb-[10px]">
+                                <a href="javascript:void(0)"
+                                    class="close shadow-[0_1px_2px_0_#00000029] w-[32px] h-[32px] leading-[32px] text-center rounded-[50%]"
+                                    onclick="closeLiveAction()">
                                     <i class="fas fa-chevron-left"></i>
                                 </a>
-                                <p>Tham gia đấu giá</p>
+                                <p class="w-[calc(100%_-32px)] mr-[16px] text-center">Tham gia đấu giá</p>
                             </div>
-                            <div class="box-price-live d-flex">
-                                <i class="fas fa-caret-up"></i>
-                                <div class="current-price" id="js-price-present">125.000.000</div>
-                                <div class="unit-price">VNĐ</div>
+                            <div class="box-price-live flex">
+                                <i class="fas fa-caret-up text-[#2ad363] text-[32px] mt-[8px] mr-[5px]"></i>
+                                <div class="current-price text-[28px] font-[700] text-[#ef0000]" id="js-price-present">
+                                    125.000.000</div>
+                                <div class="unit-price mt-[12px] ml-[5px]">VNĐ</div>
                             </div>
-                            <div class="list-user-auction">
-                                <div class="content-user" id="user-list">
-                                    <div class="item d-flex align-items space-between">
-                                        <div class="info-left d-flex align-items">
-                                            <i class="fas fa-caret-up"></i>
-                                            <div class="number">1</div>
-                                            <div class="info-user d-flex align-items">
-                                                <a href="" class="name-user">Phương</a>
+                            <div
+                                class="list-user-auction bg-[#fff5e5] p-[10px] rounded-[15px] overflow-hidden h-[330px]">
+                                <div class="content-user overflow-x-hidden overflow-y-auto max-h-[300px] pr-[10px]"
+                                    id="user-list">
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i class="fas fa-caret-up font-[16px] mt-[3px] mr-[5px] text-[#2ad363]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
                                                 <span>trả</span>
-                                                <div class="price">125.000.000 đ</div>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
                                             </div>
                                         </div>
-                                        <p class="time">00:30:11</p>
+                                        <p class="time font-[700]">00:30:11</p>
                                     </div>
-                                    <div class="item d-flex align-items space-between">
-                                        <div class="info-left d-flex align-items">
-                                            <i class="fas fa-caret-down"></i>
-                                            <div class="number">2</div>
-                                            <div class="info-user d-flex align-items">
-                                                <a href="" class="name-user">Phong</a>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
                                                 <span>trả</span>
-                                                <div class="price">124.800.000 đ</div>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
                                             </div>
                                         </div>
-                                        <p class="time">00:30:11</p>
+                                        <p class="time font-[700]">00:30:11</p>
                                     </div>
-                                    <div class="item d-flex align-items space-between">
-                                        <div class="info-left d-flex align-items">
-                                            <i class="fas fa-caret-down"></i>
-                                            <div class="number">3</div>
-                                            <div class="info-user d-flex align-items">
-                                                <a href="" class="name-user">Hương</a>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
                                                 <span>trả</span>
-                                                <div class="price">124.300.000 đ</div>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
                                             </div>
                                         </div>
-                                        <p class="time">00:30:11</p>
+                                        <p class="time font-[700]">00:30:11</p>
                                     </div>
-                                    <div class="item d-flex align-items space-between">
-                                        <div class="info-left d-flex align-items">
-                                            <i class="fas fa-caret-down"></i>
-                                            <div class="number">4</div>
-                                            <div class="info-user d-flex align-items">
-                                                <a href="" class="name-user">Quỳnh</a>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
                                                 <span>trả</span>
-                                                <div class="price">124.000.000 đ</div>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
                                             </div>
                                         </div>
-                                        <p class="time">00:30:11</p>
+                                        <p class="time font-[700]">00:30:11</p>
                                     </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+                                    <div
+                                        class="item flex items-center justify-between bg-white h-[28px] p-[10px_8px] leading-[28px] rounded-[8px] mb-[8px] shadow-[0_2px_2px_0_#00000026]">
+                                        <div class="info-left flex items-center">
+                                            <i
+                                                class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                            <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                            <div class="info-user flex items-center">
+                                                <a href=""
+                                                    class="name-user w-[60px] line-clamp-1 text-[#1355f0] mr-[10px]">Phương</a>
+                                                <span>trả</span>
+                                                <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p class="time font-[700]">00:30:11</p>
+                                    </div>
+
                                 </div>
                             </div>
-                            <div class="form-input-price">
-                                <div class="p-title">Nhập giá đấu của bạn</div>
-                                <div class="list-suggest d-flex align-items">
-                                    <p>Chọn nhanh gợi ý</p>
-                                    <div class="list-price d-flex align-items" id="price-list">
-                                        <a href="javascript:void(0)" data-price="125300000" class="item">
+                            <div class="form-input-price mt-[20px] absolute left-[9px] w-[96%] bottom-[23%]">
+                                <div class="p-title text-center font-[400] text-[20px] uppercase mb-[10px]">Nhập giá đấu
+                                    của bạn</div>
+                                <div class="list-suggest flex items-center overflow-x-auto">
+                                    <p class="text-[14px] font-[300] whitespace-nowrap mb-[5px] mr-[15px]">Chọn nhanh
+                                        gợi ý</p>
+                                    <div class="list-price flex align-items" id="price-list">
+                                        <a href="javascript:void(0)" data-price="125300000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             125.3 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="125600000" class="item">
+                                        <a href="javascript:void(0)" data-price="125600000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             125.6 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="125900000" class="item">
+                                        <a href="javascript:void(0)" data-price="125900000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             125.9 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
-                                        <a href="javascript:void(0)" data-price="126000000" class="item">
+                                        <a href="javascript:void(0)" data-price="126000000"
+                                            class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                             126 tr
                                         </a>
                                     </div>
                                 </div>
-                                <div class="form-input">
+                                <div class="form-input mt-[10px] flex">
                                     <input type="text" value="126.000.000" id="js-input-price" inputmode="numeric"
-                                        pattern="[0-9]*" placeholder="Nhập giá" class="input-price">
-                                    <a href="javascript:void(0)" class="btn-send" onclick="handleBid()">
+                                        pattern="[0-9]*" placeholder="Nhập giá"
+                                        class="input-price w-[80%] h-[56px] border-[1px] border-[#afafaf] rounded-[28px_0_0_28px] text-center text-[32px] p-[0_20px]">
+                                    <a href="javascript:void(0)"
+                                        class="btn-send w-[calc(100%_-80%)] h-[56px] flex items-center justify-center background-blue ouline-none border-0 rounded-[0_28px_28px_0] text-[24px] text-white"
+                                        onclick="handleBid()">
                                         <i class="fas fa-paper-plane"></i>
                                     </a>
                                 </div>
@@ -262,180 +428,210 @@
                     </div>
                 </div>
             </div>
-            <div class="content-revew-history">
-                <div class="box-review">
+            <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">
-                                <div class="title d-flex align-items">
-                                    <h2>Đánh giá sản phẩm</h2>
+                            <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="d-flex align-items space-between" style="margin-top: 5px;">
-                                    <div class="d-flex align-items">
+                                <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">
+                                        <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">Gửi đánh giá</a>
+                                    <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">
-                            <div class="item-review d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                        <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">
-                                    <div class="name-user">Anh quang</div>
-                                    <div class="total-view">
-                                        5.0 <i class="fa fa-star"></i>
+                                <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">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,
+                                    <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 d-flex align-items">
-                                        <span class="time">20-06-2024, 10:46 am</span>
-                                        <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                    <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 d-flex align-items">
-                                        <a href="" class="item">
-                                            <img src="./assets/images/image-review-1.png" alt="">
+                                    <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">
-                                            <img src="./assets/images/image-review-2.png" alt="">
+                                        <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">
-                                            <img src="./assets/images/image-review-3.png" alt="">
+                                        <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">
-                                    <div class="item-reply d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                <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">
-                                            <div class="name-user">Anphatcomputer</div>
-                                            <p class="cnt">Anphat xin cảm ơn anh Quang đã ủng hộ.
+                                        <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 d-flex align-items">
-                                                <span class="time">20-06-2024, 10:46 am</span>
-                                                <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                            <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 d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                    <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">
-                                            <div class="name-user">Anphatcomputer</div>
-                                            <p class="cnt">Anphat xin cảm ơn anh Quang đã ủng hộ.
+                                        <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 d-flex align-items">
-                                                <span class="time">20-06-2024, 10:46 am</span>
-                                                <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                            <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 d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                            <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">
-                                    <div class="name-user">Anh quang</div>
-                                    <div class="total-view">
-                                        5.0 <i class="fa fa-star"></i>
+                                <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">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,
+                                    <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 d-flex align-items">
-                                        <span class="time">20-06-2024, 10:46 am</span>
-                                        <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                    <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 d-flex align-items">
-                                        <a href="" class="item">
-                                            <img src="./assets/images/image-review-1.png" alt="">
+                                    <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">
-                                            <img src="./assets/images/image-review-2.png" alt="">
+                                        <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">
-                                            <img src="./assets/images/image-review-3.png" alt="">
+                                        <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">
-                            <span>Xem tất cả đánh giá</span> <i class="fas fa-chevron-right"></i>
+                        <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">
-                    <h2 class="title">Hỏi đáp <span>(100 bình luận)</span></h2>
-                    <div class="form-question">
-                        <textarea name="" id="" class="input-question"
+                <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">
+                        <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">
-                        <div class="item-question d-flex flex-wrap">
-                            <div class="avatar">
-                                <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                    <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">
-                                <div class="info-user d-flex align-items">
-                                    <div class="name-user">Anh Quang</div>
-                                    <span class="time">20-06-2024, 10:46 am</span>
+                            <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">
+                                <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">
+                                    <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">
-                                <div class="reply-question d-flex">
-                                    <div class="avatar">
-                                        <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                            alt="avatar">
+                            <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">
-                                        <div class="info-user d-flex align-items">
-                                            <div class="name-user">Anphatcomputer</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">
-                                            <p>Dạ, bộ phận CSKH sẽ liên hệ với người chiến thắng ngay trong ngày
-                                                để
-                                                hướng dẫn thanh toán nhận hàng ạ</p>
-                                            <a href="javascript:void(0)" class="click-question">
+                                        <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>
@@ -444,20 +640,29 @@
                             </div>
                         </div>
                     </div>
-                    <a href="javascript:void(0)" class="more-question">
-                        <span>Xem tất cả hỏi đáp</span> <i class="fas fa-chevron-right"></i>
+                    <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="box-history">
-                    <h2 class="title">Các phiên đấu giá trước</h2>
-                    <div class="tab-history d-flex align-items">
-                        <a href="javascript:void(0)" data-id="#3day" class="item-tab active">3 ngày</a>
-                        <a href="javascript:void(0)" data-id="#7day" class="item-tab">7 ngày</a>
-                        <a href="javascript:void(0)" data-id="#30day" class="item-tab">30 ngày</a>
+                <div class="box-history p-[15px_10px]">
+                    <h2 class="title text-[20px] text-center p-[5px_0] font-[700] uppercase">Các phiên đấu giá trước
+                    </h2>
+                    <div class="tab-history flex items-center bg-[#afafaf] p-[5px] rounded-[20px] mr-[-5px]">
+                        <a href="javascript:void(0)" data-id="#3day"
+                            class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px] active">3
+                            ngày</a>
+                        <a href="javascript:void(0)" data-id="#7day"
+                            class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px]">7
+                            ngày</a>
+                        <a href="javascript:void(0)" data-id="#30day"
+                            class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px]">30
+                            ngày</a>
                     </div>
-                    <div class="cnt-history">
-
-                        <table class="table-tab active" id="3day">
+                    <div
+                        class="cnt-history p-[0_0_15px_10px] shadow-[0_4px_4px_4px_#00000026] mt-[15px] rounded-[15px]">
+                        <table class="table-tab hidden mt-[15px] text-left w-full h-[230px] overflow-auto active"
+                            id="3day">
                             <thead>
                                 <th>Tên người thắng</th>
                                 <th>Giác thắng cuộc</th>
@@ -501,7 +706,7 @@
                                 </tr>
                             </tbody>
                         </table>
-                        <table class="table-tab" id="7day">
+                        <table class="table-tab hidden mt-[15px] text-left w-full h-[230px] overflow-auto" id="7day">
                             <thead>
                                 <th>Tên người thắng</th>
                                 <th>Giác thắng cuộc</th>
@@ -540,7 +745,7 @@
                                 </tr>
                             </tbody>
                         </table>
-                        <table class="table-tab" id="30day">
+                        <table class="table-tab hidden mt-[15px] text-left w-full h-[230px] overflow-auto" id="30day">
                             <thead>
                                 <th>Tên người thắng</th>
                                 <th>Giác thắng cuộc</th>
@@ -581,166 +786,193 @@
                         </table>
                     </div>
                 </div>
-                <div class="list-product-auction">
+                <div class="list-product-auction mt-[5px]">
                     <div class="container">
-                        <div class="backgrond-auction">
-                            <h2 class="title">Đấu giá đang diễn ra</h2>
+                        <div class="backgrond-auction bg-[var(--color-box-auction)] rounded-[15px] p-[15px]">
+                            <h2 class="title text-[20px] uppercase font-[700] mb-[10px] text-center text-white">Đấu giá
+                                đang diễn
+                                ra</h2>
                             <div class="list">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href=""><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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="" 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="/product-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=""><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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="" 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="/product-detail.html" class="btn-add">Đấu giá</a>
-                                    </div>
-                                </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href=""><img src="./assets/images/icon-pro-top.png" alt=""></a>
-                                        <div class="box-join">
-                                            <i class="icon_auction"></i>
-                                            <span>220</span>
+                                        <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>
-                                    </div>
-                                    <div class="info">
-                                        <a href="" class="name line-clamp-2">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>
-                                        <a href="/product-detail.html" class="btn-add">Đấu giá</a>
+                                        <a href="./detail.html" class="btn-add">Đấu giá</a>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="box-info-product">
+                <div class="box-info-product mt-[15px]">
                     <div class="container">
-                        <div class="tab d-flex align-items space-between">
-                            <a href="javascrit:void(0)" data-id="#tab-info" class="item-tab active">Thông tin sản
+                        <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] ">Thông
+                                tin sản
                                 phẩm</a>
-                            <a href="javascrit:void(0)" data-id="#tab-deposit" class="item-tab">Thông tin đặt cọc
-                                đấu
+                            <a href="javascrit:void(0)" data-id="#tab-deposit"
+                                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 đặt cọc đấu
                                 giá</a>
                         </div>
-                        <div class="content-tab active" id="tab-info">
-                            <div class="info">
-                                <img src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
-                                <ul>
-                                    <li>Tên sản phẩm: Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</li>
-                                    <li>Dòng Laptop: Laptop | Laptop Acer Aspire | Laptop Đồ Họa | Laptop văn phòng
+                        <div class="content-tab hidden" 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>Công nghệ CPU: Intel Core i5-12450H</li>
-                                    <li>Số nhân: 8</li>
-                                    <li>Số luồng: 12</li>
-                                    <li>Tốc độ tối đa: 4.4GHz</li>
-                                    <li>Bộ nhớ đệm: 12MB</li>
+                                    <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>RAM: 16GB (2x8GB)</li>
-                                    <li>Loại RAM: DDR4</li>
-                                    <li>Tốc độ Bus RAM: 3200Mhz</li>
-                                    <li>Số khe cắm: 2 khe</li>
-                                    <li>Hỗ trợ RAM tối đa: Nâng cấp tối đa 32GB</li>
+                                    <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>Dung lượng: 512GB PCIe NVMe SSD</li>
-                                    <li>Tốc độ vòng quay</li>
-                                    <li>Khe cắm SSD mở rộng: nâng cấp tối đa 1 TB SSD PCIe Gen4, 16 Gb/s, NVMe</li>
+                                    <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 class="content-tab" id="tab-deposit">
-                            <div class="box-deposit">
-                                <i class="title">Quý khách vui lòng làm theo các bước sau đây.</i>
-                                <div class="content-deposit">
-                                    <div class="item">
-                                        <div class="step">
+                        <div class="content-tab hidden active" id="tab-deposit">
+                            <div class="box-deposit mt-[15px]">
+                                <i class="title text-[15px] font-[400] block mb-[10px]">Quý khách vui lòng làm theo các
+                                    bước sau đây.</i>
+                                <div class="content-deposit ml-[10px] pl-[20px] border-l-[2px] border-[#f1b510]">
+                                    <div class="item mb-[20px]">
+                                        <div
+                                            class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
                                             Bước 1
-                                            <div class="circle">
-                                                <div class="circle-inner"></div>
+                                            <div
+                                                class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                                                <div
+                                                    class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                                                </div>
                                             </div>
                                         </div>
-                                        <b class="txt d-flex">
-                                            Đặt cọc <div class="price">500.000 VNĐ</div> và STK bên dưới
+                                        <b class="txt flex font-[500]">
+                                            Đặt cọc <div class="price font-[700] text-[#f00000] p-[0_5px]">500.000 VNĐ
+                                            </div> và
+                                            STK bên dưới
                                         </b>
                                     </div>
                                     <div class="item">
-                                        <div class="step">Bước 2
-                                            <div class="circle">
-                                                <div class="circle-inner"></div>
+                                        <div
+                                            class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
+                                            Bước 2
+                                            <div
+                                                class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                                                <div
+                                                    class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                                                </div>
                                             </div>
                                         </div>
                                         <div class="txt">
                                             <b>Kiểm tra email</b> để nhận thông tin xác nhận đặt cọc thành công từ
                                             Anphatpc gửi đến
-                                            <div class="note">(Lưu lý: Kiểm tra tất cả các hộp tư bao gồm cả thư
-                                                rác)
+                                            <div class="note">(Lưu lý: Kiểm tra tất cả các hộp tư bao gồm cả thư rác)
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="contact-deposit">
-                                    Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch
-                                    qua
-                                    <b>Zalo: 0909000000</b> để được hỗ trợ
+                                <div class="contact-deposit mt-[10px] italic">
+                                    Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch qua
+                                    <b class="text-[#f00000]">Zalo: 0909000000</b> để được hỗ trợ
                                     nhanh nhất.
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
 
         <div class="overlay" onclick="closePopop()"></div>
         <div class="box-popup popup-rules">
-            <div class="title">Thể lệ tham gia đấu giá</div>
-            <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+            <div class="title text-[20px] font-700 uppercase text-center mb-[15px]">Thể lệ tham gia đấu giá</div>
+            <a href="javascript:void(0)" class='click-close absolute top-[10px] right-[20px] text-[24px] text-[#afafaf]'
+                onclick="closePopop()">
                 <i class="fa fa-times"></i>
             </a>
-            <i class="note-time">Thời gian: Mỗi thứ 7 hàng tuần Dịch vụ ABC sẽ có một phiên đấu giá diễn ra từ 20 tới
-                22h
+            <i class="note-time font[400] mb-[20px] text-[#000000c2] block">Thời gian: Mỗi thứ 7 hàng tuần Dịch vụ ABC
+                sẽ có
+                một
+                phiên đấu giá diễn ra từ 20 tới 22h
                 bao
                 gồm nhiều sản phẩm khác
                 nhau.</i>
-            <div class="content">
+            <div class="content h-[300px] overflow-y-auto">
                 <p>- Các sản phẩm đều có giá khởi điểm và bước giá nhất định.</p>
                 <p>- Người chơi có thể bắt đầu đấu giá từ giá khởi điểm, người
                     trả giá sau cần trả mức giá cao hơn người trước ít nhất 1 bước giá. Kết thúc thời gian đấu giá,
@@ -789,26 +1021,40 @@
                     <span class="checkmark"></span>
                 </label>
             </div>
-            <button type="submit" class="btn-submit" id="submit_rules">Đã hiểu</button>
+            <button type="submit"
+                class="btn-submit block w-[168px] 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"
+                id="submit_rules">Đã hiểu</button>
         </div>
 
-        <div class="box-popup popup-login">
-            <div class="content">
-                <div class="title">Bạn vui lòng đăng nhập tài khoản <br>để tham gia đấu giá</div>
-                <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <div class="box-popup popup-login ">
+            <div class="content m-[20px_auto]">
+                <div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Bạn vui lòng đăng nhập
+                    tài
+                    khoản <br>để
+                    tham gia đấu giá</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>
-                <a href="javascript:void(0)" class="btn-login google" onclick="checklogin()">
-                    <div class="left d-flex align-items">
-                        <img src="./assets/images/icon-google.png" width="100%" height="100%" alt="google">
-                        <span>Đăng nhập bằng Google</span>
+                <a href="javascript:void(0)"
+                    class="btn-login flex items-center justify-between w-full h-[52px] mb-[10px] p-[15px] rounded-[10px] border-[1px] border-[#8e8e8e] google"
+                    onclick="checklogin()">
+                    <div class="left flex items-center">
+                        <img src="./assets/images/icon-google.png" width="100%" height="100%" alt="google"
+                            class="w-[28px] h-[28px]">
+                        <span class="ml-[10px]">Đăng nhập bằng Google</span>
                     </div>
                     <i class="fas fa-chevron-right"></i>
                 </a>
-                <a href="javascript:void(0)" class="btn-login facebook" onclick="checklogin()">
-                    <div class="left d-flex align-items">
-                        <img src="./assets/images/icon-facebook-login.png" width="100%" height="100%" alt="facebook">
-                        <span>Đăng nhập bằng Google</span>
+                <a href="javascript:void(0)"
+                    class="btn-login flex items-center justify-between w-full h-[52px] mb-[10px] p-[15px] rounded-[10px] border-[1px] border-[#8e8e8e] facebook"
+                    onclick="checklogin()">
+                    <div class="left flex items-center">
+                        <img src="./assets/images/icon-facebook-login.png" width="100%" height="100%" alt="facebook"
+                            class="w-[28px] h-[28px]">
+                        <span class="ml-[10px]">Đăng nhập bằng Google</span>
                     </div>
                     <i class="fas fa-chevron-right"></i>
                 </a>
@@ -817,38 +1063,58 @@
 
         <div class="box-popup popup-yeucau">
             <div class="content">
-                <div class="title">Yêu cầu đặt cọc</div>
-                <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+                <div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Yêu cầu đặt cọc</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>
                 <p class="text-center">Vui lòng đặt cọc số tiền 500.000đ để tham gia đấu giá</p>
-                <a class="btn-submit" href="javascript:void(0)" onclick="showInfoPay()">Tiếp tục</a>
+                <a class="btn-submit block w-[168px] 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"
+                    href="javascript:void(0)" onclick="showInfoPay()">Tiếp tục</a>
             </div>
         </div>
 
         <div class="box-popup popup-info-pay">
-            <div class="title-main">Thông tin đặt cọc sản phẩm</div>
-            <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+            <div class="title-main text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Thông tin đặt cọc sản
+                phẩm
+            </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="box-deposit">
+            <div class="box-deposit mt-[15px]">
                 <i class="title">Quý khách vui lòng làm theo các bước sau đây.</i>
-                <div class="content-deposit">
-                    <div class="item">
-                        <div class="step">
+                <div class="content-deposit ml-[10px] pl-[20px] border-l-[2px] border-[#f1b510]">
+                    <div class="item mb-[20px]">
+                        <div
+                            class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
                             Bước 1
-                            <div class="circle">
-                                <div class="circle-inner"></div>
+                            <div
+                                class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                                <div
+                                    class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                                </div>
                             </div>
                         </div>
-                        <b class="txt d-flex">
-                            Đặt cọc <div class="price">500.000 VNĐ</div> và STK bên dưới
+                        <b class="txt flex font-[500]">
+                            Đặt cọc <div class="price font-[700] text-[#f00000] p-[0_5px]">500.000 VNĐ
+                            </div> và
+                            STK bên dưới
                         </b>
                     </div>
                     <div class="item">
-                        <div class="step">Bước 2
-                            <div class="circle">
-                                <div class="circle-inner"></div>
+                        <div
+                            class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
+                            Bước 2
+                            <div
+                                class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                                <div
+                                    class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                                </div>
                             </div>
                         </div>
                         <div class="txt">
@@ -859,16 +1125,17 @@
                         </div>
                     </div>
                 </div>
-                <div class="contact-deposit">
+                <div class="contact-deposit mt-[10px] italic">
                     Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch qua
-                    <b>Zalo: 0909000000</b> để được hỗ trợ
+                    <b class="text-[#f00000]">Zalo: 0909000000</b> để được hỗ trợ
                     nhanh nhất.
                 </div>
                 <div class="pay-qr">
-                    <div class="title">Thông tin tài khoản nhận cọc</div>
-                    <div class="d-flex">
-                        <img src="./assets/images/image-qr.png" class="image-qr" width="100%" height="100%" alt="qr">
-                        <div class="info">
+                    <div class="title text-[16px] font-[600] m-[15px_0]">Thông tin tài khoản nhận cọc</div>
+                    <div class="flex">
+                        <img src="./assets/images/image-qr.png" class="image-qr w-[123px] h-[123px] mr-[10px]"
+                            width="100%" height="100%" alt="qr">
+                        <div class="info w-[calc(100%_-133px)]">
                             <p>Công ty CP THƯƠNG MẠI DỊCH VỤ ACB</p>
                             <p>Ngân hàng: Techcombank</p>
                             <p>Số tài khoản: 9999998888</p>
@@ -880,84 +1147,120 @@
             </div>
         </div>
 
-        <div class="box-popup popup-success">
-            <h2 class="title">
+        <div class="box-popup popup-success ">
+            <h2 class="title text-[20px] font-[700] text-center uppercase text-[#d00000]
+        ">
                 xin chúc mừng!
             </h2>
-            <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+            <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="note-title">Bạn đã đặt giá thầu thành công!</div>
-            <div class="content">
+            <div class="note-title text-[#d00000] text-[18px] text-center">Bạn đã đặt giá thầu thành công!</div>
+            <div class="content p-[0_20px] text-center leading-[19px] mt-[25px] font-[400]">
                 Quý khách hãy tiếp tục theo dõi màn đấu giá cho đến hết thời gian diễn ra. Lịch sử đấu giá sẽ được hiển
                 thị
                 tại đây. Khi
                 thời gian kết thúc, bộ phận CSKH sẽ gửi email xác nhận đến người chiến thắng!
             </div>
-            <a class="btn-submit" href="javascript:void(0)" onclick="closePopop()">Đã hiểu</a>
+            <a class="btn-submit block w-[168px] 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"
+                href="javascript:void(0)" onclick="closePopop()">Đã hiểu</a>
         </div>
 
         <div class="box-popup popup-error">
-            <i class="fas fa-exclamation-triangle"></i>
-            <h2 class="title">Đấu giá không thành công</h2>
-            <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+            <i class="fas fa-exclamation-triangle text-[#f4bc20] text-[58px] text-center mb-[10px] block"></i>
+            <h2 class="title text-[24px] text-center text-[#f4bc20] uppercase font-[700]">Đấu giá không thành cô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="content">
-                Giá đấu của bạn chưa hợp lệ. Vui lòng nhập giá cao hơn giá cao nhất ít nhất X VND
+            <div class="content text-center text-[#1e1e1e]">
+                Giá đấu của bạn chưa hợp lệ. Vui lòng nhập giá cao hơn giá cao nhất ít nhất <span
+                    id="js-price-min"></span>
+                VND
             </div>
-            <a class="btn-submit" href="javascript:void(0)" onclick="closePopop()">Thử lại</a>
+            <a class="btn-submit block w-[168px] 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"
+                href="javascript:void(0)" onclick="closePopop()">Thử lại</a>
         </div>
 
         <div class="footer">
-            <div class="box-faq">
+            <div class="box-faq mt-[15px]">
                 <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-[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">
-                                <a href="javascript:void(0)" class="faqlink">
+                            <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">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
+                                <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-[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">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-[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">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-[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">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-[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">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>
@@ -965,57 +1268,69 @@
                     </div>
                 </div>
             </div>
-            <div class="main-footer">
+            <div class="main-footer bg-[var(--color-bg-footer)] mt-[15px] pb-[20px]">
                 <div class="container">
-                    <div class="footer-policies d-flex flex-wrap">
-                        <div class="item-policies">
-                            <div class="icons">
-                                <img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
+                    <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">
-                                <b>Chính sách giao hàng</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Đổi mới 15 ngày đầu</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Thanh toán tiện lợi</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Hỗ trợ nhiệt tình</b>
+                            <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">
-                        <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>
-                            <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
+                    <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>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,
+                            <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 m-[0_auto] w-[270px] block">
                             <img src="./assets/images/btn-phone.png" alt="">
                         </a>
                     </div>
diff --git a/detail.html b/detail.html
index ff2981f..8da0be9 100644
--- a/detail.html
+++ b/detail.html
@@ -4,31 +4,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <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">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.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="/home.html" class="logo">
-                        <img src="./assets/images/logo.png" alt="logo">
+                    <a href="/" class="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>
@@ -36,17 +36,20 @@
     </div>
     <div class="page-detail">
         <div class="container">
-            <div class="breadcrumb">
-                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
-                        <a href="/" itemprop="item" class="nopad-l">
-                            <span itemprop="name"><span>Trang chủ</span></span>
-                        </a> <i>/</i>
+            <div class="breadcrumb w-full float-left p-0 m-0 bg-none">
+                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
+                        <a href="/" itemprop="item" class="nopad-l text-[14px]">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
+                                    chủ</span></span>
+                        </a> <i class="leading-[40px] m-[0_10px]">/</i>
                         <meta itemprop="position" content="1">
                     </li>
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
                         <a href="/" itemprop="item">
-                            <span itemprop="name">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]">
                                 Đấu giá
                             </span>
                         </a>
@@ -55,12 +58,12 @@
                 </ol>
             </div>
             <div class="clearfix"></div>
-            <div class="content-main-detail d-flex">
-                <div class="content-left">
-                    <div class="box-group-images d-flex">
-                        <div class="box-thumbImage">
+            <div class="content-main-detail flex mt-[20px]">
+                <div class="content-left w-[calc(100%_-490px_-32px)] mr-[32px]">
+                    <div class="box-group-images flex">
+                        <div class="box-thumbImage w-[85px] h-[560px] relative p-[30px_0]">
                             <div class="swiper-button swiper-button-next" id="js-image-next"></div>
-                            <div thumbsSlider="" class="swiper thumbImage">
+                            <div thumbsSlider="" class="swiper thumbImage h-[400px]">
                                 <div class="swiper-wrapper">
                                     <div class="swiper-slide">
                                         <img src="./assets/images/image-thumb-1.png" alt="">
@@ -81,7 +84,8 @@
                             </div>
                             <div class="swiper-button swiper-button-prev" id="js-image-prev"></div>
                         </div>
-                        <div class="swiper BigImage">
+                        <div class="swiper BigImage w-[calc(100%_-_85px_-_32px)]
+ml-[32px]">
                             <div class="swiper-wrapper">
                                 <div class="swiper-slide">
                                     <img src="./assets/images/product-detail-big.png" alt="">
@@ -102,21 +106,24 @@
                         </div>
                     </div>
                 </div>
-                <div class="content-right">
-                    <h2 class="product-name">
+                <div class="content-right w-[490px]">
+                    <h2 class="product-name text-[20px] font-[400] mb-[15px]">
                         Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007 (Intel Core i5-12450H | Đen)
                     </h2>
-                    <div class="box-group-time d-flex align-items space-between">
-                        <div class="left d-flex align-items">
-                            <img src="./assets/images/icon-auction-2.png" alt="">
-                            <p class="title">Ngày hội đấu giá</p>
+                    <div
+                        class="box-group-time flex items-center justify-between bg-[var(--bg-time-auction)] w-full p-[10px] rounded-[5px]">
+                        <div class="left flex items-center ">
+                            <img src="./assets/images/icon-auction-2.png" alt="" class="w-[26px] block mr-[5px]">
+                            <p class="title text-[20px] uppercase font-[700] text-white ml-[5px]">Ngày hội đấu giá</p>
                         </div>
-                        <div class="right d-flex align-items">
-                            <div class="total-auction">
+                        <div class="right flex items-center">
+                            <div
+                                class="total-auction w-[62px] h-[27px] leading-[27px] text-center text-white rounded-[14px] flex items-center justify-center background-yellow">
                                 <i class="icon auction"></i>
                                 <span>200</span>
                             </div>
-                            <div class="p-box-time d-flex align-items">
+                            <div class="p-box-time flex items-center justify-center  bg-[var(--bg-timeout-detail)] w-[115px] h-[28px] leading-[28px]
+                            rounded-[14px] ml-[10px]">
                                 <i class="icon time"></i>
                                 <div class="box-time">
                                     <div class="item-time"><b>02</b></div>
@@ -126,141 +133,192 @@
                             </div>
                         </div>
                     </div>
-                    <div class="group-price-detail d-flex align-items">
-                        <div class="box-starting-price">
-                            <p>Giá khởi điểm</p>
-                            <div class="starting-price">110.490.000 <u>đ</u></div>
+                    <div
+                        class="group-price-detail flex items-center mt-[10px] p-[10px_0] border-t-[1px] border-b-[1px] border-dashed border-[#e2e2e2]">
+                        <div class="box-starting-price w-[50%] border-r-[1px] border-dashed border-[#e2e2e2]">
+                            <p class="text-[13px] leading-[18px] uppercase">Giá khởi điểm</p>
+                            <div class="starting-price text-[20px] font-[600]">110.490.000 <u>đ</u></div>
                         </div>
-                        <div class="box-price-step">
-                            <p>Bước giá</p>
-                            <div class="price-step">300.000 <u>đ</u></div>
+                        <div class="box-price-step pl-[20px]">
+                            <p class="text-[13px] leading-[18px] uppercase">Bước giá</p>
+                            <div class="price-step text-[20px] font-[600]">300.000 <u>đ</u></div>
                         </div>
                     </div>
-                    <div class="box-user-win">
-                        <div class="price-win d-flex">
-                            <p>Giá thắng cuộc:</p>
-                            <div class="price">125.000.000 <u>đ</u></div>
+                    <div class="box-user-win border-t-[1px] border-dashed border-[#e2e2e2] mt-[15px] pt-[10px]">
+                        <div class="price-win flex items-end">
+                            <p class="font-[700] mr-[5px] uppercase mb-[7px]">Giá thắng cuộc:</p>
+                            <div class="price text-[28px] text-[#ef0000] font-[700]">125.000.000 <u>đ</u></div>
                         </div>
-                        <div class="info-user-win d-flex align-items">
+                        <div
+                            class="info-user-win flex items-center bg-[var(--bg-user-win)] w-full h-[40px] leading-[40px] p-[0_20px] rounded-[5px]">
                             <i class="icon-cup"></i>
-                            <p>Người chiến thắng:</p>
-                            <b class="js-user-win">Mai Phương</b>
+                            <p class="text-[#f00000] mr-[5px]">Người chiến thắng:</p>
+                            <b class="js-user-win font-[500] text-[#f00000]">Mai Phương</b>
                         </div>
                     </div>
-                    <div class="box-specification">
-                        <div class="item">
-                            <i class="fas fa-check-circle"></i>
-                            <p>CPU: Intel Core i5-12450H (3.3GHz up to 4.4GHz 12MB)</p>
+                    <div class="box-specification m-[20px_0_27px_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">
-                            <i class="fas fa-check-circle"></i>
-                            <p>VGA: NVIDIA® GeForce RTX™ 2050 4GB GDDR6 + Intel UHD Graphics</p>
+                        <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">
-                            <i class="fas fa-check-circle"></i>
-                            <p>Màn hình: 15.6inch FHD (1920 x 1080) IPS, 144Hz, Slim Bezel, Acer ComfyView™</p>
+                        <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">
-                            <i class="fas fa-check-circle"></i>
-                            <p>RAM: 8GB (8x1) DDR4 3200MHz (2x SO-DIMM socket, up to 32GB SDRAM)</p>
+                        <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>
-                    <a href="javascript:void(0)" class="btn-auction" onclick="checkAucton()">Tham gia đấu giá</a>
+                    <a href="javascript:void(0)"
+                        class="btn-auction w-full text-center h-[42px] leading-[42px] rounded-[26px] text-white bg-[var(--bg-btn-auction)] uppercase text-[18px] font-[700] block hover:background-white hover:border-red hover:text-red"
+                        onclick="checkAucton()">Tham gia đấu giá</a>
 
-                    <div class="box-live-auction">
-                        <div class="box-price-live d-flex">
-                            <i class="fas fa-caret-up"></i>
-                            <div class="current-price" id="js-price-present">125.000.000</div>
-                            <div class="unit-price">VNĐ</div>
+                    <div class="box-live-auction mt-[20px]">
+                        <div class="box-price-live flex">
+                            <i class="fas fa-caret-up text-[#2ad363] text-[32px] mt-[8px] mr-[5px]"></i>
+                            <div class="current-price text-[28px] font-[700] text-[#ef0000]" id="js-price-present">
+                                125.000.000</div>
+                            <div class="unit-price mt-[12px] ml-[5px]">VNĐ</div>
                         </div>
-                        <div class="list-user-auction">
-                            <div class="content-user">
-                                <div class="item d-flex align-items space-between">
-                                    <div class="info-left d-flex align-items">
-                                        <i class="fas fa-caret-up"></i>
-                                        <div class="number">1</div>
-                                        <div class="info-user d-flex align-items">
-                                            <a href="" class="name-user">Phương</a>
+                        <div
+                            class="list-user-auction bg-[#fff5e5] p-[15px_30px_15px_15px] rounded-[15px] overflow-hidden">
+                            <div class="content-user overflow-x-hidden overflow-y-scroll max-h-[103px] pr-[10px]">
+                                <div
+                                    class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
+                                    <div class="info-left flex items-center">
+                                        <i class="fas fa-caret-up font-[16px] mt-[3px] mr-[5px] text-[#2ad363]"></i>
+                                        <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">1</div>
+                                        <div class="info-user flex items-center">
+                                            <a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
                                             <span>trả</span>
-                                            <div class="price">125.000.000 đ</div>
+                                            <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
                                         </div>
                                     </div>
-                                    <p class="time">00:30:11</p>
+                                    <p class="time font-[700]">00:30:11</p>
                                 </div>
-                                <div class="item d-flex align-items space-between">
-                                    <div class="info-left d-flex align-items">
-                                        <i class="fas fa-caret-down"></i>
-                                        <div class="number">2</div>
-                                        <div class="info-user d-flex align-items">
-                                            <a href="" class="name-user">Phong</a>
+                                <div
+                                    class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
+                                    <div class="info-left flex items-center">
+                                        <i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                        <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
+                                        <div class="info-user flex items-center">
+                                            <a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
                                             <span>trả</span>
-                                            <div class="price">124.800.000 đ</div>
+                                            <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
                                         </div>
                                     </div>
-                                    <p class="time">00:30:11</p>
+                                    <p class="time font-[700]">00:30:11</p>
                                 </div>
-                                <div class="item d-flex align-items space-between">
-                                    <div class="info-left d-flex align-items">
-                                        <i class="fas fa-caret-down"></i>
-                                        <div class="number">3</div>
-                                        <div class="info-user d-flex align-items">
-                                            <a href="" class="name-user">Hương</a>
+                                <div
+                                    class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
+                                    <div class="info-left flex items-center">
+                                        <i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                        <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
+                                        <div class="info-user flex items-center">
+                                            <a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
                                             <span>trả</span>
-                                            <div class="price">124.300.000 đ</div>
+                                            <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
                                         </div>
                                     </div>
-                                    <p class="time">00:30:11</p>
+                                    <p class="time font-[700]">00:30:11</p>
                                 </div>
-                                <div class="item d-flex align-items space-between">
-                                    <div class="info-left d-flex align-items">
-                                        <i class="fas fa-caret-down"></i>
-                                        <div class="number">4</div>
-                                        <div class="info-user d-flex align-items">
-                                            <a href="" class="name-user">Quỳnh</a>
+                                <div
+                                    class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
+                                    <div class="info-left flex items-center">
+                                        <i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                        <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
+                                        <div class="info-user flex items-center">
+                                            <a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
                                             <span>trả</span>
-                                            <div class="price">124.000.000 đ</div>
+                                            <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
                                         </div>
                                     </div>
-                                    <p class="time">00:30:11</p>
+                                    <p class="time font-[700]">00:30:11</p>
+                                </div>
+                                <div
+                                    class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
+                                    <div class="info-left flex items-center">
+                                        <i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                        <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
+                                        <div class="info-user flex items-center">
+                                            <a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
+                                            <span>trả</span>
+                                            <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
+                                        </div>
+                                    </div>
+                                    <p class="time font-[700]">00:30:11</p>
+                                </div>
+                                <div
+                                    class="item flex items-center justify-between bg-white h-[28px] leading-[28px] rounded-[5px] mb-[8px] p-[10px_8px] shadow-[0px_2px_2px_0px_#00000026]">
+                                    <div class="info-left flex items-center">
+                                        <i class="fas fa-caret-down font-[16px] mt-[3px] mr-[5px] text-[#f00000]"></i>
+                                        <div class="number text-[13px] font-[700] text-[#f48320] pr-[5px]">2</div>
+                                        <div class="info-user flex items-center">
+                                            <a href="" class="name-user text-[#1355f0] mr-[10px]">Phương</a>
+                                            <span>trả</span>
+                                            <div class="price text-[#f00000] font-[600] pl-[5px]">125.000.000 đ</div>
+                                        </div>
+                                    </div>
+                                    <p class="time font-[700]">00:30:11</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="form-input-price">
-                            <div class="p-title">Nhập giá đấu của bạn</div>
-                            <div class="list-suggest d-flex align-items">
-                                <p>Chọn nhanh gợi ý</p>
-                                <div class="list-price d-flex align-items" id="price-list">
-                                    <a href="javascript:void(0)" data-price="125300000" class="item">
+                        <div class="form-input-price mt-[20px]">
+                            <div class="p-title text-center text-[20px] font-[400] uppercase mb-[10px]">Nhập giá đấu của
+                                bạn</div>
+                            <div class="list-suggest flex items-center ">
+                                <p class="text-[14px] font-[300] whitespace-nowrap mb-[5px] mr-[15px]">Chọn nhanh gợi ý
+                                </p>
+                                <div class="list-price flex  items-center w-[400px] overflow-x-auto scroll-smooth"
+                                    id="price-list">
+                                    <a href="javascript:void(0)" data-price="125300000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         125.3 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="125600000" class="item">
+                                    <a href="javascript:void(0)" data-price="125600000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         125.6 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="125900000" class="item">
+                                    <a href="javascript:void(0)" data-price="125900000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         125.9 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
-                                    <a href="javascript:void(0)" data-price="126000000" class="item">
+                                    <a href="javascript:void(0)" data-price="126000000"
+                                        class="item flex-[0_0_82px] text-center h-[32px] leading-[32px] mr-[5px] rounded-[15px] bg-[#f1f1f1] text-[#929292] font-[500] whitespace-nowrap block mb-[5px]">
                                         126 tr
                                     </a>
                                 </div>
@@ -268,10 +326,12 @@
                                     <i class="fas fa-chevron-right"></i>
                                 </a>
                             </div>
-                            <div class="form-input">
+                            <div class="form-input mt-[10px] flex">
                                 <input type="text" value="126.000.000" id="js-input-price" placeholder="Nhập giá"
-                                    class="input-price">
-                                <button class="btn-send" onclick="checkSendAuction()">
+                                    class="input-price w-[423px] h-[56px] border-[1px] border-[#afafaf] rounded-[28px_0_0_28px] text-center text-[32px] p-[0_20px]">
+                                <button
+                                    class="btn-send w-[calc(100%_-423px)] h-[56px] flex items-center justify-center background-blue outline-none border-0 text-white text-[24px] rounded-[0_28px_28px_0]"
+                                    onclick="checkSendAuction()">
                                     <i class="fas fa-paper-plane"></i>
                                 </button>
                             </div>
@@ -280,176 +340,209 @@
                 </div>
             </div>
 
-            <div class="content-revew-history d-flex">
-                <div class="content-left">
-                    <div class="box-review">
-                        <div class="main-title d-flex align-items space-between">
+            <div class="content-revew-history flex mt-[22px]">
+                <div class="content-left w-[calc(100%_-490px_-18px)] mr-[18px]">
+                    <div class="box-review shadow-[0_4px_4px_4px_#00000026] bg-white rounded-[15px] p-[20px_15px]">
+                        <div class="main-title flex items-center justify-between">
                             <div class="title-left">
-                                <div class="title d-flex align-items">
-                                    <h2>Đánh giá sản phẩm</h2>
+                                <div class="title flex items-center">
+                                    <h2 class="text-[16px] mr-[10px] font-[700]">Đánh giá sản phẩm</h2>
                                     <span>(100 đánh giá)</span>
                                 </div>
-                                <div class="d-flex align-items">
+                                <div class="flex items-center">
                                     <div class="rating">
                                         <i class="icon-star star5"></i>
                                     </div>
-                                    <div class="total">
+                                    <div class="total block ml-[5px] text-[14px]">
                                         <span>4.9</span>
                                         <span>/</span>
                                         <span>5</span>
                                     </div>
                                 </div>
                             </div>
-                            <a href="javascript:void(0)" class="btn-review">Gửi đánh giá</a>
+                            <a href="javascript:void(0)"
+                                class="btn-review w-[146px] h-[32px] leading-[32px] text-center background-blue text-white rounded-[26px] hover:background-white hover:text-blue hover:border-blue">Gửi
+                                đánh giá</a>
                         </div>
 
-                        <div class="list-review">
-                            <div class="item-review d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                        <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">
-                                    <div class="name-user">Anh quang</div>
-                                    <div class="total-view">
-                                        5.0 <i class="fa fa-star"></i>
+                                <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">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,
+                                    <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 d-flex align-items">
-                                        <span class="time">20-06-2024, 10:46 am</span>
-                                        <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                    <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 d-flex align-items">
-                                        <a href="" class="item">
-                                            <img src="./assets/images/image-review-1.png" alt="">
+                                    <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">
-                                            <img src="./assets/images/image-review-2.png" alt="">
+                                        <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">
-                                            <img src="./assets/images/image-review-3.png" alt="">
+                                        <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">
-                                    <div class="item-reply d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                <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">
-                                            <div class="name-user">Anphatcomputer</div>
-                                            <p class="cnt">Anphat xin cảm ơn anh Quang đã ủng hộ.
+                                        <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 d-flex align-items">
-                                                <span class="time">20-06-2024, 10:46 am</span>
-                                                <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                            <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 d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                    <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">
-                                            <div class="name-user">Anphatcomputer</div>
-                                            <p class="cnt">Anphat xin cảm ơn anh Quang đã ủng hộ.
+                                        <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 d-flex align-items">
-                                                <span class="time">20-06-2024, 10:46 am</span>
-                                                <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                            <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 d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                            <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">
-                                    <div class="name-user">Anh quang</div>
-                                    <div class="total-view">
-                                        5.0 <i class="fa fa-star"></i>
+                                <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">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,
+                                    <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 d-flex align-items">
-                                        <span class="time">20-06-2024, 10:46 am</span>
-                                        <a href="javascript:void(0)" class="btn-reply">Trả lời</a>
+                                    <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 d-flex align-items">
-                                        <a href="" class="item">
-                                            <img src="./assets/images/image-review-1.png" alt="">
+                                    <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">
-                                            <img src="./assets/images/image-review-2.png" alt="">
+                                        <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">
-                                            <img src="./assets/images/image-review-3.png" alt="">
+                                        <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">
-                            <span>Xem tất cả đánh giá</span> <i class="fas fa-chevron-right"></i>
+                        <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 class="box-question">
-                        <h2 class="title">Hỏi đáp <span>(100 bình luận)</span></h2>
-                        <div class="form-question">
-                            <textarea name="" id="" class="input-question"
+                    <div class="box-question mt-[25px] bg-[#f5f5f5] p-[15px] rounded-[15px]">
+                        <h2 class="title text-[16px] mb-[10px] font-[700]">Hỏi đáp <span
+                                class="text-[14px] 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">
+                            <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">
-                            <div class="item-question d-flex flex-wrap">
-                                <div class="avatar">
-                                    <img src="./assets/images/avatar-user.png" width="100%" height="100%" alt="avatar">
+                        <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">
-                                    <div class="info-user d-flex align-items">
-                                        <div class="name-user">Anh Quang</div>
-                                        <span class="time">20-06-2024, 10:46 am</span>
+                                <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">
+                                    <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">
+                                        <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">
-                                    <div class="reply-question d-flex">
-                                        <div class="avatar">
-                                            <img src="./assets/images/avatar-admin.png" width="100%" height="100%"
-                                                alt="avatar">
+                                <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">
-                                            <div class="info-user d-flex align-items">
-                                                <div class="name-user">Anphatcomputer</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">
-                                                <p>Dạ, bộ phận CSKH sẽ liên hệ với người chiến thắng ngay trong ngày để
-                                                    hướng dẫn thanh toán nhận hàng ạ</p>
-                                                <a href="javascript:void(0)" class="click-question">
+                                            <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>
@@ -458,61 +551,85 @@
                                 </div>
                             </div>
                         </div>
-                        <a href="javascript:void(0)" class="more-question">
-                            <span>Xem tất cả hỏi đáp</span> <i class="fas fa-chevron-right"></i>
+                        <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="box-info-product">
-                        <div class="tab d-flex align-items">
-                            <a href="javascrit:void(0)" data-id="#tab-info" class="item-tab active">Thông tin sản
+                    <div class="box-info-product mt-[20px]">
+                        <div class="tab flex items-center">
+                            <a href="javascrit:void(0)" data-id="#tab-info"
+                                class="item-tab w-[222px] h-[50px] leading-[50px] text-center rounded-[15px_15px_0_0] bg-[#f5f5f5] text-black text-[16px] font-[600] mr-[5px] ">Thông
+                                tin sản
                                 phẩm</a>
-                            <a href="javascrit:void(0)" data-id="#tab-deposit" class="item-tab">Thông tin đặt cọc đấu
+                            <a href="javascrit:void(0)" data-id="#tab-deposit"
+                                class="item-tab w-[222px] 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 đặt cọc đấu
                                 giá</a>
                         </div>
-                        <div class="content-tab" id="tab-info">
-                            <div class="d-flex info">
-                                <img src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
-                                <ul>
-                                    <li>Tên sản phẩm: Laptop Acer Aspire 7 A715-76-53PJ NH.QGESV.007</li>
-                                    <li>Dòng Laptop: Laptop | Laptop Acer Aspire | Laptop Đồ Họa | Laptop văn phòng</li>
+                        <div class="content-tab hidden" id="tab-info">
+                            <div class="flex info mt-[15px]">
+                                <img class="w-[290px] h-[290px] block mr-[10px] object-contain"
+                                    src="./assets/images/product-detail-big.png" width="100%" height="100%" alt="">
+                                <ul class="w-[calc(100%_-300px)] 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>Công nghệ CPU: Intel Core i5-12450H</li>
-                                    <li>Số nhân: 8</li>
-                                    <li>Số luồng: 12</li>
-                                    <li>Tốc độ tối đa: 4.4GHz</li>
-                                    <li>Bộ nhớ đệm: 12MB</li>
+                                    <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>RAM: 16GB (2x8GB)</li>
-                                    <li>Loại RAM: DDR4</li>
-                                    <li>Tốc độ Bus RAM: 3200Mhz</li>
-                                    <li>Số khe cắm: 2 khe</li>
-                                    <li>Hỗ trợ RAM tối đa: Nâng cấp tối đa 32GB</li>
+                                    <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>Dung lượng: 512GB PCIe NVMe SSD</li>
-                                    <li>Tốc độ vòng quay</li>
-                                    <li>Khe cắm SSD mở rộng: nâng cấp tối đa 1 TB SSD PCIe Gen4, 16 Gb/s, NVMe</li>
+                                    <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 class="content-tab active" id="tab-deposit">
-                            <div class="box-deposit">
-                                <i class="title">Quý khách vui lòng làm theo các bước sau đây.</i>
-                                <div class="content-deposit">
-                                    <div class="item">
-                                        <div class="step">
+                        <div class="content-tab hidden active" id="tab-deposit">
+                            <div class="box-deposit mt-[15px]">
+                                <i class="title text-[15px] font-[400] block mb-[10px]">Quý khách vui lòng làm theo các
+                                    bước sau đây.</i>
+                                <div class="content-deposit ml-[10px] pl-[20px] border-l-[2px] border-[#f1b510]">
+                                    <div class="item mb-[20px]">
+                                        <div
+                                            class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
                                             Bước 1
-                                            <div class="circle">
-                                                <div class="circle-inner"></div>
+                                            <div
+                                                class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                                                <div
+                                                    class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                                                </div>
                                             </div>
                                         </div>
-                                        <b class="txt d-flex">
-                                            Đặt cọc <div class="price">500.000 VNĐ</div> và STK bên dưới
+                                        <b class="txt flex font-[500]">
+                                            Đặt cọc <div class="price font-[700] text-[#f00000] p-[0_5px]">500.000 VNĐ
+                                            </div> và
+                                            STK bên dưới
                                         </b>
                                     </div>
                                     <div class="item">
-                                        <div class="step">Bước 2
-                                            <div class="circle">
-                                                <div class="circle-inner"></div>
+                                        <div
+                                            class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
+                                            Bước 2
+                                            <div
+                                                class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                                                <div
+                                                    class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                                                </div>
                                             </div>
                                         </div>
                                         <div class="txt">
@@ -523,24 +640,31 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="contact-deposit">
+                                <div class="contact-deposit mt-[10px] italic">
                                     Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch qua
-                                    <b>Zalo: 0909000000</b> để được hỗ trợ
+                                    <b class="text-[#f00000]">Zalo: 0909000000</b> để được hỗ trợ
                                     nhanh nhất.
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="content-right">
-                    <div class="box-history">
-                        <h2 class="title">Các phiên đấu giá trước</h2>
-                        <div class="tab-history d-flex align-items">
-                            <a href="javascript:void(0)" data-id="#3day" class="item-tab active">3 ngày</a>
-                            <a href="javascript:void(0)" data-id="#7day" class="item-tab">7 ngày</a>
-                            <a href="javascript:void(0)" data-id="#30day" class="item-tab">30 ngày</a>
+                <div class="content-right w-[490px]">
+                    <div class="box-history shadow-[0_4px_4px_4px_#00000026] p-[15px] rounded-[15px]">
+                        <h2 class="title text-[20px] text-center p-[5px_0] font-[700] uppercase">Các phiên đấu giá trước
+                        </h2>
+                        <div class="tab-history flex items-center bg-[#afafaf] p-[5px] rounded-[20px] mr-[-5px]">
+                            <a href="javascript:void(0)" data-id="#3day"
+                                class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px] active">3
+                                ngày</a>
+                            <a href="javascript:void(0)" data-id="#7day"
+                                class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px]">7
+                                ngày</a>
+                            <a href="javascript:void(0)" data-id="#30day"
+                                class="item-tab w-[calc(100%_/_3_-5px)] mr-[5px] text-center text-[14px] text-white h-[34px] leading-[34px]">30
+                                ngày</a>
                         </div>
-                        <table class="table-tab active" id="3day">
+                        <table class="table-tab mt-[15px] text-left w-full h-[230px] overflow-auto active" id="3day">
                             <thead>
                                 <th>Tên người thắng</th>
                                 <th>Giác thắng cuộc</th>
@@ -549,42 +673,42 @@
                             <tbody>
                                 <tr>
                                     <td>Mai anh</td>
-                                    <td>22.200.000 VNĐ</td>
+                                    <td><b>22.200.000 VNĐ</b></td>
                                     <td>14:30:40 12/09/2024</td>
                                 </tr>
                                 <tr>
                                     <td>Trần Quang</td>
-                                    <td>27.500.000 VNĐ</td>
+                                    <td><b>27.500.000 VNĐ</b></td>
                                     <td>15:19:22 12/09/2024</td>
                                 </tr>
                                 <tr>
                                     <td>Hoàng hải</td>
-                                    <td>21.800.000 VNĐ</td>
+                                    <td><b>21.800.000 VNĐ</b></td>
                                     <td>10:39:41 13/09/2024</td>
                                 </tr>
                                 <tr>
                                     <td>Phương Anh</td>
-                                    <td>12.900.000 VNĐ</td>
+                                    <td><b>12.900.000 VNĐ</b></td>
                                     <td>14:12:33 13/09/2024</td>
                                 </tr>
                                 <tr>
                                     <td>Mai Hoa</td>
-                                    <td>29.860.000 VNĐ</td>
+                                    <td><b>29.860.000 VNĐ</b></td>
                                     <td>14:28:45 13/09/2024</td>
                                 </tr>
                                 <tr>
                                     <td>Thu Hương</td>
-                                    <td>70.200.000 VNĐ</td>
+                                    <td><b>70.200.000 VNĐ</b></td>
                                     <td>16:30:41 14/09/2024</td>
                                 </tr>
                                 <tr>
                                     <td>Thu Hương</td>
-                                    <td>70.200.000 VNĐ</td>
+                                    <td><b>70.200.000 VNĐ</b></td>
                                     <td>16:30:41 14/09/2024</td>
                                 </tr>
                             </tbody>
                         </table>
-                        <table class="table-tab" id="7day">
+                        <table class="table-tab  mt-[15px] hidden" id="7day">
                             <thead>
                                 <th>Tên người thắng</th>
                                 <th>Giác thắng cuộc</th>
@@ -623,7 +747,7 @@
                                 </tr>
                             </tbody>
                         </table>
-                        <table class="table-tab" id="30day">
+                        <table class="table-tab  mt-[15px] hidden" id="30day">
                             <thead>
                                 <th>Tên người thắng</th>
                                 <th>Giác thắng cuộc</th>
@@ -663,67 +787,98 @@
                             </tbody>
                         </table>
                     </div>
-                    <div class="list-product-auction">
-                        <h2 class="title">Đấu giá đang diễn ra</h2>
+                    <div class="list-product-auction bg-[var(--bg-list-auction)] mt-[15px] rounded-[15px] p-[15px]">
+                        <h2 class="title text-[20px] font-[700] uppercase text-center mb-[10px] text-white">Đấu giá đang
+                            diễn ra</h2>
                         <div class="list">
-                            <div class="item-auction">
-                                <div class="images">
-                                    <a href=""><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-full mb-[15px] bg-white">
+                                <div class="images block relative w-[160px] h-[160px] 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>
                                     </div>
                                 </div>
-                                <div class="info">
-                                    <a href="" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0 inch
-                                        - 4K - IPS
+                                <div class="info w-[calc(100%_-_170px)]">
+                                    <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="/product-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 continue">Đấu giá</a>
                                 </div>
                             </div>
-                            <div class="item-auction">
-                                <div class="images">
-                                    <a href=""><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-full mb-[15px] bg-white">
+                                <div class="images block relative w-[160px] h-[160px] 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>
                                     </div>
                                 </div>
-                                <div class="info">
-                                    <a href="" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0 inch
-                                        - 4K - IPS
+                                <div class="info w-[calc(100%_-_170px)]">
+                                    <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="/product-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 continue">Đấu giá</a>
                                 </div>
                             </div>
-                            <div class="item-auction">
-                                <div class="images">
-                                    <a href=""><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-full mb-[15px] bg-white">
+                                <div class="images block relative w-[160px] h-[160px] 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>
                                     </div>
                                 </div>
-                                <div class="info">
-                                    <a href="" class="name line-clamp-2">Màn Hình Dell UltraSharp U2723QE (27.0 inch
-                                        - 4K - IPS
+                                <div class="info w-[calc(100%_-_170px)]">
+                                    <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="/product-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 continue">Đấu giá</a>
                                 </div>
                             </div>
                         </div>
@@ -733,18 +888,20 @@
         </div>
     </div>
 
-
     <div class="overlay"></div>
     <div class="box-popup popup-rules">
-        <div class="title">Thể lệ tham gia đấu giá</div>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <div class="title text-[24px] font-700 uppercase text-center mb-[15px]">Thể lệ tham gia đấu giá</div>
+        <a href="javascript:void(0)" class='click-close absolute top-[10px] right-[20px] text-[24px] text-[#afafaf]'
+            onclick="closePopop()">
             <i class="fa fa-times"></i>
         </a>
-        <i class="note-time">Thời gian: Mỗi thứ 7 hàng tuần Dịch vụ ABC sẽ có một phiên đấu giá diễn ra từ 20 tới 22h
+        <i class="note-time font[400] mb-[20px] text-[#000000c2] block">Thời gian: Mỗi thứ 7 hàng tuần Dịch vụ ABC sẽ có
+            một
+            phiên đấu giá diễn ra từ 20 tới 22h
             bao
             gồm nhiều sản phẩm khác
             nhau.</i>
-        <div class="content">
+        <div class="content h-[340px] overflow-y-auto">
             <p>- Các sản phẩm đều có giá khởi điểm và bước giá nhất định.</p>
             <p>- Người chơi có thể bắt đầu đấu giá từ giá khởi điểm, người
                 trả giá sau cần trả mức giá cao hơn người trước ít nhất 1 bước giá. Kết thúc thời gian đấu giá, người
@@ -787,27 +944,40 @@
                 <span class="checkmark"></span>
             </label>
         </div>
-        <button type="submit" class="btn-submit" id="submit_rules">Đã hiểu</button>
+        <button type="submit"
+            class="btn-submit block w-[168px] 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"
+            id="submit_rules">Đã hiểu</button>
     </div>
 
 
     <div class="box-popup popup-login">
-        <div class="content">
-            <div class="title">Bạn vui lòng đăng nhập tài khoản <br>để tham gia đấu giá</div>
-            <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <div class="content w-[390px] m-[20px_auto]">
+            <div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Bạn vui lòng đăng nhập tài
+                khoản <br>để
+                tham gia đấu giá</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>
-            <a href="javascript:void(0)" class="btn-login google" onclick="checklogin()">
-                <div class="left d-flex align-items">
-                    <img src="./assets/images/icon-google.png" width="100%" height="100%" alt="google">
-                    <span>Đăng nhập bằng Google</span>
+            <a href="javascript:void(0)"
+                class="btn-login flex items-center justify-between w-full h-[52px] mb-[10px] p-[15px] rounded-[10px] border-[1px] border-[#8e8e8e] google"
+                onclick="checklogin()">
+                <div class="left flex items-center">
+                    <img src="./assets/images/icon-google.png" width="100%" height="100%" alt="google"
+                        class="w-[28px] h-[28px]">
+                    <span class="ml-[10px]">Đăng nhập bằng Google</span>
                 </div>
                 <i class="fas fa-chevron-right"></i>
             </a>
-            <a href="javascript:void(0)" class="btn-login facebook" onclick="checklogin()">
-                <div class="left d-flex align-items">
-                    <img src="./assets/images/icon-facebook-login.png" width="100%" height="100%" alt="facebook">
-                    <span>Đăng nhập bằng Google</span>
+            <a href="javascript:void(0)"
+                class="btn-login flex items-center justify-between w-full h-[52px] mb-[10px] p-[15px] rounded-[10px] border-[1px] border-[#8e8e8e] facebook"
+                onclick="checklogin()">
+                <div class="left flex items-center">
+                    <img src="./assets/images/icon-facebook-login.png" width="100%" height="100%" alt="facebook"
+                        class="w-[28px] h-[28px]">
+                    <span class="ml-[10px]">Đăng nhập bằng Google</span>
                 </div>
                 <i class="fas fa-chevron-right"></i>
             </a>
@@ -817,38 +987,57 @@
 
     <div class="box-popup popup-yeucau">
         <div class="content">
-            <div class="title">Yêu cầu đặt cọc</div>
-            <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+            <div class="title text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Yêu cầu đặt cọc</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>
             <p class="text-center">Vui lòng đặt cọc số tiền 500.000đ để tham gia đấu giá</p>
-            <a class="btn-submit" href="javascript:void(0)" onclick="showInfoPay()">Tiếp tục</a>
+            <a class="btn-submit block w-[168px] 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"
+                href="javascript:void(0)" onclick="showInfoPay()">Tiếp tục</a>
         </div>
     </div>
 
     <div class="box-popup popup-info-pay">
-        <div class="title-main">Thông tin đặt cọc sản phẩm</div>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <div class="title-main text-[20px] font-[600] leading-[24px] mb-[15px] text-center">Thông tin đặt cọc sản phẩm
+        </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="box-deposit">
+        <div class="box-deposit mt-[15px]">
             <i class="title">Quý khách vui lòng làm theo các bước sau đây.</i>
-            <div class="content-deposit">
-                <div class="item">
-                    <div class="step">
+            <div class="content-deposit ml-[10px] pl-[20px] border-l-[2px] border-[#f1b510]">
+                <div class="item mb-[20px]">
+                    <div
+                        class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
                         Bước 1
-                        <div class="circle">
-                            <div class="circle-inner"></div>
+                        <div
+                            class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                            <div
+                                class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                            </div>
                         </div>
                     </div>
-                    <b class="txt d-flex">
-                        Đặt cọc <div class="price">500.000 VNĐ</div> và STK bên dưới
+                    <b class="txt flex font-[500]">
+                        Đặt cọc <div class="price font-[700] text-[#f00000] p-[0_5px]">500.000 VNĐ
+                        </div> và
+                        STK bên dưới
                     </b>
                 </div>
                 <div class="item">
-                    <div class="step">Bước 2
-                        <div class="circle">
-                            <div class="circle-inner"></div>
+                    <div
+                        class="step relative w-[102px] h-[40px] leading-[40px] text-center text-white rounded-[21px] text-[16px] font-[700] bg-[#166dd8] mb-[10px]">
+                        Bước 2
+                        <div
+                            class="circle w-[24px] h-[24px] flex items-center justify-center bg-[#1e7ef7] border-[2px] border-[#f7c12a] rounded-[50%] absolute left-[-33px] top-[20%]">
+                            <div
+                                class="circle-inner w-[10px] h-[10px] bg-white rounded-[50%] border-[2px] border-[#f7c12a]">
+                            </div>
                         </div>
                     </div>
                     <div class="txt">
@@ -859,16 +1048,17 @@
                     </div>
                 </div>
             </div>
-            <div class="contact-deposit">
+            <div class="contact-deposit mt-[10px] italic">
                 Trường hợp nếu không nhận được email, quý khách vui lòng gửi hình ảnh giao dịch qua
-                <b>Zalo: 0909000000</b> để được hỗ trợ
+                <b class="text-[#f00000]">Zalo: 0909000000</b> để được hỗ trợ
                 nhanh nhất.
             </div>
             <div class="pay-qr">
-                <div class="title">Thông tin tài khoản nhận cọc</div>
-                <div class="d-flex">
-                    <img src="./assets/images/image-qr.png" class="image-qr" width="100%" height="100%" alt="qr">
-                    <div class="info">
+                <div class="title text-[16px] font-[600] m-[15px_0]">Thông tin tài khoản nhận cọc</div>
+                <div class="flex">
+                    <img src="./assets/images/image-qr.png" class="image-qr w-[123px] h-[123px] mr-[10px]" width="100%"
+                        height="100%" alt="qr">
+                    <div class="info w-[calc(100%_-133px)]">
                         <p>Công ty CP THƯƠNG MẠI DỊCH VỤ ACB</p>
                         <p>Ngân hàng: Techcombank</p>
                         <p>Số tài khoản: 9999998888</p>
@@ -882,78 +1072,106 @@
 
 
     <div class="box-popup popup-success">
-        <h2 class="title">
+        <h2 class="title text-[24px] font-[700] text-center uppercase text-[#d00000]
+">
             xin chúc mừng!
         </h2>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <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="note-title">Bạn đã đặt giá thầu thành công!</div>
-        <div class="content">
+        <div class="note-title text-[#d00000] text-[20px] text-center">Bạn đã đặt giá thầu thành công!</div>
+        <div class="content p-[0_20px] text-center leading-[19px] mt-[25px] font-[400]">
             Quý khách hãy tiếp tục theo dõi màn đấu giá cho đến hết thời gian diễn ra. Lịch sử đấu giá sẽ được hiển thị
             tại đây. Khi
             thời gian kết thúc, bộ phận CSKH sẽ gửi email xác nhận đến người chiến thắng!
         </div>
-        <a class="btn-submit" href="javascript:void(0)" onclick="closePopop()">Đã hiểu</a>
+        <a class="btn-submit block w-[168px] 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"
+            href="javascript:void(0)" onclick="closePopop()">Đã hiểu</a>
     </div>
 
     <div class="box-popup popup-error">
-        <i class="fas fa-exclamation-triangle"></i>
-        <h2 class="title">Đấu giá không thành công</h2>
-        <a href="javascript:void(0)" class='click-close' onclick="closePopop()">
+        <i class="fas fa-exclamation-triangle text-[#f4bc20] text-[58px] text-center mb-[10px] block"></i>
+        <h2 class="title text-[24px] text-center text-[#f4bc20] uppercase font-[700]">Đấu giá không thành cô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="content">
+        <div class="content text-center text-[#1e1e1e]">
             Giá đấu của bạn chưa hợp lệ. Vui lòng nhập giá cao hơn giá cao nhất ít nhất <span id="js-price-min"></span>
             VND
         </div>
-        <a class="btn-submit" href="javascript:void(0)" onclick="closePopop()">Thử lại</a>
+        <a class="btn-submit block w-[168px] 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"
+            href="javascript:void(0)" onclick="closePopop()">Thử lại</a>
     </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>
@@ -961,56 +1179,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>
diff --git a/home-mobile.html b/home-mobile.html
index 882a865..2e4a910 100644
--- a/home-mobile.html
+++ b/home-mobile.html
@@ -7,145 +7,182 @@
     <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="./assets/css/style-mb.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="./assets/css/style-global-mb.css">
 
 </head>
 
 <body>
 
     <div class="container-mb">
-        <div class="header">
+        <div class="header bg-[var(--bg-header)] p-[6px_0] duration-[0.5s] delay-[0] top-[-50px]">
             <div class="container">
-                <div class="content-main-header d-flex align-items space-between">
-                    <a href="/" class="logo">
-                        <img src="./assets/images/logo-mobile.png" width="100%" height="100%" alt="logo">
+                <div class="content-main-header flex items-center justify-between">
+                    <a href="/" class="logo w-[66px]">
+                        <img src="./assets/images/logo-mobile.png" class="w-[100%] h-[26px] block" width="100%"
+                            height="100%" alt="logo">
                     </a>
-                    <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-[14px] block" alt="">
+                            <span class="ml-[3px] text-[12px] uppercase text-white">Thể lệ đấu giá</span>
                         </a>
-                        <a href="/taikhoan" 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="/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-white">Tài khoản</span>
+                            <i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
                         </a>
                     </div>
                 </div>
             </div>
         </div>
         <div class="homepage">
-            <div class="banner">
+            <div class="banner w-full block">
                 <a href="" class="item">
-                    <img src="./assets/images/banner-mobile.png" width="100%" height="100%" alt="banner">
+                    <img src="./assets/images/banner-mobile.png" class="block h-[100%]" width="100%" height="100%"
+                        alt="banner">
                 </a>
             </div>
-            <div class="box-top-auction">
+            <div class="box-top-auction mt-[15px]">
                 <div class="container">
-                    <h2 class="title">Top đấu giá sôi động</h2>
-                    <div class="list-auction swiper" id="js-list-auction-top">
+                    <h2
+                        class="title w-[295px] h-[40px] leading-[40px] bg-[var(--bg-top-auction)] text-center rounded-[26px] mb-[12px] text-[24px] text-white uppercase font-[600]">
+                        Top đấu giá sôi động</h2>
+                    <div class="list-auction swiper pb-[40px]" id="js-list-auction-top">
                         <div class="swiper-wrapper">
                             <div class="swiper-slide">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="/detail-mobile.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-[100%] bg-white">
+                                    <div class="images block relative w-[110px] h-[110px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell
-                                            UltraSharp
-                                            U2723QE (27.0 inch
-                                            - 4K -
-                                            IPS
+                                    <div class="info w-[calc(100%_-_120px)]">
+                                        <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-mobile.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 continue">Đấu giá</a>
                                     </div>
                                 </div>
                             </div>
                             <div class="swiper-slide">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="/detail-mobile.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-[100%] bg-white">
+                                    <div class="images block relative w-[110px] h-[110px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell
-                                            UltraSharp
-                                            U2723QE (27.0 inch
-                                            - 4K -
-                                            IPS
+                                    <div class="info w-[calc(100%_-_120px)]">
+                                        <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-mobile.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 class="swiper-slide">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="/detail-mobile.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-[100%] bg-white">
+                                    <div class="images block relative w-[110px] h-[110px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell
-                                            UltraSharp
-                                            U2723QE (27.0 inch
-                                            - 4K -
-                                            IPS
+                                    <div class="info w-[calc(100%_-_120px)]">
+                                        <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-mobile.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 class="swiper-slide">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="/detail-mobile.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-[100%] bg-white">
+                                    <div class="images block relative w-[110px] h-[110px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.html" class="name line-clamp-2">Màn Hình Dell
-                                            UltraSharp
-                                            U2723QE (27.0 inch
-                                            - 4K -
-                                            IPS
+                                    <div class="info w-[calc(100%_-_120px)]">
+                                        <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-mobile.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>
@@ -155,510 +192,579 @@
                 </div>
             </div>
 
-            <div class="box-list-auction">
+            <div class="box-list-auction mt-[50px]">
                 <div class="container">
-                    <div class="background-auction">
-                        <h2 class="title">Đấu giá kịch tÍnh từ 0Đ</h2>
-                        <div class="box-auction going-on">
-                            <div class="main-title d-flex align-items space-between">
-                                <div class="left">
-                                    <p>20:00</p>
-                                    <span>Đang diễn ra</span>
+                    <div class="background-auction bg-[var(--bg-list-auction)] rounded-[15px] p-[10px]">
+                        <h2
+                            class="title w-[100%] h-[60px] text-center text-[24px] font-[600] leading-[60px] text-white m-[-45px_auto_auto_auto] rounded-[35px] bg-[var(--color-list-auction)] uppercase">
+                            Đấu giá kịch tÍnh từ 0Đ
+                        </h2>
+                        <div class="box-auction mb-[30px]  going-on">
+                            <div class="main-title flex items-center justify-between mt-[15px]">
+                                <div class="left text-center">
+                                    <p class="text-[20px] font-[600] text-white leading-[29px]">20:00</p>
+                                    <span class="text-[13px] text-white font-[300]">Đang diễn ra</span>
                                 </div>
                                 <div class="right">
-                                    <div class="box-time">
-                                        <span>Còn lại</span>
+                                    <div class="box-time flex text-white">
+                                        <span class="font-[300]">Còn lại</span>
                                         <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>
-                                    <a href="/listdaugia-mb.html" class="more-all">Xem tất cả +</a>
+                                    <a href="/listdaugia-mb.html"
+                                        class="more-all block text-white text-[13px] text-right mt-[5px]">Xem tất cả
+                                        +</a>
                                 </div>
                             </div>
-                            <div class="list-auction">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png"
-                                                alt=""></a>
-                                        <div class="box-join">
+                            <div class="list-auction mt-[10px]">
+                                <div
+                                    class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px]  w-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.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-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.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">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.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">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add">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">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add">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">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add">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">Đấu giá</a>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="box-auction coming-soon">
-                            <div class="main-title d-flex align-items space-between">
-                                <div class="left">
-                                    <p>20:00</p>
-                                    <span>Sắp diễn ra</span>
+                            <div class="main-title flex items-center justify-between mt-[15px]">
+                                <div class="left text-center">
+                                    <p class="text-[20px] font-[600] text-white leading-[29px]">20:00</p>
+                                    <span class="text-[13px] text-white font-[300]">Sắp diễn ra</span>
                                 </div>
                                 <div class="right">
-                                    <div class="box-time">
-                                        <span>Bắt đầu</span>
+                                    <div class="box-time flex text-white">
+                                        <span class="font-[300]">Còn lại</span>
                                         <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>
-                                    <a href="./listdaugia-mb.html" class="more-all">Xem tất cả +</a>
+                                    <a href="/listdaugia-mb.html"
+                                        class="more-all block text-white text-[13px] text-right mt-[5px]">Xem tất cả
+                                        +</a>
                                 </div>
                             </div>
-                            <div class="list-auction">
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png"
-                                                alt=""></a>
-                                        <div class="box-join">
+                            <div class="list-auction mt-[10px]">
+                                <div
+                                    class="item-auction flex p-[10px] border-[1px] border-[#e2e2e2] rounded-[10px]  w-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add coming">Sắp Đấ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 coming">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add coming">Sắp Đấ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 coming">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add coming">Sắp Đấ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 coming">Đấu giá</a>
                                     </div>
                                 </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.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-[100%] mb-[10px] 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>
                                         </div>
                                     </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.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-mobile.html" class="btn-add coming">Sắp Đấu giá</a>
-                                    </div>
-                                </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png"
-                                                alt=""></a>
-                                        <div class="box-join">
-                                            <i class="icon_auction"></i>
-                                            <span>220</span>
+                                        <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>
-                                    </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.html" class="name line-clamp-2">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>
-                                        <a href="./detail-mobile.html" class="btn-add coming">Sắp Đấu giá</a>
-                                    </div>
-                                </div>
-                                <div class="item-auction">
-                                    <div class="images">
-                                        <a href="./detail-mobile.html"><img src="./assets/images/icon-pro-top.png"
-                                                alt=""></a>
-                                        <div class="box-join">
-                                            <i class="icon_auction"></i>
-                                            <span>220</span>
-                                        </div>
-                                    </div>
-                                    <div class="info">
-                                        <a href="./detail-mobile.html" class="name line-clamp-2">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>
-                                        <a href="./detail-mobile.html" class="btn-add coming">Sắp Đấu giá</a>
+                                        <a href="./detail.html" class="btn-add coming">Đấu giá</a>
                                     </div>
                                 </div>
                             </div>
                         </div>
-
                     </div>
                 </div>
             </div>
 
 
-            <div class="box-deal-hot">
+            <div class="box-deal-hot mt-[12px]">
                 <div class="container">
-                    <div class="background-deal">
-                        <h2 class="title">
+                    <div class="background-deal bg-[var(--bg-deal)] rounded-[15px] p-[10px]">
+                        <h2 class="title flex items-center justify-center mb-[10px]">
                             <i class="icon-deal"></i>
-                            <p>Deal hot</p>
+                            <p class="ml-[7px] uppercase text-[24px] font-[700] text-white">Deal hot</p>
                         </h2>
-                        <div class="tab-list d-flex align-items space-between">
-                            <a href="javascript:void(0)" class="item active">
-                                <p>Đang diễn ra 20:00</p>
-                                <div class="box-time">
-                                    <span>Còn lại</span>
-                                    <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="tab-list flex items-center justify-between mb-[10px]">
+                            <a href="javascript:void(0)"
+                                class="item w-[calc(100%_/2_-5px)] text-white p-[10px] rounded-[15px_15px_0_0] background-blue hover:background-blue">
+                                <p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Đang diễn ra 20:00</p>
+                                <div class="box-time flex items-center">
+                                    <span class="text-[13px]">Còn lại</span>
+                                    <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>
-                                <div class="box-time">
-                                    <span>Còn lại</span>
+                            <a href="javascript:void(0)"
+                                class="item w-[calc(100%_/2_-5px)] bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
+                                <p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Sắp diễn ra 20:00</p>
+                                <div class="box-time flex items-center">
+                                    <span class="text-[13px]">Còn lại</span>
                                     <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>
                             </a>
                         </div>
-                        <div class="product-list d-flex flex-wrap">
-                            <div class="item-deal">
-                                <div class="images">
-                                    <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png"
+                        <div class="product-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">
-                                        <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-mb.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-mb.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-mb.html"><img src="./assets/images/icon-pro-top.png"
+                            <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">
-                                        <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-mb.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-mb.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-mb.html"><img src="./assets/images/icon-pro-top.png"
+                            <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">
-                                        <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-mb.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-mb.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-mb.html"><img src="./assets/images/icon-pro-top.png"
+                            <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">
-                                        <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-mb.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-mb.html" class="btn-add">Mua ngay</a>
-                                </div>
-                            </div>
-                            <div class="item-deal">
-                                <div class="images">
-                                    <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png"
-                                            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>
-                                    <a href="./deal-detail-mb.html" class="name line-clamp-2">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="saleoff">-30%</div>
-                                        </div>
-                                    </div>
-                                    <a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
-                                </div>
-                            </div>
-                            <div class="item-deal">
-                                <div class="images">
-                                    <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png"
-                                            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>
-                                    <a href="./deal-detail-mb.html" class="name line-clamp-2">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="saleoff">-30%</div>
-                                        </div>
-                                    </div>
-                                    <a href="./deal-detail-mb.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>
-                        <a href="/listdeal-mb.html" class="more-all">
+                        <a href="/listdeal-mb.html" class="btn-more-all">
                             Xem tất cả +
                         </a>
                     </div>
@@ -667,54 +773,74 @@
         </div>
 
         <div class="footer">
-            <div class="box-faq">
+            <div class="box-faq mt-[15px]">
                 <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-[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">
-                                <a href="javascript:void(0)" class="faqlink">
+                            <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">Rất dễ dàng, tham gia mọi lúc mọi nơi chỉ cần có smartphone và
+                                <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-[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">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-[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">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-[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">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-[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">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>
@@ -722,57 +848,69 @@
                     </div>
                 </div>
             </div>
-            <div class="main-footer">
+            <div class="main-footer bg-[var(--color-bg-footer)] mt-[15px] pb-[20px]">
                 <div class="container">
-                    <div class="footer-policies d-flex flex-wrap">
-                        <div class="item-policies">
-                            <div class="icons">
-                                <img src="./assets/images/icon-ship.png" width="100%" height="100%" alt="ship">
+                    <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">
-                                <b>Chính sách giao hàng</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-return.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Đổi mới 15 ngày đầu</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-pay.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Thanh toán tiện lợi</b>
+                            <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">
-                            <div class="icons">
-                                <img src="./assets/images/icon-chat.png" width="100%" height="100%" alt="ship">
+                        <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">
-                                <b>Hỗ trợ nhiệt tình</b>
+                            <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">
-                        <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>
-                            <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
+                    <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>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,
+                            <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 m-[0_auto] w-[270px] block">
                             <img src="./assets/images/btn-phone.png" alt="">
                         </a>
                     </div>
@@ -803,6 +941,17 @@
             $(this).parents('.item').toggleClass('active');
         });
     });
+
+    $(window).scroll(function () {
+
+        if ($(window).scrollTop() > 100) {
+            $(".header").addClass('header-fixed');
+        }
+        else {
+            $(".header").removeClass('header-fixed');
+        }
+
+    })
 </script>
 
 </html>
\ No newline at end of file
diff --git a/home.html b/home.html
index 2db4dd1..613aa82 100644
--- a/home.html
+++ b/home.html
@@ -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>
 
 
diff --git a/listdaugia.html b/listdaugia.html
index 23eae8c..f36b5ed 100644
--- a/listdaugia.html
+++ b/listdaugia.html
@@ -4,29 +4,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <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="/taikhoan" 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>
@@ -34,17 +35,20 @@
     </div>
     <div class="page-auction">
         <div class="container">
-            <div class="breadcrumb">
-                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
-                        <a href="/" itemprop="item" class="nopad-l">
-                            <span itemprop="name"><span>Trang chủ</span></span>
-                        </a> <i>/</i>
+            <div class="breadcrumb w-full float-left p-0 m-0 bg-none">
+                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
+                        <a href="/" itemprop="item" class="nopad-l text-[14px]">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
+                                    chủ</span></span>
+                        </a> <i class="leading-[40px] m-[0_10px]">/</i>
                         <meta itemprop="position" content="1">
                     </li>
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
                         <a href="/" itemprop="item">
-                            <span itemprop="name">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]">
                                 Đấu giá
                             </span>
                         </a>
@@ -53,21 +57,30 @@
                 </ol>
             </div>
             <div class="clearfix"></div>
-            <div class="background-aution">
-                <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="background-aution bg-[var(--bg-list-auction)] mt-[65px] p-[15px] rounded-[15px]">
+                <h2
+                    class="title w-[430px] block leading-[70px] h-[70px] m-[-50px_auto_auto_auto] bg-[--color-list-auction] text-[32px] text-white font-[600] text-center uppercase rounded-[35px]">
+                    Đấu
+                    giá kịch tính từ
+                    0Đ</h2>
+                <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-yellow hover:background-yellow">
+                        <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>
@@ -75,188 +88,310 @@
                         </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 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
-                                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
+                        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 class="ml-[3px]">220</span>
+                            </div>
+                        </div>
+                        <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 block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
+                                <u>đ</u>
+                            </div>
+                            <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 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 class="ml-[3px]">220</span>
+                            </div>
+                        </div>
+                        <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 block m-[5px_0] text-[13px] text-[#000]">Giá gốc: 280.490.000
+                                <u>đ</u>
+                            </div>
+                            <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 class="paging d-flex align-items space-center">
-                    <a href="" class="item active">1</a>
-                    <a href="" class="item">1</a>
-                    <a href="" class="item">1</a>
-                    <a href="" class="item">1</a>
-                    <a href="" class="item">1</a>
+                <div class="paging flex items-center justify-center">
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#f1b510] background-yellow hover:background-yellow hover:border-yellow">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-yellow hover:border-yellow">1</a>
                 </div>
             </div>
         </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>
@@ -264,56 +399,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>
@@ -321,5 +459,7 @@
         </div>
     </div>
 </body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
 
 </html>
\ No newline at end of file
diff --git a/listdeal-mb.html b/listdeal-mb.html
index 9ebdfb8..44a8657 100644
--- a/listdeal-mb.html
+++ b/listdeal-mb.html
@@ -7,233 +7,399 @@
     <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="./assets/css/style-mb.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="./assets/css/style-global-mb.css">
 
 </head>
 
 <body>
     <div class="container-mb">
+        <div class="header bg-[var(--bg-header)] 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-mobile.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-white">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-white">Tài khoản</span>
+                            <i class="fa-solid fa-caret-down ml-[5px] text-white"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="page-list-deal">
             <div class="container">
-                <div class="breadcrumb">
-                    <a href="javascript:void(0)" onclick="history.back()" class="link-back">
+                <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 block">Deal hot</a>
+                    <a href="" class="name text-center w-[calc(100%_-32px)] mr-[16px]">Đấu giá</a>
                 </div>
-                <div class="clearfix"></div>
 
-                <div class="background-deal">
-                    <h2 class="title">
+                <div class="background-deal bg-[var(--bg-deal)] rounded-[15px] p-[10px] mt-[10px]">
+                    <h2 class="title flex items-center justify-center mb-[10px]">
                         <i class="icon-deal"></i>
-                        <p>Deal hot</p>
+                        <p class="uppercase text-[24px] font-[700] text-white">Deal hot</p>
                     </h2>
-                    <div class="tab-list d-flex align-items space-between">
-                        <a href="javascript:void(0)" class="item active">
-                            <p>Đang diễn ra 20:00</p>
-                            <div class="box-time">
-                                <span>Còn lại</span>
-                                <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="tab-list flex items-center justify-between mb-[10px]">
+                        <a href="javascript:void(0)"
+                            class="item w-[calc(100%_/2_-5px)] text-white p-[10px] rounded-[15px_15px_0_0] background-blue hover:background-blue">
+                            <p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Đang diễn ra 20:00</p>
+                            <div class="box-time flex items-center">
+                                <span class="text-[13px]">Còn lại</span>
+                                <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>
-                            <div class="box-time">
-                                <span>Còn lại</span>
+                        <a href="javascript:void(0)"
+                            class="item w-[calc(100%_/2_-5px)] bg-[#afafaf] text-white p-[10px] rounded-[15px_15px_0_0] hover:background-blue">
+                            <p class="text-[16px] text-center font-[700] mb-[5px] uppercase">Sắp diễn ra 20:00</p>
+                            <div class="box-time flex items-center">
+                                <span class="text-[13px]">Còn lại</span>
                                 <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>
                         </a>
                     </div>
-                    <div class="product-list d-flex flex-wrap">
-                        <div class="item-deal">
-                            <div class="images">
-                                <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                    <div class="product-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">
-                                    <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 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-mb.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-mb.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-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                        <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">
-                                    <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 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-mb.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-mb.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-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                        <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">
-                                    <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 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-mb.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-mb.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-mb.html"><img src="./assets/images/icon-pro-top.png" alt=""></a>
+                        <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">
-                                    <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 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-mb.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-mb.html" class="btn-add">Mua ngay</a>
-                            </div>
-                        </div>
-                        <div class="item-deal">
-                            <div class="images">
-                                <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" 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>
-                                <a href="./deal-detail-mb.html" class="name line-clamp-2">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="saleoff">-30%</div>
-                                    </div>
-                                </div>
-                                <a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
-                            </div>
-                        </div>
-                        <div class="item-deal">
-                            <div class="images">
-                                <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" 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>
-                                <a href="./deal-detail-mb.html" class="name line-clamp-2">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="saleoff">-30%</div>
-                                    </div>
-                                </div>
-                                <a href="./deal-detail-mb.html" class="btn-add">Mua ngay</a>
-                            </div>
-                        </div>
-                        <div class="item-deal">
-                            <div class="images">
-                                <a href="./deal-detail-mb.html"><img src="./assets/images/icon-pro-top.png" 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>
-                                <a href="./deal-detail-mb.html" class="name line-clamp-2">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="saleoff">-30%</div>
-                                    </div>
-                                </div>
-                                <a href="./deal-detail-mb.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>
-                    <div class="paging d-flex align-items space-center">
-                        <a href="" class="item active">1</a>
-                        <a href="" class="item">1</a>
-                        <a href="" class="item">1</a>
-                        <a href="" class="item">1</a>
-                        <a href="" class="item">1</a>
+                    <div class="paging flex items-center justify-center">
+                        <a href=""
+                            class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#166dd8] background-blue hover:background-blue hover:border-blue">1</a>
+                        <a href=""
+                            class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                        <a href=""
+                            class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                        <a href=""
+                            class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                        <a href=""
+                            class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                    </div>
+                </div>
+            </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>
diff --git a/listdeal.html b/listdeal.html
index b9a2020..ec8b51d 100644
--- a/listdeal.html
+++ b/listdeal.html
@@ -4,31 +4,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <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">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.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-[#166dd8] 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>
@@ -36,17 +35,20 @@
     </div>
     <div class="page-list-deal">
         <div class="container">
-            <div class="breadcrumb">
-                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix">
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
-                        <a href="/" itemprop="item" class="nopad-l">
-                            <span itemprop="name"><span>Trang chủ</span></span>
-                        </a> <i>/</i>
+            <div class="breadcrumb w-full float-left p-0 m-0 bg-none">
+                <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul float-left list-none clearfix">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
+                        <a href="/" itemprop="item" class="nopad-l text-[14px]">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]"><span>Trang
+                                    chủ</span></span>
+                        </a> <i class="leading-[40px] m-[0_10px]">/</i>
                         <meta itemprop="position" content="1">
                     </li>
-                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
+                    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
+                        class="float-left list-none">
                         <a href="/" itemprop="item">
-                            <span itemprop="name">
+                            <span itemprop="name" class="float-left flex items-center leading-[40px]">
                                 Deal hot
                             </span>
                         </a>
@@ -56,25 +58,29 @@
             </div>
             <div class="clearfix"></div>
 
-
-            <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 mb-[10px]">
                     <i class="icon-deal"></i>
-                    <p>Deal hot</p>
+                    <p class="uppercase text-white text-[32px] font-[700]">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>
@@ -82,294 +88,428 @@
                         </div>
                     </a>
                 </div>
-                <div class="product-list d-flex flex-wrap">
-                    <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 flex-wrap 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 Loudspeaker
-                                Aria Evo X
+                            <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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" 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="" class="name line-clamp-2">Loa Floorstanding Focal Loudspeaker Aria Evo X
+                            <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="" class="btn-add">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>
-                        <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>
-                            <a href="" class="name line-clamp-2">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="saleoff">-30%</div>
-                                </div>
-                            </div>
-                            <a href="" 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>
-                <div class="paging d-flex align-items space-center">
-                    <a href="" class="item active">1</a>
-                    <a href="" class="item">1</a>
-                    <a href="" class="item">1</a>
-                    <a href="" class="item">1</a>
-                    <a href="" class="item">1</a>
+                <div class="paging flex items-center justify-center">
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#166dd8] background-blue hover:background-blue hover:border-blue">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
+                    <a href=""
+                        class="item w-[30px] h-[30px] leading-[30px] text-center mr-[10px] rounded-[5px] block text-white border-[1px] border-[#fff] hover:background-blue hover:border-blue">1</a>
                 </div>
             </div>
 
         </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-[#166dd8] p-[10px] rounded-[15px]">
+                    <h2 class="title text-center text-[32px] font-[600] uppercase text-[#110e83] 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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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-[#f8f8f8]">
+                            <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>
@@ -377,56 +517,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>
