diff --git a/assets/script/style_hura.css b/assets/script/style_hura.css
index e059b26..4393ffe 100644
--- a/assets/script/style_hura.css
+++ b/assets/script/style_hura.css
@@ -50,14 +50,19 @@
 .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");
 }
-
+.text-faq {
+  color: #ffc700;
+}
 .text-orange {
   color: #ffc700;
 }
-
 .text-red {
   color: #e00000;
 }
+.text-gray {
+  color: #6b7280;
+}
+
 .absolute {
   position: absolute;
 }
@@ -90,3 +95,32 @@
   color: #fff;
   background: #0041e8;
 }
+
+:is(.radio:checked, .radio[aria-checked="true"]):before {
+  background-color: var(--color-primary);
+}
+.radio:checked,
+.radio[aria-checked="true"] {
+  border-color: var(--color-primary);
+}
+
+.checkbox:checked,
+.checkbox[aria-checked="true"] {
+  background-color: var(--color-primary);
+}
+
+.checkbox:before {
+  background-color: #fff;
+}
+
+.btn-remove {
+  background: red;
+  color: #fff;
+}
+
+.overflow-y-scroll {
+  overflow-y: auto;
+}
+.max-h-\[500px\] {
+  max-height: 500px;
+}
diff --git a/template/javascript/product_form.html b/template/javascript/product_form.html
index 27772fb..1f763b8 100644
--- a/template/javascript/product_form.html
+++ b/template/javascript/product_form.html
@@ -1,8 +1,66 @@
 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
 <script src="{{ 'RowExpand.js' | asset_url }}"></script>
 
+<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
+<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
+    rel="stylesheet" />
+
+<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
+
 
 <script>
+    // 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"
+    );
+
+
 
     tinymce.init({
         selector: 'textarea#product-desc',
diff --git a/template/product/form_components/basic.html b/template/product/form_components/basic.html
index 41531ea..cc5d38e 100644
--- a/template/product/form_components/basic.html
+++ b/template/product/form_components/basic.html
@@ -2,11 +2,11 @@
 <form method="post" enctype="multipart/form-data">
     <div class="bg-white p-3 rounded shadow">
         <b class="text-xl mb-6 block">Thông tin cơ bản</b>
-        <div class="flex items-center mt-3">
-            <label for="" class="font-[700] text-[14px] text-[#383C44]">Đặt tên Sản phẩm</label>
-            <div class="box-note" data-tip="">
-                <i class="fa-regular fa-circle-question text-[#FFC700]"></i>
-                <div class="content">
+        <div class="flex items-center gap-2 mt-3">
+            <label for="" class="font-bold">Đặt tên Sản phẩm</label>
+            <div class="box-note tooltip" data-tip="">
+                <i class="iconify lucide--circle-question-mark mt-2 cursor-pointer text-faq"></i>
+                <div class="tooltip-content">
                     Bạn muốn Google tìm ra Sản phẩm này hoặc người xem hiểu ngay về Sản phẩm ? Hãy viết tên Sản phẩm
                     một cách cụ thể, đầy đủ
                     nhất. Thay vì viết Vaio ABC, hãy viết : Máy tính xách tay Sony Vaio ABC, 500GB, 4GB RAM, 2.4GHz,
@@ -16,16 +16,15 @@
             </div>
         </div>
         <input type="text" name="info[proName]" id="pro_name" value="Máy in mã vạch MH241"
-            placeholder="Đặt tên sản phẩm"
-            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]">
+            placeholder="Đặt tên sản phẩm" class="input mt-2 shadow w-full rounded-sm" />
 
-        <div class="flex items-center flex-wrap mr-[-12px]">
-            <div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Model (nếu có)</label>
-                    <div class="box-note">
-                        <i class="fa-regular fa-circle-question text-[#FFC700]"></i>
-                        <div class="content">
+        <div class="grid grid-cols-2 gap-3 mt-3">
+            <div class="mt-3">
+                <div class="flex items-center gap-3">
+                    <label for="" class="font-bold">Model (nếu có)</label>
+                    <div class="box-note tooltip">
+                        <i class="iconify lucide--circle-question-mark mt-2 cursor-pointer text-faq"></i>
+                        <div class="tooltip-content">
                             Nhiều khách hàng tìm Sản phẩm theo Model, bạn có nhập model của Sản phẩm nếu có. Ví dụ:
                             Laptop Sony Vaio ABC/12 thì
                             ABC/12 là model Sản phẩm.
@@ -33,17 +32,15 @@
                     </div>
                 </div>
                 <input type="text" value="MH241" name="info[productModel]" id="productModel"
-                    placeholder="Model (nếu có)"
-                    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]">
+                    placeholder="Model (nếu có)" class="input mt-2 shadow w-full rounded-sm">
             </div>
-
-            <div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Mã kho hàng - SKU (nếu
+            <div class="mt-3">
+                <div class="flex items-center gap-2">
+                    <label for="" class="font-bold">Mã kho hàng - SKU (nếu
                         có)</label>
-                    <div class="box-note">
-                        <i class="fa-regular fa-circle-question text-[#FFC700]"></i>
-                        <div class="content">
+                    <div class="box-note tooltip">
+                        <i class="iconify lucide--circle-question-mark mt-2 cursor-pointer text-faq"></i>
+                        <div class="tooltip-content">
                             Nếu bạn có phần mềm quản lý kho hàng chuyên nghiệp và bạn muốn theo dõi các đơn hàng nhận từ
                             website của Sản phẩm trong
                             phần mềm này. Khi đó hãy nhập mã kho hàng của Sản phẩm được cung cấp bởi phần mềm kho hàng
@@ -52,37 +49,32 @@
                     </div>
                 </div>
                 <input type="text" name="info[storeSKU]" id="storeSKU" value="MH241"
-                    placeholder="Mã kho hàng - SKU (nếu có)"
-                    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]">
+                    placeholder="Mã kho hàng - SKU (nếu có)" class="input mt-2 shadow w-full rounded-sm">
             </div>
-
-            <div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Trọng lượng (tính phí
+            <div class="mt-3">
+                <div class="flex items-center gap-2">
+                    <label for="" class="font-bold">Trọng lượng (tính phí
                         shipping)</label>
-                    <span class="mr-[10px]">gram</span>
-                    <div class="box-note flex items-center">
-                        <i class="fa-regular fa-circle-question text-[#FFC700]"></i>
-                        <div class="content">
+                    <span class="">gram</span>
+                    <div class="box-note tooltip flex items-center">
+                        <i class="iconify lucide--circle-question-mark cursor-pointer text-faq"></i>
+                        <div class="tooltip-content">
                             Dùng tính phí Shipping cho Sản phẩm (nếu có). Đơn vị gram, nếu Sản phẩm 1,2kg = 1200 (gram).
                         </div>
                     </div>
                 </div>
 
                 <input type="text" name="info[weight]" id="weight" value="0"
-                    placeholder="Trọng lượng (tính phí shipping)"
-                    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]">
+                    placeholder="Trọng lượng (tính phí shipping)" class="input mt-2 shadow w-full rounded-sm">
             </div>
-
-            <div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Thương hiệu</label>
+            <div class="mt-3">
+                <div class="flex items-center gap-2">
+                    <label for="" class="font-bold">Thương hiệu</label>
                     <div class="flex items-center">
-                        <a href="" class="mr-[10px] text-[#0041E8]">Quản lý thương hiệu</a>
+                        <a href="" class="link-primary">Quản lý thương hiệu</a>
                     </div>
                 </div>
-                <select name="brand" id="brandSelect"
-                    class="w-[100%] select  select-bordered h-[35px] min-h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
+                <select name="brand" id="brandSelect" class="select select-bordered w-full mt-2 shadow rounded-sm">
                     <option value="" class="text-[#6B7280]">--Chọn thương hiệu--</option>
                     <option value="">ABS</option>
                     <option value="83">ABS</option>
@@ -173,143 +165,138 @@
 
         </div>
 
-        <div class="mb-[25px]">
-            <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Tóm tắt đặc tính chính</label>
+        <div class="mt-5">
+            <label for="" class="block font-bold">Tóm tắt đặc tính chính</label>
             <textarea name="info[proSummary]" id="summary" placeholder="Nhập tóm tắt đặt tính chính"
-                class="w-[100%] h-[120px] textarea textarea-bordered rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
+                class="textarea mt-3 shadow w-full rounded-sm"></textarea>
         </div>
-        <div class="mb-[10px]">
-            <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Phụ kiện đi kèm</label>
+        <div class="mt-5">
+            <label for="" class="block font-bold">Phụ kiện đi kèm</label>
             <input type="text" id="accessory" name="info[accessory]" value="Test" placeholder="Phụ kiện đi kèm"
-                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 mt-3 shadow w-full rounded-sm">
         </div>
     </div>
-    <div class="bg-white p-[15px] border-[#FAFAFB] border-b-[6px] border-[#FAFAFB]">
-        <b class="block text-[20px] mb-[25px]">Thông tin bán hàng</b>
+    <div class="bg-white p-3 rounded mt-5 shadow">
+        <b class="block text-xl">Thông tin bán hàng</b>
 
-        <div class="mb-[25px]">
-            <div class="flex items-center mb-[5px]">
-                <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Giá bán lẻ</label>
-                <div class="box-note flex items-center text-[#6B7280]">
-                    <i class="text-[#6B7280]">(* Nếu dùng USD thì theo chuẩn quốc tế v.d. $134.05).</i>
+        <div class="mt-5">
+            <div class="flex items-center gap-2">
+                <label for="" class="font-bold">Giá bán lẻ</label>
+                <div class="box-note flex items-center gap-2 text-gray">
+                    <i class="text-gray">(* Nếu dùng USD thì theo chuẩn quốc tế v.d. $134.05).</i>
                     <span>Tỷ giá:</span>
-                    <b class="mx-[5px]">1</b>
-                    <a href="/admin/system/setup/option=general" class="ml-[2px]">
-                        <i class="icons icon-edit"></i>
+                    <b class="">1</b>
+                    <a href="/admin/system/setup/option=general" class="text-primary">
+                        <i class="iconify lucide--pencil"></i>
                     </a>
                 </div>
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center gap-2 mt-3">
                 <input type="text" name="info[price]" id="price" value="0" placeholder="Giá bán lẻ"
-                    class="w-[400px] input input-md input-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ">
-                <select name="currency" id="currency"
-                    class="w-[88px] select select-bordered rounded-[4px] h-[35px] min-h-[35px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mx-[15px] ">
+                    class="input shadow rounded-sm">
+                <select name="currency" id="currency" class="select select-bordered rounded-sm shadow w-32 ">
                     <option value="">VNĐ</option>
                 </select>
                 <span>/</span>
-                <select name="price_unit" id="price_unit"
-                    class="w-[100px] select select-bordered rounded-[4px] h-[35px] min-h-[35px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mx-[15px] ">
+                <select name="price_unit" id="price_unit" class="select select-bordered rounded-sm shadow w-32">
                     <option value="">Chiếc</option>
                 </select>
             </div>
 
         </div>
 
-        <div class="flex items-center mr-[-15px]">
-            <div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Giá nhập hàng</label>
+        <div class="grid grid-cols-2 gap-3 mt-5">
+            <div class="">
+                <div class="flex items-center gap-3">
+                    <label class="font-bold">Giá nhập hàng</label>
                     <div class="box-note">
-                        <i class="mr-[10px] text-[#6B7280]">vnd (để tham khảo khi cần)</i>
+                        <i class="text-gray">vnd (để tham khảo khi cần)</i>
                     </div>
                 </div>
 
                 <input type="text" name="info[purchase_price]" value="0" placeholder="Giá nhập hàng"
-                    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 mt-3 shadow w-full rounded-sm">
             </div>
-            <div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Giá thị trường</label>
+            <div class="">
+                <div class="flex items-center gap-3">
+                    <label class="font-bold">Giá thị trường</label>
                     <div class="box-note">
-                        <i class="mr-[10px] text-[#6B7280]">vnd (để tham khảo khi cần)</i>
+                        <i class="text-gray">vnd (để tham khảo khi cần)</i>
                     </div>
                 </div>
 
                 <input type="text" value="0" name="info[market_price]" placeholder="Giá thị trường"
-                    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 mt-3 shadow w-full rounded-sm">
             </div>
         </div>
 
-        <div class="mb-[25px]">
-            <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Khuyến mại riêng</label>
+        <div class="mt-5">
+            <label for="" class="block font-bold">Khuyến mại riêng</label>
             <textarea name="info[specialOffer]" id="specialOffer" placeholder="Nhập tóm tắt đặt tính chính"
-                class="w-[100%] h-[120px] textarea textarea-bordered rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
+                class="textarea w-full shadow rounded-sm mt-3"></textarea>
         </div>
 
-        <div class="mb-[25px]">
-            <label for="" class="block mb-[5px] font-[700] text-[14px] text-[#383C44]">Thông tin bảo hành</label>
+        <div class=" mt-5">
+            <label for="" class="block font-bold">Thông tin bảo hành</label>
             <input type="text" name="info[warranty]" id="warranty" value="Test" placeholder="Thông tin bảo hành"
-                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 mt-3 shadow w-full rounded-sm">
         </div>
 
-        <div class="flex items-center mr-[-15px]">
-            <div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
-                <label class="block mr-[5px] mb-[5px] font-[700] text-[14px] text-[#383C44]">Số lượng kho hàng</label>
+        <div class="grid grid-cols-2 gap-3 mt-5">
+            <div class="">
+                <label class="block font-bold">Số lượng kho hàng</label>
                 <input type="text" value="0" name="info[quantity]" placeholder="Số lượng kho hàng"
-                    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 mt-3 shadow w-full rounded-sm">
             </div>
-            <div class="w-[calc(50%_-_15px)] mr-[15px] mb-[25px]">
-                <label class="block mr-[5px] mb-[5px] font-[700] text-[14px] text-[#383C44]">Tình trạng (Mới /
+            <div class="">
+                <label class="block font-bold">Tình trạng (Mới /
                     Cũ)</label>
                 <input type="text" name="info[cond]" value="" placeholder="Tình trạng (Mới / Cũ)"
-                    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 mt-3 shadow w-full rounded-sm">
             </div>
         </div>
 
-        <div class="flex items-center mb-[25px]">
-            <label class="block w-[130px]  font-[700] text-[14px] text-[#383C44]">Thuế VAT
+        <div class="flex items-center mt-5 gap-5">
+            <label class="block font-bold">Thuế VAT
             </label>
-            <div class="flex items-center">
+            <div class="flex items-center gap-3">
 
-                <label class="cursor-pointer flex items-center mr-[20px] w-[160px]">
-                    <input type="radio" name="info[hasVAT]" value="0" class="radio checked:bg-blue-500"
+                <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"
                         checked="checked" />
-                    <span class="label-text ml-[10px]">Không hiển thị VAT</span>
+                    <span class="label-text">Không hiển thị VAT</span>
                 </label>
 
-                <label class="cursor-pointer flex items-center mr-[20px]">
-                    <input type="radio" name="info[hasVAT]" value="1" class="radio checked:bg-blue-500" />
-                    <span class="label-text ml-[10px]">Có VAT</span>
+                <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" />
+                    <span class="label-text">Có VAT</span>
                 </label>
 
-                <label class="cursor-pointer flex items-center mr-[20px]">
-                    <input type="radio" name="info[hasVAT]" value="2" class="radio checked:bg-blue-500" />
-                    <span class="label-text ml-[10px]">Chưa có VAT</span>
+                <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" />
+                    <span class="label-text">Chưa có VAT</span>
                 </label>
 
             </div>
         </div>
 
-        <div class="flex items-center">
-            <label class="block w-[130px]  font-[700] text-[14px] text-[#383C44]">Hiển thị
+        <div class="flex items-center gap-5 mt-5">
+            <label class="block font-bold">Hiển thị
             </label>
-            <div class="flex items-center">
-
-                <label class="cursor-pointer flex items-center mr-[20px] w-[160px]">
-                    <input type="radio" name="info[status]" value="0" class="radio checked:bg-blue-500"
-                        checked="checked" />
+            <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>
                 </label>
-
-                <label class="cursor-pointer flex items-center mr-[20px]">
-                    <input type="radio" name="info[status]" value="1" class="radio checked:bg-blue-500" />
+                <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>
                 </label>
             </div>
         </div>
     </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" id="submit-collection-btn"
-            name="commit" type="button" value="Cập nhật" onclick="AdminFunction.checkForm(true)" />
+    <div class="mt-5 bg-white p-3 rounded shadow">
+        <input class="btn btn-active" id="submit-collection-btn" name="commit" type="button" value="Cập nhật"
+            onclick="AdminFunction.checkForm(true)" />
     </div>
 </form>
\ No newline at end of file
diff --git a/template/product/form_components/category.html b/template/product/form_components/category.html
index 731b350..6b7c9fe 100644
--- a/template/product/form_components/category.html
+++ b/template/product/form_components/category.html
@@ -1,41 +1,41 @@
 <!-- danh muc san pham -->
-<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px] pb-[100px]"
-    role="tabpanel">
-    <b class="block mb-[5px]">Hiện tại Sản phẩm đang được đặt trong các danh mục sau :</b>
-    <ul id="list-category">
-        <li><a href="" class="text-[#0041E8]">Màn hình máy tính</a></li>
-        <li><a href="" class="text-[#0041E8]">Màn hình máy tính</a></li>
+<div class="bg-white p-3 rounded shadow-sm" role="tabpanel">
+    <b class="block">Hiện tại Sản phẩm đang được đặt trong các danh mục sau :</b>
+    <ul id="list-category" class="mt-3">
+        <li><a href="" class="text-primary mt-2">Màn hình máy tính</a></li>
+        <li><a href="" class="text-primary mt-2">Màn hình máy tính</a></li>
     </ul>
 
-    <p class="mt-[20px] mb-[10px]">
+    <p class="mt-5">
         Bạn có thể chọn thêm danh mục khác cho Sản phẩm hoặc chỉnh lại.
     </p>
-    <div class="list-category">
+    <div class="list-category mt-3">
 
-        <div class="mb-[10px] flex items-center">
-            <label class="cursor-pointer flex items-center" onclick="AdminFunction.add_product_to_category(1)">
+        <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" />
-                <span class="label-text ml-[5px]">Màn hình máy tính</span>
+                <span class="label-text ">Màn hình máy tính</span>
             </label>
-            <div id="status_1" class="text-[13px] ml-[5px] flex items-center">
+            <div id="status_1" class=" flex items-center">
             </div>
         </div>
 
-        <div class="mb-[10px] flex items-center">
-            <label class="cursor-pointer flex items-center" onclick="AdminFunction.add_product_to_category(2)">
+        <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" />
-                <span class="label-text ml-[5px]">Màn hình máy tính</span>
+                <span class="label-text ">Màn hình máy tính</span>
             </label>
-            <div id="status_2" class="text-[13px] ml-[5px] flex items-center">
+            <div id="status_2" class=" flex items-center">
             </div>
         </div>
 
-        <div class="mb-[10px] flex items-center">
-            <label class="cursor-pointer flex items-center" onclick="AdminFunction.add_product_to_category(3)">
+        <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" />
-                <span class="label-text ml-[5px]">Màn hình máy tính</span>
+                <span class="label-text ">Màn hình máy tính</span>
             </label>
-            <div id="status_3" class="text-[13px] ml-[5px] flex items-center">
+            <div id="status_3" class=" flex items-center">
             </div>
         </div>
 
diff --git a/template/product/form_components/description.html b/template/product/form_components/description.html
index 2cf83ce..20d26be 100644
--- a/template/product/form_components/description.html
+++ b/template/product/form_components/description.html
@@ -1,30 +1,27 @@
 <!-- mo ta -->
-<div class="bg-white rounded-[15px] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] py-[18px] px-[16px] mb-[20px]">
-    <div class="flex items-center justify-between">
-        <b class="text-[18px] mr-[5px]">THƯ VIỆN ẢNH</b>
-        <div class="list-btn flex items-center">
-            <a href=""
-                class="flex items-center mr-[20px] border-[1px] border-[#0041E8] p-[8px_10px] rounded-[4px] bg-[#F5F7FF]">
-                <i class="fa-solid fa-arrow-up-from-bracket text-[#0041E8]"></i>
+<div class="bg-white rounded-md shadow p-3">
+    <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>
                 <span class="text-[#0041E8] ml-[5px]">Upload ảnh</span>
             </a>
-            <a href=""
-                class="flex items-center mr-[20px] border-[1px] border-[#0041E8] p-[8px_10px] rounded-[4px] bg-[#F5F7FF]">
-                <i class="fa-regular fa-folder text-[#0041E8]"></i>
+            <a href="" class="btn btn-outline btn-view">
+                <i class="iconify lucide--folder"></i>
                 <span class="text-[#0041E8] ml-[5px]">Quản lý</span>
             </a>
-            <a href="" class="flex items-center border-[1px] border-[#0041E8] p-[8px_10px] rounded-[4px] bg-[#F5F7FF]">
-                <i class="fa-regular fa-pen-to-square text-[#0041E8]"></i>
+            <a href="" class="btn btn-outline btn-view">
+                <i class="iconify lucide--file-image"></i>
                 <span class="text-[#0041E8] ml-[5px]">Chọn ảnh trong kho ảnh chính</span>
             </a>
         </div>
     </div>
-    <div class="list-image my-[10px]">
-        <span class="block text-[#6B7280]">Chưa có thư viện ảnh cho phần miêu tả</span>
+    <div class="list-image mt-5">
+        <span class="block text-gray">Chưa có thư viện ảnh cho phần miêu tả</span>
     </div>
-    <textarea id="product-desc"> </textarea>
+    <textarea id="product-desc" class="mt-5"> </textarea>
 
-    <input class="btn w-[85px] h-[35px] min-h-[35px] bg-[#0041E8] rounded-[4px] mt-[10px] text-white cursor-pointer"
-        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>
\ No newline at end of file
diff --git a/template/product/form_components/image.html b/template/product/form_components/image.html
index 354a86c..e07109a 100644
--- a/template/product/form_components/image.html
+++ b/template/product/form_components/image.html
@@ -1,152 +1,186 @@
 <!-- hinh anh -->
-<div class="w-100%" role="tabpanel">
-    <div
-        class="bg-white rounded-[15px_15px_0_0] shadow-[0_1px_1px_0_rgba(0,0,0,0.1)] p-[15px] border-b-[6px] border-[#FAFAFB]">
+<div class="w-full" role="tabpanel">
+    <div class="bg-white rounded-md shadow p-3">
         <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 flex w-[100%] rounded-[10px] shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
-                <div class="image w-[100px] h-[100px] mr-[15px]">
+            <div class="item grid grid-cols-5 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 w-[calc(100%_-_115px)]">
-                    <div class="flex justify-between">
-                        <div class="flex items-center w-[50%]">
+                <div class="right-image col-span-4">
+                    <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-[#6B7280] ml-[5px]">(Ảnh chính)</p>
+                            <p class="text-center block text-gray">(Ảnh chính)</p>
                         </div>
-                        <div class="flex items-center justify-between w-[50%]">
-                            <div class="item flex items-center mr-[20px]">
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="item flex items-center  gap-2">
                                 <p class="whitespace-nowrap">STT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
-                            <div class="item flex items-center">
+                            <div class="item flex items-center gap-2">
                                 <p class="whitespace-nowrap">ALT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
                         </div>
                     </div>
-                    <a href=""
-                        class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
-                        <i class="icons icon-remove"></i>
-                        <p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
-                    </a>
+                    <div class="mt-3">
+                        <a href="" class="btn btn-sm btn-outline">
+                            <i class="iconify lucide--trash-2"></i>
+                            <p class="">Xoá</p>
+                        </a>
+                    </div>
                 </div>
             </div>
-            <div
-                class="item flex w-[100%] rounded-[10px]  shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
-                <div class="image w-[100px] h-[100px] mr-[15px]">
+            <div class="item grid grid-cols-5 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 w-[calc(100%_-_115px)]">
-                    <div class="flex justify-between">
-                        <div class="flex items-center w-[50%]">
+                <div class="right-image col-span-4">
+                    <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-[#6B7280] ml-[5px]">(Ảnh chính)</p>
                         </div>
-                        <div class="flex items-center justify-between w-[50%]">
-                            <div class="item flex items-center mr-[20px]">
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="item flex items-center  gap-2">
                                 <p class="whitespace-nowrap">STT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
-                            <div class="item flex items-center">
+                            <div class="item flex items-center gap-2">
                                 <p class="whitespace-nowrap">ALT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
                         </div>
                     </div>
-                    <a href=""
-                        class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
-                        <i class="icons icon-remove"></i>
-                        <p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
-                    </a>
+                    <div class="mt-3">
+                        <a href="" class="btn btn-sm btn-outline">
+                            <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 flex w-[100%] rounded-[10px]  shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
-                <div class="image w-[100px] h-[100px] mr-[15px]">
+            <div class="item grid grid-cols-5 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 w-[calc(100%_-_115px)]">
-                    <div class="flex justify-between">
-                        <div class="flex items-center w-[50%]">
+                <div class="right-image col-span-4">
+                    <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-[#6B7280] ml-[5px]">(Ảnh chính)</p>
                         </div>
-                        <div class="flex items-center justify-between w-[50%]">
-                            <div class="item flex items-center mr-[20px]">
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="item flex items-center  gap-2">
                                 <p class="whitespace-nowrap">STT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
-                            <div class="item flex items-center">
+                            <div class="item flex items-center gap-2">
                                 <p class="whitespace-nowrap">ALT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
                         </div>
                     </div>
-                    <a href=""
-                        class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
-                        <i class="icons icon-remove"></i>
-                        <p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
-                    </a>
+                    <div class="mt-3">
+                        <a href="" class="btn btn-sm btn-outline">
+                            <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 flex w-[100%] rounded-[10px]  shadow-[0_1px_1px_0_#0000001A] border-[1px] border-[#f6f6f6] p-[15px] mb-[15px]">
-                <div class="image w-[100px] h-[100px] mr-[15px]">
+            <div class="item grid grid-cols-5 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 w-[calc(100%_-_115px)]">
-                    <div class="flex justify-between">
-                        <div class="flex items-center w-[50%]">
+                <div class="right-image col-span-4">
+                    <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-[#6B7280] ml-[5px]">(Ảnh chính)</p>
                         </div>
-                        <div class="flex items-center justify-between w-[50%]">
-                            <div class="item flex items-center mr-[20px]">
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="item flex items-center  gap-2">
                                 <p class="whitespace-nowrap">STT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
-                            <div class="item flex items-center">
+                            <div class="item flex items-center gap-2">
                                 <p class="whitespace-nowrap">ALT</p>
-                                <input type="text"
-                                    class="w-[112px] h-[32px] px-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] ml-[10px] rounded-[4px] border-[#d8d8d8] border-[1px]">
+                                <input type="text" class="input shadow">
                             </div>
                         </div>
                     </div>
-                    <a href=""
-                        class="flex items-center w-[70px] h-[35px] p-[10px] border-[#ECECEC] border-[1px] rounded-[4px] mt-[15px]">
-                        <i class="icons icon-remove"></i>
-                        <p class="text-[#6B7280] ml-[5px] text-[12px] mt-[2px]">Xoá</p>
-                    </a>
+                    <div class="mt-3">
+                        <a href="" class="btn btn-sm btn-outline">
+                            <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="image">
+                    <img src="{{ 'image-big.png' | asset_url }}" alt="">
+                </div>
+                <div class="right-image col-span-4">
+                    <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>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="item flex items-center  gap-2">
+                                <p class="whitespace-nowrap">STT</p>
+                                <input type="text" class="input shadow">
+                            </div>
+                            <div class="item flex items-center gap-2">
+                                <p class="whitespace-nowrap">ALT</p>
+                                <input type="text" class="input shadow">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-3">
+                        <a href="" class="btn btn-sm btn-outline">
+                            <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>
     </div>
 
-    <div class="bg-white border-[1px] p-[15px] border-b-[6px] border-[#FAFAFB]">
-        <b class="text-[20px] block">Thêm ảnh cho sản phẩm</b>
-        <p class="text-[#6B7280]">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-[10px]">
-            <a href=""
-                class="item flex items-center px-[15px] py-[8px] border-[1px] border-[#0041E8] rounded-[4px] mr-[15px]">
-                <i class="fa-solid fa-arrow-up-from-bracket text-[#0041E8]"></i>
-                <span class="pl-[5px] text-[#0041E8] font-[500]">Upload ảnh</span>
-            </a>
+    <div class="bg-white rounded-md shadow p-3 mt-5">
+        <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>
-        <p class="text-[#6B7280] italic mt-[10px]"><b>Chú ý:</b> Bạn có thể chọn nhiều ảnh cùng 1
+
+        <input type="file" id="hidden-filepond-input" multiple style="display:none;" />
+
+
+        <div id="image-preview-filepond"></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=" w-[82px] h-[32px] bg-[#0041E8] rounded-[4px] text-white cursor-pointer py-[0] mt-[10px]"
-            name="commit" type="submit" value="Cập nhật">
+        <input class="btn btn-active" 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]">
diff --git a/template/product/form_components/seo.html b/template/product/form_components/seo.html
index 0a69b11..a33f037 100644
--- a/template/product/form_components/seo.html
+++ b/template/product/form_components/seo.html
@@ -1,90 +1,76 @@
 <!-- box seo -->
-<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="mb-[25px]">
-            <label for="" class="mb-[5px] block font-[700] text-[14px] text-[#383C44]">Link truy cập tại website</label>
+<div class="" role="tabpanel">
+    <div class="bg-white p-3 rounded-sm shadow">
+        <div class="">
+            <label for="" class=" block font-bold">Link truy cập tại website</label>
             <input type="text" name="url_index"
                 value="https://demopc8.hurasoft.com/may-do-do-bong-horiba-ig-320-gloss-metergoc-do-60-khoang-do-00-1000-phan-do-..."
-                placeholder="Link truy cập tại website"
-                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]">
+                placeholder="Link truy cập tại website" class="input mt-3 shadow w-full rounded-sm-bold">
         </div>
-        <div class="mb-[25px]">
-            <label for="" class="mb-[5px] block font-[700] text-[14px] text-[#383C44]">Tên Index</label>
+        <div class="mt-5">
+            <label for="" class=" block font-bold">Tên Index</label>
             <input type="text" name="url_index" value="" placeholder="Tên Index"
-                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]">
+                class="input mt-3 shadow w-full rounded-sm-bold">
         </div>
 
-        <div class="mb-[25px]">
-            <label for="" class="mb-[5px] block font-[700] text-[14px] text-[#383C44]">Thay đổi Link truy cập khi thay
+        <div class="mt-5">
+            <label for="" class="block font-bold">Thay đổi Link truy cập khi thay
                 đổi Tên index?</label>
             <div class="flex items-center">
-                <label class="flex items-center cursor-pointer text-[#6B7280]">
+                <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="">
-                    <i class="ml-[5px] text-[#6B7280] label-text">(Tích chọn nếu bạn muốn hệ thống thay đổi link truy
+                    <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:
                         sẽ ảnh hưởng tới
                         kết quả SEO)
                     </i>
                 </label>
-
             </div>
         </div>
-
-        <div class="mb-[25px]">
-            <div class="flex items-center mb-[5px]">
-                <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Url canonical</label>
-                <i class="text-[#6B7280] ml-[5px]">* để trống sẽ dùng link mặc định của hệ thống</i>
+        <div class="mt-5">
+            <div class="flex items-center gap-3">
+                <label for="" class="block font-bold">Url canonical</label>
+                <i class="text-gray">* để trống sẽ dùng link mặc định của hệ thống</i>
             </div>
             <input type="text" name="url_canonical" value="" placeholder="Url canonical"
-                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 mt-3 shadow w-full rounded-sm-bold">
         </div>
 
-        <div class="mb-[25px]">
-            <div class="flex items-center mb-[5px]">
-                <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Url canonical</label>
-                <i class="text-[#6B7280] ml-[5px]">* để trống sẽ dùng link mặc định của hệ thống</i>
-            </div>
-            <input type="text" name="url_canonical" value="" placeholder="Url canonical"
-                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 class="flex items-center flex-wrap mr-[-12px]">
-            <div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Meta Title</label>
-                    <i class="text-[#6B7280]">* 0 ký tự , 0 từ</i>
+        <div class="grid grid-cols-2 gap-3 mt-5">
+            <div class="">
+                <div class="flex items-center gap-3">
+                    <label for="" class="block font-bold">Meta Title</label>
+                    <i class="text-gray">* 0 ký tự , 0 từ</i>
                 </div>
                 <input type="text" value="" name="meta_title" id="meta_title" placeholder="Meta Title"
-                    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 mt-3 shadow w-full rounded-sm-bold">
             </div>
-            <div class="w-[calc(50%_-_12px)] mr-[12px] mb-[25px]">
-                <div class="flex items-center mb-[5px]">
-                    <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Meta Keyword</label>
-                    <i class="text-[#6B7280]">* 0 ký tự , 0 từ</i>
+            <div class="">
+                <div class="flex items-center gap-3">
+                    <label for="" class="block font-bold">Meta Keyword</label>
+                    <i class="text-gray">* 0 ký tự , 0 từ</i>
                 </div>
                 <input type="text" value="" name="meta_keyword" id="meta_keyword" placeholder="Meta Keyword"
-                    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 mt-3 shadow w-full rounded-sm-bold">
             </div>
         </div>
 
-        <div class="mb-[5px]">
-            <div class="flex items-center mb-[5px]">
-                <label for="" class="mr-[5px] font-[700] text-[14px] text-[#383C44]">Meta Description(nên tối đa 160 ký
+        <div class="mt-5">
+            <div class="flex items-center gap-3">
+                <label for="" class="block font-bold">Meta Description(nên tối đa 160 ký
                     tự)</label>
-                <i class="text-[#6B7280] ml-[5px]">* 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự)</i>
+                <i class="text-gray">* 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự)</i>
             </div>
             <textarea type="text" name="meta_description" value="" placeholder="Meta Description"
-                class="w-[100%] h-[120px] textarea textarea-bordered h-[35px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
+                class="textarea textarea-bordered rounded-sm shadow mt-3 w-full"></textarea>
         </div>
 
     </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" id="submit-collection-btn"
-            name="commit" type="submit" value="Cập nhật" />
+    <div class="bg-white mt-5 p-3 rounded-md shadow">
+        <input class="btn btn-active" id="submit-collection-btn" name="commit" type="submit" value="Cập nhật" />
     </div>
 </div>
\ No newline at end of file
diff --git a/template/product/form_components/spec_group.html b/template/product/form_components/spec_group.html
index 579110c..0eb9976 100644
--- a/template/product/form_components/spec_group.html
+++ b/template/product/form_components/spec_group.html
@@ -1,138 +1,134 @@
 <!-- thuoc tinh -->
 <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 mb-[5px] text-[20px] font-[700]">Cập nhật thuộc tính cho Sản phẩm</b>
-        <div class="flex items-center">
-            <span class="text-[#6B7280] mr-[5px]">Hoặc</span>
-            <a href="sell_product.php?id=2115&view=spec&noattr=1&l=vn&popup=0" class="text-[#0041E8]">Cập nhật thông số
+    <div class="bg-white p-3 rounded-md shadow">
+        <b class="block  text-xl font-bold">Cập nhật thuộc tính cho Sản phẩm</b>
+        <div class="flex items-center gap-2 mt-3">
+            <span class="text-gray">Hoặc</span>
+            <a href="sell_product.php?id=2115&view=spec&noattr=1&l=vn&popup=0" class="text-primary">Cập nhật thông số
                 kỹ thuật không cần
                 thuộc tính
             </a>
         </div>
-
     </div>
 
-    <div class="bg-white border-b-[6px] border-[#FAFAFB]">
+    <div class="bg-white rounded-md shadow mt-5">
 
-        <div class="item-attributes p-[10px_15px] border-b-[2px] border-[#FAFAFB]">
-            <b class="text-[#383C44]">Dòng cpu</b>
-            <p class="text-[#383C44]">dong-cpu</p>
-            <i class="text-[#6B7280]">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="flex flex-wrap mt-[15px]">
-                <label class="flex align-items mb-[15px] w-[calc(100%_/4)] cursor-pointer">
-                    <input type="checkbox" class="checkbox checkbox-success" name="new" checked="">
-                    <span class="label-text ml-[10px]">Core i3</span>
+        <div class="item-attributes p-3">
+            <b class="text-gray">Dòng cpu</b>
+            <p class="text-gray">dong-cpu</p>
+            <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="">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
             </div>
-            <div class="">
-                <div class="flex items-center">
+            <div class="mt-5">
+                <div class="flex items-center gap-3">
                     <b>Bổ sung giá trị:</b>
-                    <p class="px-[5px]">mỗi giá trị 1 dòng</p>
-                    <a href="/admin/product/attribute-add&id=98#attr_value"><i class="icons icon-edit"></i></a>
+                    <p class="">mỗi giá trị 1 dòng</p>
+                    <a href="/admin/product/attribute-add&id=98#attr_value" class="text-primary"><i
+                            class="iconify lucide--pencil"></i></a>
                 </div>
-                <textarea name="" id=""
-                    class="w-[100%] h-[50px] textarea textarea-bordered rounded-[4px] mt-[7px]"></textarea>
+                <textarea name="" id="" class="w-full textarea textarea-bordered rounded-sm mt-3"></textarea>
             </div>
         </div>
 
-        <div class="item-attributes p-[10px_15px] border-b-[2px] border-[#FAFAFB]">
-            <b class="text-[#383C44]">Dòng cpu</b>
-            <p class="text-[#383C44]">dong-cpu</p>
-            <i class="text-[#6B7280]">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="flex flex-wrap mt-[15px]">
-                <label class="flex align-items mb-[15px] w-[calc(100%_/4)] cursor-pointer">
-                    <input type="checkbox" class="checkbox checkbox-success" name="new" checked="">
-                    <span class="label-text ml-[10px]">Core i3</span>
+        <div class="item-attributes p-3 mt-5">
+            <b class="text-gray">Dòng cpu</b>
+            <p class="text-gray">dong-cpu</p>
+            <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="">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
             </div>
-            <div class="">
-                <div class="flex items-center">
+            <div class="mt-5">
+                <div class="flex items-center gap-3">
                     <b>Bổ sung giá trị:</b>
-                    <p class="px-[5px]">mỗi giá trị 1 dòng</p>
-                    <a href="/admin/product/attribute-add&id=98#attr_value"><i class="icons icon-edit"></i></a>
+                    <p class="">mỗi giá trị 1 dòng</p>
+                    <a href="/admin/product/attribute-add&id=98#attr_value" class="text-primary"><i
+                            class="iconify lucide--pencil"></i></a>
                 </div>
-                <textarea name="" id=""
-                    class="w-[100%] h-[50px] textarea textarea-bordered rounded-[4px] mt-[7px]"></textarea>
+                <textarea name="" id="" class="w-full textarea textarea-bordered rounded-sm mt-3"></textarea>
             </div>
         </div>
-
-        <div class="item-attributes p-[10px_15px] border-b-[2px] border-[#FAFAFB]">
-            <b class="text-[#383C44]">Dòng cpu</b>
-            <p class="text-[#383C44]">dong-cpu</p>
-            <i class="text-[#6B7280]">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="flex flex-wrap mt-[15px]">
-                <label class="flex align-items mb-[15px] w-[calc(100%_/4)] cursor-pointer">
-                    <input type="checkbox" class="checkbox checkbox-success" name="new" checked="">
-                    <span class="label-text ml-[10px]">Core i3</span>
+        <div class="item-attributes p-3 mt-5">
+            <b class="text-gray">Dòng cpu</b>
+            <p class="text-gray">dong-cpu</p>
+            <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="">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
-                <label class="flex align-items cursor-pointer mb-[15px] w-[calc(100%_/4)] text-[#6B7280]">
-                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-success">
-                    <span class="label-text ml-[10px]">Core i3</span>
+                <label class="flex align-items cursor-pointer gap-3">
+                    <input type="checkbox" name="new" checked="" class="checkbox checkbox-sm checkbox-success">
+                    <span class="label-text">Core i3</span>
                 </label>
             </div>
-            <div class="">
-                <div class="flex items-center">
+            <div class="mt-5">
+                <div class="flex items-center gap-3">
                     <b>Bổ sung giá trị:</b>
-                    <p class="px-[5px]">mỗi giá trị 1 dòng</p>
-                    <a href="/admin/product/attribute-add&id=98#attr_value"><i class="icons icon-edit"></i></a>
+                    <p class="">mỗi giá trị 1 dòng</p>
+                    <a href="/admin/product/attribute-add&id=98#attr_value" class="text-primary"><i
+                            class="iconify lucide--pencil"></i></a>
                 </div>
-                <textarea name="" id=""
-                    class="w-[100%] h-[50px] textarea textarea-bordered rounded-[4px] mt-[7px]"></textarea>
+                <textarea name="" id="" class="w-full textarea textarea-bordered rounded-sm mt-3"></textarea>
             </div>
         </div>
 
     </div>
-    <div class="bg-white p-[15px] border-[#FAFAFB] rounded-[0_0_10px_10px] shadow-[0_1px_1px_0px_#0000001A]">
-        <div class="flex items-center">
-            <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">
-            <a href="" class="px-[10px] py-[5px] rounded-[4px] border-[1px] border-[#0041E8] text-[#0041E8] ml-[7px]">
+    <div class="bg-white p-3  rounded-md shadow mt-5">
+        <div class="flex items-center gap-3">
+            <input class=" btn btn-active btn-md" name="commit" type="submit" value="Cập nhật">
+            <a href="" class="btn btn-outline btn-view btn-md">
                 Cập nhật không thuộc tính
             </a>
         </div>