menu 21/02

assets/script/pc_style.css

@@ -138,12 +138,16 @@ a {
   width: 245px;
   padding: 20px 0;
   line-height: 20px;
+  height: 100vh;
+  left: 0;
+  top: 0;
 }
 .admin-menu-container.active {
   overflow-y: auto;
   overflow-x: hidden;
 }
 .admin-menu-container.show {
+  position: fixed;
   display: block;
   z-index: 999;
 }
@@ -342,7 +346,8 @@ a {
 }
 
 .admin-content-container {
-  width: calc(100% - 50px);
+  width: calc(100% - 245px);
+  overflow-y: auto;
 }
 .admin-content-container .note-list {
   min-width: 144px;
@@ -671,7 +676,7 @@ a {
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.2);
-  z-index: 9;
+  z-index: 999;
   display: none;
 }
 #overlay.active {
@@ -800,34 +805,21 @@ a {
   .admin-menu-container {
     display: block;
   }
-  .admin-content-container {
-    margin-left: 245px;
-    width: calc(100% - 50px);
-  }
 }
 @media (min-width: 1600px) {
   .admin-menu-container {
     display: block;
   }
-  .admin-content-container {
-    margin-left: 245px;
-  }
 }
 @media (min-width: 1366px) {
   .admin-menu-container {
     display: block;
   }
-  .admin-content-container {
-    margin-left: 245px;
-  }
 }
 @media screen and (max-width: 1365px) and (min-width: 1024px) {
   .admin-menu-container {
     display: block;
   }
-  .admin-content-container {
-    margin-left: 245px;
-  }
 }
 @media (max-width: 1023px) {
   .admin-menu-container {

assets/script/pc_style.scss

@@ -121,11 +121,15 @@ a {
     width: 245px;
     padding: 20px 0;
     line-height: 20px;
+    height: 100vh;
+    left: 0;
+    top: 0;
     &.active {
         overflow-y: auto;
         overflow-x: hidden;
     }
     &.show {
+        position: fixed;
         display: block;
         z-index: 999;
     }
@@ -334,7 +338,8 @@ a {
 }
 
 .admin-content-container {
-    width: calc(100% - 50px);
+    width: calc(100% - 245px);
+    overflow-y: auto;
     .note-list {
         min-width: 144px;
         a {
@@ -675,7 +680,7 @@ a {
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.2);
-    z-index: 9;
+    z-index: 999;
     display: none;
     &.active {
         display: block;
@@ -805,37 +810,24 @@ a {
     .admin-menu-container {
         display: block;
     }
-    .admin-content-container {
-        margin-left: 245px;
-        width: calc(100% - 50px);
-    }
 }
 
 @media (min-width: 1600px) {
     .admin-menu-container {
         display: block;
     }
-    .admin-content-container {
-        margin-left: 245px;
-    }
 }
 
 @media (min-width: 1366px) {
     .admin-menu-container {
         display: block;
     }
-    .admin-content-container {
-        margin-left: 245px;
-    }
 }
 
 @media screen and (max-width: 1365px) and (min-width: 1024px) {
     .admin-menu-container {
         display: block;
     }
-    .admin-content-container {
-        margin-left: 245px;
-    }
 }
 
 @media (max-width: 1023px) {

template/theme.html

@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
         rel="stylesheet">
     <link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
-    <link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2024.20" />
+    <link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2025.02" />
     <script src="{{ 'tailwindcss.js' | asset_url }}"></script>
 
 
@@ -28,7 +28,7 @@
     <div class="admin-global-container">
 
         <!-- Menu full  -->
-        <div class="admin-menu-container box-menu fixed top-0 left-0 h-[100vh] z-[999]" id="js-menu-big">
+        <div class="admin-menu-container box-menu" id="js-menu-big">
             <a href="" class="menu-logo">
                 <img src="{{ 'logo.png' | asset_url }}" />
             </a>
@@ -96,19 +96,20 @@
                 <a href=""
                     class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
                     <i class="icons w-[20px] h-[20px] mr-[13px] icon-account"></i>
-                    <span class="title">Quản lý tài khoản </span>
+                    <span class="title text-[14px]">Quản lý tài khoản </span>
                 </a>
                 <a href=""
                     class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
                     <i class="icons w-[20px] h-[20px] mr-[13px] icon-settings"></i>
-                    <span class="title"> Cài đặt </span>
+                    <span class="title text-[14px]"> Cài đặt </span>
                 </a>
 
             </div>
         </div>
-        <div class="admin-content-container" id="js-admin-content-container">
+        <div class="admin-content-container h-screen" id="js-admin-content-container">
             <!-- Header -->
-            <div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
+            <div
+                class="admin-header-container flex items-center justify-between bg-white px-4 py-3 sticky top-0 z-[99] border-b-[1px] border-[#eef0f2]">
                 <div class="flex items-center">
                     <a href="javascript:void(0)" title="Mở menu"
                         class="icon-close lg:hidden md:block mr-[10px] 2xl:hidden sm:block" id="js-show-menu">