diff --git a/assets/script/hura-lib.css b/assets/script/hura-lib.css
index ab61ca3..8110a8b 100644
--- a/assets/script/hura-lib.css
+++ b/assets/script/hura-lib.css
@@ -62,6 +62,7 @@
     --container-4xl: 56rem;
     --container-5xl: 64rem;
     --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -3885,6 +3886,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7xl {
+    width: var(--container-7xl);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -5815,6 +5819,9 @@
   .text-red-200 {
     color: var(--color-red-200);
   }
+  .text-red-400 {
+    color: var(--color-red-400);
+  }
   .text-red-500 {
     color: var(--color-red-500);
   }
diff --git a/assets/script/hura.global.css b/assets/script/hura.global.css
index e100694..708c75f 100644
--- a/assets/script/hura.global.css
+++ b/assets/script/hura.global.css
@@ -119,6 +119,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     display: none;
+    margin-top: 0 !important;
   }
 
   /* DaisyUI details submenu spacing */
@@ -214,7 +215,7 @@
   flex-grow: 1;
 }
 
-@layer utilities {
+@layer hura {
   .btn-active {
     --btn-bg: var(--color-hura);
     --btn-fg: #ffffff;
@@ -234,4 +235,24 @@
     background: var(--color-hura);
     color: #fff;
   }
+  .checkbox-active:checked,
+  .checkbox-active[aria-checked="true"] {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .menu-form .btn {
+    border-bottom: 0;
+  }
+  .menu-form .btn:hover {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .radio-active:checked,
+  .radio-active[aria-checked="true"] {
+    border-color: var(--color-hura);
+  }
+  .radio-active:checked::before,
+  .radio-active[aria-checked="true"]::before {
+    background-color: var(--color-hura);
+  }
 }
diff --git a/template/product/form.html b/template/product/form.html
index 41106aa..af7363b 100644
--- a/template/product/form.html
+++ b/template/product/form.html
@@ -5,7 +5,7 @@
     </ul>
 </div>
 
-<div class="container m-auto  mt-5">
+<div class="w-7xl m-auto  mt-5">
 
     <div class="bg-white p-3 rounded-sm shadow">
         <div class="flex items-center justify-between">
@@ -13,13 +13,13 @@
                 <h1 class="text-xl font-bold">Cập nhật #{{ page.product_info.id }}</h1>
             </div>
             <div class="flex items-center gap-3">
-                <a href="/admin/product/product-add" class="btn btn-md btn-outline btn-view">
-                    <i class="iconify lucide--circle-plus"></i>
+                <a href="/admin/product/product-add" class="btn btn-md btn-outline btn-view btn-sm">
+                    <i data-lucide="circle-plus" class="size-4"></i>
                     <span class="">Thêm sp mới</span>
                 </a>
-                <a href="javascript:void(0)" class="btn btn-md btn-outline btn-view">
-                    <div class="iconify lucide--copy"></div>
-                    <span class="text-[#6B7280] ml-[5px]">Tạo sp tương tự</span>
+                <a href="javascript:void(0)" class="btn btn-md btn-outline btn-view btn-sm">
+                    <i data-lucide="copy" class="size-4"></i>
+                    <span class="">Tạo sp tương tự</span>
                 </a>
             </div>
         </div>
@@ -33,7 +33,7 @@
                 {% for _menu in page.product_menu %}
                 <a role="tab" href="/admin/product/form?id={{ page.product_info.id }}&part={{ _menu.id }}"
                     title="{{ _menu.name }}"
-                    class="btn w-full justify-start rounded-none  text-black  {% if _menu.is_current == 1 %}btn-active text-white bg-primary {% else %} bg-white {% endif %}">
+                    class="btn w-full justify-start rounded-none  text-black  {% if _menu.is_current == 1 %}btn-active text-white{% else %} bg-white {% endif %}">
                     {{ _menu.name }}
                 </a>
                 {% endfor %}
diff --git a/template/product/form_components/basic.html b/template/product/form_components/basic.html
index cc5d38e..c866f19 100644
--- a/template/product/form_components/basic.html
+++ b/template/product/form_components/basic.html
@@ -256,41 +256,42 @@
             </div>
         </div>
 
-        <div class="flex items-center mt-5 gap-5">
-            <label class="block font-bold">Thuế VAT
+        <div class="flex items-center mt-5">
+            <label class="block font-bold w-32">Thuế VAT
             </label>
-            <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2">
 
                 <label class="cursor-pointer flex items-center gap-2">
-                    <input type="radio" name="info[hasVAT]" value="0" class="radio radio-sm checked:bg-blue-500"
+                    <input type="radio" name="info[hasVAT]" value="0" class="radio radio-sm radio-active"
                         checked="checked" />
                     <span class="label-text">Không hiển thị VAT</span>
                 </label>
 
                 <label class="cursor-pointer flex items-center gap-2">
-                    <input type="radio" name="info[hasVAT]" value="1" class="radio radio-sm checked:bg-blue-500" />
+                    <input type="radio" name="info[hasVAT]" value="1" class="radio radio-sm radio-active" />
                     <span class="label-text">Có VAT</span>
                 </label>
 
                 <label class="cursor-pointer flex items-center gap-2">
-                    <input type="radio" name="info[hasVAT]" value="2" class="radio radio-sm checked:bg-blue-500" />
+                    <input type="radio" name="info[hasVAT]" value="2" class="radio radio-sm radio-active" />
                     <span class="label-text">Chưa có VAT</span>
                 </label>
 
             </div>
         </div>
 
-        <div class="flex items-center gap-5 mt-5">
-            <label class="block font-bold">Hiển thị
+        <div class="flex items-center mt-5">
+            <label class="block font-bold w-32">Hiển thị
             </label>
             <div class="flex items-center gap-3">
                 <label class="cursor-pointer flex items-center gap-3">
-                    <input type="radio" name="info[status]" value="0" class="radio radio-sm" checked="checked" />
-                    <span class="label-text ml-[10px]">Cho hiển thị</span>
+                    <input type="radio" name="info[status]" value="0" class="radio radio-sm radio-active"
+                        checked="checked" />
+                    <span class="label-text">Cho hiển thị</span>
                 </label>
                 <label class="cursor-pointer flex items-center gap-3">
-                    <input type="radio" name="info[status]" value="1" class="radio radio-sm" />
-                    <span class="label-text ml-[10px]">Ẩn hiển thị</span>
+                    <input type="radio" name="info[status]" value="1" class="radio radio-sm radio-active" />
+                    <span class="label-text">Ẩn hiển thị</span>
                 </label>
             </div>
         </div>
diff --git a/template/product/form_components/category.html b/template/product/form_components/category.html
index 6b7c9fe..eb18f4a 100644
--- a/template/product/form_components/category.html
+++ b/template/product/form_components/category.html
@@ -13,7 +13,7 @@
 
         <div class="mt-3 gap-3 flex items-center">
             <label class="cursor-pointer flex items-center gap-3" onclick="AdminFunction.add_product_to_category(1)">
-                <input type="checkbox" name="" checked="checked" class="checkbox checkbox-success" />
+                <input type="checkbox" name="" checked="checked" class="checkbox checkbox-active rounded-sm" />
                 <span class="label-text ">Màn hình máy tính</span>
             </label>
             <div id="status_1" class=" flex items-center">
@@ -23,7 +23,7 @@
         <div class="mt-3 gap-3 flex items-center">
             <label class="cursor-pointer flex items-center gap-3    "
                 onclick="AdminFunction.add_product_to_category(2)">
-                <input type="checkbox" name="" checked="checked" class="checkbox checkbox-success" />
+                <input type="checkbox" name="" checked="checked" class="checkbox checkbox-active rounded-sm" />
                 <span class="label-text ">Màn hình máy tính</span>
             </label>
             <div id="status_2" class=" flex items-center">
@@ -32,7 +32,7 @@
 
         <div class="mt-3 gap-3 flex items-center">
             <label class="cursor-pointer flex items-center gap-3" onclick="AdminFunction.add_product_to_category(3)">
-                <input type="checkbox" name="" checked="checked" class="checkbox checkbox-success" />
+                <input type="checkbox" name="" checked="checked" class="checkbox checkbox-active rounded-sm" />
                 <span class="label-text ">Màn hình máy tính</span>
             </label>
             <div id="status_3" class=" flex items-center">
diff --git a/template/product/form_components/description.html b/template/product/form_components/description.html
index 20d26be..7ca5925 100644
--- a/template/product/form_components/description.html
+++ b/template/product/form_components/description.html
@@ -3,16 +3,16 @@
     <div class="flex items-center justify-between gap-3">
         <b class="text-xl">THƯ VIỆN ẢNH</b>
         <div class="list-btn flex items-center gap-3">
-            <a href="" class="btn btn-outline btn-view">
-                <i class="iconify lucide--upload"></i>
+            <a href="" class="btn btn-outline btn-view btn-sm">
+                <i data-lucide="upload" class="size-4"></i>
                 <span class="text-[#0041E8] ml-[5px]">Upload ảnh</span>
             </a>
-            <a href="" class="btn btn-outline btn-view">
-                <i class="iconify lucide--folder"></i>
+            <a href="" class="btn btn-outline btn-view btn-sm">
+                <i data-lucide="folder" class="size-4"></i>
                 <span class="text-[#0041E8] ml-[5px]">Quản lý</span>
             </a>
-            <a href="" class="btn btn-outline btn-view">
-                <i class="iconify lucide--file-image"></i>
+            <a href="" class="btn btn-outline btn-view btn-sm">
+                <i data-lucide="file-image" class="size-4"></i>
                 <span class="text-[#0041E8] ml-[5px]">Chọn ảnh trong kho ảnh chính</span>
             </a>
         </div>
diff --git a/template/product/form_components/seo.html b/template/product/form_components/seo.html
index a33f037..eebe8ac 100644
--- a/template/product/form_components/seo.html
+++ b/template/product/form_components/seo.html
@@ -19,8 +19,8 @@
             <div class="flex items-center">
                 <label class="flex items-center cursor-pointer text-gray gap-3 text-sm mt-3">
                     Có thay đổi
-                    <input type="checkbox" class="checkbox checkbox-success ml-[10px]" name="change_url_on_update"
-                        checked="">
+                    <input type="checkbox" class="checkbox checkbox-active rounded-sm ml-[10px]"
+                        name="change_url_on_update" checked="">
                     <i class="label-text">(Tích chọn nếu bạn muốn hệ thống thay đổi link truy
                         cập. Cảnh
                         báo:
diff --git a/template/product/form_components/spec_group.html b/template/product/form_components/spec_group.html
index 0eb9976..0cc8eca 100644
--- a/template/product/form_components/spec_group.html
+++ b/template/product/form_components/spec_group.html
@@ -20,23 +20,28 @@
             <i class="text-gray">Dùng là bộ lọc - Dùng tạo lựa chọn SP - Hiển thị ở tóm tắt</i>
             <div class="grid grid-cols-4 mt-3 gap-3">
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" class="checkbox checkbox-sm checkbox-success" name="new" checked="">
+                    <input type="checkbox" class="checkbox checkbox-sm checkbox-active rounded-sm" name="new"
+                        checked="">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
             </div>
@@ -57,23 +62,28 @@
             <i class="text-gray">Dùng là bộ lọc - Dùng tạo lựa chọn SP - Hiển thị ở tóm tắt</i>
             <div class="grid grid-cols-4 mt-3 gap-3">
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" class="checkbox checkbox-sm checkbox-success" name="new" checked="">
+                    <input type="checkbox" class="checkbox checkbox-sm checkbox-active rounded-sm" name="new"
+                        checked="">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
             </div>
@@ -93,23 +103,27 @@
             <i class="text-gray">Dùng là bộ lọc - Dùng tạo lựa chọn SP - Hiển thị ở tóm tắt</i>
             <div class="grid grid-cols-4 mt-3 gap-3">
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" class="checkbox checkbox-sm checkbox-success" name="new" checked="">
+                    <input type="checkbox" class="checkbox checkbox-sm checkbox-active" name="new" checked="">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
                 <label class="flex align-items cursor-pointer gap-3">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <input type="checkbox" name="new" checked=""
+                        class="checkbox checkbox-sm checkbox-active rounded-sm">
                     <span class="label-text">Core i3</span>
                 </label>
             </div>
diff --git a/template/product/home.html b/template/product/home.html
index e6df173..49eafd5 100644
--- a/template/product/home.html
+++ b/template/product/home.html
@@ -2,7 +2,7 @@
     <h1 class="text-2xl font-bold mb-3">Danh sách sản phẩm ({{ page.total | format_number }})</h1>
     <div class="flex flex-wrap justify-between items-center">
         <div class="btn-left flex items-center mb-3 gap-3">
-            <div class="form-control w-48">
+            <div class="form-control w-30">
                 <div class="dropdown dropdown-bottom w-full">
                     <label tabindex="0" class="btn btn-view btn-sm btn-outline w-full flex justify-between">
                         Chọn danh mục
@@ -80,7 +80,7 @@
                 {% assign counter = 0 %}
                 {% for item in page.item_list %}
                 {% increment counter %}
-                <tr class="hover:bg-base-300">
+                <tr>
                     <td>{{ counter }}</td>
                     <td>
                         <img class="block mx-auto my-0 w-[70px] h-[50px]" src="{{item.image.thumb}}" alt="">
@@ -143,7 +143,7 @@
                         <label class="cursor-pointer flex items-center mb-2 gap-2"
                             onclick="AdminFunction.update_product_hot('{{item.id}}')">
                             <input type="checkbox" name="new" {% if item.hot_type=="new" %}checked="checked" {% endif %}
-                                class="checkbox checkbox-active checkbox-sm" />
+                                class="checkbox checkbox-active checkbox-sm rounded-sm" />
                             <span class="label-text whitespace-nowrap">Mới Hot (Hỏi nhiều)</span>
                         </label>
 
@@ -151,14 +151,14 @@
                         <label class="cursor-pointer flex items-center mb-2 gap-2"
                             onclick="AdminFunction.update_product_hot('{{item.id}}')">
                             <input type="checkbox" name="hot" {% if item.hot_type=="hot" %}checked="checked" {% endif %}
-                                class="checkbox checkbox-active checkbox-sm" />
+                                class="checkbox checkbox-active checkbox-sm rounded-sm" />
                             <span class="label-text  whitespace-nowrap">Hot (Hỏi nhiều)</span>
                         </label>
 
                         <label class="cursor-pointer flex items-center mb-2 gap-2"
                             onclick="AdminFunction.update_product_hot('{{item.id}}')">
                             <input type="checkbox" name="bestsale" {% if item.hot_type=="bestsale" %}checked="checked"
-                                {% endif %} class="checkbox checkbox-active checkbox-sm" />
+                                {% endif %} class="checkbox checkbox-active checkbox-sm rounded-sm" />
                             <span class="label-text whitespace-nowrap">Bán
                                 chạy</span>
                         </label>
@@ -166,7 +166,7 @@
                         <label class="cursor-pointer flex items-center mb-2 gap-2"
                             onclick="AdminFunction.update_product_hot('{{item.id}}')">
                             <input type="checkbox" name="saleoff" {% if item.hot_type=="saleoff" %}checked="checked" {%
-                                endif %} class="checkbox checkbox-active checkbox-sm" />
+                                endif %} class="checkbox checkbox-active checkbox-sm rounded-sm" />
                             <span class="label-text whitespace-nowrap">Xả
                                 hàng (sale-off)</span>
                         </label>
@@ -174,7 +174,8 @@
                         <label class="cursor-pointer flex items-center mb-2 gap-2"
                             onclick="AdminFunction.update_product_hot('{{item.id}}')">
                             <input type="checkbox" name="online-only" {% if item.hot_type=="online-only"
-                                %}checked="checked" {% endif %} class="checkbox checkbox-active checkbox-sm" />
+                                %}checked="checked" {% endif %}
+                                class="checkbox checkbox-active checkbox-sm rounded-sm" />
                             <span class="label-text whitespace-nowrap">Chỉ bán online</span>
                         </label>
 
@@ -184,23 +185,23 @@
                         <div class="list-btn flex items-center gap-3">
                             <a href="/admin/product/form?id={{item.id}}" title="Form sản phẩm"
                                 class="btn btn-soft btn-xs btn-square btn-outline  btn-view">
-                                <i class="iconify lucide--pencil"></i>
+                                <i data-lucide="pencil" class="size-3"></i>
                             </a>
                             <a href="{{item.request_path}}" title="Xem tại web" target="_blank"
                                 class="btn btn-soft btn-xs btn-square btn-outline  btn-view">
-                                <i class="iconify lucide--globe"></i>
+                                <i data-lucide="globe" class="size-3"></i>
                             </a>
                             {% if item.status == 0 %}
                             <a href="" class="btn btn-soft btn-xs btn-square btn-outline  btn-view">
-                                <i class="iconify lucide--eye-off"></i>
+                                <i data-lucide="eye-off" class="size-3"></i>
                             </a>
                             {% else %}
                             <a href="" class="btn btn-soft btn-xs btn-square btn-outline  btn-view">
-                                <i class="iconify lucide--eye"></i>
+                                <i data-lucide="eye" class="size-3"></i>
                             </a>
                             {% endif %}
                             <a href="" class="btn btn-soft btn-xs btn-error btn-square">
-                                <i class="iconify lucide--trash"></i>
+                                <i data-lucide="trash-2" class="size-3 text-red-400"></i>
                             </a>
                         </div>
                     </td>
@@ -210,23 +211,18 @@
             </tbody>
         </table>
     </div>
-    <div class="join mt-5 justify-center flex items-center">
-        {% for paging in page.pagination.collection %}
-        {% if paging.name == 'next' %}
-        <a href="{{paging.url}}" class="btn btn-square btn-sm btn-outline border-base-300 join-item"
-            aria-label="Pagination controls">
-            <span class="iconify lucide--arrow-right"></span>
+    <div class="join mt-5 justify-end flex items-center gap-1">
+        <a href="" class="btn btn-ghost btn-circle btn-sm" aria-label="Pagination controls">
+            <i data-lucide="chevron-left" class="size-4"></i>
         </a>
-        {% elsif paging.name == 'prev' %}
-        <a href="{{paging.url}}" 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 href="" class="btn btn-circle btn-sm btn-ghost">1</a>
+        <a href="" class="btn btn-circle btn-sm btn-ghost btn-active">2</a>
+        <a href="" class="btn btn-circle btn-sm btn-ghost">3</a>
+        <a href="" class="btn btn-circle btn-sm btn-ghost">4</a>
+        <a href="" class="btn btn-circle btn-sm btn-ghost">5</a>
+        <a href="" class="btn btn-ghost btn-circle btn-sm" aria-label="Pagination controls">
+            <i data-lucide="chevron-right" class="size-4"></i>
         </a>
-        {% else %}
-        <a href="{{paging.url}}"
-            class="btn btn-square btn-sm btn-outline border-base-300 join-item {% if paging.is_active == 1 %}btn-active{% endif %}">{{paging.name}}</a>
-        {% endif %}
-        {% endfor %}
     </div>
 </div>