up

assets/script/global.js

@@ -30,9 +30,6 @@ const AdminFunction = (() => {
             $("#js-status-hottype-" + e).html("");
         }, 1e3);
     }
-    function a(e) {
-        $(e).select2();
-    }
     function i(e) {
         $("#overlay").addClass("active"), $(".status-notificatiom").addClass("active"), !0 === e ? $(".status-notificatiom .content").html('<i class="fa fa-check"></i> <b>Cập nhật thành công</b>\n            <p>Đơn hàng #000-368 đã được cập nhật thành công</p>') : $(".status-notificatiom .content").html('<i class="fa-solid fa-triangle-exclamation"></i> <b>Lỗi cập nhật</b><p>Có một số vấn đề với hoạt động của bạn.</p>');
     }

assets/script/pc_style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
 *,
 ::after,
 ::before {
@@ -128,34 +129,22 @@ a {
   width: 16%;
   padding: 20px 0;
   line-height: 20px;
+}
+.admin-menu-container.active {
   overflow-y: auto;
+  overflow-x: hidden;
 }
 .admin-menu-container a {
   color: #fff;
 }
 .admin-menu-container .menu-logo {
   display: table;
-  margin-bottom: 50px;
+  margin-bottom: 25px;
   margin-left: 16px;
 }
 .admin-menu-container .menu-logo img {
   height: 22px;
 }
-.admin-menu-container details[open] svg {
-  transform: rotate(90deg);
-}
-.admin-menu-container details[open] summary {
-  background: #81b5e4;
-}
-.admin-menu-container details[open] summary a {
-  font-weight: 700;
-}
-.admin-menu-container details[open] .icons {
-  filter: brightness(100);
-}
-.admin-menu-container details[open] .fa-angle-right {
-  transform: rotate(90deg);
-}
 .admin-menu-container svg {
   position: absolute;
   right: 16px;
@@ -173,7 +162,7 @@ a {
 .admin-menu-container .item:hover .icons {
   filter: brightness(100);
 }
-.admin-menu-container .item:hover .sub-hover {
+.admin-menu-container .item:hover .hover-menu {
   display: block;
 }
 .admin-menu-container .item .icons {
@@ -184,8 +173,17 @@ a {
 .admin-menu-container .title-main {
   width: 100%;
 }
+.admin-menu-container .box-item:hover .hover-menu {
+  visibility: visible;
+  opacity: 1;
+  left: calc(100% + 10px);
+}
+.admin-menu-container .box-item:hover .hover-menu::before {
+  display: block;
+}
 .admin-menu-container .sub-menu {
   position: relative;
+  display: none;
 }
 .admin-menu-container .sub-menu a {
   display: block;
@@ -204,6 +202,73 @@ a {
 .admin-menu-container .sub-menu a:last-child {
   margin: 0;
 }
+.admin-menu-container .hover-menu {
+  padding: 10px 22px 10px 15px;
+  border-radius: 6px;
+  background: #004e99;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  z-index: -1;
+  transition: 0.2s all;
+  position: absolute;
+  left: calc(100% + 30px);
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
+  min-width: 200px;
+  z-index: 999;
+  max-height: 400px;
+  overflow: auto;
+}
+.admin-menu-container .hover-menu.bottom {
+  bottom: -30px;
+  top: unset;
+}
+.admin-menu-container .hover-menu::before {
+  position: absolute;
+  left: -15px;
+  top: 0;
+  width: 30px;
+  height: 100%;
+  content: "";
+  display: none;
+}
+.admin-menu-container .hover-menu a {
+  display: block;
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 12px;
+  padding-left: 20px;
+}
+.admin-menu-container .hover-menu a::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #79b0e2;
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 9;
+}
+.admin-menu-container .hover-menu a::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+.admin-menu-container .hover-menu a:last-child {
+  padding-bottom: 0;
+}
+.admin-menu-container .hover-menu a:last-child::after {
+  display: none;
+}
+.admin-menu-container .hover-menu a:hover {
+  text-decoration: underline;
+}
 .admin-menu-container .icon-home {
   background-position: -9px -7px;
 }
@@ -263,10 +328,6 @@ a {
 .admin-content-container {
   width: calc(100% - 50px);
 }
-.admin-content-container.show-large-menu {
-  width: 82%;
-  margin-left: 0;
-}
 .admin-content-container .note-list {
   min-width: 144px;
 }

assets/script/pc_style.scss

@@ -1,3 +1,5 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
+
 *,
 ::after,
 ::before {
@@ -111,37 +113,21 @@ a {
     width: 16%;
     padding: 20px 0;
     line-height: 20px;
-    overflow-y: auto;
+    &.active {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
     a {
         color: #fff;
     }
     .menu-logo {
         display: table;
-        margin-bottom: 50px;
+        margin-bottom: 25px;
         margin-left: 16px;
         img {
             height: 22px;
         }
     }
-    details {
-        &[open] {
-            svg {
-                transform: rotate(90deg);
-            }
-            summary {
-                background: #81b5e4;
-                a {
-                    font-weight: 700;
-                }
-            }
-            .icons {
-                filter: brightness(100);
-            }
-            .fa-angle-right {
-                transform: rotate(90deg);
-            }
-        }
-    }
 
     svg {
         position: absolute;
@@ -160,7 +146,7 @@ a {
             .icons {
                 filter: brightness(100);
             }
-            .sub-hover {
+            .hover-menu {
                 display: block;
             }
         }
@@ -174,8 +160,21 @@ a {
     .title-main {
         width: 100%;
     }
+    .box-item {
+        &:hover {
+            .hover-menu {
+                visibility: visible;
+                opacity: 1;
+                left: calc(100% + 10px);
+                &::before {
+                    display: block;
+                }
+            }
+        }
+    }
     .sub-menu {
         position: relative;
+        display: none;
         a {
             display: block;
             padding: 10px 10px 10px 45px;
@@ -194,6 +193,74 @@ a {
             }
         }
     }
+    .hover-menu {
+        padding: 10px 22px 10px 15px;
+        border-radius: 6px;
+        background: #004e99;
+        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+        white-space: nowrap;
+        z-index: -1;
+        transition: 0.2s all;
+        position: absolute;
+        left: calc(100% + 30px);
+        top: 0;
+        opacity: 0;
+        visibility: hidden;
+        min-width: 200px;
+        z-index: 999;
+        max-height: 400px;
+        overflow: auto;
+        &.bottom {
+            bottom: -30px;
+            top: unset;
+        }
+        &::before {
+            position: absolute;
+            left: -15px;
+            top: 0;
+            width: 30px;
+            height: 100%;
+            content: "";
+            display: none;
+        }
+        a {
+            display: block;
+            line-height: 18px;
+            position: relative;
+            padding-bottom: 12px;
+            padding-left: 20px;
+            &::before {
+                content: "";
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: #79b0e2;
+                position: absolute;
+                top: 4px;
+                left: 0;
+                z-index: 9;
+            }
+            &::after {
+                content: "";
+                width: 1px;
+                height: 100%;
+                background: #fff;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+            }
+            &:last-child {
+                padding-bottom: 0;
+                &::after {
+                    display: none;
+                }
+            }
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
     .icon-home {
         background-position: -9px -7px;
     }
@@ -253,10 +320,6 @@ a {
 
 .admin-content-container {
     width: calc(100% - 50px);
-    &.show-large-menu {
-        width: 82%;
-        margin-left: 0;
-    }
     .note-list {
         min-width: 144px;
         a {

assets/typescript/main.js

@@ -1,10 +1,10 @@
 "use strict";
-const AdminFunctions = (() => {
+var AdminFunctions = (function () {
     function toggleMenuVisibility(hideLargeMenu) {
-        const contentContainer = $('#js-admin-content-container');
+        var contentContainer = $('#js-admin-content-container');
-        const largeMenu = $('#js-menu-big');
+        var largeMenu = $('#js-menu-big');
-        const smallMenu = $('#js-menu-small');
+        var smallMenu = $('#js-menu-small');
-        const searchForm = $('#js-form-search');
+        var searchForm = $('#js-form-search');
         contentContainer.toggleClass('show-large-menu', !hideLargeMenu);
         largeMenu.toggleClass('hidden', hideLargeMenu);
         smallMenu.toggleClass('hidden', !hideLargeMenu);
@@ -13,15 +13,19 @@ const AdminFunctions = (() => {
         localStorage.removeItem(hideLargeMenu ? 'menu_small' : 'menu_big');
     }
     function debounce(func, wait, immediate) {
-        let timeout = null;
+        var timeout = null;
-        return function (...args) {
+        return function () {
-            const context = this;
+            var args = [];
-            const later = function () {
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var context = this;
+            var later = function () {
                 timeout = null;
                 if (!immediate)
                     func.apply(context, args);
             };
-            const callNow = immediate && !timeout;
+            var callNow = immediate && !timeout;
             if (timeout !== null) {
                 clearTimeout(timeout);
             }
@@ -31,9 +35,9 @@ const AdminFunctions = (() => {
         };
     }
     function addProductToCategory(productId) {
-        const statusElement = $('#status_' + productId);
+        var statusElement = $('#status_' + productId);
         statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
-        setTimeout(() => {
+        setTimeout(function () {
             statusElement.html('');
         }, 1000);
     }
@@ -46,20 +50,16 @@ const AdminFunctions = (() => {
         });
     }
     function markProductAsHot(productId) {
-        const statusElement = $('#js-status-hottype-' + productId);
+        var statusElement = $('#js-status-hottype-' + productId);
         statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
-        setTimeout(() => {
+        setTimeout(function () {
             statusElement.html('');
         }, 1000);
     }
-    function initializeSearchDropdown(selector) {
-        $(selector).select2();
-    }
     return {
-        toggleMenuVisibility,
+        toggleMenuVisibility: toggleMenuVisibility,
-        addProductToCategory,
+        addProductToCategory: addProductToCategory,
-        searchSuggestions,
+        searchSuggestions: searchSuggestions,
-        initializeSearchDropdown,
+        markProductAsHot: markProductAsHot
-        markProductAsHot
     };
 })();

assets/typescript/main.ts

@@ -4,7 +4,6 @@ interface AdminFunctions {
     toggleMenuVisibility(hideLargeMenu: boolean): void;
     addProductToCategory(productId: string): void;
     searchSuggestions(inputSelector: string): void;
-    initializeSearchDropdown(selector: string): void;
     markProductAsHot(productId: string): void;
 }
 
@@ -68,15 +67,10 @@ const AdminFunctions: AdminFunctions = (() => {
         }, 1000);
     }
 
-    function initializeSearchDropdown(selector: string): void {
-        $(selector).select2();
-    }
-
     return {
         toggleMenuVisibility,
         addProductToCategory,
         searchSuggestions,
-        initializeSearchDropdown,
         markProductAsHot
     };
 })();

template/javascript/global.html

@@ -1,7 +1,5 @@
 <script>
     $(document).ready(function () {
-        // Popup
-        Fancybox.bind("[data-fancybox]", {});
 
         // Sự kiện click để hiển thị menu
         $('#js-show-menu').click(function () {
@@ -19,10 +17,6 @@
 
         AdminFunctions.searchSuggestions('#js-input-search')
 
-        AdminFunctions.initializeSearchDropdown('#js-assign-admin');
-
-        AdminFunctions.initializeSearchDropdown('#js-order-status-select');
-
     })
 
     function formatCurrency(a) {
@@ -31,4 +25,11 @@
         b = b.substring(0, len - 3);
         return b;
     }
+
+
+    function toggleSubMenu(id) {
+        const submenu = $('#' + id);
+        submenu.toggle();
+        $('#js-menu-big').toggleClass('active');
+    }
 </script>

template/javascript/product_form.html

@@ -37,5 +37,4 @@
     });
 
 
-    $("#brandSelect").select2();
 </script>

template/order/detail.html

@@ -51,8 +51,9 @@
                             <td> Địa chỉ nhận hàng </td>
                             <td>
                                 <span> Kiến Hưng, Quận Hà Đông, Hà Nội </span>
-                                <a href="#js-update-shipping-address" data-fancybox title="Cập nhật địa chỉ nhận hàng"
+                                <a onclick="js_update_shipping_address.showModal()" href="javascript:void(0)"
-                                    class="icons icon-edit inline-block" style="background-position: -111px -86px;"></a>
+                                    title="Cập nhật địa chỉ nhận hàng" class="icons icon-edit inline-block"
+                                    style="background-position: -111px -86px;"></a>
                             </td>
                         </tr>
 
@@ -329,80 +330,85 @@
 </div>
 
 <!-- // Cập nhật địa chỉ nhận hàng -->
-<div id="js-update-shipping-address" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
+<dialog id="js_update_shipping_address" class="modal">
-    <p class="leading-[20px] text-[16px] font-bold mb-[20px]"> Cập nhật địa chỉ nhận hàng </p>
+    <div class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px] bg-white modal-box">
+        <p class="leading-[20px] text-[16px] font-bold mb-[20px]"> Cập nhật địa chỉ nhận hàng </p>
 
-    <table class="w-[100%]">
+        <table class="w-[100%]">
-        <tr>
+            <tr>
-            <td width="100">Họ tên</td>
+                <td width="100">Họ tên</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-person_name" value="Nguyen Duc Quan"
+                    <input type="text" id="js-shipping-address-person_name" value="Nguyen Duc Quan"
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <tr>
+            <tr>
-            <td>Mobile</td>
+                <td>Mobile</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-mobile" value="0832256395"
+                    <input type="text" id="js-shipping-address-mobile" value="0832256395"
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <tr>
+            <tr>
-            <td>Tỉnh/thành</td>
+                <td>Tỉnh/thành</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-province_name" value="TP HCM"
+                    <input type="text" id="js-shipping-address-province_name" value="TP HCM"
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <tr>
+            <tr>
-            <td>Quận huyện</td>
+                <td>Quận huyện</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-district_name" value="Quận Gò Vấp"
+                    <input type="text" id="js-shipping-address-district_name" value="Quận Gò Vấp"
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <tr>
+            <tr>
-            <td>Phường/xã</td>
+                <td>Phường/xã</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-ward_name" value=""
+                    <input type="text" id="js-shipping-address-ward_name" value=""
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <tr>
+            <tr>
-            <td>Địa chỉ</td>
+                <td>Địa chỉ</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-address" size="50" value="Kiến Hưng - Hà Đông - Hà Nội"
+                    <input type="text" id="js-shipping-address-address" size="50" value="Kiến Hưng - Hà Đông - Hà Nội"
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <!--<tr><td>Phân loại</td><td><input type=text id="js-shipping-address-type" size=30 value="" /></td></tr>-->
+            <!--<tr><td>Phân loại</td><td><input type=text id="js-shipping-address-type" size=30 value="" /></td></tr>-->
-        <tr>
+            <tr>
-            <td>Ghi chú</td>
+                <td>Ghi chú</td>
-            <td>
+                <td>
-                <input type="text" id="js-shipping-address-note" value="test"
+                    <input type="text" id="js-shipping-address-note" value="test"
-                    class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
+                        class="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] p-[0_10px] w-[100%] h-[32px] mb-[10px] border border-[#D8D8D8] rounded-[4px] block">
-            </td>
+                </td>
-        </tr>
+            </tr>
 
-        <tr>
+            <tr>
-            <td></td>
+                <td></td>
-            <td>
+                <td>
-                <input type="button" value="Cập nhật" onclick="OrderManagement.updateShippingAddress()"
+                    <input type="button" value="Cập nhật" onclick="OrderManagement.updateShippingAddress()"
-                    class="text-[#fff] bg-[#0041E8] rounded-[4px] h-[32px] p-[0_8px] cursor-pointer">
+                        class="text-[#fff] bg-[#0041E8] rounded-[4px] h-[32px] p-[0_8px] cursor-pointer">
-            </td>
+                </td>
-        </tr>
+            </tr>
-    </table>
+        </table>
-</div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
 
 
 <!-- // Cập nhật địa chỉ thanh toán -->
-<div id="js-update-payment" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
+<dialog id="js_update_payment" class="p-[20px_16px] rounded-[15px] w-[100%] max-w-[600px]" style="display: none;">
     <p class="leading-[20px] text-[16px] font-bold mb-[15px]"> Cập nhật địa chỉ thanh toán </p>
 
     <label class="inline-flex cursor-pointer">
@@ -482,7 +488,7 @@
             </tr>
         </table>
     </div>
-</div>
+</dialog>
 
 
 <!-- // Cập nhật phí ship cho đơn hàng -->

template/product/form.html

@@ -114,3 +114,8 @@
         </div>
     </div>
 </div>
+
+
+<input type="checkbox" checked="checked"
+    class="checkbox border-orange-400 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange] checked:border-indigo-800" />
+<input type="checkbox" checked="checked" class="checkbox [--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]" />

template/theme.html

@@ -11,13 +11,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
         rel="stylesheet">
-    <!-- <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" /> -->
     <link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
-    <link rel="stylesheet" media="screen" href="{{ 'fancybox.css' | asset_url }}" />
-    <link rel="stylesheet" media="screen" href="{{ 'select2.css' | asset_url }}?v2.1" />
     <link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2024.19" />
-
+    <script src="{{ 'tailwindcss.js' | asset_url }}"></script>
 
 </head>
 
@@ -29,12 +25,12 @@
     <div class="admin-global-container">
 
         <!-- Menu full  -->
-        <div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh]" id="js-menu-big">
+        <div class="admin-menu-container box-menu fixed top-0 left-0 h-[100vh] z-[999]" id="js-menu-big">
             <a href="" class="menu-logo">
                 <img src="{{ 'logo.png' | asset_url }}" />
             </a>
 
-            <div class="menu-list m-[50px_5px]">
+            <div class="menu-list m-[25px_5px]">
                 <a href="/"
                     class="item flex  items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px] {% if global.module == 'home' %} active {% endif %}">
                     <i class="icons icon-home"></i>
@@ -45,9 +41,9 @@
                 {% assign _type = _category[0] %}
                 {% assign _menuArray = _category[1].menu %}
                 {% if _category[1].enable == 1 %}
-                <details class="relative w-[100%]" {% if _type==global.module %} open {% endif %}>
+                <div class="relative w-[100%] box-item" {% if _type==global.module %} open {% endif %}>
-                    <summary class="item flex items-center justify-between cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]
+                    <div class="item flex items-center justify-between cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]
- {% if _type == global.module %} active {% endif %}">
+ {% if _type == global.module %} active {% endif %}" onclick="toggleSubMenu('{{ _type }}')">
                         <div class="flex items-center">
                             {% if _type == 'order' %} <i class="icons w-[20px] h-[20px] mr-[13px] icon-order"></i>
                             {% elsif _type == 'product' %} <i
@@ -74,47 +70,38 @@
                         </div>
 
                         <i class="fa-solid fa-chevron-right"></i>
-                    </summary>
+                    </div>
 
-                    <div class="sub-menu">
+                    <div class="sub-menu" id="{{ _type }}">
                         {% for _item in _menuArray %}
                         <a href="{{ _item.url }}"
                             class="p-[8px_16px] flex items-center {% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
                             {{_item.name }} </a>
                         {% endfor %}
                     </div>
-                </details>
+
+                    <div class="hover-menu {% if _type == 'system' or _type == 'report' %}bottom{% endif %}">
+                        {% for _item in _menuArray %}
+                        <a href="{{ _item.url }}"
+                            class="flex items-center {% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
+                            {{_item.name }} </a>
+                        {% endfor %}
+                    </div>
+                </div>
                 {% endif %}
                 {% endfor %}
-            </div>
+                <a href=""
-
+                    class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
-            <div class="menu-list">
+                    <i class="icons w-[20px] h-[20px] mr-[13px] icon-account"></i>
-                <p style="color: #81B5E4;margin: 0 0 10px;font-weight: 700;padding: 0 16px;">TÀI KHOẢN</p>
+                    <span class="title">Quản lý tài khoản </span>
-
+                </a>
                 <a href=""
                     class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
                     <i class="icons w-[20px] h-[20px] mr-[13px] icon-settings"></i>
                     <span class="title"> Cài đặt </span>
                 </a>
 
-                <a href=""
-                    class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
-                    <i class="icons w-[20px] h-[20px] mr-[13px] icon-support"></i>
-                    <span class="title"> Hỗ trợ </span>
-                </a>
-
-                <a href=""
-                    class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
-                    <i class="icons w-[20px] h-[20px] mr-[13px] icon-account"></i>
-                    <span class="title"> Quản lý tài khoản </span>
-                </a>
             </div>
-
-            <a href=""
-                class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
-                <i class="icons w-[20px] h-[20px] mr-[13px] icon-logout"></i>
-                <span class="title"> Thoát quản trị </span>
-            </a>
         </div>
 
         <!-- Menu collapse -->
@@ -226,7 +213,7 @@
 
         </div> -->
 
-        <div class="admin-content-container ml-[50px]" id="js-admin-content-container">
+        <div class="admin-content-container ml-[245px]" id="js-admin-content-container">
             <!-- Header -->
             <div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
                 <form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
@@ -316,9 +303,6 @@
     </div>
 
     <script src="{{ 'jquery.js' | asset_url }}"></script>
-    <script src="{{ 'tailwindcss.js' | asset_url }}"></script>
-    <script src="{{ 'fancybox.js' | asset_url }}"></script>
-    <script src="{{ 'select2.js' | asset_url }}"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
     <script src="/assets/typescript/main.js?v=1.111"></script>