:root {
  --primary-500: #2563eb; --primary-600: #1d4ed8; --primary-700: #1e40af;
  --secondary-500: #10b981;
  --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb; 
  --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280; 
  --neutral-700: #374151; --red-500: #ef4444; --red-600: #dc2626;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--neutral-100); color: var(--neutral-700); overflow: hidden; }
.hidden { display: none !important; }

/* --- Bố cục App --- */
#app-layout { display: flex; height: 100vh; width: 100vw; }

/* --- Sidebar --- */
#sidebar {
  width: 260px; background: #fff; border-right: 1px solid var(--neutral-200);
  display: flex; flex-direction: column; transition: transform 0.3s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--neutral-100); }
.sidebar-brand h2 { font-size: 20px; font-weight: 700; color: var(--neutral-700); }
#sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 8px;
  color: var(--neutral-500); text-decoration: none; border-radius: 8px; font-weight: 500;
  transition: all 0.2s; cursor: pointer;
}
.nav-item:hover { background: var(--neutral-50); color: var(--primary-600); }
.nav-item.active { background: #eff6ff; color: var(--primary-600); }

/* --- Main Content --- */
#main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#top-header {
  height: 64px; background: #fff; border-bottom: 1px solid var(--neutral-200);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
#header-title { font-size: 18px; font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.user-info { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }

/* --- Module Container --- */
#module-container { flex: 1; overflow-y: auto; padding: 24px; position: relative; }

/* --- Nút bấm chung --- */
button.ghost-icon { background: none; border: none; cursor: pointer; color: var(--neutral-500); display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; }
button.ghost-icon:hover { background: var(--neutral-100); }

/* --- Responsive Mobile --- */
@media (max-width: 768px) {
  #sidebar { position: fixed; z-index: 100; height: 100%; transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); box-shadow: var(--shadow-md); }
}