diff --git a/assets/script/style.css b/assets/script/style.css
index c643270..329253b 100644
--- a/assets/script/style.css
+++ b/assets/script/style.css
@@ -11488,6 +11488,9 @@ strong {
   .lucide--download-cloud {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 13v8l-4-4m4 4l4-4'/%3E%3Cpath d='M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284'/%3E%3C/g%3E%3C/svg%3E");
   }
+  .lucide--printer {
+    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><path d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/><rect x='6' y='14' width='12' height='8' rx='1'/></svg>");
+  }
   .lucide--edit-2 {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E");
   }
@@ -11548,6 +11551,10 @@ strong {
   .lucide--flag {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528'/%3E%3C/svg%3E");
   }
+  .lucide--file-x {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='m14.5 12.5-5 5'/%3E%3Cpath d='m9.5 12.5 5 5'/%3E%3C/svg%3E");
+  }
+
   .lucide--flame {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0a5 5 0 0 1 1-3a1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E");
   }
diff --git a/template/javascript/index.html b/template/javascript/index.html
index 0edf94c..356b3fc 100644
--- a/template/javascript/index.html
+++ b/template/javascript/index.html
@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 
 {% if global.module == 'home' %}
 
diff --git a/template/order/bargain.html b/template/order/bargain.html
index 1ba19a3..e10be38 100644
--- a/template/order/bargain.html
+++ b/template/order/bargain.html
@@ -1,38 +1,33 @@
-<div
-    class="bg-white m-[16px_0_16px_16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
-    <p class="leading-[30px] text-[24px] font-bold m-[0_0_12px]"> Danh sách mặc cả giá </p>
-    <div class="flex flex-wrap mb-[20px] leading-[36px]">
-        <a href="" style="background: #0041E8;color: #fff;"
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+<div class="bg-white shadow p-3 rounded-sm">
+    <p class="text-2xl font-bold mb-3"> Danh sách mặc cả giá </p>
+    <div class="flex flex-wrap gap-3">
+        <a href="" class="btn btn-active">
             Chưa xử lý
         </a>
 
-        <a href=""
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+        <a href="" class="btn">
             Thành công
         </a>
 
-        <a href=""
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+        <a href="" class="btn">
             Hủy bỏ
         </a>
     </div>
 
-    <p class="m-[20px_0]">
+    <p class="mt-5">
         Tổng số mặc cả giá nhận được: <b> 1.458 </b>
     </p>
 
-    <div
-        class="lg:max-w-[1600px] xl:max-w-[1600px] md:max-w-[1600px] sm:max-w-[1600px] 2xl:max-w-full overflow-x-auto whitespace-nowrap">
+    <div class="mt-5 overflow-x-auto whitespace-nowrap border border-base-200 rounded-[4px]">
         <table class="table table-pin-rows table-pin-cols">
-            <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
-                <tr class="font-[600]">
-                    <td width="50"> STT </td>
-                    <td width="200"> Thời gian </td>
-                    <td width="300"> Khách hàng </td>
+            <thead>
+                <tr class="bg-base-200 text-black">
+                    <td> STT </td>
+                    <td> Thời gian </td>
+                    <td> Khách hàng </td>
                     <td> Thông tin sản phẩm </td>
-                    <td width="220"> Trạng thái </td>
-                    <td width="50"> </td>
+                    <td> Trạng thái </td>
+                    <td></td>
                 </tr>
             </thead>
 
@@ -55,39 +50,38 @@
 
                     <td>
                         <div id="status_1">
-                            <span
-                                class="text-[#6DC580] border-[#6DC580] bg-[#F0F9F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                                Thành công </span>
-                            <span
-                                class="text-[#0041E8] border-[#0041E8] bg-[#F7F5FF] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                                Chưa xử lý </span>
-                            <span
-                                class="text-[#E00000] border-[#E00000] bg-[#F9F2F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                                Hủy bỏ </span>
+                            <span class="badge badge-success badge-sm badge-soft">Thành công </span>
+                            <span class="badge badge-warning badge-sm badge-soft"> Chưa xử lý </span>
+                            <span class="badge badge-error badge-sm badge-soft">Hủy bỏ </span>
 
-                            <a href="javascript:edit_order_status(1)" title="Chỉnh sửa"
-                                class="icons inline-block w-[18px_!important] h-[18px_!important] bg-[transparent_!important] border-[transparent_!important] rounded-[0_!important]"
-                                style="background-position: -113px -88px;vertical-align: sub;"></a>
+                            <a href="javascript:edit_order_status(1)" title="Chỉnh sửa" class=""><i
+                                    class="iconify lucide--pencil mt-1 text-primary"></i></a>
                         </div>
 
-                        <p class="mt-[7px]"> Lúc 28-02-2015, 12:40 pm </p>
+                        <p class="mt-2"> Lúc 28-02-2015, 12:40 pm </p>
                     </td>
 
                     <td align="center">
-                        <a href="" class="icons icon-delete" title="Xóa"></a>
+                        <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <span
+                                class="iconify lucide--trash-2 tw-rla"></span></a>
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <div class="paging">
-        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
-        <a href="" class="current">1</a>
-        <a href="">2</a>
-        <a href="">3</a>
-        <a href="">4</a>
-        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+    <div class="join mt-5 justify-center flex items-cente r">
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-left"></span>
+        </a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">1</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item btn-active">2</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">3</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">4</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">5</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-right"></span>
+        </a>
     </div>
 </div>
 
diff --git a/template/order/detail.html b/template/order/detail.html
index dd24a47..39bd351 100644
--- a/template/order/detail.html
+++ b/template/order/detail.html
@@ -1,23 +1,23 @@
-<div class="global-breadcrumb-container">
-    <a href="/admin/order/home">Danh sách đơn hàng</a>
-    <a href="">Chi tiết đơn hàng</a>
+<div class="breadcrumbs tw-zab tw-zpa tw-iia">
+    <ul>
+        <li><a href="/admin/order/home" data-discover="true">Danh sách đơn hàng</a></li>
+        <li class="">Chi tiết đơn hàng</li>
+    </ul>
 </div>
 
-<div class="order-detail-page leading-[20px] max-w-[1141px] m-auto">
+<div class="order-detail-page w-[80%] mt-3 m-auto">
 
-    <div class="shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] rounded-[10px] bg-white p-[15px] m-[12px_0]">
+    <div class="shadow  rounded-sm bg-white p-3">
 
         <div class="flex items-center justify-between">
             <b class="text-[18px] font-[700] mb-[3px] leading-[23px]">Đơn hàng #000-368</b>
             <div class="text-right">
-                <a href="" title="In đơn hàng"
-                    class="hover:bg-[#0041E8] hover:text-[#fff] inline-block text-center text-[15px] text-[#9E9E9E] rounded-[4px] ml-[10px] p-[8px] border border-[#ececec] bg-[#F9F9F9]">
-                    <i class="fas fa-print"></i>
+                <a href="" title="In đơn hàng" class="btn ">
+                    <i class="iconify lucide--printer"></i>
                     <span>In đơn hàng</span>
                 </a>
-                <a href="" title=""
-                    class="hover:bg-[#0041E8] hover:text-[#fff] inline-block text-center text-[15px] text-[#9E9E9E] rounded-[4px] ml-[10px] p-[8px] border border-[#ececec] bg-[#F9F9F9]">
-                    <i class="far fa-envelope"></i>
+                <a href="" title="" class="btn">
+                    <i class="iconify lucide--mail"></i>
                     <span>Gửi email</span>
                 </a>
             </div>
@@ -25,14 +25,13 @@
         <p class="mt-[5px]">Thời gian: 16-11-2023, 9:59 am</p>
     </div>
 
-    <div class="flex flex-wrap justify-between">
-        <div
-            class="shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] rounded-[15px] bg-white 2xl:w-[852px] lg:w-[100%] md:w-[100%] sm:w-[100%] p-[16px] mb-[25px]">
-            <div class="mb-[20px]">
-                <p class="text-[16px] font-[700] mb-[13px]">1. Khách hàng</p>
+    <div class="grid grid-cols-3 mt-5 gap-3">
+        <div class="col-span-2 shadow  rounded-sm bg-white p-3">
+            <div class="mb-3">
+                <b class="">1. Khách hàng</b>
 
-                <div class="order-page-table">
-                    <table>
+                <div class="order-page-table mt-2 border border-base-200 rounded-sm">
+                    <table class="table">
                         <tr>
                             <td width="200"> Tên </td>
                             <td> Nguyen Duc Quan </td>
@@ -72,17 +71,17 @@
             </div>
 
 
-            <div class="mb-[20px]">
-                <p class="text-[16px] font-[700] mb-[13px]">2. Sản phẩm</p>
+            <div class="mb-3">
+                <b class="">2. Sản phẩm</b>
 
                 <div
-                    class="lg:max-w-[1600px] ms:max-w-[1600px] md:max-w-[1600px] 2xl:w-[100%] 2xl:overflow-hidden overflow-x-auto lg:whitespace-nowrap ms:whitespace-nowrap md:whitespace-nowrap 2xl:whitespace-normal">
+                    class="overflow-x-auto lg:whitespace-nowrap ms:whitespace-nowrap md:whitespace-nowrap 2xl:whitespace-normal mt-2 border border-base-200 rounded-sm">
                     <table class="table text-center">
-                        <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
+                        <thead class="bg-base-200">
                             <tr>
                                 <td> STT </td>
                                 <td> Mã kho </td>
-                                <td width="210"> Tên </td>
+                                <td> Tên </td>
                                 <td> Giá </td>
                                 <td> SL </td>
                                 <td> Tổng </td>
@@ -93,9 +92,9 @@
                         <tbody>
                             <tr>
                                 <td> 1 </td>
-                                <td class="text-[#0041E8]"> HH0003 </td>
+                                <td class="text-primary"> HH0003 </td>
                                 <td class="text-left">
-                                    <a href="" target="_blank" class="text-[#0041E8]"> HHWS - CORE i9 9900X | 32G |
+                                    <a href="" target="_blank" class="text-primary"> HHWS - CORE i9 9900X | 32G |
                                         NVIDIA RTX 2060 6GB </a>
                                 </td>
                                 <td> 34.800.000 VND (chiếc) </td>
@@ -109,11 +108,11 @@
             </div>
 
 
-            <div class="mb-[20px]">
-                <p class="text-[16px] font-[700] mb-[13px]">3. Số tiền</p>
+            <div class="mb-3">
+                <b class="">3. Số tiền</b>
 
-                <div class="order-page-table">
-                    <table>
+                <div class="order-page-table mt-3 border border-base-200 rounded-sm">
+                    <table class="table">
                         <tr>
                             <td width="330"> Tổng giá trị </td>
                             <td class="font-bold">
@@ -150,12 +149,12 @@
             </div>
 
 
-            <div class="mb-[20px]">
-                <p class="text-[16px] font-[700] mb-[13px]">4. Lịch sử cập nhật</p>
+            <div class="mb-3">
+                <b class="">4. Lịch sử cập nhật</b>
 
-                <div class="order-page-table text-center">
-                    <table>
-                        <thead class="bg-[#F6F6F6]">
+                <div class="order-page-table text-center mt-3 border border-base-200 rounded-sm">
+                    <table class="table">
+                        <thead class="bg-base-200">
                             <tr>
                                 <td> STT </td>
                                 <td> Phân loại </td>
@@ -183,23 +182,19 @@
             </div>
         </div>
 
-        <div class="lg:w-[100%] md:w-[100%] sm:w-[100%]  rounded-[10px] 2xl:w-[273px] leading-[18px]">
-
-            <div
-                class="rounded-[15px] w-[100%] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+        <div class="">
+            <div class="rounded-sm bg-white p-3 shadow">
                 <p class="mb-[7px] font-[700]">Nhân sự xử lý đơn hàng</p>
-                <p>
+                <p class="flex items-center gap-3">
                     <span class="inline-block">Uyên Hura</span>
-                    <a href="javascript:$('#js-assign-holder').toggle()" title="Chỉnh sửa"
-                        class="icons icon-edit inline-block w-[18px] h-[18px]"
-                        style="background-position: -111px -86px;vertical-align: sub;"></a>
+                    <a href="javascript:$('#js-assign-holder').toggle()" title="Chỉnh sửa"><i
+                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                 </p>
 
-                <div id="js-assign-holder" style="display: none">
+                <div id="js-assign-holder" class="hidden">
                     <select
                         onchange="OrderManagement.assignAdmin('130', this.value, this.options[this.selectedIndex].text)"
-                        class="mt-[10px] block w-[100%] h-[30px] border border-[#D8D8D8] rounded-[4px]"
-                        id="js-assign-admin">
+                        class="select mt-2" id="js-assign-admin">
                         <option value="">--Người thực hiện --</option>
                         <option value="24">Uyên Hura</option>
                         <option value="23">HuraSoft</option>
@@ -209,93 +204,78 @@
                 </div>
             </div>
 
-            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
+            <div class="rounded-sm bg-white p-3 shadow mb-4 mt-3">
                 <p class="mb-[7px] font-[700]"> Trạng thái thanh toán </p>
 
-                <p class="flex items-center m-[8px_0]">
-                    <span style="background: #E00000"
-                        class="leading-[30px] mr-[5px] p-[0_9px] rounded-[15px] text-[#fff]">
+                <div class="flex items-center mt-3 gap-3">
+                    <span class="badge badge-error badge badge-soft">
                         Chưa thanh toán
                     </span>
+                    <a href="javascript:$('#js-payment-status-holder').show()" title="Chỉnh sửa"><i
+                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
+                </div>
 
-                    <a href="javascript:$('#js-payment-status-holder').show()" title="Chỉnh sửa"
-                        class="icons icon-edit inline-block w-[18px] h-[18px]"
-                        style="background-position: -111px -86px;vertical-align: sub;"></a>
-                </p>
-
-                <div id="js-payment-status-holder" style="display: none;">
-                    <div>
+                <div id="js-payment-status-holder" class="hidden">
+                    <div class="mt-3">
                         <textarea placeholder="Ghi chú (v.d. Chuyển khoản ngân hàng VCB, số tham chiếu 1234)"
-                            id="js-payment-comment"
-                            class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                            id="js-payment-comment" class="textarea"></textarea>
                     </div>
 
-                    <div style="margin: 5px 0 10px;">
+                    <div style="margin: 10px 0;">
                         <input type="button" onclick="OrderManagement.update_payment_status()"
                             title="Click để xác nhận đơn đã được thanh toán đủ" value="Đã nhận đủ"
-                            class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]">
-
-                        <input type="button" value="Quay lại"
-                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E]"
+                            class="btn btn-active">
+                        <input type=" button" value="Quay lại" class="btn"
                             onclick="$('#js-payment-status-holder').hide()">
                     </div>
                 </div>
 
-                <p>Khách chọn: Thanh toán bằng VNPAY</p>
+                <p class="mt-3">Khách chọn: Thanh toán bằng VNPAY</p>
             </div>
 
-            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
-                <p class="mb-[7px] font-[700]"> Trạng thái vận chuyển </p>
+            <div class="mt-3 rounded-sm bg-white p-3 shadow mb-4">
+                <p class="font-bold"> Trạng thái vận chuyển </p>
 
-                <p class="flex items-center m-[8px_0]">
-                    <span style="background: #E00000"
-                        class="leading-[30px] mr-[5px] p-[0_9px] rounded-[15px] text-[#fff]">
+                <p class="flex items-center mt-3 gap-3">
+                    <span class="badge badge-error badge badge-soft">
                         Chưa chuyển
                     </span>
-
-                    <a href="javascript:$('#js-fulfillment-status-holder').show()" title="Chỉnh sửa"
-                        class="icons icon-edit inline-block w-[18px] h-[18px]"
-                        style="background-position: -111px -86px;vertical-align: sub;"></a>
+                    <a href="javascript:$('#js-fulfillment-status-holder').show()" title="Chỉnh sửa"><i
+                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                 </p>
 
                 <div id="js-fulfillment-status-holder" style="display: none;">
-                    <div>
+                    <div class="mt-5">
                         <textarea placeholder="Ghi chú (v.d. Chuyển phát ViettelPost, mã phiếu gửi 1234)"
-                            id="js-fulfillment-comment"
-                            class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                            id="js-fulfillment-comment" class="textarea"></textarea>
                     </div>
 
-                    <div style="margin: 5px 0 10px;">
+                    <div style="margin: 10px 0;">
                         <input type="button" onclick="OrderManagement.update_fulfillment_status()"
                             title="Click để xác nhận đơn đã được vận chuyển thành công" value="Đã vận chuyển"
-                            class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]">
-
-                        <input type="button" value="Quay lại"
-                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E]"
+                            class="btn btn-active" />
+                        <input type=" button" value="Quay lại" class="btn"
                             onclick="$('#js-fulfillment-status-holder').hide()">
                     </div>
                 </div>
 
-                <p>Khách chọn: Giao hàng tiêu chuẩn</p>
+                <p class="mt-3">Khách chọn: Giao hàng tiêu chuẩn</p>
             </div>
 
-            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
-                <p class="mb-[7px] font-[700]">
+            <div class="mt-3 rounded-sm bg-white p-3 shadow mb-4">
+                <p class="font-bold">
                     Trạng thái đơn hàng
-                    <a href="javascript:$('#js-order-status-holder').show()" title="Chỉnh sửa"
-                        class="icons icon-edit inline-block w-[18px] h-[18px]"
-                        style="background-position: -111px -86px;vertical-align: sub;"></a>
+                    <a href="javascript:$('#js-order-status-holder').toggle()" title="Chỉnh sửa"><i
+                            class="iconify lucide--pencil mt-1 text-primary"></i></a>
                 </p>
 
                 <div id="js-order-status-holder" style="display: none;">
-                    <div>
-                        <textarea placeholder="Ghi chú" id="js-order-comment"
-                            class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                    <div class="mt-3">
+                        <textarea placeholder="Ghi chú" id="js-order-comment" class="textarea"></textarea>
                     </div>
 
-                    <div style="margin-top: 5px;">
-                        <select id="js-order-status-select"
-                            class="m-[10px_0] block w-[100%] h-[30px] border border-[#D8D8D8] rounded-[4px]">
+                    <div class="mt-3">
+                        <select id="js-order-status-select" class="select">
                             <option value="">--Chọn trạng thái--</option>
                             <option value="new">Mới</option>
                             <option value="processing">Đang xử lý</option>
@@ -305,26 +285,22 @@
                         </select>
 
                         <input type="button" onclick="OrderManagement.update_order_status()" title="Click để xác nhận"
-                            value="Lưu lại"
-                            class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff] mt-[15px]">
+                            value="Lưu lại" class="btn btn-active mt-3">
 
-                        <input type="button" value="Quay lại"
-                            class="bg-[#ECECEC] cursor-pointer font-[500] h-[32px] p-[0_12px] rounded-[4px] text-[#9E9E9E] mt-[15px]"
-                            onclick="$('#js-order-status-holder').hide()">
+                        <input type="button" value="Quay lại" class="btn" onclick="$('#js-order-status-holder').hide()">
                     </div>
                 </div>
             </div>
 
-            <div class="rounded-[15px] bg-white p-[18px_16px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] mb-[16px]">
-                <p class="mb-[7px] font-[700]"> Ghi chú </p>
+            <div class="mt-3 rounded-sm bg-white p-3 shadow mb-4">
+                <p class="font-bold"> Ghi chú </p>
 
-                <textarea placeholder="Ghi chú" id="js-comment"
-                    class="m-[10px_0] block w-[100%] min-h-[76px] max-h-[120px] border border-[#D8D8D8] rounded-[4px] p-[8px]"></textarea>
+                <textarea placeholder=" Ghi chú" id="js-comment" class="textarea"></textarea>
 
                 <div>
                     <span id="js-comment-status-holder"></span>
                     <input type="button" onclick="OrderManagement.update_admin_comment()" value="Lưu lại"
-                        class="bg-[#0041E8] cursor-pointer font-[500] h-[32px] p-[0_15px] rounded-[4px] text-[#fff]">
+                        class="btn btn-active mt-3">
                 </div>
             </div>
 
diff --git a/template/order/detail_new.html b/template/order/detail_new.html
index 6bea97f..e69de29 100644
--- a/template/order/detail_new.html
+++ b/template/order/detail_new.html
@@ -1 +0,0 @@
-template/order/detail_new.html
\ No newline at end of file
diff --git a/template/order/home.html b/template/order/home.html
index b749aa7..a24c6d2 100644
--- a/template/order/home.html
+++ b/template/order/home.html
@@ -1,15 +1,15 @@
-<div class="order-page m-[16px_0_16px_16px] p-[20px_15px] bg-white">
-    <p class="m-[0_0_10px] text-[24px] font-[600] leading-[31px]">Danh sách đơn hàng </p>
+<div class="bg-white shadow p-3 rounded-sm">
+    <p class="text-2xl font-bold">Danh sách đơn hàng </p>
 
-    <div class="order-page-title flex flex-wrap mb-[17px] leading-[36px]">
-        <a href="/admin/?opt=order" class="current">Tất cả</a>
-        <a href="/admin/?opt=order&list=mine">Tôi được giao</a>
-        <a href="/admin/?opt=order&list=new">Đơn mới</a>
-        <a href="/admin/?opt=order&list=unpaid">Chưa thanh toán</a>
-        <a href="/admin/?opt=order&list=unfulfilled">Chưa ship</a>
+    <div class="order-page-title flex flex-wrap mt-3 gap-1">
+        <a href="/admin/?opt=order" class="btn btn-active">Tất cả</a>
+        <a href="/admin/?opt=order&list=mine" class="btn">Tôi được giao</a>
+        <a href="/admin/?opt=order&list=new" class="btn">Đơn mới</a>
+        <a href="/admin/?opt=order&list=unpaid" class="btn">Chưa thanh toán</a>
+        <a href="/admin/?opt=order&list=unfulfilled" class="btn">Chưa ship</a>
     </div>
 
-    <form method="get" action="" enctype="multipart/form-data" id="form-search">
+    <form method="get" action="" enctype="multipart/form-data" id="form-search" class="mt-5">
         <input type="hidden" name="opt" value="order">
         <input type="hidden" name="status" id="js-status" value="">
         <input type="hidden" name="update_by" id="update_by" value="">
@@ -17,83 +17,64 @@
         <input type="hidden" name="payment" id="js-payment" value="">
         <input type="hidden" name="fullfillment" id="js-fullfillment" value="">
 
-        <div
-            class="flex flex-wrap items-center mb-[15px] p-[15px_16px] border border-[#F6F6F6] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
-            <div class="flex items-center flex-wrap mb-[10px] w-[100%] 2xl:w-[60%] lg:w-[60%] sm:w-[100%]">
-                <input type="text" name="orderCode" value="" placeholder="Mã đơn hàng"
-                    class="w-[40%] h-[36px] text-[14px] mr-[10px] rounded-[4px] input input-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
-                <span class="whitespace-nowrap mr-[10px] w-[5%]">hoặc</span>
-
+        <div class="flex flex-wrap items-center p-3  shadow gap-5">
+            <div class="flex items-center gap-3 w-[50%]">
+                <input type="text" name="orderCode" value="" placeholder="Mã đơn hàng" class="w-full rounded-sm input ">
+                <span class="whitespace-nowrap">hoặc</span>
                 <input type="text" name="q" value="" placeholder="Tìm người mua (* tên, email, điện thoại)"
-                    class="w-[45%] h-[36px] text-[14px] mr-[10px] rounded-[4px] input input-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
+                    class="w-full rounded-sm input">
             </div>
+            <div class="flex items-center gap-3">
+                <label for="dob" class="input data-error:input-error w-full">
+                    <span class="iconify lucide--calendar-1 size-4.5"></span>
+                    <input id="dob" type="date" placeholder="+84 78965 12335" :value="getData('dob')"
+                        @input="updateData('dob', $event.target.value)" :data-error="hasError('dob')" name="dob" />
+                </label>
+                <label for="dob" class="input data-error:input-error w-full">
+                    <span class="iconify lucide--calendar-1 size-4.5"></span>
+                    <input id="dob" type="date" placeholder="+84 78965 12335" :value="getData('dob')"
+                        @input="updateData('dob', $event.target.value)" :data-error="hasError('dob')" name="dob" />
+                </label>
 
-            <div class="flex items-center mb-[10px]">
-                <div date-rangepicker class="flex items-center" datepicker-format="dd/mm/yyyy" datepicker-buttons
-                    datepicker-autoselect-today>
-                    <div class="relative">
-                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-                            <i
-                                class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[1px] left-[10px] leading-[35px]"></i>
-                        </div>
-                        <input name="start-time" type="date"
-                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-[4px] focus:ring-blue-500 focus:border-blue-500 block w-[130px] h-[36px] ps-[30px] p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                            placeholder="Từ ngày">
-                    </div>
-                    <div class="relative ml-[15px]">
-                        <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-                            <i
-                                class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute top-[2px] left-[10px] leading-[32px]"></i>
-                        </div>
-                        <input name="end-time" type="date"
-                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-[130px] h-[36px] ps-[30px] p-2.5 rounded-[4px]  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                            placeholder="Đến ngày">
-                    </div>
-                </div>
-
-                <input type="submit" value="Tìm kiếm"
-                    class="bg-[#0041E8] rounded-[4px] text-[#fff] font-[500] h-[34.5px] p-[0_10px] cursor-pointer ml-[15px]">
+                <input type="submit" value="Tìm kiếm" class="btn btn-primary" onclick="runFilter()">
             </div>
         </div>
     </form>
 
-    <div class="flex items-center flex-wrap justify-between m-[14px_0_20px]">
-        <div class="2xl:w-[50%] md:w-[100%]">
-            <p class="m-[0_55px_0_0] inline-block">
+    <div class="flex items-center flex-wrap justify-between mt-5">
+        <div class="2xl:w-[50%] md:w-[100%] flex items-center gap-5">
+            <p class="inline-block ">
                 Tổng số đơn hàng: <b>1.458</b>
             </p>
 
-            <p class="m-0 inline-block">
+            <p class="inline-block">
                 Tổng giá trị: <b>14.948.348.000 VNĐ</b>
             </p>
         </div>
 
-        <div class="2xl:w-[50%] md:w-[100%] flex 2xl:justify-end md:justify-start md:mt-[10px]">
-            <a href=""
-                class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block">
-                <i class="fas fa-print m-[0_4px_0_0]"></i> In danh sách
+        <div class="2xl:w-[50%] md:w-[100%] flex 2xl:justify-end md:justify-start md:mt-[10px] gap-5">
+            <a href="" class="btn">
+                <i class="iconify lucide--printer"></i> In danh sách
             </a>
 
-            <a href=""
-                class="rounded-[4px] bg-[#F5F7FF] border border-[#0041E8] hover:text-[#fff] hover:bg-[#0041E8] leading-[36px] font-[600] text-[#0041E8] p-[0_14px] inline-block m-[0_0_0_15px]">
-                <i class="far fa-file-excel m-[0_4px_0_0]"></i> Tải file excel
+            <a href="" class="btn">
+                <i class="iconify lucide--download"></i> Tải file excel
             </a>
         </div>
     </div>
 
-    <div class="w-full overflow-x-auto sm:whitespace-nowrap">
-        <table class="table table-pin-rows table-pin-cols">
-            <thead class="bg-[#f6f6f6] text-[14px] font-500 text-[#000]">
+    <div class="overflow-x-auto sm:whitespace-nowrap border border-base-200 rounded-[4px] mt-5">
+        <table class="table">
+            <thead class="bg-base-200">
                 <tr>
                     <td> STT </td>
-                    <td class="w-[85px]"> Mã số </td>
-                    <td class="w-[165px]"> Thời gian </td>
+                    <td> Mã số </td>
+                    <td> Thời gian </td>
                     <td> Khách hàng </td>
                     <td> Tỉnh/TP </td>
-                    <td class="w-[150px]"> Giá trị </td>
-                    <td width="150">
-                        <select onchange="setHiddenValue('js-payment', this.value); runFilter()"
-                            class="select h-[35px] min-h-[35px] min-w-[110px] pl-[5px]">
+                    <td> Giá trị </td>
+                    <td>
+                        <select onchange="setHiddenValue('js-payment', this.value); runFilter()" class="select">
                             <option value="">Thanh toán</option>
                             {% for _item in page.payment_status_list %}
                             <option value="{{ _item[1].id }}">{{ _item[1].title }}</option>
@@ -101,9 +82,8 @@
                         </select>
                     </td>
 
-                    <td width="160">
-                        <select onchange="setHiddenValue('js-fullfillment', this.value); runFilter()"
-                            class="select h-[35px] min-h-[35px] min-w-[110px] pl-[5px]">
+                    <td>
+                        <select onchange="setHiddenValue('js-fullfillment', this.value); runFilter()" class="select">
                             <option value="">Vận chuyển</option>
                             {% for _item in page.fullfillment_status_list %}
                             <option value="{{ _item[1].id }}">{{ _item[1].title }}</option>
@@ -111,9 +91,8 @@
                         </select>
                     </td>
 
-                    <td width="170">
-                        <select onchange="setHiddenValue('js-status', this.value); runFilter()"
-                            class="select h-[35px] min-h-[35px] min-w-[140px] pl-[5px]">
+                    <td>
+                        <select onchange="setHiddenValue('js-status', this.value); runFilter()" class="select">
                             <option value="">Tình trạng đơn</option>
                             {% for _item in page.order_status_list %}
                             <option value="{{ _item[1].id }}">{{ _item[1].title }}</option>
@@ -121,9 +100,8 @@
                         </select>
                     </td>
 
-                    <td width="180">
-                        <select onchange="setHiddenValue('assign_to', this.value); runFilter()"
-                            class="select h-[35px] min-h-[35px] min-w-[150px] pl-[5px]">
+                    <td>
+                        <select onchange="setHiddenValue('assign_to', this.value); runFilter()" class="select">
                             <option value="">Người được giao</option>
                         </select>
                     </td>
@@ -133,58 +111,68 @@
             </thead>
 
             <tbody>
-                <tr class="hover">
+                <tr>
                     <td> 1 </td>
                     <td>
-                        <a href="/admin/order/detail?id=369"> 000-369 </a>
+                        <a class="link-primary" href="/admin/order/detail?id=369"> 000-369 </a>
                     </td>
                     <td> 16-11-2023, 9:59 am </td>
                     <td>
-                        <a href=""> Nguyen Duc Quan </a>
+                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
                     </td>
                     <td> Hà Nội </td>
                     <td> 69.600.000 </td>
-                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
-                            style="background-color: red"></span> </td>
-                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
-                            style="background-color: yellow"></span> </td>
-                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
-                            style="background-color: green"></span> </td>
                     <td>
-                        <a href=""> Nguyen Duc Quan </a>
+                        <div class="badge badge-success badge-sm badge-soft">Thành công</div>
                     </td>
                     <td>
-                        <div class="flex justify-center">
-                            <a href="/admin/order/detail?id=369" class="icons icon-edit mr-[7px]" title="Chi tiết"></a>
-                            <a href="" class="icons icon-delete" title="Xóa"></a>
+                        <div class="badge badge-sm badge-ghost">Chờ xử lý</div>
+                    </td>
+                    <td>
+                        <div class="badge badge-error badge-sm badge-soft">Lỗi</div>
+                    </td>
+                    <td>
+                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
+                    </td>
+                    <td>
+                        <div class="flex justify-center gap-2">
+                            <a href="/admin/order/detail?id=369" class="btn btn-soft btn-xs btn-square"
+                                title="Chi tiết"> <span class="iconify lucide--eye tw-rla"></span></a>
+                            <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <span
+                                    class="iconify lucide--trash-2 tw-rla"></span></a>
                         </div>
                     </td>
                 </tr>
 
-                <tr class="hover">
-                    <td> 2 </td>
+                <tr>
+                    <td> 1 </td>
                     <td>
-                        <a href="/admin/order/detail?id=369"> 000-369 </a>
+                        <a class="link-primary" href="/admin/order/detail?id=369"> 000-369 </a>
                     </td>
                     <td> 16-11-2023, 9:59 am </td>
                     <td>
-                        <a href=""> test hura </a>
+                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
                     </td>
                     <td> Hà Nội </td>
                     <td> 69.600.000 </td>
-                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
-                            style="background-color: blue"></span> </td>
-                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
-                            style="background-color: yellow"></span> </td>
-                    <td> <span class="block m-auto w-[14px] h-[14px] rounded-[50%]"
-                            style="background-color: green"></span> </td>
                     <td>
-                        <a href=""> test hura </a>
+                        <div class="badge badge-success badge-sm badge-soft">Thành công</div>
                     </td>
                     <td>
-                        <div class="flex justify-center">
-                            <a href="/admin/order/detail?id=369" class="icons icon-edit mr-[7px]" title="Chi tiết"></a>
-                            <a href="" class="icons icon-delete" title="Xóa"></a>
+                        <div class="badge badge-sm badge-ghost">Chờ xử lý</div>
+                    </td>
+                    <td>
+                        <div class="badge badge-sm badge-info badge-soft">Đang xử lý</div>
+                    </td>
+                    <td>
+                        <a href="" class="link-primary"> Nguyen Duc Quan </a>
+                    </td>
+                    <td>
+                        <div class="flex justify-center gap-2">
+                            <a href="/admin/order/detail?id=369" class="btn btn-soft btn-xs btn-square"
+                                title="Chi tiết"> <span class="iconify lucide--eye tw-rla"></span></a>
+                            <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <span
+                                    class="iconify lucide--trash-2 tw-rla"></span></a>
                         </div>
                     </td>
                 </tr>
@@ -192,12 +180,17 @@
         </table>
     </div>
 
-    <div class="paging">
-        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
-        <a href="" class="current">1</a>
-        <a href="">2</a>
-        <a href="">3</a>
-        <a href="">4</a>
-        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+    <div class="join mt-5 justify-center flex items-cente r">
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-left"></span>
+        </a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">1</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item btn-active">2</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">3</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">4</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">5</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-right"></span>
+        </a>
     </div>
 </div>
\ No newline at end of file
diff --git a/template/order/paygate.html b/template/order/paygate.html
index 8a408cc..f329566 100644
--- a/template/order/paygate.html
+++ b/template/order/paygate.html
@@ -1,71 +1,61 @@
-<div
-    class="bg-white m-[16px_0_16px_16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
-    <p class="leading-[30px] text-[24px] font-bold m-[0_0_12px]"> Thanh toán qua cổng dịch vụ </p>
+<div class="bg-white shadow p-3 rounded-sm">
+    <p class="text-2xl font-bold mb-3"> Thanh toán qua cổng dịch vụ </p>
 
-    <div class="flex flex-wrap mb-[20px] leading-[36px]">
-        <a href="" style="background: #0041E8;color: #fff;"
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+    <div class="flex flex-wrap gap-3">
+        <a href="" class="btn btn-active">
             Chưa xử lý
         </a>
-
-        <a href=""
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+        <a href="" class="btn">
             Thành công
         </a>
-
-        <a href=""
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+        <a href="" class="btn">
             Hủy bỏ
         </a>
     </div>
 
     <form method="get" enctype="multipart/form-data" action="/admin/"
-        class="flex flex-wrap items-center  border-[#F6F6F6] m-[12px_0_20px] p-[15px_15px_0_15px] bg-white rounded-[10px] shadow-[0px_1px_4px_0px_rgba(0,0,0,0.10)]">
+        class="flex flex-wrap items-center mt-5 gap-3 shadow p-3 rounded-sm">
         <input type="text" name="q" id="keyword" value="" placeholder="Tìm theo email hoặc số điện thoại"
-            class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_15px_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
+            class="input  shadow" />
 
-        <div class="items-center flex mb-[15px]">
-            <p class="mr-1"> Từ ngày </p>
+        <div class="items-center flex gap-3">
+            <p class="whitespace-nowrap"> Từ ngày </p>
 
-            <div class="relative m-[0_20px_0_10px]">
-                <i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
-                <input type="date" name="from_time_date" value="" placeholder="Từ ngày"
-                    class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
-            </div>
+            <label for="dob" class="input data-error:input-error w-full">
+                <span class="iconify lucide--calendar-1 size-4.5"></span>
+                <input id="dob" type="date" placeholder="+84 78965 12335" :value="getData('dob')"
+                    @input="updateData('dob', $event.target.value)" :data-error="hasError('dob')" name="dob" />
+            </label>
+        </div>
+        <div class="items-center flex gap-3">
+            <p class="whitespace-nowrap"> Đến ngày </p>
+            <label for="dob" class="input data-error:input-error w-full">
+                <span class="iconify lucide--calendar-1 size-4.5"></span>
+                <input id="dob" type="date" placeholder="+84 78965 12335" :value="getData('dob')"
+                    @input="updateData('dob', $event.target.value)" :data-error="hasError('dob')" name="dob" />
+            </label>
         </div>
 
-        <div class="items-center flex mb-[15px]">
-            <p class="mr-1"> Đến ngày </p>
-
-            <div class="relative m-[0_20px_0_10px]">
-                <i class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
-                <input type="date" name="to_time_date" value="" placeholder="Từ ngày"
-                    class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
-            </div>
-        </div>
-
-        <input type="submit" value="Tìm kiếm"
-            class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mb-[15px] cursor-pointer rounded-[4px]">
+        <input type="submit" value="Tìm kiếm" class="btn btn-active">
     </form>
 
-    <div class="m-[14px_0] flex items-center justify-between">
-        <p>
-            Tổng số: <b class="mr-[40px]">8</b>
-            Tổng giá trị: <b>800.000 VNĐ</b>
-        </p>
+    <div class="flex items-center justify-between mt-5">
+        <div class="flex items-center gap-3">
+            <p>Tổng số: <b class="">8</b></p>
+            <p>Tổng giá trị: <b>800.000 VNĐ</b></p>
+        </div>
 
-        <a href=""
-            class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[35px] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
-            <i class="far fa-file-excel mr-2"></i>
+        <a href="" class="btn btn-outline btn-view">
+            <i class="iconify lucide--file-x"></i>
             <span>Tải file excel</span>
         </a>
     </div>
 
-    <div class="w-full sm:whitespace-nowrap overflow-x-auto">
+    <div class="w-full sm:whitespace-nowrap overflow-x-auto mt-5 border border-base-200 rounded-sm">
         <table class="table ">
-            <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
-                <tr class="font-[600]">
-                    <td width="50"> STT </td>
+            <thead>
+                <tr class="bg-base-200 text-black">
+                    <td> STT </td>
                     <td> ID </td>
                     <td> Cổng </td>
                     <td> Thời gian </td>
@@ -73,11 +63,12 @@
                     <td> Thanh toán cho </td>
                     <td> Giá trị </td>
                     <td> Trạng thái </td>
+                    <td></td>
                 </tr>
             </thead>
 
             <tbody>
-                <tr id="row_1" align="center">
+                <tr id="row_1">
                     <td> 1 </td>
 
                     <td> 10 </td>
@@ -97,24 +88,31 @@
                     <td> 100.000 </td>
 
                     <td>
-                        <span
-                            class="text-[#6DC580] border-[#6DC580] bg-[#F0F9F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                            Thành công </span>
+                        <span class="badge badge-success badge-sm badge-soft">Thành công </span>
                         <!-- <span class="text-[#0041E8] border-[#0041E8] bg-[#F7F5FF] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]"> Chưa xử lý </span>
                         <span class="text-[#E00000] border-[#E00000] bg-[#F9F2F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]"> Hủy bỏ </span> -->
                     </td>
+                    <td align="center">
+                        <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <span
+                                class="iconify lucide--trash-2 tw-rla"></span></a>
+                    </td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <div class="paging">
-        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
-        <a href="" class="current">1</a>
-        <a href="">2</a>
-        <a href="">3</a>
-        <a href="">4</a>
-        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+    <div class="join mt-5 justify-center flex items-cente r">
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-left"></span>
+        </a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">1</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item btn-active">2</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">3</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">4</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">5</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-right"></span>
+        </a>
     </div>
 </div>
 
diff --git a/template/order/wait_order.html b/template/order/wait_order.html
index e340f4e..b4d0a62 100644
--- a/template/order/wait_order.html
+++ b/template/order/wait_order.html
@@ -1,68 +1,60 @@
-<div
-    class="bg-white m-[16px_0_16px_16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
-    <p class="leading-[30px] text-[24px] font-bold m-[0_0_12px]"> Đặt chờ sản phẩm </p>
+<div class="bg-white shadow p-3 rounded-sm">
+    <p class="text-2xl font-bold mb-3"> Đặt chờ sản phẩm </p>
 
-    <div class="flex flex-wrap mb-[20px] leading-[36px]">
-        <a href="" style="background: #0041E8;color: #fff;"
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+    <div class="flex flex-wrap gap-3">
+        <a href="" class="btn btn-active">
             Chưa xử lý
         </a>
-
-        <a href=""
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+        <a href="" class="btn">
             Thành công
         </a>
-
-        <a href=""
-            class="text-[#919699] font-[500] p-[0_20px] mr-[2px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-[#fff]">
+        <a href="" class="btn">
             Hủy bỏ
         </a>
     </div>
 
     <form method="get" enctype="multipart/form-data" action="/admin/"
-        class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
+        class="mt-5 gap-3 flex items-center shadow p-3 rounded-sm">
         <input type="text" name="q" id="keyword" value="" placeholder="Tìm theo email hoặc số điện thoại"
-            class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
-        <input type="submit" value="Tìm kiếm"
-            class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
+            class="input shadow">
+        <input type="submit" value="Tìm kiếm" class="btn btn-active">
     </form>
 
-    <div class="m-[14px_0] flex items-center justify-between">
+    <div class="mt-5 flex items-center justify-between">
         <p> Danh sách các Sản phẩm khách hàng chờ đặt hàng </p>
 
-        <a href=""
-            class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[35px] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
-            <i class="far fa-file-excel mr-2"></i>
+        <a href="" class="btn btn-outline btn-view">
+            <i class="iconify lucide--file-x"></i>
             <span>Tải file excel</span>
         </a>
     </div>
 
-    <div
-        class="w-full overflow-x-auto lg:whitespace-nowrap ms:whitespace-nowrap md:whitespace-nowrap 2xl:whitespace-normal">
-        <table class="table table-pin-rows table-pin-cols">
-            <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
-                <tr class="font-[600]">
-                    <td width="55"> STT </td>
+    <div class="overflow-x-auto  mt-5 border border-base-200 rounded-sm">
+        <table class="table">
+            <thead>
+                <tr class="bg-base-200 text-black">
+                    <td> STT </td>
                     <td> Khách hàng </td>
-                    <td width="420" class="w-[420px]"> Sản phẩm </td>
+                    <td> Sản phẩm </td>
                     <td> Nhận hàng tại </td>
                     <td> Ghi chú </td>
                     <td> Trạng thái </td>
-                    <td width="55"> </td>
+                    <td> </td>
                 </tr>
             </thead>
 
             <tbody>
                 <tr id="row_1">
                     <td align="center"> 1 </td>
-                    <td class="whitespace-nowrap">
+                    <td>
                         <p> - Họ tên: <b> Ngô Quang Sơn </b> </p>
                         <p> - Email: sonnq57@yahoo.com.sg </p>
                         <p> - Tel: 0913236989 </p>
                     </td>
 
-                    <td class="">
-                        <a href="" target="_blank"> [Mới 100%] Dell Gaming G16 7620 (Intel core i7-12700H, 16GB, 1TB,
+                    <td>
+                        <a href="" target="_blank" class="link-primary"> [Mới 100%] Dell Gaming G16 7620 (Intel core
+                            i7-12700H, 16GB, 1TB,
                             RTX 3060 6GB, 16″ QHD+ 165Hz IPS) </a>
                     </td>
 
@@ -72,39 +64,38 @@
 
                     <td>
                         <div id="status_1">
-                            <span
-                                class="text-[#6DC580] border-[#6DC580] bg-[#F0F9F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                                Thành công </span>
-                            <span
-                                class="text-[#0041E8] border-[#0041E8] bg-[#F7F5FF] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                                Chưa xử lý </span>
-                            <span
-                                class="text-[#E00000] border-[#E00000] bg-[#F9F2F2] rounded-[50px] border inline-block leading-[20px] text-[12px] font-[500] p-[0_8px] m-[0_7px_0px_0]">
-                                Hủy bỏ </span>
+                            <span class="badge badge-success badge-sm badge-soft">Thành công </span>
+                            <span class="badge badge-warning badge-sm badge-soft"> Chưa xử lý </span>
+                            <span class="badge badge-error badge-sm badge-soft">Hủy bỏ </span>
 
-                            <a href="javascript:edit_order_status(1)" title="Chỉnh sửa"
-                                class="icons inline-block w-[18px_!important] h-[18px_!important] bg-[transparent_!important] border-[transparent_!important] rounded-[0_!important]"
-                                style="background-position: -113px -88px;vertical-align: sub;"></a>
+                            <a href="javascript:edit_order_status(1)" title="Chỉnh sửa" class=""><i
+                                    class="iconify lucide--pencil mt-1 text-primary"></i></a>
                         </div>
 
-                        <p class="mt-[7px]"> Lúc 28-02-2015, 12:40 pm </p>
+                        <p class="mt-2"> Lúc 28-02-2015, 12:40 pm </p>
                     </td>
 
                     <td align="center">
-                        <a href="" class="icons icon-delete" title="Xóa"></a>
+                        <a href="" class="btn btn-soft btn-error btn-xs btn-square" title="Xóa"> <span
+                                class="iconify lucide--trash-2 tw-rla"></span></a>
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <div class="paging">
-        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
-        <a href="" class="current">1</a>
-        <a href="">2</a>
-        <a href="">3</a>
-        <a href="">4</a>
-        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+    <div class="join mt-5 justify-center flex items-cente r">
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-left"></span>
+        </a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">1</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item btn-active">2</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">3</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">4</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item">5</a>
+        <a href="" class="btn btn-square btn-sm btn-outline border-base-300 join-item" aria-label="Pagination controls">
+            <span class="iconify lucide--arrow-right"></span>
+        </a>
     </div>
 </div>
 
diff --git a/template/other/header.html b/template/other/header.html
index dca8255..70fafe3 100644
--- a/template/other/header.html
+++ b/template/other/header.html
@@ -386,7 +386,7 @@
             {% assign _menu_children = _menu_item.menu %}
             {% if _menu_item.id != 'system' %}
             <li
-                class="{%- for _item in _menuArray -%}{%- if _item.url == global.url -%} active  {%- endif -%} {%- endfor -%}">
+                class="{%- for _item in _menu_children -%}{%- if _item.url == global.url -%} active  {%- endif -%} {%- endfor -%}">
                 <div class="flex items-center gap-3">
                     {% if _menu_item.icon_class != '' %}
                     <span class="{{_menu_item.icon_class}}"></span>