fix ui

management/src/App.tsx

@@ -345,11 +345,10 @@ function App() {
             Đăng xuất
           </button>
         </div>
-      </aside>
 
         <button
           type="button"
-        className={`sidebar-edge-toggle${sidebarCollapsed ? ' sidebar-edge-toggle--collapsed' : ''}`}
+          className="sidebar-edge-toggle"
           onClick={toggleSidebarCollapse}
           title={sidebarCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'}
         >
@@ -360,6 +359,7 @@ function App() {
             }
           </svg>
         </button>
+      </aside>
 
       <main className={`main-content${sidebarCollapsed ? ' main-content--full' : ''}`}>
         <div className="page-viewport">

management/src/index.css

@@ -84,7 +84,7 @@ body {
   position: fixed;
   height: 100vh;
   max-height: 100vh;
-  overflow: hidden;
+  overflow: visible;
   z-index: 10;
   box-shadow: var(--shadow-sm);
   transition: transform 0.28s cubic-bezier(.4,0,.2,1), width 0.28s cubic-bezier(.4,0,.2,1);
@@ -97,8 +97,8 @@ body {
 
 /* ── Sidebar Edge Toggle (triangle tab at mid-right edge) ── */
 .sidebar-edge-toggle {
-  position: fixed;
-  left: 272px;
+  position: absolute;
+  right: -16px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 11;
@@ -114,8 +114,9 @@ body {
   cursor: pointer;
   color: var(--text-muted);
   padding: 0;
-  transition: left 0.28s cubic-bezier(.4,0,.2,1), background 0.15s, color 0.15s;
+  transition: background 0.15s, color 0.15s;
   box-shadow: 2px 0 6px rgba(0,0,0,0.06);
+  pointer-events: auto;
 }
 
 .sidebar-edge-toggle:hover {
@@ -123,10 +124,6 @@ body {
   color: var(--accent);
 }
 
-.sidebar-edge-toggle--collapsed {
-  left: 0;
-}
-
 .sidebar > nav {
   flex: 1;
   min-height: 0;
@@ -4706,7 +4703,7 @@ input:checked + .slider:before {
   }
 
   /* Show edge toggle when sidebar is open on mobile */
-  .sidebar--open ~ .sidebar-edge-toggle {
+  .sidebar.sidebar--open .sidebar-edge-toggle {
     display: flex;
   }