update

.gitignore

@@ -2,3 +2,4 @@ package/vendor
 package/composer.lock
 .idea
 
+node_modules/

assets/script/global.js

@@ -1,40 +0,0 @@
-"use strict";
-const AdminFunction = (() => {
-    function capNhatTrangThaiMenu(e) {
-        !1 === e ? $("#js-admin-content-container").addClass("show-large-menu") : $("#js-admin-content-container").removeClass("show-large-menu"), $("#js-menu-big").toggleClass("hidden", e), $("#js-menu-small").toggleClass("hidden", !e), $("#js-form-search").toggleClass("menu-hide", e), localStorage.setItem(e ? "menu_big" : "menu_small", "hidden"), localStorage.removeItem(e ? "menu_small" : "menu_big");
-    }
-    function e(e) {
-        let t = null;
-        return function (...n) {
-            const o = this, a = function () {
-                t = null, n.length > 0 && !e && func.apply(o, n);
-            }, i = e && !t;
-            clearTimeout(t), t = setTimeout(a, wait), i && func.apply(o, n);
-        };
-    }
-    function t(t) {
-        $("#status_" + t).html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Đang xử lý..</span>'), setTimeout(() => {
-            $("#status_" + t).html("");
-        }, 1e3);
-    }
-    function n(e) {
-        $(e).keyup((() => {
-            $("#js-show-search").show();
-        }));
-        $("body").click((() => {
-            $("#js-show-search").hide();
-        }));
-    }
-    function o(e) {
-        $("#js-status-hottype-" + e).html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Đang xử lý..</span>'), setTimeout(() => {
-            $("#js-status-hottype-" + e).html("");
-        }, 1e3);
-    }
-    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>');
-    }
-    function r() {
-        $("#overlay").removeClass("active"), $(".status-notificatiom").removeClass("active");
-    }
-    return { capNhatTrangThaiMenu: capNhatTrangThaiMenu, add_product_to_category: t, run_search: n, update_product_hot: o, checkForm: i, closeForm: r };
-})();

assets/script/hura.global.css

@@ -0,0 +1,252 @@
+/* ===========================
+   FONT IMPORT (Dùng chung)
+   =========================== */
+@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@400;500;600;700;800;1000&display=swap";
+
+@layer properties {
+  :root {
+    --font-sans: "Inclusive Sans", sans-serif;
+    --text-base: 16px;
+    --bg-body: #fafbfd;
+    --color-hura: #0041e8;
+    --color-header: #002bb5;
+    --text-base--line-height: 1.5;
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --layout-topbar-background: #fff;
+    --menu-active: #e9f2ff;
+    --menu-text: #177bff;
+    --menu-sub-bg: #fff;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  #layout-topbar {
+    background: var(--layout-topbar-background);
+    top: calc(var(--spacing) * 0);
+    z-index: 10;
+    transition-property: top, margin, border-radius;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+    position: sticky;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--color-base-300);
+  }
+  #layout-content {
+    padding: calc(var(--spacing) * 6);
+    transition-property: all;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    flex-grow: 1;
+    background: var(--bg-body);
+  }
+  .bg-menu {
+    background-color: var(--color-header);
+  }
+  /*  menu */
+  .menu {
+    & {
+      --menu-active-bg: #e9f2ff;
+    }
+  }
+  .menu-horizontal {
+    display: inline-flex;
+    flex-direction: row;
+  }
+  .menu-horizontal li {
+    position: relative;
+  }
+
+  /* ACTIVE STATE (LEVEL 1) */
+  .menu-horizontal li.active {
+    background: var(--menu-active);
+  }
+
+  .menu-horizontal li.active .grow,
+  .menu-horizontal li.active svg {
+    color: var(--menu-text);
+  }
+
+  /* ACTIVE STATE (LEVEL 2)  */
+  .menu-horizontal li.active ul li.active {
+    background: var(--color-hura);
+  }
+
+  .menu-horizontal li.active ul li.active a {
+    color: #fff;
+  }
+  /*  HOVER LEVEL 1 */
+
+  .menu-horizontal li:hover {
+    background: var(--menu-active);
+  }
+
+  .menu-horizontal li:hover .grow,
+  .menu-horizontal li:hover svg {
+    color: var(--color-hura);
+  }
+
+  /* Dải hover giữ submenu không bị mất */
+  .menu-horizontal li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -18px;
+    width: 100%;
+    height: 30px;
+    display: none;
+  }
+
+  .menu-horizontal li:hover::before {
+    display: block;
+  }
+
+  /* ==========================
+   SUBMENU (UL)
+  ========================== */
+  .menu-horizontal li .submenu {
+    position: absolute !important;
+    top: 125%;
+    left: 0;
+    background: var(--menu-sub-bg);
+    margin-left: 0 !important;
+    padding: 0.5rem;
+    z-index: 999;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: none;
+    margin-top: 0 !important;
+  }
+
+  /* DaisyUI details submenu spacing */
+  .menu-horizontal > li:not(.menu-title) > details > ul {
+    margin-top: 1rem;
+    padding-inline-end: 0.5rem;
+  }
+
+  /* SHOW SUBMENU ON HOVER */
+  .menu-horizontal li:hover .submenu,
+  .menu-horizontal li:hover > details > ul {
+    display: block;
+  }
+
+  /* Remove extra before from DaisyUI */
+  .menu-horizontal > li > details > ul:before {
+    content: none;
+  }
+  /* ==========================
+   SUBMENU HOVER ITEMS
+  ========================== */
+  .menu-horizontal li ul li:hover {
+    background: var(--color-hura);
+  }
+
+  .menu-horizontal li ul li:hover a {
+    color: #fff;
+  }
+
+  .menu-horizontal li ul li:hover::before {
+    display: none;
+  }
+  /* Font weight chung */
+  .menu-horizontal .grow {
+    font-weight: 500;
+  }
+  .menu-icon-color {
+    color: #838383;
+  }
+  .card-body {
+    padding: calc(var(--spacing) * 4);
+  }
+  .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;
+  }
+}
+
+@layer hura {
+  .hura-btn-active {
+    --btn-bg: var(--color-hura);
+    --btn-fg: #ffffff;
+    --btn-border: var(--color-hura);
+    color: var(--color-white);
+  }
+  .hura-btn-active:hover {
+    --btn-bg: #002bb5;
+    --btn-border: #002bb5;
+  }
+  .hura-btn-outline {
+    background: #f5f7ff;
+    color: var(--color-hura);
+    border: 1px solid var(--color-hura);
+  }
+  .hura-btn-outline:hover {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .hura-checkbox:checked,
+  .hura-checkbox[aria-checked="true"] {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .hura-radio:checked,
+  .hura-radio[aria-checked="true"] {
+    border-color: var(--color-hura);
+  }
+  .hura-radio:checked::before,
+  .hura-radio[aria-checked="true"]::before {
+    background-color: var(--color-hura);
+  }
+  .hura-text-blue {
+    color: var(--color-hura);
+  }
+  .hura-bg-blue {
+    background: var(--color-hura);
+  }
+  .hura-shadow-blue {
+    box-shadow:
+      0 10px 15px -3px rgb(var(--color-hura) / 0.35),
+      0 4px 6px -4px rgb(var(--color-hura) / 0.25);
+  }
+}

assets/script/main.js

@@ -1,179 +0,0 @@
-class LayoutCustomizer {
-    constructor() {
-        this.defaultConfig = {
-            theme: "system",
-            direction: "ltr",
-            fontFamily: "default",
-            sidebarTheme: "light",
-            fullscreen: false,
-        }
-        const configCache = localStorage.getItem("__NEXUS_CONFIG_v3.0__")
-        if (configCache) {
-            this.config = JSON.parse(configCache)
-        } else {
-            this.config = { ...this.defaultConfig }
-        }
-        this.html = document.documentElement
-        this.sidebar = document.getElementById("layout-sidebar")
-
-        window.config = this.config
-    }
-
-    updateTheme = () => {
-        localStorage.setItem("__NEXUS_CONFIG_v3.0__", JSON.stringify(this.config))
-
-        if (this.config.theme === "system") {
-            this.html.removeAttribute("data-theme")
-        } else {
-            this.html.setAttribute("data-theme", this.config.theme)
-        }
-
-        if (this.sidebar) {
-            if (
-                this.config.sidebarTheme === "dark" &&
-                ["light", "contrast"].includes(this.config.theme)
-            ) {
-                this.sidebar.setAttribute("data-theme", this.config.sidebarTheme)
-            } else {
-                this.sidebar.removeAttribute("data-theme")
-            }
-        }
-
-        this.html.setAttribute("data-sidebar-theme", this.config.sidebarTheme)
-        this.html.dir = this.config.direction
-
-        if (this.config.fullscreen) {
-            this.html.setAttribute("data-fullscreen", "")
-        } else {
-            this.html.removeAttribute("data-fullscreen")
-        }
-
-        if (this.config.fontFamily !== "default") {
-            this.html.setAttribute("data-font-family", config.fontFamily)
-        } else {
-            this.html.removeAttribute("data-font-family")
-        }
-    }
-
-    initEventListener = () => {
-        const themeControls = document.querySelectorAll("[data-theme-control]")
-        themeControls.forEach((control) => {
-            control.addEventListener("click", () => {
-                let theme = control.getAttribute("data-theme-control") ?? "light"
-                if (theme === "toggle") {
-                    theme = this.config.theme === "light" ? "dark" : "light"
-                }
-                this.config.theme = theme
-                this.updateTheme()
-            })
-        })
-
-        const sidebarThemeControls = document.querySelectorAll("[data-sidebar-theme-control]")
-        sidebarThemeControls.forEach((control) => {
-            control.addEventListener("click", () => {
-                this.config.sidebarTheme =
-                    control.getAttribute("data-sidebar-theme-control") ?? "light"
-                this.updateTheme()
-            })
-        })
-
-        const fontFamilyControls = document.querySelectorAll("[data-font-family-control]")
-        fontFamilyControls.forEach((control) => {
-            control.addEventListener("click", () => {
-                this.config.fontFamily =
-                    control.getAttribute("data-font-family-control") ?? "default"
-                this.updateTheme()
-            })
-        })
-
-        const dirControls = document.querySelectorAll("[data-dir-control]")
-        dirControls.forEach((control) => {
-            control.addEventListener("click", () => {
-                this.config.direction = control.getAttribute("data-dir-control") ?? "ltr"
-                this.updateTheme()
-            })
-        })
-
-        const fullscreenControls = document.querySelectorAll("[data-fullscreen-control]")
-        fullscreenControls.forEach((control) => {
-            control.addEventListener("click", () => {
-                if (document.fullscreenElement != null) {
-                    this.config.fullscreen = false
-                    document.exitFullscreen()
-                } else {
-                    this.config.fullscreen = true
-                    this.html.requestFullscreen()
-                }
-                this.updateTheme()
-            })
-        })
-
-        const resetControls = document.querySelectorAll("[data-reset-control]")
-        resetControls.forEach((control) => {
-            control.addEventListener("click", () => {
-                this.config = { ...this.defaultConfig }
-                if (document.fullscreenElement != null) {
-                    document.exitFullscreen()
-                }
-                this.updateTheme()
-            })
-        })
-
-        const fullscreenMedia = window.matchMedia("(display-mode: fullscreen)")
-        const fullscreenListener = () => {
-            this.config.fullscreen = fullscreenMedia.matches
-            this.updateTheme()
-        }
-        fullscreenMedia.addEventListener("change", fullscreenListener)
-        fullscreenListener()
-    }
-
-    initLeftmenu = () => {
-        const initMenuActivation = () => {
-            const menuItems = document.querySelectorAll(".sidebar-menu-activation  a")
-            let currentURL = window.location.href
-            if (window.location.pathname === "/") {
-                currentURL += "dashboards-ecommerce.html"
-            }
-            menuItems.forEach((item) => {
-                if (item.href === currentURL) {
-                    item.classList.add("active")
-                    const parentElement1 = item.parentElement.parentElement
-                    if (parentElement1.classList.contains("collapse-content")) {
-                        const inputElement1 = parentElement1.parentElement.querySelector("input")
-                        if (inputElement1) {
-                            inputElement1.checked = true
-                        }
-                    }
-                }
-            })
-        }
-
-        const scrollToActiveMenu = () => {
-            const simplebarEl = document.querySelector("#layout-sidebar [data-simplebar]")
-            const activatedItem = document.querySelector("#layout-sidebar .menu a.active")
-            if (simplebarEl && activatedItem) {
-                const simplebar = new SimpleBar(simplebarEl)
-                const top = activatedItem?.getBoundingClientRect().top
-                if (top && top !== 0) {
-                    simplebar.getScrollElement().scrollTo({ top: top - 300, behavior: "smooth" })
-                }
-            }
-        }
-
-        initMenuActivation()
-        scrollToActiveMenu()
-    }
-
-    afterInit = () => {
-        this.initEventListener()
-        this.initLeftmenu()
-    }
-
-    init = () => {
-        this.updateTheme()
-        window.addEventListener("DOMContentLoaded", this.afterInit)
-    }
-}
-
-new LayoutCustomizer().init()

assets/script/tailwind-daisyui.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";

assets/typescript/main.ts

@@ -1,46 +1,12 @@
 "use strict";
 
 interface AdminFunctions {
-    toggleMenuVisibility(hideLargeMenu: boolean): void;
     addProductToCategory(productId: string): void;
-    searchSuggestions(inputSelector: string): void;
     markProductAsHot(productId: string): void;
 }
 
 const AdminFunctions: AdminFunctions = (() => {
 
-    function toggleMenuVisibility(hideLargeMenu: boolean): void {
-        const contentContainer = $('#js-admin-content-container');
-        const largeMenu = $('#js-menu-big');
-        const smallMenu = $('#js-menu-small');
-        const searchForm = $('#js-form-search');
-
-        contentContainer.toggleClass('show-large-menu', !hideLargeMenu);
-        largeMenu.toggleClass('hidden', hideLargeMenu);
-        smallMenu.toggleClass('hidden', !hideLargeMenu);
-        searchForm.toggleClass('menu-hide', hideLargeMenu);
-
-        localStorage.setItem(hideLargeMenu ? 'menu_big' : 'menu_small', 'hidden');
-        localStorage.removeItem(hideLargeMenu ? 'menu_small' : 'menu_big');
-    }
-
-    function debounce(func: (...args: any[]) => void, wait: number, immediate: boolean) {
-        let timeout: ReturnType<typeof setTimeout> | null = null;
-        return function (this: HTMLInputElement, ...args: any[]) {
-            const context = this;
-            const later = function () {
-                timeout = null;
-                if (!immediate) func.apply(context, args);
-            };
-            const callNow = immediate && !timeout;
-            if (timeout !== null) {
-                clearTimeout(timeout);
-            }
-            timeout = setTimeout(later, wait);
-            if (callNow) func.apply(context, args);
-        };
-    }
-
     function addProductToCategory(productId: string): void {
         const statusElement = $('#status_' + productId);
         statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
@@ -49,16 +15,6 @@ const AdminFunctions: AdminFunctions = (() => {
         }, 1000);
     }
 
-    function searchSuggestions(inputSelector: string): void {
-        $(inputSelector).keyup(debounce(function (this: HTMLInputElement) {
-            $('#js-show-search').show();
-        }, 300, false) as any);
-
-        $('body').click(function () {
-            $('#js-show-search').hide();
-        });
-    }
-
     function markProductAsHot(productId: string): void {
         const statusElement = $('#js-status-hottype-' + productId);
         statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
@@ -68,9 +24,9 @@ const AdminFunctions: AdminFunctions = (() => {
     }
 
     return {
-        toggleMenuVisibility,
         addProductToCategory,
-        searchSuggestions,
         markProductAsHot
     };
 })();
+
+export default AdminFunctions;

data/menu_item/article.php

@@ -3,7 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Nội dung",
-    "icon_class" => 'iconify lucide--users tw-tsa',
+    "icon_class" => 'users',
     "url" => "",
     "menu" => array(
 

data/menu_item/customer.php

@@ -3,7 +3,7 @@
 return  array(
     'enable' => true ,
     "name" => "Khách hàng",
-    "icon_class" => '',
+    "icon_class" => 'user',
     "url" => "",
     "menu" => array(
         array(

data/menu_item/distributor.php

@@ -3,7 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Đại lý",
-    "icon_class" => 'iconify lucide--handshake tw-tsa',
+    "icon_class" => 'shopping-bag',
     "url" => "",
     "menu" => array(
         0 => array(

data/menu_item/job.php

@@ -3,7 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Tuyển dụng",
-    "icon_class" => 'iconify lucide--megaphone tw-tsa',
+    "icon_class" => 'megaphone',
     "url" => "",
     "menu" => array(
         array(

data/menu_item/marketing.php

@@ -3,7 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Marketing",
-    "icon_class" => 'iconify lucide--newspaper tw-tsa',
+    "icon_class" => 'newspaper',
     "url" => "",
     "menu" => array(
         array(

data/menu_item/order.php

@@ -3,7 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Bán hàng",
-    "icon_class" => "iconify lucide--store tw-tsa",
+    "icon_class" => "store",
     "url" => "",
     "menu" => array(
         array(

data/menu_item/payinstall.php

@@ -3,6 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Trả góp",
+    "icon_class" => "handshake",
     "url" => "",
     "menu" => array(
         array(

data/menu_item/pcbuilder.php

@@ -3,7 +3,7 @@
 return array(
     'enable' => true ,
     "name" => "Xây dựng máy tính",
-    "icon_class" => 'iconify lucide--monitor-smartphone tw-tsa',
+    "icon_class" => 'monitor-smartphone',
     "url" => "",
     "menu" => array(
         array(

data/menu_item/product.php

@@ -5,7 +5,7 @@
 return array(
     'enable' => true ,
     "name" => "Sản phẩm",
-    "icon_class" => 'iconify lucide--package tw-tsa',
+    "icon_class" => 'package',
     "url" => "",
     "menu" => array(
         array(

data/menu_item/report.php

@@ -4,7 +4,7 @@ return array(
     'enable' => true ,
 
     "name" => "Thống kê",
-    "icon_class" => 'iconify lucide--pie-chart tw-tsa',
+    "icon_class" => 'pie-chart',
     "url" => "",
     "menu" => array(
         array(

data/menu_item/system.php

@@ -3,7 +3,7 @@
 return  array(
     'enable' => true ,
     "name" => "Hệ thống",
-    "icon_class" => 'iconify hugeicons--settings-04 tw-tsa',
+    "icon_class" => 'settings',
     "url" => "",
     "menu" => array(
         array(

data/product/category.php

@@ -28,8 +28,8 @@ function get_category_list($parentId=0, $currentCat="",$level=1, $prefix="", $ca
             $stt ++;
             $imgUrl = (strlen($cat_info["thumbnail"]) > 2) ? " <img src=\"".$cat_info["thumbnail"]."\" style=\"max-width:30px; max-height:30px;\" />" : "";
 
-            if($cat_info["status"]) $status = "<a href=\"javascript:update_status(".$cat_id.",'off')\" class='w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i class='fa-regular fa-eye-slash text-[#9E9E9E]'></i></a>";
-            else $status = "<a href=\"javascript:update_status(".$cat_id.",'on')\" class='w-[30px] h-[30px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i class='fa-regular fa-eye text-[#0041E8]'></i></a>";
+            if($cat_info["status"]) $status = "<a href=\"javascript:update_status(".$cat_id.",'off')\" class='btn btn-soft btn-xs btn-outline btn-square'><i data-lucide='eye-off' class='size-3'></i></a>";
+            else $status = "<a href=\"javascript:update_status(".$cat_id.",'on')\" class='btn btn-soft btn-xs btn-outline btn-square'><i data-lucide='eye' class='size-3'></i></a>";
 
             $edit_link ="/admin/product/category-form?id=".$cat_id;
 
@@ -42,7 +42,7 @@ function get_category_list($parentId=0, $currentCat="",$level=1, $prefix="", $ca
             }
 
             if($cat_info['is_parent']) {
-                $show_category_name = "<a href=\"javascript:;\" onclick=\"RowExpand.open_child('parent_".$cat_id."')\">".$show_category_name."</a>";
+                $show_category_name = "<a href=\"javascript:;\" class='link-active' onclick=\"RowExpand.open_child('parent_".$cat_id."')\">".$show_category_name."</a>";
             }
 
             $categoryTree .= "
@@ -50,19 +50,19 @@ function get_category_list($parentId=0, $currentCat="",$level=1, $prefix="", $ca
                     onmouseover=\"this.className='row-hover parent_".$parentId."'\" onmouseout=\"this.className='parent_".$parentId."'\">
                    
                     <td>
-                        <a name='cat_".$cat_id."'></a>
+                        <a class='link-active' name='cat_".$cat_id."'></a>
                         ". $extra_space . $prefix . $stt.". ".  $show_category_name . $imgUrl."
                     </td> 
 
                      <td>
-                        <a href='".$cat_info['request_path']."' title='Mở tại website' target='_blank'>Xem trang</a>
+                        <a href='".$cat_info['request_path']."' class='link-active' title='Mở tại website' target='_blank'>Xem trang</a>
                     </td> 
 
                     <td>".$cat_id."</td>
                     <td class='whitespace-nowrap'>413787</td>
-                    <td><a href='/admin/product?category=".$cat_id."'>1292</a></td>
+                    <td><a class='link-active' href='/admin/product?category=".$cat_id."'>1292</a></td>
                     <td>
-                        <input type=text id=order_".$cat_id." value='".$cat_info["ordering"]."' size=2 onchange=\"update_order(".$cat_id.",this.value)\" /> 
+                        <input class='input' type=text id=order_".$cat_id." value='".$cat_info["ordering"]."' size=2 onchange=\"update_order(".$cat_id.",this.value)\" /> 
                         <span class='status-ordering-".$cat_id."'></span>
                     </td> 
                     <td class='whitespace-nowrap'>
@@ -77,11 +77,11 @@ function get_category_list($parentId=0, $currentCat="",$level=1, $prefix="", $ca
                         <a href='/admin/product/category-attribute?id=".$cat_id."&popup=1' class='pop-up'>Tổng</a> (".$cat_info['attribute_count'].")
                     </td>
                     <td>
-                      <div class='list-btn flex items-center'>
-                        <a href=\"".$edit_link."\" class='w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i class='icons icon-edit'></i></a>
-                        <a class='w-[32px] h-[32px] border-[1px] border-[#0041E8] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]' href='javascript:set_category_feature(.$cat_id.,'off')'><i class='icons icon-feature'></i></a>
+                      <div class='list-btn flex items-center gap-3'>
+                        <a href=\"".$edit_link."\" class='btn btn-soft btn-xs btn-square btn-outline  btn-view'><i data-lucide='pencil' class='size-3'></i></a>
+                        <a class='btn btn-soft btn-xs btn-square btn-outline  btn-view' href='javascript:set_category_feature(.$cat_id.,'off')'><i data-lucide='crown' class='size-3'></i></a>
                         <span id=status-".$cat_id.">".$status."</span> 
-                        <span class='status-delete-".$cat_id."'><a href=\"javascript:deleteThis(".$cat_id.")\" class='w-[32px] h-[32px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]'><i class='icons icon-delete'></i></a></span>
+                        <span class='status-delete-".$cat_id."'><a href=\"javascript:deleteThis(".$cat_id.")\" class='btn btn-soft btn-xs btn-square btn-error btn-outline '><i data-lucide='trash-2' class='size-3'></i></a></span>
                       </div>
                     </td> 
             ";
@@ -89,7 +89,7 @@ function get_category_list($parentId=0, $currentCat="",$level=1, $prefix="", $ca
             }else{
                 $categoryTree .= " 
                         <td> 
-                            <a href=\"".$edit_link."\"><i class='icons icon-edit'></i></a>
+                            <a href=\"".$edit_link."\"><i data-lucide='pencil' class='size-3'></i></a>
                         </td> 
                 ";
             }

inc/config/db.php

@@ -2,7 +2,7 @@
 
 return [
     'main' => [
-        'host' => '150.95.108.46',
+        'host' => '150.95.115.129',
         'user' => 'hura8_devr',
         'pass' => 'aEEfaffs@12563',
         'db' => 'hura8',

notes/header.md

@@ -0,0 +1,27 @@
+## Header
+
+### 1. Tìm kiếm
+
+Khi click tìm kiếm sẽ ra modal có:
+
+- Thanh tìm kiếm: từ khóa + lựa chọn loại nội dung cần tìm (đơn hàng, khách hàng, sản phẩm, bài viết, v.v.)
+- Có danh sách các từ khóa tìm kiếm gần đây bên dưới thanh tìm kiếm để người dùng dễ dàng chọn lại.
+- Danh sách các link nhanh đến các mục phổ biến như: Quản lý đơn hàng, Quản lý khách hàng, Quản lý sản phẩm, v.v.
+
+Về cơ bản là gần giống như chức năng hiện tại, chỉ chỉnh sửa lại và thay nội dung cho phù hợp hơn.
+
+### 2. Thông báo
+
+Bỏ các tab, chỉ giữ lại 1 tab duy nhất và có phần "Xem hết"
+
+Khi click xem hết sẽ ra trang Modal riêng hiển thị tất cả thông báo với các bộ lọc và tùy chọn đánh dấu đã đọc/chưa đọc.
+
+### 3. Tài khoản người dùng
+- Hiển thị thông tin cơ bản của người dùng (ảnh đại diện, tên, vai trò).
+- Menu thả xuống với các tùy chọn:
+  - Hồ sơ cá nhân: Xem và chỉnh sửa thông tin cá nhân.
+  - Cài đặt tài khoản: Thay đổi mật khẩu, cài đặt bảo mật.
+  - Đăng xuất: Đăng xuất khỏi hệ thống.
+
+### 4. Cài đặt hệ thống (biểu tượng bánh răng)
+- Chỉ hiển thị với người dùng có quyền quản trị cao nhất

notes/home.md

@@ -0,0 +1,92 @@
+## Mục tiêu của trang chủ:
+
+Chỉ gồm những thông tin quan trọng nhất mang tính chất: **Chỉ báo việc cần xử lý** và **Tóm tắt thông tin**
+
+## Cột 1:
+
+### 1. Việc cần xử lý:
+
+- Đơn hàng mới
+- Liên hệ mới của khách hàng
+- Comment mới chưa duyệt
+- Lỗi web
+- Đơn hàng chưa xử lý xong
+- Đơn trả góp mới
+- ... Các chỉ báo khác
+
+Mặc định sẽ hiển thị 3 chỉ báo. Khách hàng có thể click vào lựa chọn **Thêm chỉ báo** để tích chọn hiển thị thêm chỉ báo từ danh sách các chỉ báo được lập sẵn bởi hệ thống.
+
+Các thể hiện của chỉ báo:
+
+- Dạng thẻ: Hiển thị tên chỉ báo + số lượng mục cần xử lý
+  Ví dụ:
+- [Đơn hàng mới] 15
+- [Liên hệ mới của khách hàng] 8
+- [Comment mới chưa duyệt] 5
+
+### 2. Tóm tắt thông tin:
+
+Có 2 dạng tóm tắt là **Chỉ số** và **Biểu đồ**
+
+#### Chỉ số:
+
+- Doanh thu trong ngày/tuần/tháng/năm
+- Lợi nhuận trong ngày/tuần/tháng/năm
+- Số đơn hàng trong ngày/tuần/tháng/năm
+- Số khách hàng mới trong ngày/tuần/tháng/năm
+- Số sản phẩm đã bán trong ngày/tuần/tháng/năm
+- ... Các chỉ số khác
+
+Cách thể hiện về cơ bản là như hiện tại.
+
+#### Biểu đồ:
+
+- Biểu đồ doanh thu theo ngày/tuần/tháng/năm
+- Biểu đồ số đơn hàng theo ngày/tuần/tháng/năm
+- Biểu đồ số khách hàng mới theo ngày/tuần/tháng/năm
+- Biểu đồ lượt truy cập web theo ngày/tuần/tháng/năm
+- ... Các biểu đồ khác
+
+Khách hàng có thể tùy chọn hiển thị các chỉ số và biểu đồ mong muốn từ danh sách các chỉ số và biểu đồ được lập sẵn bởi hệ thống.
+
+Cách thể hiện về cơ bản là như hiện tại.
+
+### 3. Stream thông tin / thông báo:
+
+Hiển thị các thông tin, thông báo liên quan tới hoạt động của cửa hàng như: cập nhật đơn hàng, phản hồi khách hàng, cảnh báo lỗi hệ thống, tin tức mới từ ngành hàng, v.v.
+
+Ví dụ:
+
+- [Vừa xong] Đơn hàng #12345 đã được xử lý.
+- [3 phút trước] Khách hàng Nguyễn Văn A đã gửi phản hồi.
+- [4 phút trước] Hệ thống đã phát hiện lỗi kết nối với cổng thanh toán.
+- [5 phút trước] Tin tức mới: Xu hướng mua sắm trực tuyến năm 2024.
+- [12 phút trước] Quản trị viên B đã đăng nhập vào hệ thống.
+- [33 phút trước] Cập nhật sản phẩm mới: Sản phẩm XYZ đã được thêm vào kho hàng.
+- ... Các thông tin, thông báo khác
+
+## Cột 2: Vùng làm việc cá nhân (fix cứng độ rộng = 450px)
+
+Khu vực này dành cho người dùng thực hiện các tác vụ cá nhân như:
+
+### 1. To-do list cá nhân:
+
+- Danh sách công việc cá nhân cần hoàn thành.
+- Tùy chọn đánh dấu công việc đã hoàn thành.
+- Tùy chọn thêm, sửa, xóa công việc.
+
+### 2. Ghi chú nhanh:
+
+- Khu vực để người dùng ghi chú nhanh các ý tưởng, thông tin quan trọng.
+- Tùy chọn lưu, chỉnh sửa, xóa ghi chú.
+
+### 3. Ticket hỗ trợ từ HuraSoft:
+
+- Hiển thị danh sách các ticket hỗ trợ mà người dùng đã gửi đến HuraSoft.
+- Tùy chọn xem chi tiết, cập nhật trạng thái ticket.
+- Tùy chọn tạo ticket hỗ trợ mới.
+
+### 4. Liên kết nhanh:
+
+- Danh sách các liên kết nhanh đến các trang quản trị quan trọng như: Quản lý sản phẩm, Quản lý đơn hàng, Quản lý khách hàng, Báo cáo doanh thu, Cài đặt hệ thống, v.v.
+- Tùy chọn thêm, sửa, xóa liên kết nhanh.

old/assets/script/global.js

@@ -0,0 +1,21 @@
+const o = /* @__PURE__ */ (() => {
+  function a(t) {
+    const s = $("#status_" + t);
+    s.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>'), setTimeout(() => {
+      s.html("");
+    }, 1e3);
+  }
+  function n(t) {
+    const s = $("#js-status-hottype-" + t);
+    s.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>'), setTimeout(() => {
+      s.html("");
+    }, 1e3);
+  }
+  return {
+    addProductToCategory: a,
+    markProductAsHot: n
+  };
+})();
+export {
+  o as default
+};

old/assets/script/hura.global.css

@@ -0,0 +1,41 @@
+/* ===========================
+   FONT IMPORT (Dùng chung)
+   =========================== */
+@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@400;500;600;700;800;1000&display=swap";
+
+@layer properties {
+  :root {
+    --font-sans: "Inclusive Sans", sans-serif;
+    --text-base: 16px;
+    --color-hura: #0041e8;
+    --color-header: #002bb5;
+    --text-base--line-height: 1.5;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+  * {
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  .btn-active {
+    --btn-bg: var(--color-hura);
+    --btn-fg: #ffffff;
+    --btn-border: var(--color-hura);
+  }
+  .btn-active:hover {
+    --btn-bg: #002bb5;
+    --btn-border: #002bb5;
+  }
+}

old/assets/script/style.css

@@ -461,7 +461,7 @@ strong {
     --color-base-200: oklch(98% 0 0);
     --color-base-300: oklch(95% 0 0);
     --color-base-content: oklch(21% 0.006 285.885);
-    --color-primary: oklch(45% 0.24 277.023);
+    --color-primary: #0041e8;
     --color-primary-content: oklch(93% 0.034 272.788);
     --color-secondary: oklch(65% 0.241 354.308);
     --color-secondary-content: oklch(94% 0.028 342.258);
@@ -493,7 +493,7 @@ strong {
       --color-base-200: oklch(23.26% 0.014 253.1);
       --color-base-300: oklch(21.15% 0.012 254.09);
       --color-base-content: oklch(97.807% 0.029 256.847);
-      --color-primary: oklch(58% 0.233 277.117);
+      --color-primary: #0041e8;
       --color-primary-content: oklch(96% 0.018 272.314);
       --color-secondary: oklch(65% 0.241 354.308);
       --color-secondary-content: oklch(94% 0.028 342.258);
@@ -526,7 +526,7 @@ strong {
     --color-base-200: oklch(98% 0 0);
     --color-base-300: oklch(95% 0 0);
     --color-base-content: oklch(21% 0.006 285.885);
-    --color-primary: oklch(45% 0.24 277.023);
+    --color-primary: #0041e8;
     --color-primary-content: oklch(93% 0.034 272.788);
     --color-secondary: oklch(65% 0.241 354.308);
     --color-secondary-content: oklch(94% 0.028 342.258);
@@ -558,7 +558,7 @@ strong {
     --color-base-200: oklch(23.26% 0.014 253.1);
     --color-base-300: oklch(21.15% 0.012 254.09);
     --color-base-content: oklch(97.807% 0.029 256.847);
-    --color-primary: oklch(58% 0.233 277.117);
+    --color-primary: #0041e8;
     --color-primary-content: oklch(96% 0.018 272.314);
     --color-secondary: oklch(65% 0.241 354.308);
     --color-secondary-content: oklch(94% 0.028 342.258);
@@ -620,7 +620,7 @@ strong {
       --color-base-200: #22262a;
       --color-base-300: #2c3034;
       --color-base-content: #f0f4f8;
-      --color-primary: #378dff;
+      --color-primary: #0041e8;
       --color-primary-content: #fff;
       --color-secondary: #b071ff;
       --color-secondary-content: #fff;
@@ -659,7 +659,7 @@ strong {
     --color-base-200: #22262a;
     --color-base-300: #2c3034;
     --color-base-content: #f0f4f8;
-    --color-primary: #378dff;
+    --color-primary: #0041e8;
     --color-primary-content: #fff;
     --color-secondary: #b071ff;
     --color-secondary-content: #fff;
@@ -698,7 +698,7 @@ strong {
     --color-base-200: #eef0f2;
     --color-base-300: #dcdee0;
     --color-base-content: #1e2328;
-    --color-primary: #167bff;
+    --color-primary: #0041e8;
     --color-primary-content: #fff;
     --color-secondary: #9c5de8;
     --color-secondary-content: #fff;
@@ -739,7 +739,7 @@ strong {
     --color-base-200: #eef0f2;
     --color-base-300: #dcdee0;
     --color-base-content: #1e2328;
-    --color-primary: #167bff;
+    --color-primary: #0041e8;
     --color-primary-content: #fff;
     --color-secondary: #9c5de8;
     --color-secondary-content: #fff;
@@ -777,7 +777,7 @@ strong {
     --color-base-200: #eaecfa;
     --color-base-300: #e0e2f8;
     --color-base-content: #191e28;
-    --color-primary: #167bff;
+    --color-primary: #0041e8;
     --color-primary-content: #fff;
     --color-secondary: #9c5de8;
     --color-secondary-content: #fff;
@@ -811,7 +811,7 @@ strong {
     --color-base-200: #343842;
     --color-base-300: #3c404a;
     --color-base-content: #f0f4f8;
-    --color-primary: #378dff;
+    --color-primary: #0041e8;
     --color-primary-content: #fff;
     --color-secondary: #b071ff;
     --color-secondary-content: #fff;
@@ -2450,13 +2450,14 @@ strong {
   @media (hover: hover) {
     .btn:hover {
       --btn-bg: var(--btn-color, var(--color-base-200));
+      color: #fff;
     }
     @supports (color: color-mix(in lab, red, red)) {
       .btn:hover {
         --btn-bg: color-mix(
           in oklab,
-          var(--btn-color, var(--color-base-200)),
-          #000 7%
+          var(--btn-color, var(--color-primary)),
+          #0041e8 7%
         );
       }
     }
@@ -2468,9 +2469,22 @@ strong {
     outline-style: solid;
   }
   .btn:active:not(.btn-active) {
-    --btn-bg: var(--btn-color, var(--color-base-200));
+    --btn-bg: var(--btn-color, var(--color-primary));
     translate: 0 0.5px;
   }
+
+  .btn-view {
+    border: 1px solid #0041e8;
+    background: #f5f7ff;
+    color: #0041e8 !important;
+    font-weight: 500;
+  }
+
+  .btn-view:hover {
+    background: #0041e8;
+    color: #fff !important;
+  }
+
   @supports (color: color-mix(in lab, red, red)) {
     .btn:active:not(.btn-active) {
       --btn-bg: color-mix(
@@ -2481,13 +2495,13 @@ strong {
     }
   }
   .btn:active:not(.btn-active) {
-    --btn-border: var(--btn-color, var(--color-base-200));
+    --btn-border: var(--btn-color, var(--color-primary));
   }
   @supports (color: color-mix(in lab, red, red)) {
     .btn:active:not(.btn-active) {
       --btn-border: color-mix(
         in oklab,
-        var(--btn-color, var(--color-base-200)),
+        var(--btn-color, var(--color-primary)),
         #000 7%
       );
     }
@@ -4045,7 +4059,7 @@ strong {
   .menu-horizontal li .submenu {
     display: none;
     position: absolute;
-    top: 150%;
+    top: 125%;
     left: 0;
     background: #fff;
     z-index: 999;
@@ -4075,6 +4089,10 @@ strong {
     color: #fff;
   }
 
+  .group:hover .text-white {
+    color: #000;
+  }
+
   :where(.menu-horizontal > li:not(.menu-title) > details > ul) {
     border-radius: var(--radius-box);
     background-color: var(--color-base-100);
@@ -4858,20 +4876,21 @@ strong {
     cursor: not-allowed;
   }
   .btn-active {
-    --btn-bg: var(--btn-color, var(--color-base-200));
+    --btn-bg: var(--btn-color, var(--color-primary));
   }
   @supports (color: color-mix(in lab, red, red)) {
     .btn-active {
       --btn-bg: color-mix(
         in oklab,
-        var(--btn-color, var(--color-base-200)),
-        #000 7%
+        var(--btn-color, var(--color-primary)),
+        #fff 7%
       );
     }
   }
   .btn-active {
     --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
     isolation: isolate;
+    color: #fff;
   }
   .isolate {
     isolation: isolate;
@@ -4920,6 +4939,12 @@ strong {
   .col-span-3 {
     grid-column: span 3 / span 3;
   }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .col-span-8 {
+    grid-column: span 8 / span 8;
+  }
   .col-span-12 {
     grid-column: span 12 / span 12;
   }
@@ -5833,24 +5858,7 @@ strong {
     border-radius: 3.40282e38px;
     overflow: hidden;
   }
-  .line-clamp-1 {
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    overflow: hidden;
-  }
-  .line-clamp-2 {
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    overflow: hidden;
-  }
-  .line-clamp-3 {
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    overflow: hidden;
-  }
+
   .mask {
     vertical-align: middle;
     display: inline-block;
@@ -5891,6 +5899,7 @@ strong {
   .table {
     display: table;
   }
+
   .aspect-square {
     aspect-ratio: 1;
   }
@@ -6170,6 +6179,9 @@ strong {
   .h-screen {
     height: 100vh;
   }
+  .h-\[40px\] {
+    height: 40px;
+  }
   .max-h-0 {
     max-height: calc(var(--spacing) * 0);
   }
@@ -11476,6 +11488,9 @@ strong {
   .lucide--download-cloud {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 13v8l-4-4m4 4l4-4'/%3E%3Cpath d='M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284'/%3E%3C/g%3E%3C/svg%3E");
   }
+  .lucide--printer {
+    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><path d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/><rect x='6' y='14' width='12' height='8' rx='1'/></svg>");
+  }
   .lucide--edit-2 {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E");
   }
@@ -11536,6 +11551,10 @@ strong {
   .lucide--flag {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528'/%3E%3C/svg%3E");
   }
+  .lucide--file-x {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='m14.5 12.5-5 5'/%3E%3Cpath d='m9.5 12.5 5 5'/%3E%3C/svg%3E");
+  }
+
   .lucide--flame {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0a5 5 0 0 1 1-3a1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E");
   }
@@ -14974,6 +14993,33 @@ strong {
 html {
   scroll-behavior: smooth;
 }
+.line-clamp-1 {
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.line-clamp-4 {
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
 .animated-text {
   animation: var(--animate-text-color);
   color: #0000;
@@ -16536,6 +16582,3 @@ html:not([data-theme="material"], [data-theme="material-dark"]) #layout-topbar {
     background-position: 0;
   }
 }
-.bg-menu {
-  background: #004e99;
-}

old/assets/typescript/main.ts

@@ -0,0 +1,76 @@
+"use strict";
+
+interface AdminFunctions {
+    toggleMenuVisibility(hideLargeMenu: boolean): void;
+    addProductToCategory(productId: string): void;
+    searchSuggestions(inputSelector: string): void;
+    markProductAsHot(productId: string): void;
+}
+
+const AdminFunctions: AdminFunctions = (() => {
+
+    function toggleMenuVisibility(hideLargeMenu: boolean): void {
+        const contentContainer = $('#js-admin-content-container');
+        const largeMenu = $('#js-menu-big');
+        const smallMenu = $('#js-menu-small');
+        const searchForm = $('#js-form-search');
+
+        contentContainer.toggleClass('show-large-menu', !hideLargeMenu);
+        largeMenu.toggleClass('hidden', hideLargeMenu);
+        smallMenu.toggleClass('hidden', !hideLargeMenu);
+        searchForm.toggleClass('menu-hide', hideLargeMenu);
+
+        localStorage.setItem(hideLargeMenu ? 'menu_big' : 'menu_small', 'hidden');
+        localStorage.removeItem(hideLargeMenu ? 'menu_small' : 'menu_big');
+    }
+
+    function debounce(func: (...args: any[]) => void, wait: number, immediate: boolean) {
+        let timeout: ReturnType<typeof setTimeout> | null = null;
+        return function (this: HTMLInputElement, ...args: any[]) {
+            const context = this;
+            const later = function () {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            };
+            const callNow = immediate && !timeout;
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            timeout = setTimeout(later, wait);
+            if (callNow) func.apply(context, args);
+        };
+    }
+
+    function addProductToCategory(productId: string): void {
+        const statusElement = $('#status_' + productId);
+        statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
+        setTimeout(() => {
+            statusElement.html('');
+        }, 1000);
+    }
+
+    function searchSuggestions(inputSelector: string): void {
+        $(inputSelector).keyup(debounce(function (this: HTMLInputElement) {
+            $('#js-show-search').show();
+        }, 300, false) as any);
+
+        $('body').click(function () {
+            $('#js-show-search').hide();
+        });
+    }
+
+    function markProductAsHot(productId: string): void {
+        const statusElement = $('#js-status-hottype-' + productId);
+        statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
+        setTimeout(() => {
+            statusElement.html('');
+        }, 1000);
+    }
+
+    return {
+        toggleMenuVisibility,
+        addProductToCategory,
+        searchSuggestions,
+        markProductAsHot
+    };
+})();

old/template/addon/home.html

@@ -0,0 +1 @@
+template/addon/home.html

old/template/admin/add.html

@@ -0,0 +1,106 @@
+<div class="global-breadcrumb-container">
+    <a href="/admin/admin"> Danh sách quản trị viên </a>
+    <a href=""> Form thêm/sửa quản trị viên </a>
+</div>
+
+<div class="max-w-[1141px] flex flex-wrap items-start m-[0_auto_16px_auto]">
+    <div
+        class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
+        <p class="font-bold text-[20px] leading-[26px] block"> Cập nhật quản trị </p>
+    </div>
+
+    <div
+        class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
+        <a href="/admin/admin/add" style="color: #Fff;background: #0041E8;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Thông tin
+        </a>
+        <a href="/admin/admin/menu-permission" style="color: #919699;border-bottom: 1px solid #f3f3f3;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Quyền xem menu
+        </a>
+        <a href="/admin/admin/entity-permission" style="color: #919699;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Quyền chỉnh sửa
+        </a>
+    </div>
+
+    <div class="w-[852px]">
+        <div class="p-[15px] bg-white rounded-[15px_15px_0_0] shadow-[0px_-1px_1px_0px_#0000001A]">
+            <div class="form-control mb-[15px] w-[100%]">
+                <label class="block font-[600] text-[14px] mb-[5px]">Họ và tên</label>
+                <input name="" id="" placeholder="Họ và tên" value="Khắc tiệp"
+                    class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]" />
+            </div>
+            <div class="form-control mb-[15px] w-[100%]">
+                <label class="block font-[600] text-[14px] mb-[5px]">Phòng ban</label>
+                <div class="flex items-center">
+                    <select name="" id=""
+                        class="w-[50%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]">
+                        <option value="">Chọn phòng ban</option>
+                    </select>
+                    <a href="/admin/admin/department-add" class="ml-[5px] text-[#0041E8]">Quản lý phòng ban</a>
+                </div>
+            </div>
+            <div class="form-control mb-[15px] w-[100%]">
+                <label class="block font-[600] text-[14px] mb-[5px]">Email (dùng đăng nhập)</label>
+                <input name="" id="" placeholder="Email" value="tieptk@hurasoft.com"
+                    class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]" />
+            </div>
+            <div class="form-control mb-[15px] w-[100%]">
+                <div class="flex items-center mb-[5px]">
+                    <label class="font-[600] text-[14px]">Mật khẩu đăng nhập (nếu không đổi mật khẩu thì để
+                        trống)</label>
+                    <span class="ml-[5px] text-[#6B7280] italic">(* tối thiểu 6 ký tự)</span>
+                </div>
+                <input name="" type="password" id=""
+                    placeholder="Mật khẩu đăng nhập (nếu không đổi mật khẩu thì để trống)"
+                    class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]" />
+            </div>
+            <div class="form-control mb-[15px] w-[100%]">
+                <label class="block font-[600] text-[14px] mb-[5px]">Địa chỉ IP giới hạn truy cập. Nhập mỗi IP một dòng
+                    (IP mạng của bạn là : 2405:4802:1d21:1660:45f1:2aba:d8c0:b1f1)
+                </label>
+                <textarea name="" id="" placeholder="Địa chỉ IP giới hạn truy cập. Nhập mỗi IP một dòng"
+                    class="w-[100%] h-[80px] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
+            </div>
+            <label class="check-form flex items-center mb-[15px] cursor-pointer">
+                <input type="checkbox" name="change_url_on_update" value="1" checked=""
+                    class="checkbox checkbox-success">
+                <span class="ml-[10px] text-[#6B7280] label-text">Không giới hạn theo IP. Cho phép người ngày truy cập
+                    quản trị
+                    website ở mọi nơi (v.d. ở nhà, nơi công cộng)</span>
+            </label>
+            <div class="form-control mb-[15px] w-[100%]">
+                <label class="block font-[600] text-[14px] mb-[5px]">Phân quyền đặc biệt</label>
+                <label class="check-form flex items-center cursor-pointer">
+                    <input type="checkbox" name="change_url_on_update" value="1" checked=""
+                        class="checkbox checkbox-success">
+                    <span class="ml-[10px] text-[#6B7280] label-text">Cho phép tất cả quyền hạn (* quản trị viên có đặc
+                        quyền này
+                        sẽ
+                        không cần bị hạn chế bởi quy định phân quyền)
+                    </span>
+                </label>
+            </div>
+
+            <div class="form-control w-[100%]">
+                <label class="block font-[600] text-[14px] mb-[5px]">Khóa thành viên</label>
+                <label class="check-form flex items-center cursor-pointer">
+                    <input type="checkbox" name="change_url_on_update" value="1" checked=""
+                        class="checkbox checkbox-success">
+                    <span class="ml-[10px] text-[#6B7280] label-text">Cho phép tất cả quyền hạn (* quản trị viên có đặc
+                        quyền này
+                        sẽ không cần bị hạn chế bởi quy định phân quyền)
+                    </span>
+                </label>
+            </div>
+
+        </div>
+        <div
+            class="p-[15px] bg-white border-t-[6px] border-[#FAFAFB] rounded-[0_0_15px_15px] shadow-[0px_1px_1px_0px_#0000001A]">
+            <input type="submit" value="Cập nhật"
+                class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+        </div>
+    </div>
+</div>

old/template/admin/admin_log_product.html

@@ -0,0 +1,45 @@
+<div class="w-[100%]">
+    <div class="global-breadcrumb-container">
+        <a href="/admin/admin"> Danh sách quản trị viên </a>
+        <a href="" class="text-[#0041E8]"> Theo dõi hoạt động tạo sản phẩm </a>
+    </div>
+
+    <div class="p-[15px] m-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+        <div class="flex items-center justify-between">
+            <h1 class="text-[24px] font-[700] ">Theo dõi hoạt động tạo sản phẩm</h1>
+            <div class="flex items-center">
+                <a href="/admin/admin"
+                    class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                    <span class="ml-1">Danh sách quản trị</span>
+                </a>
+            </div>
+        </div>
+
+        <table class="mt-[25px]">
+            <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-bold">
+                <tr>
+                    <td>STT</td>
+                    <td>Quản trị</td>
+                    <td>Ngày</td>
+                    <td>Tổng Sản phẩm tạo</td>
+                    <td>Sản phẩm được duyệt</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td><a href="" class="text-blue-600">adminkenli@gmail.com</a></td>
+                    <td><a href="" class="text-blue-600">2025-3-12</a></td>
+                    <td>
+                        <div class="flex items-center">
+                            <span>1 -</span>
+                            <a href="" class="text-blue-600">Xem</a>
+                        </div>
+                    </td>
+                    <td>0</td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+</div>

old/template/admin/department.html

@@ -0,0 +1,48 @@
+<div class="w-[100%]">
+    <div class="global-breadcrumb-container">
+        <a href="/admin/admin"> Danh sách quản trị viên </a>
+        <a href="" class="text-[#0041E8]"> Danh sách phòng ban </a>
+    </div>
+
+    <div class="p-[15px] m-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+        <div class="flex items-center justify-between">
+            <h1 class="text-[24px] font-[700] ">Danh sách phòng ban</h1>
+            <div class="flex items-center">
+                <a href="/admin/admin/department_add"
+                    class="flex items-center p-[7px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[15px] font-[500]">
+                    <span
+                        class="border-[1px] border-[#0041E8] h-[15px] w-[15px]  leading-[12px] text-center rounded-[50%] mr-1">+</span>
+                    <span>Thêm phòng ban mới</span>
+                </a>
+                <a href="/admin/admin"
+                    class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                    <span class="ml-1">Danh sách quản trị</span>
+                </a>
+            </div>
+        </div>
+
+        <table class="mt-[25px] table">
+            <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-500">
+                <tr>
+                    <th class="w-[38px]">STT</th>
+                    <th>Phòng ban</th>
+                    <th>Email</th>
+                    <th>Code</th>
+                    <th>Quản trị</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>Hurasoft test code không được xóa</td>
+                    <td></td>
+                    <td></td>
+                    <td><a href="/admin/admin/department_add&id=1" class="font-bold">Sửa lại</a></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+
+
+</div>

old/template/admin/department_add.html

@@ -0,0 +1,81 @@
+<div class="w-[100%]">
+    <div class="global-breadcrumb-container">
+        <a href="/admin/admin"> Danh sách quản trị viên </a>
+        <a href="" class="text-[#0041E8]"> Form sửa phòng ban </a>
+    </div>
+
+    <div class="max-w-[1141px] m-[0_auto_16px_auto]">
+        <div class="p-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+            <div class="flex items-center justify-between">
+                <h1 class="text-[24px] font-[700] ">Thêm phòng ban</h1>
+                <div class="flex items-center">
+                    <a href="/admin/admin/department_add"
+                        class="flex items-center p-[7px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[15px] font-[500]">
+                        <span
+                            class="border-[1px] border-[#0041E8] h-[15px] w-[15px]  leading-[12px] text-center rounded-[50%] mr-1">+</span>
+                        <span>Thêm mới</span>
+                    </a>
+                    <a href="/admin/admin/department" class=" flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px]
+                        text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white
+                        font-[500]">
+                        <span class="ml-1">Danh sách phòng ban</span>
+                    </a>
+                    <a href="/admin/admin"
+                        class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                        <span class="ml-1">Danh sách quản trị</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex mt-[15px]">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] overflow-hidden">
+                    <a href="/admin/distributor/form"
+                        class="item block w-[100%] h-[36px] text-white bg-[#0041E8] rounded-[10px_10px_0_0] leading-[35px] px-[20px]">Thông
+                        tin</a>
+                    <a href="/admin/admin/department_menu_permission?id=0"
+                        class="item block w-[100%] h-[36px] bg-white leading-[35px] px-[20px] border-b-[1px] border-gray-100 hover:bg-[#0041E8] hover:text-white">Quyền
+                        xem menu</a>
+                    <a href="/admin/admin/department_entity_permission?id=0"
+                        class="item block w-[100%] h-[36px] bg-white rounded-[0_0_10px_10px] leading-[35px] px-[20px] hover:bg-[#0041E8] hover:text-white">Quyền
+                        chỉnh sửa</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+                <div
+                    class="p-[15px] bg-white rounded-[10px_10px_0_0] shadow-[0px_-1px_1px_0px_#0000001A] border-b-[6px] border-[#FAFAFB]">
+                    <b class="block text-[20px] mb-[23px]">Thông tin phong ban</b>
+                    <div class="mb-[15px]">
+                        <label for="" class="block mb-[10px] font-[700] text-[14px] text-[#383C44]">Tên phòng
+                            ban</label>
+                        <input type="text" name="" value="Test" placeholder="Tên phòng ban"
+                            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="mb-[15px]">
+                        <label for="" class="block mb-[10px] font-[700] text-[14px] text-[#383C44]">Email</label>
+                        <input type="text" name="" value="Test" placeholder="Địa chỉ email"
+                            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="mb-[15px]">
+                        <label for="" class="block mb-[10px] font-[700] text-[14px] text-[#383C44]">Code</label>
+                        <input type="text" name="" value="Test" placeholder="Code"
+                            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="mb-[15px]">
+                        <label for="" class="block mb-[10px] font-[700] text-[14px] text-[#383C44]">Mô tả</label>
+                        <textarea type="text" name="" value="Test" placeholder="Code"
+                            class="w-[100%] h-[70px] textarea input-bordered rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]"></textarea>
+                    </div>
+                </div>
+                <div class="p-[15px] bg-white rounded-[0_0_10px_10px] shadow-[0px_1px_1px_0px_#0000001A] mt-15px]">
+                    <input type="hidden" name="create" value="yes" />
+                    <input name="commit" type="submit" value="Cập nhật"
+                        class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</div>

old/template/admin/department_entity_permission.html

@@ -0,0 +1,136 @@
+<div class="w-[100%]">
+    <div class="global-breadcrumb-container">
+        <a href="/admin/admin"> Danh sách quản trị viên </a>
+        <a href="" class="text-[#0041E8]"> Form sửa phòng ban </a>
+    </div>
+
+    <div class="max-w-[1141px] m-[0_auto_16px_auto]">
+        <div class="p-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+            <div class="flex items-center justify-between">
+                <h1 class="text-[24px] font-[700] ">Thêm phòng ban</h1>
+                <div class="flex items-center">
+                    <a href="/admin/admin/department_add"
+                        class="flex items-center p-[7px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[15px] font-[500]">
+                        <span
+                            class="border-[1px] border-[#0041E8] h-[15px] w-[15px]  leading-[12px] text-center rounded-[50%] mr-1">+</span>
+                        <span>Thêm mới</span>
+                    </a>
+                    <a href="/admin/admin/department" class=" flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px]
+                                text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white
+                                font-[500]">
+                        <span class="ml-1">Danh sách phòng ban</span>
+                    </a>
+                    <a href="/admin/admin"
+                        class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                        <span class="ml-1">Danh sách quản trị</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex mt-[15px]">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] overflow-hidden">
+                    <a href="/admin/distributor/form"
+                        class="item block w-[100%] h-[36px] bg-white rounded-[10px_10px_0_0]  border-b-[1px] border-gray-100 leading-[35px] px-[20px] hover:bg-[#0041E8] hover:text-white">Thông
+                        tin</a>
+                    <a href="/admin/admin/department_menu_permission?id=0"
+                        class="item block w-[100%] h-[36px] bg-white leading-[35px] px-[20px] border-b-[1px] border-gray-100 hover:bg-[#0041E8] hover:text-white">Quyền
+                        xem menu</a>
+                    <a href="/admin/admin/department_entity_permission?id=0"
+                        class="item block w-[100%] h-[36px] bg-[#0041E8] text-white  rounded-[0_0_10px_10px] leading-[35px] px-[20px] hover:bg-[#0041E8] hover:text-white">Quyền
+                        chỉnh sửa</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+                <div class="p-[15px] bg-white rounded-[15px_15px_0_0] shadow-[0px_-1px_1px_0px_#0000001A]">
+                    <b class="block mb-[15px] font-[20px]">Cài đặt quyền xem Menu cho: Tiệp Hura</b>
+                    <div class="mb-[20px] text-[#6B7280]">
+                        <p class="mb-[20px]">Trong trường hợp quản trị viên không được cập nhật quyền tại đây thì quyền
+                            của quản
+                            trị viên sẽ được
+                            thừa hưởng từ quyền
+                            của phòng ban.
+                        </p>
+                        <p> <b>Lưu ý:</b> Quyền xem menu chỉ quy định việc ẩn/hiện nội dung ở Menu, không quy định việc
+                            quản trị viên có thể
+                            xem được nội dung chi tiết của 1 hạng mục nào đó hay không nếu quản trị viên đó biết được
+                            đường link
+                            truy cập. Để hạn
+                            chế quản trị viên xem hạng mục, bạn cần cài đặt ở Quyền hạng mục.
+                        </p>
+                    </div>
+
+                    <table class="table">
+                        <thead class="bg-[#f6f6f6] text-[#000] font-[500]">
+                            <tr>
+                                <th class="w-[40px]">STT</th>
+                                <th>Hạng mục</th>
+                                <th class="w-[210px]">Được phép xem</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-[#FFE6C1] font-[700]">
+                                <td>1</td>
+                                <td colspan="2">Bán hàng</td>
+                            </tr>
+                            <tr>
+                                <td>1.1</td>
+                                <td>Danh sách đơn hàng</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>1.2</td>
+                                <td>Chờ mua sản phẩm</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>1.3</td>
+                                <td>Thanh toán qua cổng dịch vụ</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                            <tr class="bg-[#FFE6C1] font-[700]">
+                                <td>2</td>
+                                <td colspan="2">Sản phẩm</td>
+                            </tr>
+                            <tr>
+                                <td>2.1</td>
+                                <td>Danh sách Sản phẩm</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                </div>
+                <div
+                    class="p-[15px] bg-white border-t-[6px] border-[#FAFAFB] rounded-[0_0_15px_15px] shadow-[0px_1px_1px_0px_#0000001A]">
+                    <input type="submit" value="Cập nhật"
+                        class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+
+</div>

old/template/admin/department_menu_permission.html

@@ -0,0 +1,135 @@
+<div class="w-[100%]">
+    <div class="global-breadcrumb-container">
+        <a href="/admin/admin"> Danh sách quản trị viên </a>
+        <a href="" class="text-[#0041E8]"> Form sửa phòng ban </a>
+    </div>
+
+    <div class="max-w-[1141px] m-[0_auto_16px_auto]">
+        <div class="p-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+            <div class="flex items-center justify-between">
+                <h1 class="text-[24px] font-[700] ">Thêm phòng ban</h1>
+                <div class="flex items-center">
+                    <a href="/admin/admin/department_add"
+                        class="flex items-center p-[7px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[15px] font-[500]">
+                        <span
+                            class="border-[1px] border-[#0041E8] h-[15px] w-[15px]  leading-[12px] text-center rounded-[50%] mr-1">+</span>
+                        <span>Thêm mới</span>
+                    </a>
+                    <a href="/admin/admin/department" class=" flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px]
+                            text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white
+                            font-[500]">
+                        <span class="ml-1">Danh sách phòng ban</span>
+                    </a>
+                    <a href="/admin/admin"
+                        class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                        <span class="ml-1">Danh sách quản trị</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex mt-[15px]">
+            <div class="left w-[270px] mr-[10px]">
+                <div class="list-tab rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] overflow-hidden">
+                    <a href="/admin/distributor/form"
+                        class="item block w-[100%] h-[36px] bg-white  rounded-[10px_10px_0_0] leading-[35px] px-[20px] hover:bg-[#0041E8] hover:text-white">Thông
+                        tin</a>
+                    <a href="/admin/admin/department_menu_permission?id=0"
+                        class="item block w-[100%] h-[36px] bg-[#0041E8] text-white leading-[35px] px-[20px] border-b-[1px] border-gray-100 hover:bg-[#0041E8] hover:text-white">Quyền
+                        xem menu</a>
+                    <a href="/admin/admin/department_entity_permission?id=0"
+                        class="item block w-[100%] h-[36px] bg-white rounded-[0_0_10px_10px] leading-[35px] px-[20px] hover:bg-[#0041E8] hover:text-white">Quyền
+                        chỉnh sửa</a>
+                </div>
+            </div>
+            <div class="right w-[860px]">
+                <div class="p-[15px] bg-white rounded-[15px_15px_0_0] shadow-[0px_-1px_1px_0px_#0000001A]">
+                    <b class="block mb-[15px] font-[20px]">Cài đặt quyền xem Menu cho: Tiệp Hura</b>
+                    <div class="mb-[20px] text-[#6B7280]">
+                        <p class="mb-[20px]">Trong trường hợp quản trị viên không được cập nhật quyền tại đây thì quyền
+                            của quản
+                            trị viên sẽ được
+                            thừa hưởng từ quyền
+                            của phòng ban.
+                        </p>
+                        <p> <b>Lưu ý:</b> Quyền xem menu chỉ quy định việc ẩn/hiện nội dung ở Menu, không quy định việc
+                            quản trị viên có thể
+                            xem được nội dung chi tiết của 1 hạng mục nào đó hay không nếu quản trị viên đó biết được
+                            đường link
+                            truy cập. Để hạn
+                            chế quản trị viên xem hạng mục, bạn cần cài đặt ở Quyền hạng mục.
+                        </p>
+                    </div>
+
+                    <table class="table">
+                        <thead class="bg-[#f6f6f6] text-[#000] font-[500]">
+                            <tr>
+                                <th class="w-[40px]">STT</th>
+                                <th>Hạng mục</th>
+                                <th class="w-[210px]">Được phép xem</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="bg-[#FFE6C1] font-[700]">
+                                <td>1</td>
+                                <td colspan="2">Bán hàng</td>
+                            </tr>
+                            <tr>
+                                <td>1.1</td>
+                                <td>Danh sách đơn hàng</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>1.2</td>
+                                <td>Chờ mua sản phẩm</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>1.3</td>
+                                <td>Thanh toán qua cổng dịch vụ</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                            <tr class="bg-[#FFE6C1] font-[700]">
+                                <td>2</td>
+                                <td colspan="2">Sản phẩm</td>
+                            </tr>
+                            <tr>
+                                <td>2.1</td>
+                                <td>Danh sách Sản phẩm</td>
+                                <td>
+                                    <label class="check-form flex items-center cursor-pointer">
+                                        <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                        <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                                    </label>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                </div>
+                <div
+                    class="p-[15px] bg-white border-t-[6px] border-[#FAFAFB] rounded-[0_0_15px_15px] shadow-[0px_1px_1px_0px_#0000001A]">
+                    <input type="submit" value="Cập nhật"
+                        class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+</div>

old/template/admin/entity_permission.html

@@ -0,0 +1,144 @@
+<div class="global-breadcrumb-container">
+    <a href="/admin/admin"> Danh sách quản trị viên </a>
+    <a href=""> Form thêm/sửa quản trị viên </a>
+</div>
+
+<div class="max-w-[1141px] flex flex-wrap items-start m-[0_auto_16px_auto]">
+    <div
+        class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
+        <p class="font-bold text-[20px] leading-[26px] block"> Cập nhật quản trị </p>
+    </div>
+
+    <div
+        class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
+        <a href="/admin/admin/add" style="color: #919699;border-bottom: 1px solid #f3f3f3;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Thông tin
+        </a>
+        <a href="/admin/admin/menu-permission" style="color: #919699;border-bottom: 1px solid #f3f3f3;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Quyền xem menu
+        </a>
+        <a href="/admin/admin/entity-permission" style="color: #fff;background: #0041E8;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Quyền chỉnh sửa
+        </a>
+    </div>
+
+    <div class="w-[852px]">
+        <div class="p-[15px] bg-white rounded-[15px_15px_0_0] shadow-[0px_-1px_1px_0px_#0000001A]">
+            <b class="block mb-[15px] font-[20px]">Cài đặt quyền xem Menu cho: Tiệp Hura</b>
+            <div class="mb-[20px] text-[#6B7280]">
+                Trong trường hợp quản trị viên không được cập nhật quyền tại đây thì quyền của quản
+                trị viên sẽ được thừa hưởng từ quyền
+                của phòng ban.
+            </div>
+
+            <table class="table">
+                <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-500">
+                    <tr>
+                        <th class="w-[40px]">STT</th>
+                        <th>Hạng mục</th>
+                        <th>Được phép xem</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="bg-[#FFE6C1] font-[700]">
+                        <td>1</td>
+                        <td colspan="2">Bán hàng</td>
+                    </tr>
+                    <tr>
+                        <td>1.1</td>
+                        <td>Danh sách đơn hàng</td>
+                        <td>
+                            <div class="flex items-center">
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xem</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xóa</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Cập nhật</span>
+                                </label>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>1.2</td>
+                        <td>Chờ mua sản phẩm</td>
+                        <td>
+                            <div class="flex items-center">
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xem</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xóa</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Cập nhật</span>
+                                </label>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>1.3</td>
+                        <td>Thanh toán qua cổng dịch vụ</td>
+                        <td>
+                            <div class="flex items-center">
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xem</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xóa</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Cập nhật</span>
+                                </label>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr class="bg-[#FFE6C1] font-[700]">
+                        <td>2</td>
+                        <td colspan="2">Sản phẩm</td>
+                    </tr>
+                    <tr>
+                        <td>2.1</td>
+                        <td>Danh sách Sản phẩm</td>
+                        <td>
+                            <div class="flex items-center">
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xem</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Xóa</span>
+                                </label>
+                                <label class="check-form flex items-center mr-[20px] cursor-pointer">
+                                    <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                    <span class="ml-[7px] text-[#6B7280] label-text">Cập nhật</span>
+                                </label>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </div>
+        <div
+            class="p-[15px] bg-white border-t-[6px] border-[#FAFAFB] rounded-[0_0_15px_15px] shadow-[0px_1px_1px_0px_#0000001A]">
+            <input type="submit" value="Cập nhật"
+                class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+        </div>
+    </div>
+</div>

old/template/admin/home.html

@@ -0,0 +1,103 @@
+<div class="w-[100%]">
+    <div class="p-[15px] m-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+        <h1 class="text-[24px] font-[700] mb-[15px]">Danh sách quản trị website</h1>
+        <form action=""
+            class="flex items-center p-[15px] rounded-[10px] shadow-[0_1px_1px_0_rgba(0,0,0,0.10)] my-[15px] border-[1px] border-[#F6F6F6]">
+            <input type="text" name=""
+                class="w-[375px] h-[35px] px-[10px] rounded-[4px] border-[#D8D8D8] border-[1px] mr-[10px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)]"
+                placeholder="Tìm theo tên/email">
+            <button type="submit" class="px-[8px] py-[6px] rounded-[4px] text-white bg-[#0041E8]">Tìm kiếm</button>
+        </form>
+
+        <div class="flex items-center justify-between">
+            <select name="" id=""
+                class="w-[260px] h-[35px] border-[1px] border-[#D8D8D8] shadow-[0px_2px_4px_0px_#0000001F] rounded-[4px] px-[5px]">
+                <option value="">Chọn phòng ban</option>
+            </select>
+
+            <div class="flex items-center">
+                <a href="/admin/admin/add"
+                    class="flex items-center p-[7px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[15px] font-[500]">
+                    <span
+                        class="border-[1px] border-[#0041E8] h-[15px] w-[15px]  leading-[12px] text-center rounded-[50%] mr-1">+</span>
+                    <span>Thêm quản trị mới</span>
+                </a>
+                <a href="/admin/admin/department"
+                    class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                    <i class="fa-regular fa-file-pdf"></i>
+                    <span class="ml-1">Danh sách phòng ban</span>
+                </a>
+                <a href="/admin/admin/admin-log-product"
+                    class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                    <i class="fa-solid fa-box"></i>
+                    <span class="ml-1">Theo dõi tạo sản phẩm</span>
+                </a>
+                <a href="/admin/admin/login-log"
+                    class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                    <i class="fa-solid fa-user-gear"></i>
+                    <span class="ml-1">Quản trị đăng nhập</span>
+                </a>
+            </div>
+        </div>
+
+        <table class="table mt-[15px]">
+            <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-500">
+                <tr>
+                    <th class="w-[38px]">STT</th>
+                    <th>Họ tên</th>
+                    <th>Email</th>
+                    <th>Phòng ban</th>
+                    <th>Thời gian tạo</th>
+                    <th>Đăng nhập lần cuối</th>
+                    <th>IP đăng nhập</th>
+                    <th class="w-[140px]">Xem lịch sử</th>
+                    <th class="w-[95px]">Quản lý</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>
+                        <p>Khách hàng hunglong.vn</p>
+                        <span
+                            class="px-[5px] py-[3px] rounded-[10px] border border-[#E00000] text-[#E00000] text-[12px] font-[700]">Tạm
+                            khóa</span>
+                    </td>
+                    <td>
+                        hunglong@hurasoft.com
+                    </td>
+                    <td>
+                        Khách hàng test giao diện
+                    </td>
+                    <td>
+                        29-01-2024, 1:34 pm
+                    </td>
+                    <td>
+                        07-03-2024, 9:54 am
+                    </td>
+                    <td>
+                        2405:4802:1d21:1660:c4b3:5e6e:3699:f991
+                    </td>
+                    <td>
+                        <a href="/admin/admin/admin-log"
+                            class="btn w-[120px] h-[34px] min-h-[34px] px-[15px] py-[5px] bg-[#0041E8] rounded-[4px] m-auto text-white text-center">Xem
+                            toàn
+                            bộ</a>
+                    </td>
+                    <td>
+                        <div class="list-btn flex items-center justify-center">
+                            <a href="/admin/template/upload-set" title="Form sản phẩm"
+                                class="w-[30px] h-[30px] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]">
+                                <i class="icons icon-edit"></i>
+                            </a>
+                            <a href=""
+                                class="w-[32px] h-[32px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center mr-[5px]">
+                                <i class="icons icon-delete"></i>
+                            </a>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

old/template/admin/login_log.html

@@ -0,0 +1,40 @@
+<div class="w-[100%]">
+    <div class="global-breadcrumb-container">
+        <a href="/admin/admin"> Danh sách quản trị viên </a>
+        <a href="" class="text-[#0041E8]"> Danh sách đăng nhập quản trị </a>
+    </div>
+
+    <div class="p-[15px] m-[15px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_#0000001A]">
+        <div class="flex items-center justify-between">
+            <h1 class="text-[24px] font-[700] ">Danh sách đăng nhập quản trị</h1>
+            <div class="flex items-center">
+                <a href="/admin/admin"
+                    class="flex items-center px-[10px] py-[8px] border-[#0041E8] border-[1px] rounded-[4px] text-white bg-[#0041E8] hover:bg-[#0041E8] hover:text-white ml-[10px] hover:stroke-white font-[500]">
+                    <span class="ml-1">Danh sách quản trị</span>
+                </a>
+            </div>
+        </div>
+
+        <table class="mt-[25px]">
+            <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-bold">
+                <tr>
+                    <td>STT</td>
+                    <td>User</td>
+                    <td>IP</td>
+                    <td>Thời gian</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td><a href="" class="text-blue-600">adminkenli@gmail.com</a></td>
+                    <td>2405:4802:21c:5670:cf0:8f00:98e3:972d</td>
+                    <td>
+                        04-04-2025, 10:17 am
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+</div>

old/template/admin/menu_permission.html

@@ -0,0 +1,112 @@
+<div class="global-breadcrumb-container">
+    <a href="/admin/admin"> Danh sách quản trị viên </a>
+    <a href=""> Form thêm/sửa quản trị viên </a>
+</div>
+
+<div class="max-w-[1141px] flex flex-wrap items-start m-[0_auto_16px_auto]">
+    <div
+        class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
+        <p class="font-bold text-[20px] leading-[26px] block"> Cập nhật quản trị </p>
+    </div>
+
+    <div
+        class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
+        <a href="/admin/admin/add" style="color: #919699;border-bottom: 1px solid #f3f3f3;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Thông tin
+        </a>
+        <a href="/admin/admin/menu-permission" style="color: #fff;background: #0041E8;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Quyền xem menu
+        </a>
+        <a href="/admin/admin/entity-permission" style="color: #919699;"
+            class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+            Quyền chỉnh sửa
+        </a>
+    </div>
+
+    <div class="w-[852px]">
+        <div class="p-[15px] bg-white rounded-[15px_15px_0_0] shadow-[0px_-1px_1px_0px_#0000001A]">
+            <b class="block mb-[15px] font-[20px]">Cài đặt quyền xem Menu cho: Tiệp Hura</b>
+            <div class="mb-[20px] text-[#6B7280]">
+                <p class="mb-[20px]">Trong trường hợp quản trị viên không được cập nhật quyền tại đây thì quyền của quản
+                    trị viên sẽ được
+                    thừa hưởng từ quyền
+                    của phòng ban.
+                </p>
+                <p> <b>Lưu ý:</b> Quyền xem menu chỉ quy định việc ẩn/hiện nội dung ở Menu, không quy định việc
+                    quản trị viên có thể
+                    xem được nội dung chi tiết của 1 hạng mục nào đó hay không nếu quản trị viên đó biết được đường link
+                    truy cập. Để hạn
+                    chế quản trị viên xem hạng mục, bạn cần cài đặt ở Quyền hạng mục.
+                </p>
+            </div>
+
+            <table class="table">
+                <thead class="bg-[#f6f6f6] text-[#000] font-[500]">
+                    <tr>
+                        <th class="w-[40px]">STT</th>
+                        <th>Hạng mục</th>
+                        <th class="w-[210px]">Được phép xem</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="bg-[#FFE6C1] font-[700]">
+                        <td>1</td>
+                        <td colspan="2">Bán hàng</td>
+                    </tr>
+                    <tr>
+                        <td>1.1</td>
+                        <td>Danh sách đơn hàng</td>
+                        <td>
+                            <label class="check-form flex items-center cursor-pointer">
+                                <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                            </label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>1.2</td>
+                        <td>Chờ mua sản phẩm</td>
+                        <td>
+                            <label class="check-form flex items-center cursor-pointer">
+                                <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                            </label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>1.3</td>
+                        <td>Thanh toán qua cổng dịch vụ</td>
+                        <td>
+                            <label class="check-form flex items-center cursor-pointer">
+                                <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                            </label>
+                        </td>
+                    </tr>
+                    <tr class="bg-[#FFE6C1] font-[700]">
+                        <td>2</td>
+                        <td colspan="2">Sản phẩm</td>
+                    </tr>
+                    <tr>
+                        <td>2.1</td>
+                        <td>Danh sách Sản phẩm</td>
+                        <td>
+                            <label class="check-form flex items-center cursor-pointer">
+                                <input type="checkbox" name="" value="1" class="checkbox checkbox-success">
+                                <span class="ml-[7px] text-[#6B7280] label-text">Được xem</span>
+                            </label>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </div>
+        <div
+            class="p-[15px] bg-white border-t-[6px] border-[#FAFAFB] rounded-[0_0_15px_15px] shadow-[0px_1px_1px_0px_#0000001A]">
+            <input type="submit" value="Cập nhật"
+                class="inline-block cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+        </div>
+    </div>
+</div>

old/template/article/category.html

@@ -0,0 +1,163 @@
+<div class="w-[100%]">
+    <div
+        class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
+        <p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Danh mục nội dung </p>
+
+        <div class="flex items-center justify-end font-[500] leading-[35px] mb-[20px]">
+            <a href="/admin/article/category-add"
+                class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                <span
+                    class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
+                <span>Thêm danh mục mới</span>
+            </a>
+
+            <a href="/admin/article"
+                class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
+                <i class="far fa-folder mr-2"></i>
+                <span>Danh sách nội dung</span>
+            </a>
+        </div>
+
+        <div class="table">
+            <table>
+                <thead class="bg-[#f6f6f6] text-[#000] text-[14px] font-[500]">
+                    <tr>
+                        <td width="600"> Danh mục </td>
+                        <td width="50" align="center"> ID </td>
+                        <td width="100" align="center"> Hiển thị </td>
+                        <td width="100" align="center"> STT </td>
+                        <td width="120" align="center"> Số bài viết </td>
+                        <td width="172" align="center"> Lựa chọn </td>
+                    </tr>
+                </thead>
+
+                <tbody>
+
+                    <tr align="center">
+                        <td align="left"> 1. Danh mục cấp 1 </td>
+
+                        <td> 1 </td>
+
+                        <td> child_article </td>
+
+                        <td>
+                            <input type="text" value="0"
+                                class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
+                        </td>
+
+                        <td>
+                            <span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
+                            <a href=""
+                                class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
+                                Xem
+                            </a>
+                        </td>
+
+                        <td>
+                            <div class="items-center flex justify-center">
+                                <a href="/admin/article/category-add?id=1" title="Sửa lại"
+                                    class="icons icon-edit mr-[6px]"></a>
+
+                                <a href="" title="Xem tại web"
+                                    class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
+
+                                <a href="" title="Hạ xuống"
+                                    class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
+
+                                <a href="" title="Cho Hiển thị"
+                                    class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
+                                </a>
+
+                                <a href="" title="Xóa" class="icons icon-delete"></a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Danh mục cấp 2 -->
+                    <tr align="center">
+                        <td align="left" style="padding-left: 30px;"> 1.1 Danh mục cấp 2 </td>
+
+                        <td> 1 </td>
+
+                        <td> child_article </td>
+
+                        <td>
+                            <input type="text" value="0"
+                                class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
+                        </td>
+
+                        <td>
+                            <span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
+                            <a href=""
+                                class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
+                                Xem
+                            </a>
+                        </td>
+
+                        <td>
+                            <div class="items-center flex justify-center">
+                                <a href="/admin/article/category-add?id=1" title="Sửa lại"
+                                    class="icons icon-edit mr-[6px]"></a>
+
+                                <a href="" title="Xem tại web"
+                                    class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
+
+                                <a href="" title="Hạ xuống"
+                                    class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
+
+                                <a href="" title="Cho Hiển thị"
+                                    class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
+                                </a>
+
+                                <a href="" title="Xóa" class="icons icon-delete"></a>
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- Danh mục cấp 3 -->
+                    <tr align="center">
+                        <td align="left" style="padding-left: 60px;"> 1.1.1 Danh mục cấp 3 </td>
+
+                        <td> 1 </td>
+
+                        <td> child_article </td>
+
+                        <td>
+                            <input type="text" value="0"
+                                class="w-[100%] h-[36px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] text-center">
+                        </td>
+
+                        <td>
+                            <span class="inline-block mr-[10px] leading-[30px]"> 60 </span>
+                            <a href=""
+                                class="inline-block cursor-pointer leading-[30px] bg-[#0041E8] text-[#fff_!important] rounded-[4px] font-[500] p-[0_11px]">
+                                Xem
+                            </a>
+                        </td>
+
+                        <td>
+                            <div class="items-center flex justify-center">
+                                <a href="/admin/article/category-add?id=1" title="Sửa lại"
+                                    class="icons icon-edit mr-[6px]"></a>
+
+                                <a href="" title="Xem tại web"
+                                    class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
+
+                                <a href="" title="Hạ xuống"
+                                    class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
+
+                                <a href="" title="Cho Hiển thị"
+                                    class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
+                                </a>
+
+                                <a href="" title="Xóa" class="icons icon-delete"></a>
+                            </div>
+                        </td>
+                    </tr>
+
+                </tbody>
+            </table>
+        </div>
+
+    </div>
+</div>

old/template/article/form.html

@@ -0,0 +1,502 @@
+<div class="global-breadcrumb-container">
+    <a href="/admin/article"> Bài viết </a>
+    <a href=""> Form cập nhật Bài viết </a>
+</div>
+
+<div class="max-w-[1141px] m-auto p-[0_15px]">
+    <div class="flex flex-wrap items-start m-[16px_0]">
+        <div
+            class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px] flex flex-wrap items-center justify-between">
+            {% if global.url contains 'id=' %}
+            <p class="font-bold text-[20px]"> Sửa nội dung </p>
+
+            <p class="w-[100%] text-[#6B7280] order-[1]">
+                ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ CHUYỆN NHỎ
+            </p>
+            {% else %}
+            <p class="font-bold text-[20px]"> Thêm mới </p>
+            {% endif %}
+
+            <div class="flex items-center">
+                <a href="/admin/article/form"
+                    class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                    <span
+                        class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
+                    <span>Thêm nội dung mới</span>
+                </a>
+
+                <a href=""
+                    class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                    <span class="far fa-folder mr-2"></span>
+                    <span>Quản lý danh mục</span>
+                </a>
+
+                <a href="/admin/article" title="Danh sách nội dung"
+                    class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
+            </div>
+        </div>
+
+        <div class="w-[25%] mr-[16px]">
+            <div
+                class="bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
+                <a href="javascript:void(0)" style="color: #Fff;background: #0041E8;"
+                    class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
+                </a>
+
+                {% if global.url contains 'id=' %}
+                <a href="/admin/article/tag?id=1"
+                    class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
+                <a href="/admin/article/relation?id=1&related_item_type=product"
+                    class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
+                    quan:
+                    Sản phẩm </a>
+                <a href="/admin/article/relation?id=1&related_item_type=product-category"
+                    class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Liên
+                    quan:
+                    Danh mục sản phẩm </a>
+                {% endif %}
+            </div>
+        </div>
+
+        <form method="post" enctype="multipart/form-data"
+            class="w-[calc(100%_-25%_-16px)] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
+            <div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
+                <p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Thông tin cơ bản </p>
+
+                <div class="mb-[15px] flex flex-wrap items-center">
+                    <p class="mb-[7px] w-[100%] font-[600]">Ảnh đại diện </p>
+
+                    <div class="inline-block">
+                        <img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
+                    </div>
+
+                    <label class="cursor-pointer">
+                        <span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
+
+                        <input type="file" name="file_thumbnail"
+                            class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
+                    </label>
+                </div>
+
+                <div class="mb-[15px] flex flex-wrap items-center">
+                    <p class="mb-[7px] w-[100%] font-[600]"> Ảnh nền trong chi tiết </p>
+
+                    <div class="inline-block">
+                        <img src="https://via.placeholder.com/400x300" class="block max-h-[80px] mr-[20px]">
+                    </div>
+
+                    <label class="cursor-pointer">
+                        <span class="font-[300] mr-[10px]"> Cập nhật ảnh </span>
+
+                        <input type="file" name="file_thumbnail"
+                            class="file-input h-[40px] rounded-[4px] file-input-bordered file-input-primary w-full max-w-xs">
+                    </label>
+                </div>
+
+                <div
+                    class="p-[12px_20px] m-[15px_0] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] rounded-[4px]">
+                    <p class="font-bold mb-2"> Danh mục <i class="font-[300] text-[#6B7280]"> * có thể chọn nhiều danh
+                            mục  </i> </p>
+
+                    <div class="overflow-auto max-h-[250px]">
+                        <div class="mb-1">
+                            <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
+                                <input type="checkbox" value="1" class="checkbox checkbox-success">
+                                <b class="label-text ml-[5px]"> Danh mục cấp 1 </b>
+                            </label>
+                        </div>
+
+                        <div class="mb-1">
+
+                            <p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
+
+                            <div class="pl-[25px]">
+                                <!-- KHÔNG CÓ danh mục con -->
+                                <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
+                                    <input type="checkbox" value="2" class="checkbox checkbox-success">
+                                    <span class="label-text ml-[5px] text-[#6B7280]"> Danh mục
+                                        cấp 2 </span>
+                                </label> <br>
+
+                                <!-- CÓ danh mục con -->
+                                <div>
+                                    <p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
+
+                                    <div class="pl-[25px]">
+                                        <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
+                                            <input type="checkbox" value="2" class="checkbox checkbox-success">
+                                            <span class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
+                                        </label> <br>
+                                    </div>
+                                </div>
+
+                                <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br>
+                                <div>
+                                    <p class="font-bold mb-[5px]"> Danh mục cấp 2 </p>
+                                    <div class="pl-[25px]"> <label
+                                            class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                                type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                                class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 3 </span>
+                                        </label> <br></div>
+                                </div><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br>
+                            </div>
+                        </div>
+
+                        <!-- clone -->
+                        <div class="mb-1"> <label class="inline-flex items-center mb-1 ml-1 cursor-pointer group">
+                                <input type="checkbox" value="1" class="checkbox checkbox-success">
+                                <b class="label-text ml-[5px]"> Danh mục cấp 1</b>
+                            </label> </div>
+                        <div class="mb-1">
+                            <p class="font-bold mb-[5px]"> Danh mục cấp 1 </p>
+                            <div class="pl-[25px]"> <label
+                                    class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br><label class="inline-flex items-center mb-1 ml-1 cursor-pointer group"> <input
+                                        type="checkbox" value="2" class="checkbox checkbox-success"> <span
+                                        class="text-[#6B7280] label-text ml-[5px]"> Danh mục cấp 2 </span> </label>
+                                <br>
+                            </div>
+                        </div>
+                        <!-- // -->
+                    </div>
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]"> Tiêu đề </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]"> Link Index </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]"> Link tham khảo (link web ngoài nếu có) </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]"> Tóm tắt chính </p>
+
+                    <textarea
+                        class="w-[100%] min-h-[90px] max-h-[150px] textarea textarea-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
+                </div>
+
+                <div>
+                    <p class="mb-[7px] w-[100%] font-[600]"> Tags (Mỗi cụm từ 1 dòng) </p>
+
+                    <textarea
+                        class="w-[100%] min-h-[90px] max-h-[150px]  rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
+                </div>
+            </div>
+
+
+            <div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
+                <div class="flex flex-wrap items-center justify-between mb-3">
+                    <p class="font-bold text-[20px] leading-[20px]"> Mô tả (nếu có) </p>
+
+                    <div class="flex items-center font-[500] leading-[35px]">
+                        <a href=""
+                            class="group flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                            <span class="icons icon-upload group-hover:filter-none"></span>
+                            <span> Upload ảnh </span>
+                        </a>
+
+                        <a href=""
+                            class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                            <i class="far fa-folder mr-2"></i>
+                            <span> Quản lý </span>
+                        </a>
+
+                        <a href=""
+                            class="flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
+                            <i class="fa fa-image mr-2"></i>
+                            <span> Chọn ảnh trong kho ảnh </span>
+                        </a>
+                    </div>
+
+                    <div class="flex overflow-auto pb-2 w-[100%]">
+
+                        <a href="javascript:void(0)" class="min-w-[100px] m-[10px_10px_0_0]">
+                            <img src="https://via.placeholder.com/2000x800" class="h-[40px] block" />
+                        </a>
+
+                    </div>
+                </div>
+
+                <div class="mb-[15px]">
+                    <textarea id="js-desc"> </textarea>
+                </div>
+
+                <div>
+                    <p class="mb-[7px] w-[100%] font-[600]"> Thứ tự <i class="font-[300] text-[13px]"> (* số cao xếp
+                            trước)</i> </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+            </div>
+
+
+            <div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
+                <p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Dùng cho SEO </p>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]">
+                        Url canonical
+                        <i class="text-[13px] font-[300]"> * để trống sẽ dùng link mặc định của hệ thống </i>
+                    </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]">
+                        Meta Title
+                        <i class="text-[13px] font-[300]">  0 ký tự , 0 từ </i>
+                    </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]">
+                        Meta Keywords
+                        <i class="text-[13px] font-[300]">  0 ký tự , 0 từ </i>
+                    </p>
+
+                    <input type="text" value=""
+                        class="w-[100%] h-[36px] input input-md input-bordered rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]" />
+                </div>
+
+                <div class="mb-[15px]">
+                    <p class="mb-[7px] w-[100%] font-[600]">
+                        Meta Description
+                        <i class="text-[13px] font-[300]"> 0 ký tự , 0 từ (Khuyến nghị: 160 ký tự) </i>
+                    </p>
+
+                    <textarea
+                        class="w-[100%] min-h-[90px] max-h-[150px] rounded-[4px] textarea textarea-bordered shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]"></textarea>
+                </div>
+
+                <div class="mb-[15px] flex items-start">
+                    <p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Cho phép Google Index </p>
+
+                    <label class="inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="checkbox checkbox-success">
+                        <span class="label-text ml-[15px]"> Cho phép Google Index </span>
+                    </label>
+                </div>
+
+                <div class="flex items-start">
+                    <p class="mb-[7px] w-[100%] font-[600] w-[220px]"> Hiển thị Mục lục đầu bài viết </p>
+
+                    <label class="inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="checkbox checkbox-success">
+                        <span class="label-text ml-[15px]"> Cho phép hiển thị </span>
+                    </label>
+                </div>
+
+            </div>
+
+
+            <div class="p-[16px] border-[#FAFAFB] border-b-[8px]">
+                <p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Quản trị hiển thị </p>
+
+
+                <div class="mb-[15px] flex flex-wrap">
+                    <p class="w-[230px] font-bold">Thời gian của bài viết</p>
+
+                    <div>
+                        <label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
+                            <input type="radio" value="0" name="info[article_time_set]"
+                                class="radio checked:bg-blue-500" checked="">
+                            <span class="label-text ml-[10px]"> Thời gian tạo bài </span>
+                        </label>
+
+                        <label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
+                            <input type="radio" value="1" name="info[article_time_set]"
+                                class="radio checked:bg-blue-500">
+                            <span class="label-text ml-[10px]"> Chọn thời gian </span>
+                        </label>
+
+                        <div class="w-[100%] hidden" id="js-publish_time">
+                            <div class="flex items-center m-[10px_0]">
+                                <div class="relative mr-[20px]">
+                                    <i
+                                        class="far fa-calendar text-[#7E7E7E] m-[0_5px_0_0] absolute left-[10px] leading-[35px]"></i>
+                                    <input type="date" name="from_time_date" value="" placeholder="Từ ngày"
+                                        class="w-[135px] h-[36px] p-[0_10px_0_30px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
+                                </div>
+
+                                <p class="mr-[10px]"> Giờ </p>
+
+                                <select name="info[from_time_minute]" id="from_time_minute" style="width: 85px;"
+                                    class="border border-[#d8d8d8] h-[36px] rounded-[4px] pl-[5px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
+                                    <option value="00:00">00:00</option>
+                                    <option value="00:30">00:30</option>
+                                    <option value="01:00">01:00</option>
+                                    <option value="01:30">01:30</option>
+                                    <option value="02:00">02:00</option>
+                                    <option value="02:30">02:30</option>
+                                    <option value="03:00">03:00</option>
+                                    <option value="03:30">03:30</option>
+                                    <option value="04:00">04:00</option>
+                                    <option value="04:30">04:30</option>
+                                    <option value="05:00">05:00</option>
+                                    <option value="05:30">05:30</option>
+                                    <option value="06:00">06:00</option>
+                                    <option value="06:30">06:30</option>
+                                    <option value="07:00">07:00</option>
+                                    <option value="07:30">07:30</option>
+                                    <option value="08:00">08:00</option>
+                                    <option value="08:30">08:30</option>
+                                    <option value="09:00">09:00</option>
+                                    <option value="09:30">09:30</option>
+                                    <option value="10:00">10:00</option>
+                                    <option value="10:30">10:30</option>
+                                    <option value="11:00">11:00</option>
+                                    <option value="11:30">11:30</option>
+                                    <option value="12:00">12:00</option>
+                                    <option value="12:30">12:30</option>
+                                    <option value="13:00">13:00</option>
+                                    <option value="13:30">13:30</option>
+                                    <option value="14:00">14:00</option>
+                                    <option value="14:30">14:30</option>
+                                    <option value="15:00">15:00</option>
+                                    <option value="15:30">15:30</option>
+                                    <option value="16:00">16:00</option>
+                                    <option value="16:30">16:30</option>
+                                    <option value="17:00">17:00</option>
+                                    <option value="17:30">17:30</option>
+                                    <option value="18:00">18:00</option>
+                                    <option value="18:30">18:30</option>
+                                    <option value="19:00">19:00</option>
+                                    <option value="19:30">19:30</option>
+                                    <option value="20:00">20:00</option>
+                                    <option value="20:30">20:30</option>
+                                    <option value="21:00">21:00</option>
+                                    <option value="21:30">21:30</option>
+                                    <option value="22:00">22:00</option>
+                                    <option value="22:30">22:30</option>
+                                    <option value="23:00">23:00</option>
+                                    <option value="23:30">23:30</option>
+                                </select>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <i class="w-[100%] font-[300] text-[#6B7280] mt-[5px]">(Hiển thị cho người xem thời gian thật của
+                        bài thay vì thời gian cập nhật)</i>
+                </div>
+
+
+                <div class="mb-[15px] flex flex-wrap">
+                    <p class="w-[230px] font-bold"> Trạng thái </p>
+
+                    <div>
+                        <label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
+                            <input type="radio" value="0" name="info[status]" class="radio checked:bg-blue-500"
+                                checked="">
+                            <span class="label-text ml-[10px]"> Bản nháp </span>
+                        </label>
+
+                        <label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
+                            <input type="radio" value="1" name="info[status]" class="radio checked:bg-blue-500">
+                            <span class="label-text ml-[10px]"> Cho hiển thị </span>
+                        </label>
+
+                        <label class="inline-flex items-center cursor-pointer relative pl-[30px] mr-[34px]">
+                            <input type="radio" value="-1" name="info[status]" class="radio checked:bg-blue-500">
+                            <span class="label-text ml-[10px]"> Chờ duyệt </span>
+                        </label>
+
+                    </div>
+                </div>
+
+
+                <div class="flex flex-wrap items-center">
+                    <p class="w-[230px] font-bold"> Xem thử </p>
+
+                    <a href="" target="_blank"
+                        class="inline-block font-[600] border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[30px] p-[0_12px] transition hover:bg-[#0041E8] hover:text-white">
+                        Xem bài viết tại trang web
+                    </a>
+                </div>
+
+            </div>
+
+            <input type="submit" value="Cập nhật"
+                class="inline-block m-[16px] cursor-pointer h-[32px] bg-[#0041E8] text-[#fff] rounded-[4px] font-[500] p-[0_11px]" />
+        </form>
+    </div>
+</div>
+
+
+<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+
+<script>
+    tinymce.init({
+        selector: 'textarea#js-desc',
+        height: 350,
+        menubar: true,
+        plugins: [
+            'advlist autolink lists link image charmap print preview anchor',
+            'searchreplace visualblocks code fullscreen',
+            'insertdatetime media table paste code help wordcount'
+        ],
+        toolbar: 'undo redo | formatselect | ' +
+            'bold italic backcolor | alignleft aligncenter ' +
+            'alignright alignjustify | bullist numlist outdent indent | ' +
+            'removeformat | help',
+        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+    });
+</script>
+
+<script>
+    $(function () {
+        $("input[name='info[article_time_set]']").click(function () {
+            if ($(this).val() == 1) $("#js-publish_time").show();
+            else $("#js-publish_time").hide();
+        });
+    });
+</script>

old/template/article/home.html

@@ -0,0 +1,137 @@
+<div class="w-[100%]">
+    <div
+        class="bg-white m-[16px] p-[20px_16px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px]">
+        <p class="leading-[30px] mb-[13px] font-bold text-[24px]"> Bài viết </p>
+
+        <form method="get" enctype="multipart/form-data" action="/admin/"
+            class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
+            <input type="text" name="q" id="keyword" value="" placeholder=""
+                class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
+            <input type="submit" value="Tìm kiếm"
+                class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
+        </form>
+
+        <div class="flex items-center flex-wrap justify-between mb-[20px]">
+            <div class="flex items-center">
+                <select
+                    class="min-w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[15px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
+                    <option value=""> Chọn danh mục </option>
+                    <option value=""> option </option>
+                </select>
+
+                <a href=""
+                    class="leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
+                    Xem nội dung đang ẩn
+                </a>
+
+                <a href=""
+                    class="leading-[35px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]">
+                    Xem nội dung nổi bật
+                </a>
+            </div>
+
+
+            <div class="flex items-center font-[500] leading-[35px]">
+                <a href="/admin/article/form"
+                    class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] m-[0_16px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                    <span
+                        class="border-[1px] border-[#0041E8] h-[13px] w-[13px] leading-[10.2px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
+                    <span>Thêm nội dung mới</span>
+                </a>
+
+                <a href="/admin/article/category"
+                    class="inline-flex items-center whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_12px] group hover:bg-[#0041E8] hover:text-[#fff]">
+                    <i class="far fa-folder mr-2"></i>
+                    <span>Quản lý danh mục</span>
+                </a>
+            </div>
+        </div>
+
+        <div class="overflow-x-auto">
+            <table class="table">
+                <thead class="bg-[#F6F6F6] text-[#000] text-[14px] font-500">
+                    <tr>
+                        <td width="40"> STT </td>
+                        <td width="130"> Ảnh </td>
+                        <td> Sản phẩm (Tổng số: 1.742) </td>
+                        <td> Thống kê </td>
+                        <td> Quản trị </td>
+                        <td width="160"> Lựa chọn </td>
+                    </tr>
+                </thead>
+
+                <tbody>
+
+                    <tr>
+                        <td align="center"> 1 </td>
+
+                        <td>
+                            <img src="https://via.placeholder.com/880x350" class="block m-auto" />
+                        </td>
+
+                        <td>
+                            <span> [#2481] </span>
+                            <a href=""> Elgato – Happy New Year 2024 Deal Hot Đầu Xuân </a>
+
+                            <div class="m-[5px_0]"> Thời gian chương trình : 15.02.2024 – 24.02.2024 </div>
+
+                            <div>
+                                STT
+                                <input type="text" value="0"
+                                    class="w-[140px] h-[32px] border border-[#D8D8D8] m-[0_0_0_10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
+                            </div>
+                        </td>
+
+                        <td>
+                            <p> - Xem: 90 </p>
+                            <p> - Thích: 0 </p>
+                            <p> - Comment: 0 </p>
+                        </td>
+
+                        <td>
+                            <p> Cập nhật: Nguyễn MInh Hải </p>
+                            <p> (15-02-2024, 2:57 pm) </p>
+                        </td>
+
+                        <td>
+                            <div class="items-center flex">
+                                <a href="/admin/article/form?id=1" title="Sửa lại"
+                                    class="border-[1px] border-[#0041E8_!important] icons icon-edit mr-[6px]"></a>
+
+                                <a href="" title="Xem tại web"
+                                    class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
+
+                                <a href="" title="Cho nổi bật"
+                                    class="fas fa-crown bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]"></a>
+
+                                <a href="" title="Hạ nổi bật"
+                                    class="fas fa-crown bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
+
+                                <a href="" title="Hạ xuống"
+                                    class="far fa-eye-slash bg-[#F9F9F9] leading-[30px] rounded-[5px] text-[#9E9E9E_!important] text-center w-[30px] border border-[#ECECEC] mr-[6px]"></a>
+
+                                <a href="" title="Cho Hiển thị"
+                                    class="far fa-eye bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8] mr-[6px]">
+                                </a>
+
+                                <a href="" title="Xóa" class="icons icon-delete"></a>
+                            </div>
+                        </td>
+
+                    </tr>
+
+                </tbody>
+            </table>
+        </div>
+
+        <div class="paging">
+            <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
+            <a href="" class="current">1</a>
+            <a href="">2</a>
+            <a href="">3</a>
+            <a href="">4</a>
+            <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+        </div>
+
+    </div>
+</div>

old/template/article/relation.html

@@ -0,0 +1,124 @@
+{% assign _check_type = global.url | split: 'related_item_type=' %}
+
+<div class="global-breadcrumb-container">
+    <a href="/admin/article"> Bài viết </a>
+    <a href=""> Form cập nhật Bài viết </a>
+</div>
+
+<div class="max-w-[1141px] m-[0_auto_20px]">
+    <div class="flex flex-wrap items-start justify-center">
+
+        <div
+            class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] flex flex-wrap items-center justify-between">
+            <p class="font-bold text-[20px]"> Sửa nội dung </p>
+
+            <p class="text-[#6B7280] mt-[10px] order-[1] w-[100%]"> ROG FALCHION LOW PROFILE – CHƠI GAME TRÊN MAC LÀ
+                CHUYỆN NHỎ </p>
+
+            <div class="flex items-center">
+                <a href="/admin/article/form"
+                    class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                    <span
+                        class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
+                    <span>Thêm nội dung mới</span>
+                </a>
+
+                <a href=""
+                    class="inline-flex items-center whitespace-nowrap border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] p-[0_12px] m-[0_10px_0_0] group hover:bg-[#0041E8] hover:text-[#fff]">
+                    <span class="far fa-folder mr-2"></span>
+                    <span>Quản lý danh mục</span>
+                </a>
+
+                <a href="/admin/article" title="Danh sách nội dung"
+                    class="fas fa-ellipsis-h text-[18px] border border-[#ECECEC] rounded-[4px] bg-[#fff] text-[#6B7280] leading-[35px] text-center min-w-[36px] group hover:bg-[#0041E8] hover:text-[#fff]"></a>
+            </div>
+        </div>
+
+        <!-- col left -->
+        <div
+            class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
+            <a href="/admin/article/form?id=1"
+                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Chỉnh sửa
+            </a>
+
+            <a href="/admin/article/tag?id=1"
+                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition"> Tag </a>
+
+            <a href="/admin/article/relation?id=1&related_item_type=product"
+                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
+                _check_type[1]=='product' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan: Sản phẩm
+            </a>
+
+            <a href="/admin/article/relation?id=1&related_item_type=product-category"
+                class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition" {% if
+                _check_type[1]=='product-category' %}style="color: #Fff;background: #0041E8;" {% endif %}> Liên quan:
+                Danh mục sản phẩm </a>
+        </div>
+
+        <!-- col right -->
+        <div
+            class="w-[852px] bg-white p-[16pX_16px_20px] rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
+            {% if _check_type[1] == 'product'%}
+
+            {% include 'article/relation_product' %}
+
+            {% elsif _check_type[1] == 'product-category' %}
+
+            {% include 'article/relation_product_category' %}
+
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+
+<!-- Popup chọn tag -->
+<div id="popup-tag" class="hidden bg-white w-[852px] p-[16px] rounded-[15px]">
+    <p class="mb-[14px] font-bold text-[20px] leading-[26px]"> Chọn Tag </p>
+
+    <form method="get" enctype="multipart/form-data" action="/admin/"
+        class="border border-[#F6F6F6] m-[12px_0_20px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)]">
+        <input type="text" name="q" id="keyword" value="" placeholder="Tìm link truy cập"
+            class="w-[375px] h-[36px] border border-[#D8D8D8] m-[0_10px_0_0] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
+        <input type="submit" value="Tìm kiếm"
+            class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] mr-[12px] cursor-pointer rounded-[4px]">
+        <p class="inline-block leading-[36px]"> (v.d. abc-xyz) </p>
+    </form>
+
+    <div class="order-page-table max-h-[400px] overflow-auto">
+        <table class="table">
+            <thead class="bg-[#f6f6f6] text-[14px] text-[#000] font-700">
+                <tr>
+                    <td width="40">STT</td>
+                    <td>Thương hiệu</td>
+                    <td width="80"> Lựa chọn </td>
+                </tr>
+            </thead>
+
+            <tbody>
+
+                <tr align="center">
+                    <td class="text-center"> 1 </td>
+                    <td align="left"> Laptop AMD Ryzen 3 </td>
+                    <td>
+                        <a href=""
+                            class="block font-[500] leading-[36px] rounded-[4px] bg-[#0041E8] p-[0_7px] text-[#fff_!important]">
+                            Chọn
+                        </a>
+                    </td>
+                </tr>
+
+            </tbody>
+        </table>
+    </div>
+
+    <div class="paging">
+        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
+        <a href="" class="current">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+        <a href="">4</a>
+        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+    </div>
+
+</div>

old/template/article/relation_add.html

@@ -0,0 +1,70 @@
+{% assign _check_type = global.url | split: 'related_item_type=' %}
+
+<div class="global-breadcrumb-container">
+    <a href="/admin/article"> Bài viết </a>
+    <a href="/admin/article/form?id=1"> Form cập nhật Bài viết </a>
+    <a href=""> Thêm liên quan </a>
+</div>
+
+<div class="max-w-[1141px] m-auto">
+    <div class="flex flex-wrap items-start m-[16px_0]">
+        <div class="w-[100%] p-[11px_16px] bg-white m-[0_0_16px] rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[18px]">
+            <p class="font-bold text-[20px] mb-[6px] leading-[26px]"> Thêm liên quan </p>
+
+            <p class="w-[100%] text-[#6B7280] order-[1]">
+                Thêm liên quan: HuraSoft - Test tin tức
+            </p>
+        </div>            
+
+        <div class="w-[270px] m-[0_16px_0_0] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] font-[500] leading-[24px] overflow-hidden">
+            <a href="/admin/article/relation-add?id=1&related_item_type=product" {% if _check_type[1] == 'product' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+                Sản phẩm (2)
+            </a>
+
+            <a href="/admin/article/relation-add?id=1&related_item_type=product-category" {% if _check_type[1] == 'product-category' %} style="color: #Fff;background: #0041E8;" {% endif %} class="block p-[6px_16px] text-[#919699] hover:text-[#fff] hover:bg-[#0041E8] transition">
+                Danh mục sản phẩm (0)
+            </a>
+        </div>
+        
+        {% if _check_type[1] == 'product' %}
+
+            {% include 'article/relation_product_add' %}
+
+        {% elsif _check_type[1] == 'product-category' %}
+
+            {% include 'article/relation_product_category_add' %}
+
+        {% endif %}
+
+    </div>
+</div>
+
+
+<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+
+<script>
+    tinymce.init({
+        selector: 'textarea#js-desc',
+        height: 350,
+        menubar: true,
+        plugins: [
+            'advlist autolink lists link image charmap print preview anchor',
+            'searchreplace visualblocks code fullscreen',
+            'insertdatetime media table paste code help wordcount'
+        ],
+        toolbar: 'undo redo | formatselect | ' +
+            'bold italic backcolor | alignleft aligncenter ' +
+            'alignright alignjustify | bullist numlist outdent indent | ' +
+            'removeformat | help',
+        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+    });
+</script>
+
+<script>
+    $(function(){
+        $("input[name='info[article_time_set]']").click(function(){
+            if($(this).val() == 1) $("#js-publish_time").show();
+            else $("#js-publish_time").hide();
+        }) ;
+    });
+</script>

old/template/article/relation_product.html

@@ -0,0 +1,68 @@
+<div class="flex flex-wrap items-center justify-between">
+    <p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
+
+    <a href="/admin/article/relation-add?id=1&related_item_type=product" class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
+        <span class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
+        <span> Thêm liên quan mới </span>
+    </a>
+</div>
+
+<div class="order-page-table">
+    <table>
+        <thead>
+            <tr>
+                <td width="40"> STT </td>
+                <td width="70"> Ảnh </td>
+                <td width="270"> Tên </td>
+                <td> Thông tin bán hàng </td>
+                <td width="70"> Cài đặt </td>
+                <td > Lựa chọn </td>
+            </tr>
+        </thead>
+
+        <tbody>
+            <tr align="center">
+                <td> 1 </td>
+
+                <td> <img src="https://via.placeholder.com/500x500" class="block"> </td>
+
+                <td align="left">
+                    <a href=""> CPU Intel Pentium Gold G6405 (Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB  </a>
+                </td>
+
+                <td align="left">
+                    <p> - Mã kho : <b>  CPUI0132 </b> </p>
+                    <p> - Lượt xem: <b>  21577 </b> </p>
+                    <p> - Giá bán :  <b class="text-[red]"> 1.999.000 vnđ </b> </p>
+                    <p> - Kho hàng :  <b> 3 </b> </p>
+                    <p> - Bảo hành :  <b> 36 Tháng </b> </p>
+                </td>
+
+                <td>
+                    <p class="mb-[5px]"> STT </p>
+                    <input type="text" value="0" class="w-[100%] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
+                </td>
+
+                <td>
+                    <div class="flex items-center flex-wrap justify-center">
+                        <a href="" class="inline-block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mr-[5px] hover:bg-[#0041E8] hover:text-[#fff]">
+                            Bỏ lựa chọn
+                        </a>
+
+                        <a href="" title="Xem tại web" class="fas fa-globe bg-[#F5F7FF] leading-[30px] rounded-[5px] text-[#0041E8_!important] text-center w-[30px] border border-[#0041E8]"></a>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+
+    </table>
+</div>
+
+<div class="paging">
+    <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
+    <a href="" class="current">1</a>
+    <a href="">2</a>
+    <a href="">3</a>
+    <a href="">4</a>
+    <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+</div>

old/template/article/relation_product_add.html

@@ -0,0 +1,78 @@
+<div class="p-[16px] w-[852px] bg-white rounded-[15px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] leading-[20px] block">
+    <p class="font-bold text-[20px] leading-[20px] mb-[15px]"> Chọn sản phẩm liên quan - Tổng số: 28872 </p>
+
+    <form method="get" enctype="multipart/form-data" action="/admin/" class="border border-[#F6F6F6] m-[12px_0_16px] p-[15px] bg-white rounded-[10px] shadow-[0px_1px_1px_0px_rgba(0,0,0,0.10)] flex items-center">
+        <input type="text" name="q" id="keyword" value="" placeholder="Tìm sản phẩm liên quan" class="w-[245px] h-[36px] border border-[#D8D8D8] mr-[10px] p-[0_10px] bg-white rounded-[4px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)] ">
+
+        <p class="mr-[10px]"> Chọn danh mục </p>
+
+        <select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
+            <option value=""> Tất cả sản phẩm </option>
+            <option value=""> option </option>
+        </select>
+
+        <select class="w-[160px] h-[36px] p-[0_5px] border border-[#D8D8D8] rounded-[4px] mr-[10px] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.12)]">
+            <option value=""> Thương hiệu </option>
+            <option value=""> option </option>
+        </select>
+
+        <input type="submit" value="Tìm kiếm" class="h-[36px] bg-[#0041E8] text-[#fff] font-[500] p-[0_8px] cursor-pointer rounded-[4px]">
+    </form>
+
+    <a href="" class="inline-block leading-[35px] mr-[16px] border border-[#79B0E2] rounded-[4px] bg-white p-[0_15px] font-[500] text-[#79B0E2] hover:bg-[#79B0E2] hover:text-[#fff]"> 
+        Chọn toàn bộ danh sách
+    </a>
+
+    <div class="order-page-table m-[20px_0]">
+        <table>
+            <thead>
+                <tr>
+                    <td width="40"> STT </td>
+                    <td width="80"> Ảnh </td>
+                    <td> Tên </td>
+                    <td width="220"> Thông tin bán hàng </td>
+                    <td> Lựa chọn </td>
+                </tr>
+            </thead>
+    
+            <tbody>
+                <tr>
+                    <td align="center"> 1 </td> 
+    
+                    <td>
+                        <img src="https://via.placeholder.com/880x350" class="block m-auto">
+                    </td>
+    
+                    <td>
+                        <a href=""> CPU Intel Pentium Gold G6405 Intel LGA1200 - 2 Core - 4 Thread - Base 4.1Ghz - Cache 4MB   </a>
+                        <p> Cập nhật: Hôm nay, 11:11 am </p>
+                    </td>
+    
+                    <td>
+                        - Mã kho : <b> CPUI0132 </b> <br>
+                        - Lượt xem: <b> 21577 </b> <br>
+                        - Giá bán : <b> 1.999.000 vnđ </b> <br>
+                        - Kho hàng : <b> 3 </b> <br>
+                        - Bảo hành : <b> 36 Tháng  </b>
+                    </td>
+    
+                    <td>
+                        <a href="" class="block leading-[29px] text-center font-[500] whitespace-nowrap border border-[#0041E8] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
+                            Chọn liên quan
+                        </a>
+                    </td>
+    
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="paging">
+        <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
+        <a href="" class="current">1</a>
+        <a href="">2</a>
+        <a href="">3</a>
+        <a href="">4</a>
+        <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+    </div>
+</div>

old/template/article/relation_product_category.html

@@ -0,0 +1,53 @@
+<div class="flex flex-wrap items-center justify-between">
+    <p class="font-bold leading-[20px] text-[20px] mr-3 mb-[13px]"> Danh sách liên quan: HuraSoft - Test tin tức </p>
+
+    <a href="/admin/article/relation-add?id=1&related_item_type=product-category"
+        class="flex items-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_10px] mb-[13px] group hover:bg-[#0041E8] hover:text-[#fff]">
+        <span
+            class="border-[1px] border-[#6B7280] h-[13px] w-[13px] leading-[10.3px] text-center rounded-[50%] mr-1 group-hover:border-[#fff]">+</span>
+        <span> Thêm liên quan mới </span>
+    </a>
+</div>
+
+<div class="table">
+    <table>
+        <thead class="bg-[#f6f6f6] text-[#f6f6f6] font-700 text-[14px]">
+            <tr>
+                <td width="40"> STT </td>
+                <td> Tên </td>
+                <td width="120"> Lựa chọn </td>
+            </tr>
+        </thead>
+
+        <tbody>
+            <tr align="center">
+                <td> 1 </td>
+
+                <td align="left">
+                    <p class="mb-[7px]"> Laptop - Tablet - Mobile </p>
+
+                    <p class="mr-[10px] inline-block"> STT </p>
+                    <input type="text" value="0"
+                        class="w-[70px] text-center h-[34px] p-[0_10px] rounded-[4px] border border-[#D8D8D8] shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)]">
+                </td>
+
+                <td>
+                    <a href=""
+                        class="block text-center border border-[#0041E8] font-[500] rounded-[4px] bg-[#F5F7FF] text-[#0041E8] leading-[31px] p-[0_5px] hover:bg-[#0041E8] hover:text-[#fff]">
+                        Bỏ lựa chọn
+                    </a>
+                </td>
+            </tr>
+        </tbody>
+
+    </table>
+</div>
+
+<div class="paging">
+    <a href="" class="paging-prev"><i class="fas fa-chevron-left"></i></a>
+    <a href="" class="current">1</a>
+    <a href="">2</a>
+    <a href="">3</a>
+    <a href="">4</a>
+    <a href="" class="paging-next"><i class="fas fa-chevron-right"></i></a>
+</div>