/* ---------- App shell ----------
   .app-layout chiếm đúng 100vh và overflow:hidden — bản thân trang
   KHÔNG cuộn (giống cách diem-van-hoa đang làm). Sidebar cuộn riêng
   nếu menu dài, .page-body (bên trong từng trang, dưới .topbar) cuộn
   riêng nội dung từng trang. Nhờ vậy sidebar/topbar/hàng tài khoản đứng yên tự nhiên,
   không cần JS đo/cộng dồn offset banner như bản trước (nguồn gốc
   nhiều lỗi lem/hở đã vá liên tục). Banner STAGING (position:fixed)
   có thể đè nhẹ lên góc trên sidebar/topbar vài px — đánh đổi chấp
   nhận được, chỉ xảy ra trên domain -dev, không ảnh hưởng production. */
#app { display: none; }
.app-layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: var(--on-brand);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  transition: width 0.15s ease;
  height: 100%;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 14px;
}
.brand-logo {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.brand-text {
  flex: 1;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--on-brand);
}
.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.16); color: var(--on-brand); }
.sidebar-collapse-btn svg { width: 15px; height: 15px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin: 2px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: var(--on-brand); }
.nav-item.active {
  background: var(--card);
  color: var(--ink);
}
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active .nav-chevron { color: var(--ink); opacity: 0.35; }
.nav-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: inherit;
}
.nav-icon svg { width: 100%; height: 100%; }
.nav-label { flex: 1; }
.nav-chevron { flex-shrink: 0; font-size: 16px; opacity: 0.4; }
.nav-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: var(--on-brand); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sidebar.collapsed { width: 76px; }
.sidebar.collapsed .brand-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-chevron, .sidebar.collapsed .nav-badge { display: none; }
.sidebar.collapsed .brand { flex-direction: column; gap: 10px; padding: 0 0 16px; }
.sidebar.collapsed .nav-item { justify-content: center; margin: 2px 10px; }
.nav-spacer { flex: 1; }
.main {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.global-header-row {
  flex-shrink: 0;
  background: var(--bg);
  padding: 10px 28px 0;
}
/* Khung trang giống diem-van-hoa: tiêu đề trang (.topbar) nằm NGOÀI vùng
   cuộn (không dùng sticky) — chỉ .page-body cuộn. Tránh hẳn lỗi nội dung
   lộ ra phía trên topbar khi cuộn (sticky + margin âm từng gây lỗi này
   trên production ở trang Hoa hồng NV). */
.content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.content > [id$="Page"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg);
  padding: 14px 28px 12px;
}
.page-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 28px 24px;
  /* Lớp compositing riêng cho vùng cuộn — tránh lỗi vẽ sót ("ghosting")
     của Chrome với position:sticky bên trong (filter, dòng tiêu đề bảng). */
  transform: translateZ(0);
}
.topbar h2 { margin: 0; color: var(--ink); font-size: 20px; }
.user-chip { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
/* Tiêu đề phụ NẰM TRONG 1 .card (khác với .topbar cấp trang, không
   sticky/không bleed ra ngoài card) — tách riêng để tránh dính CSS
   sticky/margin âm của .topbar cấp trang. */
.card-subheader { display: flex; align-items: center; justify-content: space-between; }

.card {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 18px;
}