teamp tou uu giao dien

management/src/index.css

@@ -87,6 +87,21 @@ body {
   overflow: hidden;
   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);
+}
+
+.sidebar--collapsed {
+  transform: translateX(-100%);
+  pointer-events: none;
+}
+
+.sidebar-collapse-toggle-pc {
+  opacity: 0.5;
+  transition: opacity 0.15s;
+}
+.sidebar-collapse-toggle-pc:hover {
+  opacity: 1;
+  color: var(--accent) !important;
 }
 
 .sidebar > nav {
@@ -317,6 +332,17 @@ body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: margin-left 0.28s cubic-bezier(.4,0,.2,1);
+}
+
+.main-content--full {
+  margin-left: 0;
+}
+
+.sidebar-expand-btn-pc:hover {
+  background: var(--accent-light) !important;
+  border-color: var(--accent) !important;
+  color: var(--accent) !important;
 }
 
 .page-viewport {
@@ -4647,7 +4673,24 @@ input:checked + .slider:before {
     transform: translateX(0);
   }
 
-  .main-content {
+  /* On mobile, collapse is handled by sidebar--open toggle, not sidebar--collapsed */
+  .sidebar.sidebar--collapsed {
+    transform: translateX(-110%);
+  }
+  .sidebar.sidebar--collapsed.sidebar--open {
+    transform: translateX(0);
+  }
+
+  .sidebar-collapse-toggle-pc {
+    display: none !important;
+  }
+
+  .sidebar-expand-btn-pc {
+    display: none !important;
+  }
+
+  .main-content,
+  .main-content.main-content--full {
     margin-left: 0;
     padding: 3.75rem 0.85rem 1rem;
   }