update

assets/script/hura.global.css

@@ -263,4 +263,20 @@
   .text-active {
     color: var(--color-hura);
   }
+
+  .choices {
+    margin-top: calc(var(--spacing) * 2);
+    --tw-shadow:
+      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-radius: var(--radius-sm);
+  }
+  .choices__inner {
+    background: #fff !important;
+    min-height: 38px !important;
+    padding: 5px !important;
+  }
 }

template/javascript/product_form.html

@@ -1,14 +1,16 @@
 <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" />
 
+<!-- plugin upload image -->
 <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>
 
 
+<!-- plugin select -->
+<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
+
 <script>
     // Quan trọng: đăng ký plugin
     FilePond.registerPlugin(FilePondPluginImagePreview);
@@ -82,4 +84,5 @@
     });
 
 
+    new Choices("#brandSelect")
 </script>

template/product/form_components/basic.html

@@ -74,7 +74,8 @@
                         <a href="" class="link-primary">Quản lý thương hiệu</a>
                     </div>
                 </div>
-                <select name="brand" id="brandSelect" class="select select-bordered w-full mt-2 shadow rounded-sm">
+                <select name="brand" id="brandSelect" class="select select-bordered w-full mt-3 shadow rounded-sm"
+                    aria-label="Select">
                     <option value="" class="text-[#6B7280]">--Chọn thương hiệu--</option>
                     <option value="">ABS</option>
                     <option value="83">ABS</option>