diff --git a/assets/script/style_hura.css b/assets/script/style_hura.css
index 4393ffe..054ef7f 100644
--- a/assets/script/style_hura.css
+++ b/assets/script/style_hura.css
@@ -50,6 +50,12 @@
 .lucide--circle-plus {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
 }
+.lucide--pointer {
+  --svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBvaW50ZXItaWNvbiBsdWNpZGUtcG9pbnRlciI+PHBhdGggZD0iTTIyIDE0YTggOCAwIDAgMS04IDgiLz48cGF0aCBkPSJNMTggMTF2LTFhMiAyIDAgMCAwLTItMmEyIDIgMCAwIDAtMiAyIi8+PHBhdGggZD0iTTE0IDEwVjlhMiAyIDAgMCAwLTItMmEyIDIgMCAwIDAtMiAydjEiLz48cGF0aCBkPSJNMTAgOS41VjRhMiAyIDAgMCAwLTItMmEyIDIgMCAwIDAtMiAydjEwIi8+PHBhdGggZD0iTTE4IDExYTIgMiAwIDEgMSA0IDB2M2E4IDggMCAwIDEtOCA4aC0yYy0yLjggMC00LjUtLjg2LTUuOTktMi4zNGwtMy42LTMuNmEyIDIgMCAwIDEgMi44My0yLjgyTDcgMTUiLz48L3N2Zz4=");
+}
+.lucide--ban {
+  --svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJhbi1pY29uIGx1Y2lkZS1iYW4iPjxwYXRoIGQ9Ik00LjkyOSA0LjkyOSAxOS4wNyAxOS4wNzEiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjwvc3ZnPg==");
+}
 .text-faq {
   color: #ffc700;
 }
@@ -124,3 +130,11 @@
 .max-h-\[500px\] {
   max-height: 500px;
 }
+.col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.btn-gray {
+  border: 1px dashed #6b7280;
+  color: #9e9e9e;
+}
diff --git a/template/customer/comment.html b/template/customer/comment.html
index 3a98c96..c96aad9 100644
--- a/template/customer/comment.html
+++ b/template/customer/comment.html
@@ -1,43 +1,35 @@
-<div class="w-[100%]">
-    <div class="m-[15px] px-[15px] py-[20px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)]">
-        <h1 class="text-[24px] font-[700] mb-3">Tổng hợp trao đổi</h1>
+<div class="w-full">
+    <div class="p-3 rounded-sm bg-white shadow">
+        <h1 class="text-2xl font-bold mb-3">Tổng hợp trao đổi</h1>
 
-        <div class="list-filter-account flex items-center">
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#fff] mr-[5px] bg-[#0041E8] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Trao
+        <div class="list-filter-account flex items-center gap-3 mt-5">
+            <a href="javascript:void(0)" class="btn btn-view btn-outline">Trao
                 đổi mới nhất</a>
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Chưa
+            <a href=" javascript:void(0)" class="btn btn-view btn-outline">Chưa
                 có phản hồi</a>
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Quản
+            <a href="javascript:void(0)" class="btn btn-view btn-outline">Quản
                 trị viên chưa phản hồi</a>
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Danh
+            <a href="javascript:void(0)" class="btn btn-view btn-outline">Danh
                 sách phản hồi</a>
         </div>
 
-        <form action=""
-            class="flex items-center p-[15px] rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] mt-[15px] border-[1px] border-[#F6F6F6]">
-            <input type="text" name=""
-                class="w-[375px] h-[35px] rounded-[4px] input input-bordered input-md mr-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"
-                placeholder="Tìm kiếm">
-            <button type="submit" class="px-[8px] py-[6px] rounded-[4px] text-white bg-[#0041E8]">Tìm kiếm</button>
+        <form action="" class="flex items-center p-3 mt-5 rounded-sm shadow gap-3">
+            <input type="text" name="" class="rounded-sm input input-bordered input-md  shadow" placeholder="Tìm kiếm">
+            <button type="submit" class="btn btn-active">Tìm kiếm</button>
         </form>
 
 
-        <div class="list-filter flex items-center justify-between mt-[15px] mb-[20px]">
+        <div class="list-filter flex items-center justify-between mt-5">
             <p>Tổng số: <b>1.996</b></p>
-            <select name="" id=""
-                class="w-[180px] h-[35px] select select-bordered min-h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+            <select name="" id="" class="select select-bordered rounded-sm shadow w-64">
                 <option value="">Chọn bộ lọc</option>
             </select>
         </div>
 
-        <div class="overflow-x-auto sm:whitespace-nowrap">
+        <div class="overflow-x-auto sm:whitespace-nowrap mt-5 border-base-200 shadow rounded-sm">
             <table class="table">
-                <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
-                    <tr>
+                <thead>
+                    <tr class="bg-base-200 text-black font-bold">
                         <th>STT</th>
                         <th>Phản hồi</th>
                         <th>Thời gian</th>
@@ -53,47 +45,42 @@
                         <td>1</td>
                         <td>09-08-2023, 11:24 am</td>
                         <td class="whitespace-nowrap">
-                            <div class="flex items-center">
+                            <div class="flex items-center gap-2">
                                 <b>Nguyễn An</b>
-                                <p class="p-[3px_4px] rounded-[2px] bg-[#FFCECE] ml-[5px] font-[500] text-[10px]">Quản
+                                <p class="badge badge-sm badge-primary badge-soft">Quản
                                     trị
                                     viên</p>
                             </div>
-                            <p>annv@hurasoft.com</p>
+                            <p class="mt-2">annv@hurasoft.com</p>
                         </td>
                         <td>
-                            <a href="" class="text-[#0041E8]">Màn Hình AOC 24B1XHS 23.8 inch Full HD</a>
+                            <a href="" class="text-primary">Màn Hình AOC 24B1XHS 23.8 inch Full HD</a>
                         </td>
                         <td>
                             test reply
                         </td>
                         <td>
-                            <div class="flex items-center">
+                            <div class="flex items-center gap-3">
                                 <a href="javascript:void(0)" onclick="js_list_reply_comment.showModal()"
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="fa-regular fa-hand-pointer text-[#0041E8]"></i>
+                                    class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--pointer"></i>
                                 </a>
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="icons icon-edit"></i>
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--pencil"></i>
                                 </a>
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="fa-solid fa-crown text-[#0041E8]"></i>
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--crown"></i>
                                 </a>
                             </div>
-                            <div class="flex items-center">
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="fa fa-plus text-[#0041E8]"></i>
+                            <div class="flex items-center mt-3 gap-3">
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--plus"></i>
                                 </a>
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#ECECEC] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="fa-solid fa-ban text-[#9E9E9E]"></i>
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-error">
+                                    <i class="iconify lucide--ban"></i>
                                 </a>
-                                <a href=""
-                                    class="w-[32px] h-[32px] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="icons icon-delete"></i>
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-error">
+                                    <i class="iconify lucide--trash-2"></i>
                                 </a>
                             </div>
                         </td>
diff --git a/template/customer/customer_contact.html b/template/customer/customer_contact.html
index 9b438d8..b3c4b9b 100644
--- a/template/customer/customer_contact.html
+++ b/template/customer/customer_contact.html
@@ -1,36 +1,32 @@
-<div class="w-[100%]">
-    <div class="m-[15px] px-[15px] py-[20px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)]">
-        <h1 class="text-[24px] font-[700]">Khách hàng liên hệ</h1>
+<div class="w-full">
+    <div class="p-3 rounded-sm bg-white shadow">
+        <h1 class="text-2xl font-bold">Khách hàng liên hệ</h1>
 
-        <form action=""
-            class="flex items-center p-[15px] rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] mt-[15px] border-[1px] border-[#F6F6F6]">
-            <input type="text" name=""
-                class="w-[375px] h-[35px] h-[35px] input input-bordered input-md rounded-[4px] mr-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"
-                placeholder="Tìm kiếm">
-            <button type="submit" class="px-[8px] py-[6px] rounded-[4px] text-white bg-[#0041E8]">Tìm kiếm</button>
+        <form action="" class="flex items-center p-3 rounded-sm shadow mt-3 gap-3">
+            <input type="text" name="" class="input input-bordered input-md rounded-sm shadow" placeholder="Tìm kiếm">
+            <button type="submit" class="btn btn-active">Tìm kiếm</button>
         </form>
 
 
-        <div class="list-filter flex items-center justify-between mt-[15px] mb-[20px]">
-            <p>Tổng hợp các liên hệ của khách hàng từ form liên hệ trên trang <a href="" class="text-[#0041E8]">liên
+        <div class="list-filter flex items-center justify-between mt-3">
+            <p>Tổng hợp các liên hệ của khách hàng từ form liên hệ trên trang <a href="" class="text-primary">liên
                     hệ</a> của website</p>
-            <select name="" id=""
-                class="w-[180px] h-[35px] min-h-[35px] select select-bordered rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
+            <select name="" id="" class="select select-bordered rounded-sm shadow">
                 <option value="">Chọn bộ lọc</option>
             </select>
         </div>
 
-        <div class="overflow-x-auto">
+        <div class="overflow-x-auto mt-5 border-base-200 shadow rounded-sm">
             <table class="table">
-                <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
-                    <tr>
-                        <th class="w-[50px]">STT</th>
+                <thead>
+                    <tr class="bg-base-200 text-black font-bold">
+                        <th>STT</th>
                         <th>Thời gian</th>
                         <th>Khách hàng</th>
                         <th>Thông tin</th>
-                        <th class="w-[340px] whitespace-nowrap">Nội dung liên hệ</th>
-                        <th class="w-[200px]">Ghi chú</th>
-                        <th class="w-[120px]">Trạng thái</th>
+                        <th>Nội dung liên hệ</th>
+                        <th>Ghi chú</th>
+                        <th>Trạng thái</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -38,38 +34,35 @@
                         <td>1</td>
                         <td class="whitespace-nowrap">09-08-2023, 11:24 am</td>
                         <td>Đức Anh</td>
-                        <td class="whitespace-nowrap xl:w-[340px] md:w-[340px] sm:w-[340px] 2xl:w-auto">
+                        <td class="whitespace-nowrap">
                             <p>- Email: ducanhnguyen199x@gmail.com</p>
                             <p>- Tel: 0976642092</p>
                             <p>- Mobile: 0976642092</p>
                         </td>
-                        <td class="">
-                            Trả góp sản phẩm: HHWS AMD RYZEN 9 3900XT | 16G | NVIDIA RTX 2060 6G - Tên: no name - SĐT:
-                            0147258369 - Nội dung: fsfdf
+                        <td>
+                            Trả góp sản phẩm: <a href="" class="link-primary">HHWS AMD RYZEN 9 3900XT | 16G | NVIDIA RTX
+                                2060 6G</a>
+                            <p>- Tên: no name</p>
+                            <p>- SĐT: 0147258369</p>
+                            <p>- Nội dung: fsfdf</p>
                         </td>
-                        <td class="">
-                            <textarea name="" id=""
-                                class="w-[150px] h-[40px] rounded-[4px] p-[5px] border-[1px] border-[#D8D8D8] mb-[5px]"></textarea>
-                            <a href=""
-                                class="btn w-[100px] h-[35px] min-h-[35px] rounded-[4px] bg-[#0041E8] text-white">Cập
+                        <td>
+                            <textarea name="" id="" class=" rounded-sm textarea w-64"></textarea>
+                            <a href="" class="btn btn-active mt-3">Cập
                                 nhật</a>
                         </td>
 
 
                         <td class="xl:w-[120px] 2xl:w-auto">
                             <select name="" id=""
-                                class="w-[130px_!important] h-[30px] min-h-[30px] select select-bordered rounded-[4px] shadow-[0px_2px_4px_0px_#0000001F]">
+                                class=" select select-bordered rounded-sm shadow w-32 whitespace-nowrap">
                                 <option value="">Trạng thái</option>
                             </select>
-                            <div class="flex items-center mt-[10px]">
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="icons icon-edit"></i>
-                                </a>
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#ECECEC] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="icons icon-delete"></i>
-                                </a>
+                            <div class="flex items-center mt-3 gap-3">
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-view"> <span
+                                        class="iconify lucide--pencil"></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>
diff --git a/template/customer/home.html b/template/customer/home.html
index ba8693a..4f54f63 100644
--- a/template/customer/home.html
+++ b/template/customer/home.html
@@ -1,58 +1,48 @@
-<div class="w-[100%]">
-    <div class="m-[15px] px-[15px] py-[20px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)]">
-        <h1 class="text-2xl font-[700] mb-3">Danh sách khách hàng</h1>
+<div class="w-full">
+    <div class="m-4 px-4 py-5 rounded-lg bg-white shadow">
+        <h1 class="text-2xl font-bold mb-3">Danh sách khách hàng</h1>
 
-        <div class="list-filter-account flex items-center">
-            <a href="javacsript:void(0)"
-                class="px-[30px] py-[6px] text-[#fff] mr-[5px] bg-[#0041E8] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Tất
+        <div class="list-filter-account flex items-center mt-3 gap-3">
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Tất
                 cả</a>
-            <a href="javacsript:void(0)"
-                class="px-[30px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Khách
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Khách
                 hàng đăng
                 ký</a>
-            <a href="javacsript:void(0)"
-                class="px-[30px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Chưa
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Chưa
                 đăng ký</a>
-            <a href="javacsript:void(0)"
-                class="px-[30px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">VIP</a>
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">VIP</a>
         </div>
 
-        <form action=""
-            class="flex items-center p-[15px] rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] mt-[15px] border-[1px] border-[#F6F6F6]">
-            <input type="text" name=""
-                class="w-[375px] h-[35px]  rounded-[4px] input input-bordered mr-[10px] input-md shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"
+        <form action="" class="flex items-center p-3 rounded-sm shadow mt-3 gap-3">
+            <input type="text" name="" class="input input-bordered shadow"
                 placeholder="Tìm khách hàng (* tên, email, điện thoại)">
-            <button type="submit" class="px-[8px] py-[6px] rounded-[4px] text-white bg-[#0041E8]">Tìm kiếm</button>
+            <button type="submit" class="btn btn-active">Tìm kiếm</button>
         </form>
 
-        <div class="list-filter flex flex-wrap items-center justify-between mt-[15px]">
-            <select name="" id=""
-                class="select w-[180px] h-[35px] min-h-[35px] p-[5px] border-[1px] border-[#D8D8D8] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mb-[15px]">
+        <div class="list-filter flex flex-wrap items-center justify-between mt-3">
+            <select name="" id="" class="select rounded-sm shadow mb-3">
                 <option value="">Sắp xếp khách hàng</option>
             </select>
 
-            <div class="list flex items-center mb-[15px]">
-                <a href="/admin/customer/customer_add" class="flex items-center p-[8px_15px] border-[1px] border-[#0041E8] rounded-[4px]
-                text-[#0041E8] bg-[#F5F7FF] hover:text-white hover:bg-[#0041E8]">
-                    <i class="fa-solid fa-user-plus"></i>
-                    <span class="ml-[5px]">Thêm KH mới</span>
+            <div class="flex items-center mb-3 gap-3">
+                <a href="/admin/customer/customer_add" class="btn btn-outline btn-view">
+                    <i class="iconify lucide--circle-plus"></i>
+                    <span class="">Thêm KH mới</span>
                 </a>
-                <a href="javascript:void(0)" class="flex items-center p-[8px_15px] border-[1px] border-[#0041E8] rounded-[4px]
-                                text-[#0041E8] ml-[15px] bg-[#F5F7FF] hover:text-white hover:bg-[#0041E8]">
-                    <i class="fa-solid fa-user-group"></i>
-                    <span class="ml-[5px]">Các nhóm KH</span>
+                <a href="javascript:void(0)" class="btn btn-outline btn-view">
+                    <i class="iconify lucide--users"></i>
+                    <span class="">Các nhóm KH</span>
                 </a>
-                <a href="javascript:void(0)" class="flex items-center p-[8px_15px] border-[1px] border-[#0041E8] rounded-[4px]
-                                text-[#0041E8] ml-[15px] bg-[#F5F7FF] hover:text-white hover:bg-[#0041E8]">
-                    <i class="fa-regular fa-file-excel"></i>
-                    <span class="ml-[5px]">Tải file excel</span>
+                <a href="javascript:void(0)" class="btn btn-outline btn-view">
+                    <i class="iconify lucide--file-x"></i>
+                    <span class="">Tải file excel</span>
                 </a>
             </div>
         </div>
-        <div class="overflow-x-auto sm:whitespace-nowrap">
-            <table class="w-[100%] table">
-                <thead class="bg-[#F6F6F6] text-[#000] text-[14px]">
-                    <tr>
+        <div class="overflow-x-auto sm:whitespace-nowrap mt-5 border-base-200 shadow rounded-sm">
+            <table class="table">
+                <thead>
+                    <tr class="bg-base-200 text-black font-bold">
                         <th>STT</th>
                         <th>ID</th>
                         <th>Khách hàng</th>
@@ -79,13 +69,13 @@
                             Hà Nội
                         </td>
                         <td>
-                            <span class="w-[14px] h-[14px] bg-[#FFC700] block mx-auto my-0 rounded-[50%]"></span>
+                            <div class="badge badge-success badge-sm badge-soft">Hoạt động</div>
                         </td>
                         <td>
-                            <span class="text-[#0041E8]">0</span><span class="ml-[5px]">Thành công</span>
+                            <span class="text-primary">0<span class=" ml-2">Thành công</span></span>
                         </td>
                         <td>
-                            <span class="text-[#0041E8]">0</span><span class="ml-[5px]">Thu</span>
+                            <span class="text-primary">0</span><span class="ml-2">Thu</span>
                         </td>
                         <td>
                             <p>
@@ -96,24 +86,22 @@
                             </p>
                         </td>
                         <td>
-                            <div class="flex items-center">
+                            <div class="flex items-center gap-3">
                                 <a href="/admin/product/form?id={{item.id}}" title="Form sản phẩm"
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="icons icon-edit"></i>
+                                    class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--pencil"></i>
                                 </a>
                                 <a href="{{item.request_path}}" title="Xem tại web" target="_blank"
-                                    class="w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="fa-solid fa-lock text-[#0041E8]"></i>
+                                    class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--clock"></i>
                                 </a>
                             </div>
-                            <div class="flex items-center">
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="fa-solid fa-globe text-[#9E9E9E]"></i>
+                            <div class="flex items-center gap-3 mt-3">
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-view">
+                                    <i class="iconify lucide--globe"></i>
                                 </a>
-                                <a href=""
-                                    class="w-[32px] h-[32px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] mb-[5px]">
-                                    <i class="icons icon-delete"></i>
+                                <a href="" class="btn btn-soft btn-xs btn-square btn-error">
+                                    <i class="iconify lucide--trash-2"></i>
                                 </a>
                             </div>
                         </td>
@@ -122,18 +110,19 @@
             </table>
         </div>
 
-        <div class="paging">
-            <a href="">
-                <i class="fas fa-chevron-left"></i>
+        <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="{{paging.url}}" class="active">
-                1
-            </a>
-            <a href="{{paging.url}}">
-                2
-            </a>
-            <a href="{{paging.url}}">
-                <i class="fas fa-chevron-right"></i>
+            <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>
 
diff --git a/template/customer/review.html b/template/customer/review.html
index af840b9..7cb3387 100644
--- a/template/customer/review.html
+++ b/template/customer/review.html
@@ -1,33 +1,25 @@
-<div class="w-[100%]">
-    <div
-        class="m-[15px] px-[15px] py-[20px] rounded-[15px] bg-white shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] overflow-x-auto">
-        <h1 class="text-[24px] font-[700] mb-3">Tổng hợp đánh giá</h1>
+<div class="w-full">
+    <div class="p-3 rounded-sm bg-white shadow overflow-x-auto">
+        <h1 class="text-2xl font-bold mb-3">Tổng hợp đánh giá</h1>
 
-        <div class="list-filter-account flex items-center">
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#fff] mr-[5px] bg-[#0041E8] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Trao
+        <div class="list-filter-account flex items-center gap-3 mt-5">
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Trao
                 đổi mới nhất</a>
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Chưa
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Chưa
                 có phản hồi</a>
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Quản
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Quản
                 trị viên chưa phản hồi</a>
-            <a href="javacsript:void(0)"
-                class="px-[10px] py-[6px] text-[#919699] mr-[5px] bg-[#F6F6F6] rounded-[4px_4px_0_0] hover:bg-[#0041E8] hover:text-white">Danh
+            <a href="javacsript:void(0)" class="btn btn-view btn-outline">Danh
                 sách phản hồi</a>
         </div>
 
-        <form action=""
-            class="flex items-center p-[15px] rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] mt-[15px] border-[1px] border-[#F6F6F6]">
-            <input type="text" name=""
-                class="w-[375px] h-[35px] rounded-[4px] input input-md input-bordered mr-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"
-                placeholder="Tìm kiếm">
-            <button type="submit" class="px-[8px] py-[6px] rounded-[4px] text-white bg-[#0041E8]">Tìm kiếm</button>
+        <form action="" class="flex items-center p-3 rounded-sm shadow  mt-5 gap-3">
+            <input type="text" name="" class="rounded-sm input input-md input-bordered  shadow" placeholder="Tìm kiếm">
+            <button type="submit" class="btn btn-active">Tìm kiếm</button>
         </form>
 
 
-        <div class="list-filter flex items-center justify-between mt-[15px] mb-[20px]">
+        <div class="list-filter flex items-center justify-between mt-5 gap-3">
             <p>Tổng số: <b>1.996</b></p>
             <select name="" id=""
                 class="w-[180px] h-[35px] min-h-[35px] select select-bordered rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
diff --git a/template/javascript/product_form.html b/template/javascript/product_form.html
index 1f763b8..b2fbad1 100644
--- a/template/javascript/product_form.html
+++ b/template/javascript/product_form.html
@@ -13,53 +13,13 @@
     // Quan trọng: đăng ký plugin
     FilePond.registerPlugin(FilePondPluginImagePreview);
 
-    function initCustomFilePond(buttonSelector, previewSelector, inputSelector, options = {}) {
-        const button = document.querySelector(buttonSelector);
-        const preview = document.querySelector(previewSelector);
-        const input = document.querySelector(inputSelector);
-
-        // Ẩn ban đầu nhưng không dùng display:none
-        preview.style.opacity = "0";
-        preview.style.transition = "0.2s";
-
-        // Tạo FilePond instance
-        const pond = FilePond.create(input, {
-            allowMultiple: true,
-            allowImagePreview: true,
-            instantUpload: true,
-            credits: false,
-            labelIdle: "",
-            ...options
-        });
-
-        // Đưa UI FilePond vào container preview
-        preview.appendChild(pond.element);
-
-        // Nút bấm → mở chọn file
-        button.addEventListener("click", () => input.click());
-
-        // Khi thêm file → show preview
-        pond.on("addfile", () => {
-            preview.style.opacity = "1";
-        });
-
-        // Khi xoá hết file → ẩn
-        pond.on("removefile", () => {
-            if (pond.getFiles().length === 0) {
-                preview.style.opacity = "0";
-            }
-        });
-
-        return pond;
-    }
-
-    // Gọi function
-    initCustomFilePond(
-        "#btnUploadImg",
-        "#image-preview-filepond",
-        "#hidden-filepond-input"
-    );
-
+    FilePond.create(document.querySelector("#image-preview-filepond"), {
+        credits: false,
+        allowImageCrop: false,
+        allowImagePreview: false,
+        allowMultiple: true,
+        labelIdle: 'Kéo thả ảnh hoặc <span class="filepond--label-action">Chọn ảnh</span>',
+    })
 
 
     tinymce.init({
diff --git a/template/product/form_components/accessory.html b/template/product/form_components/accessory.html
index e1ad746..ccaf79d 100644
--- a/template/product/form_components/accessory.html
+++ b/template/product/form_components/accessory.html
@@ -1,126 +1,122 @@
 <!-- phu kien -->
-<div class="w-[100%]" role="tabpanel">
-  <div
-    class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+<div class="w-full" role="tabpanel">
+  <div class="bg-white p-3 rounded shadow">
     <div class="flex items-center justify-between">
-      <b class="text-[20px]">Các loại phụ kiện của sản phẩm</b>
-      <a href="" class="flex items-center border-[1px] border-[#0041E8] p-[8px] rounded-[4px] bg-[#F5F7FF]">
-        <span class="text-[#0041E8] font-[500]">Chọn Sản phẩm phụ kiện</span>
+      <b class="text-xm">Các loại phụ kiện của sản phẩm</b>
+      <a href="" class="btn btn-outline btn-view">
+        Chọn Sản phẩm phụ kiện
       </a>
     </div>
-    <div class="list-item-cate flex items-center flex-wrap mt-[20px]">
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+    <div class="list-item-cate flex items-center flex-wrap mt-5 gap-3">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         PC, Workstation
       </a>
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         CPU - Bộ Vi Xử Lý
       </a>
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         Mainboard - Bo Mạch Chủ
       </a>
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         VGA - Card Màn Hình
       </a>
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         PC, Workstation
       </a>
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         PC, Workstation
       </a>
-      <a href=""
-        class="border-[1px] border-dashed border-[#9E9E9E] px-[10px] py-[5px] rounded-[4px] mr-[10px] font-[14px] text-[#9E9E9E] mb-[10px]">
+      <a href="" class="btn btn-outline btn-dash btn-gray">
         PC, Workstation
       </a>
     </div>
   </div>
 
-  <div class="bg-white p-[15px] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
-    <b class="block text-[20px] mb-[15px]">Các danh mục</b>
+  <div class="bg-white p-3 rounded  shadow">
+    <b class="block text-xl">Các danh mục</b>
 
 
-    <div class="item-accessory mb-[20px]">
-      <p class="mb-[10px]">PC, Workstation</p>
-      <table class="table">
-        <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-[700]">
-          <tr>
-            <th>STT</th>
-            <th>Ảnh</th>
-            <th>Sản phẩm</th>
-            <th>Giá hiện tại</th>
-            <th>Quản lý</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>
-              <img src="https://via.placeholder.com/50" alt="">
-            </td>
-            <td>
-              <a href="" class="name">CPU Intel Xeon E5-2665 2.40 GHz / 20MB / 8 Cores 16 Threads /
-                Socket 2011</a>
-              <div class="flex items-center">
-                <span>SKU: HN123567</span>
-                <span class="mx-[5px]">/</span>
-                <span>Số lượng: 1</span>
-              </div>
-            </td>
-            <td>
-              24.900.000 VND
-            </td>
-            <td>
-              <div class="flex items-center justify-center w-[32px] h-[32px] leading-[32px] rounded-[4px]">
-                <i class="icons icon-delete"></i>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="item-accessory mt-5">
+      <b class="">PC, Workstation</b>
+      <div class="border border-base-200 rounded-sm mt-3">
+        <table class="table">
+          <thead>
+            <tr class="bg-base-200 font-bold text-black">
+              <th>STT</th>
+              <th>Ảnh</th>
+              <th>Sản phẩm</th>
+              <th>Giá hiện tại</th>
+              <th>Quản lý</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>
+                <img src="https://via.placeholder.com/50" alt="">
+              </td>
+              <td>
+                <a href="" class="name link-primary">CPU Intel Xeon E5-2665 2.40 GHz / 20MB / 8 Cores 16 Threads /
+                  Socket 2011</a>
+                <div class="flex items-center gap-2">
+                  <span>SKU: HN123567</span>
+                  <span class="mx-[5px]">/</span>
+                  <span>Số lượng: 1</span>
+                </div>
+              </td>
+              <td>
+                24.900.000 VND
+              </td>
+              <td>
+                <a href="" class="btn btn-xs btn-outline btn-error">
+                  <i class="iconify lucide--trash-2"></i>
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
-    <div class="item-accessory mb-[20px]">
-      <p class="mb-[10px]">PC, Workstation</p>
-      <table class="table">
-        <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-[700]">
-          <tr>
-            <th>STT</th>
-            <th>Ảnh</th>
-            <th>Sản phẩm</th>
-            <th>Giá hiện tại</th>
-            <th>Quản lý</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>
-              <img src="https://via.placeholder.com/50" alt="">
-            </td>
-            <td>
-              <a href="" class="name">CPU Intel Xeon E5-2665 2.40 GHz / 20MB / 8 Cores 16 Threads /
-                Socket 2011</a>
-              <div class="flex items-center">
-                <span>SKU: HN123567</span>
-                <span class="mx-[5px]">/</span>
-                <span>Số lượng: 1</span>
-              </div>
-            </td>
-            <td>
-              24.900.000 VND
-            </td>
-            <td>
-              <div class="flex items-center justify-center w-[32px] h-[32px] leading-[32px] rounded-[4px]">
-                <i class="icons icon-delete"></i>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="item-accessory mt-5">
+      <b class="">PC, Workstation</b>
+      <div class="border border-base-200 rounded-sm mt-3">
+        <table class="table">
+          <thead>
+            <tr class="bg-base-200 font-bold text-black">
+              <th>STT</th>
+              <th>Ảnh</th>
+              <th>Sản phẩm</th>
+              <th>Giá hiện tại</th>
+              <th>Quản lý</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>
+                <img src="https://via.placeholder.com/50" alt="">
+              </td>
+              <td>
+                <a href="" class="name link-primary">CPU Intel Xeon E5-2665 2.40 GHz / 20MB / 8 Cores 16 Threads /
+                  Socket 2011</a>
+                <div class="flex items-center gap-2">
+                  <span>SKU: HN123567</span>
+                  <span class="mx-[5px]">/</span>
+                  <span>Số lượng: 1</span>
+                </div>
+              </td>
+              <td>
+                24.900.000 VND
+              </td>
+              <td>
+                <a href="" class="btn btn-xs btn-outline btn-error">
+                  <i class="iconify lucide--trash-2"></i>
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 
diff --git a/template/product/form_components/image.html b/template/product/form_components/image.html
index e07109a..fd37648 100644
--- a/template/product/form_components/image.html
+++ b/template/product/form_components/image.html
@@ -4,11 +4,11 @@
         <b class="block text-[20px] font-[700] mb-[10px]">Cập nhật ảnh sản phẩm</b>
 
         <div class="overflow-y-scroll max-h-[500px]">
-            <div class="item grid grid-cols-5 rounded-md shadow p-3 mt-3 gap-3">
+            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                 <div class="image">
                     <img src="{{ 'image-big.png' | asset_url }}" alt="">
                 </div>
-                <div class="right-image col-span-4">
+                <div class="right-image col-span-5">
                     <div class="flex justify-between gap-3">
                         <div class="flex items-center gap-3">
                             <b class="text-center block">Hình sản phẩm</b>
@@ -33,14 +33,15 @@
                     </div>
                 </div>
             </div>
-            <div class="item grid grid-cols-5 rounded-md shadow p-3 mt-3 gap-3">
+            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                 <div class="image">
                     <img src="{{ 'image-big.png' | asset_url }}" alt="">
                 </div>
-                <div class="right-image col-span-4">
+                <div class="right-image col-span-5">
                     <div class="flex justify-between gap-3">
                         <div class="flex items-center gap-3">
                             <b class="text-center block">Hình sản phẩm</b>
+                            <p class="text-center block text-gray">(Ảnh chính)</p>
                         </div>
                         <div class="grid grid-cols-2 gap-3">
                             <div class="item flex items-center  gap-2">
@@ -58,20 +59,18 @@
                             <i class="iconify lucide--trash-2"></i>
                             <p class="">Xoá</p>
                         </a>
-                        <a href="" class="btn btn-sm btn-view btn-outline">
-                            <p class="">Chọn ảnh chính</p>
-                        </a>
                     </div>
                 </div>
             </div>
-            <div class="item grid grid-cols-5 rounded-md shadow p-3 mt-3 gap-3">
+            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                 <div class="image">
                     <img src="{{ 'image-big.png' | asset_url }}" alt="">
                 </div>
-                <div class="right-image col-span-4">
+                <div class="right-image col-span-5">
                     <div class="flex justify-between gap-3">
                         <div class="flex items-center gap-3">
                             <b class="text-center block">Hình sản phẩm</b>
+                            <p class="text-center block text-gray">(Ảnh chính)</p>
                         </div>
                         <div class="grid grid-cols-2 gap-3">
                             <div class="item flex items-center  gap-2">
@@ -89,20 +88,18 @@
                             <i class="iconify lucide--trash-2"></i>
                             <p class="">Xoá</p>
                         </a>
-                        <a href="" class="btn btn-sm btn-view btn-outline">
-                            <p class="">Chọn ảnh chính</p>
-                        </a>
                     </div>
                 </div>
             </div>
-            <div class="item grid grid-cols-5 rounded-md shadow p-3 mt-3 gap-3">
+            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                 <div class="image">
                     <img src="{{ 'image-big.png' | asset_url }}" alt="">
                 </div>
-                <div class="right-image col-span-4">
+                <div class="right-image col-span-5">
                     <div class="flex justify-between gap-3">
                         <div class="flex items-center gap-3">
                             <b class="text-center block">Hình sản phẩm</b>
+                            <p class="text-center block text-gray">(Ảnh chính)</p>
                         </div>
                         <div class="grid grid-cols-2 gap-3">
                             <div class="item flex items-center  gap-2">
@@ -120,20 +117,18 @@
                             <i class="iconify lucide--trash-2"></i>
                             <p class="">Xoá</p>
                         </a>
-                        <a href="" class="btn btn-sm btn-view btn-outline">
-                            <p class="">Chọn ảnh chính</p>
-                        </a>
                     </div>
                 </div>
             </div>
-            <div class="item grid grid-cols-5 rounded-md shadow p-3 mt-3 gap-3">
+            <div class="item grid grid-cols-6 rounded-md shadow p-3 mt-3 gap-3">
                 <div class="image">
                     <img src="{{ 'image-big.png' | asset_url }}" alt="">
                 </div>
-                <div class="right-image col-span-4">
+                <div class="right-image col-span-5">
                     <div class="flex justify-between gap-3">
                         <div class="flex items-center gap-3">
                             <b class="text-center block">Hình sản phẩm</b>
+                            <p class="text-center block text-gray">(Ảnh chính)</p>
                         </div>
                         <div class="grid grid-cols-2 gap-3">
                             <div class="item flex items-center  gap-2">
@@ -151,9 +146,6 @@
                             <i class="iconify lucide--trash-2"></i>
                             <p class="">Xoá</p>
                         </a>
-                        <a href="" class="btn btn-sm btn-view btn-outline">
-                            <p class="">Chọn ảnh chính</p>
-                        </a>
                     </div>
                 </div>
             </div>
@@ -164,32 +156,22 @@
         <b class="text-xl block">Thêm ảnh cho sản phẩm</b>
         <p class="text-gray">Bạn có thể: Chọn ảnh có sẵn trong kho ảnh, hoặc upload ảnh từ máy tính:</p>
 
-        <div class="flex items-center mt-2">
-            <button id="btnUploadImg" class="btn btn-outline btn-view" type="button">
-                <i class="iconify lucide--upload"></i>
-                <span>Upload ảnh</span>
-            </button>
-        </div>
-
-        <input type="file" id="hidden-filepond-input" multiple style="display:none;" />
-
-
-        <div id="image-preview-filepond"></div>
+        <div id="image-preview-filepond" class="mt-5"></div>
 
 
         <p class="text-gray italic mt-3"><b>Chú ý:</b> Bạn có thể chọn nhiều ảnh cùng 1
             lúc:
             Chấp nhận các file ảnh: jpg,gif</p>
-        <input class="btn btn-active" name="commit" type="submit" value="Cập nhật">
+        <input class="btn btn-active mt-3" name="commit" type="submit" value="Cập nhật">
     </div>
 
-    <div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
-        <b class="mb-[5px] block">Chú ý:</b>
-        <ul>
+    <div class="bg-white p-3 rounded-sm shadow mt-5">
+        <b class="block">Chú ý:</b>
+        <ul class="text-sm">
             <li>- Ảnh Sản phẩm kích thước lớn sẽ được tự động co lại thành các ảnh
                 nhỏ hơn cho những vị trí liên quan. Tùy giao
                 diện website của bạn mà kích thước ảnh Sản phẩm khác nhau. <a href="/admin/system/setup"
-                    class="text-[#0041E8] underline">Click
+                    class="text-primary underline">Click
                     vào đây</a> để
                 quy định kích thước ảnh Sản phẩm.</li>
             <li>
diff --git a/template/product/form_components/relation.html b/template/product/form_components/relation.html
index 4824925..42f0c4c 100644
--- a/template/product/form_components/relation.html
+++ b/template/product/form_components/relation.html
@@ -1,9 +1,8 @@
-<div class="w-[100%]" role="tabpanel">
-    <div
-        class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
-        <b class="block text-[20px]">Danh sách liên quan</b>
+<div class="w-full" role="tabpanel">
+    <div class="bg-white p-3 rounded-sm shadow">
+        <b class="block text-xl">Danh sách liên quan</b>
 
-        <div class="list-tab flex items-center">
+        <div class="list-tab flex items-center mt-3 gap-3">
             <a href="javascript:void(0)">Sản phẩm (3)</a>
             <a href="javascript:void(0)">Bài viết (1)</a>
         </div>
diff --git a/template/product/form_components/tag.html b/template/product/form_components/tag.html
index ad22289..b64ffb0 100644
--- a/template/product/form_components/tag.html
+++ b/template/product/form_components/tag.html
@@ -1,41 +1,39 @@
-<div class="w-[100%]" role="tabpanel">
-    <div
-        class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+<div class="w-full" role="tabpanel">
+    <div class="bg-white p-3 rounded-sm shadow">
         <div class="flex items-center justify-between">
-            <b class="text-[20px]">Danh sách tag</b>
-            <a href="/admin/product" class="flex items-center p-[8px] border-[1px] border-[#0041E8] rounded-[4px]">
-                <span class="text-[#0041E8]">
+            <b class="text-xl">Danh sách tag</b>
+            <a href="/admin/product" class="btn btn-view btn-outline">
+                <span class="">
                     Chọn tag cho sản phẩm
                 </span>
             </a>
         </div>
 
-        <table class="table mt-[15px]">
-            <tr class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
-                <th class="w-[50px]">STT</th>
-                <th class="text-center">Tag</th>
-                <th class="w-[50px]"></th>
-            </tr>
-            <tr>
-                <td>1</td>
-                <td>ATO Test</td>
-                <td>
-                    <a href=""
-                        class="w-[32px] h-[32px] leading-[32px] text-center flex items-center justify-center rounded-[4px]">
-                        <i class="icons icon-delete"></i>
-                    </a>
-                </td>
-            </tr>
-        </table>
+        <div class="border-base-200 border rounded mt-5">
+            <table class="table">
+                <tr class="bg-base-200 font-bold text-black">
+                    <th>STT</th>
+                    <th class="text-center">Tag</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>1</td>
+                    <td>ATO Test</td>
+                    <td>
+                        <a href="" class="btn btn-xs btn-outline btn-error">
+                            <i class="iconify lucide--trash-2"></i>
+                        </a>
+                    </td>
+                </tr>
+            </table>
+        </div>
 
     </div>
-    <div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
-        <b class="block text-[20px] font-[700]">Thêm tag nhanh cho sản phẩm</b>
-        <p class="mb-[10px] text-[#6B7280]">Nhập Tag cho sản phẩm vào ô dưới đây và nhấn cập nhật. Mỗi Tag 1 dòng:</p>
-        <textarea name="" id=""
-            class="w-[100%] textarea textarea-bordered rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"></textarea>
+    <div class="bg-white p-3 rounded  shadow mt-3">
+        <b class="block text-xl font-bold">Thêm tag nhanh cho sản phẩm</b>
+        <p class="">Nhập Tag cho sản phẩm vào ô dưới đây và nhấn cập nhật. Mỗi Tag 1 dòng:</p>
+        <textarea name="" id="" class="w-full mt-3 textarea textarea-bordered rounded shadow"></textarea>
 
-        <input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer pt-[0] mt-[10px]"
-            name="commit" type="submit" value="Cập nhật">
+        <input class="btn btn-active mt-5" name=" commit" type="submit" value="Cập nhật">
     </div>
 </div>
\ No newline at end of file
diff --git a/template/product/form_components/variant.html b/template/product/form_components/variant.html
index 556beaa..2c5b533 100644
--- a/template/product/form_components/variant.html
+++ b/template/product/form_components/variant.html
@@ -1,144 +1,139 @@
 <!-- cau hinh -->
-<div class="w-[100%]" role="tabpanel">
-    <div
-        class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+<div class="w-full" role="tabpanel">
+    <div class="bg-white rounded-md shadow p-3">
         <div class="flex items-center justify-between">
-            <b class="text-[20px]">Chủng loại của sản phẩm</b>
-            <a href="" class="flex items-center p-[8px_10px] border-[1px] border-[#0041E8] rounded-[4px]">
-                <i class="fa-regular fa-pen-to-square text-[#0041E8]"></i>
-                <span class="text-[#0041E8] ml-[5px]">
+            <b class="text-xl">Chủng loại của sản phẩm</b>
+            <a href="" class="btn btn-outline btn-view">
+                <i class="iconify lucide--pencil"></i>
+                <span class="">
                     Sửa thuộc tính
                 </span>
             </a>
         </div>
-        <div class="text-[#6B7280] mt-[10px]">
-            <b class="mr-[5px]">Chú ý:</b>
+        <div class="text-gray mt-5 ">
+            <b class="">Chú ý:</b>
             <span>Giá bán của sản phẩm sẽ là giá của chủng loại được chọn. Nếu giá chủng loại=0 thì sẽ mặc định dùng
                 giá sản phẩm.
                 Cài đặt giá chung cho sản phẩm ở Tab "Cơ bản"
             </span>
         </div>
 
-        <div class="border-[1px] border-[#F6F6F6] p-[10px] rounded-[10px] mt-[15px] shadow-[0_1px_1px_0_#0000001A]">
-            <b class="text-[20px] block mb-[15px]">Cài nhanh cho tất cả chủng loại</b>
+        <div class="p-3 rounded-sm mt-3 shadow">
+            <b class="text-xl block">Cài nhanh cho tất cả chủng loại</b>
 
-            <div class="flex items-center mr-[-15px] pb-[5px]">
-                <div class="w-[calc(50%_-_15px)] mr-[15px]">
-                    <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Giá bán</label>
+            <div class="grid grid-cols-2 gap-3 mt-3">
+                <div class="">
+                    <label for="" class="block font-bold">Giá bán</label>
                     <input type="text" name="price" id="pro_name" value=""
-                        class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
+                        class="input input-md w-full mt-3 input-bordered rounded-sm shadow">
                 </div>
-                <div class="w-[calc(50%_-_15px)] mr-[15px]">
-                    <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Số lượng</label>
+                <div class="">
+                    <label for="" class="block font-bold">Số lượng</label>
                     <input type="text" name="quantity" value=""
-                        class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
+                        class="input input-md w-full mt-3 input-bordered rounded-sm shadow">
                 </div>
             </div>
         </div>
 
-        <table class="w-[100%] table mt-[10px]">
-            <tbody class="bg-[#F6F6F6] text-[14px] font-700 text-[#000]">
-                <tr>
-                    <th class="w-[50px]">Ảnh</th>
-                    <th>Chủng loại</th>
-                    <th></th>
-                </tr>
-            </tbody>
-            <tbody>
-                <tr>
-                    <td class="align-text-top text-center">
-                        <a href="" class="m-0-auto ">
-                            <i class="icons icon-edit mx-auto"></i>
-                        </a>
-                    </td>
-                    <td>
-                        <div class="flex items-center mr-[-10px] mb-[10px]">
-                            <div class="w-[calc(100%_/_3_-_10px)] mr-[10px]">
-                                <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Tên</label>
-                                <input type="text" name="info[new-1][label]" value=""
-                                    class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                            </div>
-                            <div class="w-[calc(100%_/_3_-_10px)] mr-[10px]">
-                                <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Mã
-                                    kho</label>
-                                <input type="text" name="info[new-1][sku]" value=""
-                                    class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                            </div>
-                            <div class="w-[calc(100%_/_3_-_10px)] mr-[10px]">
-                                <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Giá
-                                    bán</label>
-                                <input type="text" name="info[new-1][sale_price]" value=""
-                                    class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
-                            </div>
-                        </div>
-                        <div class="flex items-center">
-                            <div class="w-[213px]">
-                                <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Link
-                                    ngoài</label>
-                                <input type="text" name="info[new-1][url]" value=""
-                                    class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                            </div>
-                            <div class="flex items-center w-[calc(100%_-213px)]">
-                                <div class="ml-[10px] w-[calc(100%_/4_-10px)]">
-                                    <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Số
-                                        lượng</label>
-                                    <input type="text" name="info[new-1][stock_quantity]" value=""
-                                        class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                                </div>
-                                <div class="ml-[10px] w-[calc(100%_/4_-10px)]">
-                                    <label for=""
-                                        class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">STT</label>
-                                    <input type="text" name="info[new-1][ordering]" value=""
-                                        class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                                </div>
-                                <div class="ml-[10px] w-[calc(100%_/4_-10px)]">
-                                    <label for=""
-                                        class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Màu</label>
-                                    <select name="info[new-1][color]" id=""
-                                        class="w-[100%] select select-bordered text-[13px] h-[35px] min-h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                                        <option value="">
-                                            Màu sắc</option>
-                                    </select>
-                                </div>
-                                <div class="ml-[15px] w-[calc(100%_/4_-10px)]">
-                                    <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Kích
-                                        thước</label>
-                                    <select name="info[new-1][size]" id=""
-                                        class="w-[100%] select select-bordered h-[35px] min-h-[35px] rounded-[4px] text-[13px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]">
-                                        <option value="">
-                                            kích thước</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-
-                    </td>
-                    <td class="align-text-top">
-                        <div class="flex items-center">
-                            <a href=""
-                                class="w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px] bg-white">
-                                <i class="fa-regular fa-eye text-[#0041E8]"></i>
+        <div class="border border-base-200 rounded-sm mt-5">
+            <table class="table">
+                <tbody>
+                    <tr class="bg-base-200 font-bold text-black">
+                        <th>Ảnh</th>
+                        <th>Chủng loại</th>
+                        <th></th>
+                    </tr>
+                </tbody>
+                <tbody>
+                    <tr>
+                        <td class="align-text-top text-center">
+                            <a href="" class="m-0-auto ">
+                                <i class="iconify lucide--pencil"></i>
                             </a>
-                            <a href=""
-                                class="w-[32px] h-[32px] leading-[32px] text-center bg-[#ECECEC] flex items-center justify-center rounded-[4px]">
-                                <i class="icons icon-delete"></i>
-                            </a>
-                        </div>
+                        </td>
+                        <td>
+                            <div class="grid grid-cols-3 gap-3">
+                                <div class="">
+                                    <label for="" class="block font-bold">Tên</label>
+                                    <input type="text" name="info[new-1][label]" value=""
+                                        class="w-[100%] input input-md input-bordered rounded shadow mt-2">
+                                </div>
+                                <div class="">
+                                    <label for="" class="block font-bold">Mã
+                                        kho</label>
+                                    <input type="text" name="info[new-1][sku]" value=""
+                                        class="w-[100%] input input-md input-bordered rounded shadow mt-2">
+                                </div>
+                                <div class="">
+                                    <label for="" class="block font-bold">Giá
+                                        bán</label>
+                                    <input type="text" name="info[new-1][sale_price]" value=""
+                                        class="w-[100%] input input-md input-bordered rounded shadow mt-2">
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-3 mt-3 gap-3">
+                                <div class="">
+                                    <label for="" class="block font-bold">Link
+                                        ngoài</label>
+                                    <input type="text" name="info[new-1][url]" value=""
+                                        class="w-[100%] input input-md input-bordered rounded shadow mt-2">
+                                </div>
+                                <div class="col-span-2 grid grid-cols-4 gap-3">
+                                    <div>
+                                        <label for="" class="block font-bold">Số
+                                            lượng</label>
+                                        <input type="text" name="info[new-1][stock_quantity]" value=""
+                                            class="w-[100%] input input-md input-bordered rounded shadow mt-2">
+                                    </div>
+                                    <div>
+                                        <label for="" class="block font-bold">STT</label>
+                                        <input type="text" name="info[new-1][ordering]" value=""
+                                            class="w-[100%] input input-md input-bordered rounded shadow mt-2">
+                                    </div>
+                                    <div>
+                                        <label for="" class="block font-bold">Màu</label>
+                                        <select name="info[new-1][color]" id=""
+                                            class="w-full select select-bordered  rounded shadow mt-2">
+                                            <option value="">
+                                                Màu sắc</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label for="" class="block font-bold">Kích
+                                            thước</label>
+                                        <select name="info[new-1][size]" id=""
+                                            class="w-full select select-bordered  rounded shadow mt-2">
+                                            <option value="">
+                                                kích thước</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
 
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+                        </td>
+                        <td class="align-text-top">
+                            <div class="flex items-center gap-3">
+                                <a href="" class="btn btn-xs btn-outline btn-view">
+                                    <i class="iconify lucide--eye"></i>
+                                </a>
+                                <a href="" class="btn btn-xs btn-outline btn-error">
+                                    <i class="iconify lucide--trash-2"></i>
+                                </a>
+                            </div>
 
-        <a href="" class="my-[10px] flex items-center justify-center">
-            <span
-                class="w-[15px] h-[15px] rounded-[50%] border-[1px] border-[#0041E8] block leading-[12px] text-center text-[#0041E8]">+</span>
-            <span class="ml-[5px] text-[#0041E8] font-[500]">Thêm chủng loại</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <a href="" class="mt-5 flex items-center gap-1 justify-center">
+            <span class="iconify lucide--circle-plus link-primary"></span>
+            <span class="link-primary">Thêm chủng loại</span>
         </a>
     </div>
-    <div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
-        <input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0]" name="commit"
-            type="submit" value="Cập nhật">
+    <div class="bg-white p-3  rounded shadow mt-5">
+        <input class="btn btn-active" name="commit" type="submit" value="Cập nhật">
 
     </div>
 </div>
\ No newline at end of file
diff --git a/template/product/form_components/video.html b/template/product/form_components/video.html
index 10a9fe4..729e265 100644
--- a/template/product/form_components/video.html
+++ b/template/product/form_components/video.html
@@ -1,43 +1,42 @@
-<div class="w-[100%]" role="tabpanel">
-    <div
-        class="bg-white p-[15px] rounded-[10px_10px_0_0] shadow-[0_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+<div class="w-full" role="tabpanel">
+    <div class="bg-white p-3 rounded shadow ">
         <b class="text-[20px]">Youtobe Video</b>
-        <p class="text-[#6B7280]">Bạn cần gắn url của video được cung cấp bởi Youtube vào đây
+        <p class="text-gray">Bạn cần gắn url của video được cung cấp bởi Youtube vào đây
         </p>
-        <i class="text-[#6B7280]">Ví dụ: https://www.youtube.com/watch?NR=1&v=QqzJhk1p4rU&feature=endscreen</i>
-        <table class="table mt-[15px]">
-            <tr class="bg-[#f6f6f6] font-700 text-[14px] text-[#000]">
-                <th>Link youtobe</th>
-                <th>Mô tả (nếu có)</th>
-                <th class="w-[50px]"></th>
-            </tr>
-            <tr>
-                <td>
-                    <input type="text" name="url_index" value=""
-                        class="w-[100%] text-[#0041E8] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
-                </td>
-                <td>
-                    <input type="text" name="url_index" value=""
-                        class="w-[100%] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
-                </td>
-                <td>
-                    <a href="" class="flex items-center justify-center w-[32px] h-[32px] leading-[32px] rounded-[4px]">
-                        <i class="icons icon-delete"></i>
-                    </a>
-                </td>
-            </tr>
-        </table>
+        <i class="link-primary">Ví dụ: https://www.youtube.com/watch?NR=1&v=QqzJhk1p4rU&feature=endscreen</i>
+        <div class="border-base-200 border rounded mt-5">
+            <table class="table">
+                <tr class="bg-base-200 font-bold text-black">
+                    <th>Link youtobe</th>
+                    <th>Mô tả (nếu có)</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <td>
+                        <input type="text" name="url_index" value=""
+                            class="w-full input input-md input-bordered  rounded shadow">
+                    </td>
+                    <td>
+                        <input type="text" name="url_index" value=""
+                            class="w-full input input-md input-bordered  rounded shadow">
+                    </td>
+                    <td>
+                        <a href="" class="btn btn-xs btn-outline btn-error">
+                            <i class="iconify lucide--trash-2"></i>
+                        </a>
+                    </td>
+                </tr>
+            </table>
+        </div>
 
 
-        <a href="" class="mt-[10px] flex items-center justify-center">
-            <span
-                class="w-[15px] h-[15px] rounded-[50%] border-[1px] border-[#0041E8] block leading-[12px] text-center text-[#0041E8]">+</span>
-            <span class="ml-[5px] text-[#0041E8] font-[500]">Thêm hàng</span>
+        <a href="" class="mt-5 flex items-center gap-1 justify-center">
+            <span class="iconify lucide--circle-plus link-primary"></span>
+            <span class="link-primary">Thêm chủng loại</span>
         </a>
     </div>
-    <div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
-        <input class=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0]" name="commit"
-            type="submit" value="Cập nhật">
+    <div class="bg-white p-3  rounded  shadow mt-3">
+        <input class="btn btn-active" name="commit" type="submit" value="Cập nhật">
 
     </div>
 </div>
\ No newline at end of file