/* ============================================
   BOT NOI BO — Design System
   Blue Light Theme / Nunito / SaaS Pro
   ============================================ */

/* Font duoc nap qua <link preconnect> trong index.html de khong chan render (nhanh hon @import). */

:root {
  /* Primary */
  --primary: #2563EB;
  --primary-light: #3B82F6;
  --primary-dark: #1D4ED8;
  --primary-50: #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --accent: #0EA5E9;

  /* Backgrounds */
  --bg-base: #F0F7FF;
  --bg-surface: #FFFFFF;
  --bg-sidebar: #1E3A5F;
  --bg-sidebar-hover: rgba(255,255,255,0.08);
  --bg-sidebar-active: #2563EB;
  --bg-input: #FFFFFF;

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-on-primary: #FFFFFF;
  --sidebar-text: #CBD5E1;
  --sidebar-text-active: #FFFFFF;

  /* Border */
  --border: #BFDBFE;
  --border-light: #DBEAFE;
  --border-input-focus: #2563EB;

  /* Status */
  --success: #10B981;
  --success-bg: #D1FAE5;
  --success-text: #065F46;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --warning-text: #92400E;
  --danger: #EF4444;
  --danger-bg: #FEE2E2;
  --danger-text: #991B1B;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(37,99,235,0.08);
  --shadow-md: 0 4px 24px rgba(37,99,235,0.12);
  --shadow-lg: 0 8px 40px rgba(37,99,235,0.18);

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* Transition */
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ========== APP LAYOUT ========== */
.app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ========== SIDEBAR ========== */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
  transition: width 0.25s ease, transform var(--transition-slow);
  overflow: hidden;
}

.sidebar-header {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar-collapse-btn {
  background: none;
  border: none;
  color: rgba(203,213,225,0.5);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* Collapsed sidebar */
.sidebar.collapsed { width: 64px; min-width: 64px; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .user-info { display: none !important; }
.sidebar.collapsed .sidebar-header { padding: 16px 12px; justify-content: center; }
.sidebar.collapsed .sidebar-logo { justify-content: center; gap: 0; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; gap: 0; }
.sidebar.collapsed .nav-item svg { margin: 0; }
.sidebar.collapsed .nav-section { padding: 4px 6px; }
.sidebar.collapsed .sidebar-footer { padding: 12px; justify-content: center; }
.sidebar.collapsed .sidebar-user { justify-content: center; }
.sidebar.collapsed .user-avatar { margin: 0; }

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.logo-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #FFFFFF;
}

/* Sidebar Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.nav-section {
  padding: 4px 12px;
}

.nav-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(203,213,225,0.5);
  letter-spacing: 0.1em;
  padding: 12px 12px 8px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: #FFFFFF;
}

.nav-item.active {
  background: var(--bg-sidebar-active);
  color: var(--sidebar-text-active);
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}

.nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item:hover svg,
.nav-item.active svg {
  opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.user-info { display: flex; flex-direction: column; }
.user-name { font-size: 13px; font-weight: 600; color: #FFFFFF; }
.user-role { font-size: 11px; color: rgba(203,213,225,0.6); }

/* ========== MAIN WRAPPER ========== */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ========== HEADER / TOP BAR ========== */
.header {
  display: none !important;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-xs);
  transition: all var(--transition);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  -webkit-tap-highlight-color: rgba(37,99,235,0.2);
}

.menu-toggle:hover, .menu-toggle:active {
  background: var(--primary-50);
  color: var(--primary);
}

.header-left { flex: 1; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 700;
}

.breadcrumb-sep {
  color: var(--border);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  width: 280px;
  transition: all var(--transition);
}

.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  background: var(--bg-surface);
}

.search-box svg { color: var(--text-muted); flex-shrink: 0; }

.search-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  width: 100%;
}

.search-box input::placeholder { color: var(--text-muted); }

.search-kbd {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: box-shadow var(--transition);
}

.header-avatar:hover {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}

/* ========== CONTENT ========== */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* Page Transitions */
.content.fade-out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.content.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger animation for cards */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== WELCOME BANNER ========== */
.welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  background: linear-gradient(135deg, #2563EB 0%, #0EA5E9 100%);
  border-radius: var(--radius);
  margin-bottom: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.welcome::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.welcome::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: 20%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}

.welcome-text { position: relative; z-index: 1; }

.welcome-text h1 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.welcome-text p {
  font-size: 14px;
  opacity: 0.85;
  font-weight: 500;
}

.stats {
  display: flex;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  opacity: 0.75;
}

.stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 8px 0;
}

.stat-dot.active {
  background: #34D399;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

/* ========== SECTION HEADER ========== */
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-100);
  color: var(--primary);
}

/* ========== CARD GRID ========== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* Loading */
.loading-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ========== TOOL CARDS ========== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--transition);
  position: relative;
  box-shadow: var(--shadow-sm);
  animation: slideUp 0.4s ease-out both;
}

.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }
.card:nth-child(6) { animation-delay: 250ms; }
.card:nth-child(7) { animation-delay: 300ms; }
.card:nth-child(8) { animation-delay: 350ms; }

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

.card:active {
  transform: translateY(-2px) scale(0.995);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--card-shadow, rgba(37,99,235,0.2));
}

.card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success-text);
  background: var(--success-bg);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.card-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.card-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.card-body p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-50);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.card:hover .card-btn {
  background: var(--primary-100);
}

.card-btn svg {
  transition: transform 0.15s ease;
}

.card:hover .card-btn svg {
  transform: translateX(3px);
}

/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* ========== MODULE PAGE ========== */
.module-page {
  max-width: none;
  width: 100%;
  animation: fadeIn 0.3s ease-out;
}

.module-header {
  margin-bottom: 20px;
}

.breadcrumb-home {
  text-decoration: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition);
}
.breadcrumb-home:hover {
  color: var(--primary);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.btn-back:hover {
  background: var(--bg-surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Module Hero */
.module-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.module-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px var(--card-shadow, rgba(37,99,235,0.2));
}

.module-hero-info { flex: 1; }

.module-hero-info h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 2px;
}

.module-hero-info p {
  font-size: 13px;
  color: var(--text-secondary);
}

.module-hero-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-text);
}

.status-dot-lg {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Module Workspace */
.module-workspace {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 400px;
  box-shadow: var(--shadow-sm);
}

/* Module Placeholder */
.module-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 32px;
  text-align: center;
}

.placeholder-icon { color: var(--border); }

.module-placeholder h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
}

.module-placeholder p {
  font-size: 13px;
  color: var(--text-muted);
}

.module-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 32px;
  text-align: center;
}

.module-empty h2 { font-size: 18px; font-weight: 700; }
.module-empty p { color: var(--text-muted); font-size: 14px; }

/* ========== CHAT (AI Tool) ========== */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 480px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.chat-bubble {
  display: flex;
  gap: 10px;
  max-width: 75%;
  animation: bubbleIn 0.25s ease-out;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}

.chat-bubble.bot .chat-bubble-avatar {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.chat-bubble.user .chat-bubble-avatar {
  background: var(--primary-100);
  color: var(--primary);
}

.chat-bubble-content {
  background: var(--bg-base);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.chat-bubble.user .chat-bubble-content {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.chat-input {
  flex: 1;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  transition: all var(--transition);
}

.chat-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  background: var(--bg-surface);
}

.chat-input::placeholder { color: var(--text-muted); }

.chat-send {
  width: 44px;
  height: 44px;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.chat-send:hover { background: var(--primary-dark); transform: scale(1.03); }
.chat-send:active { transform: scale(0.97); }

/* ========== FORMS ========== */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group.full { grid-column: 1 / -1; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input,
.form-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  transition: all var(--transition);
  resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }

/* Platform chips */
.platform-select {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-base);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.platform-chip input { display: none; }

.platform-chip.active,
.platform-chip:has(input:checked) {
  background: var(--primary-50);
  border-color: var(--primary);
  color: var(--primary);
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition);
}

.upload-zone:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary);
}

/* Template grid */
.template-grid {
  display: flex;
  gap: 12px;
}

.template-card {
  flex: 1;
  cursor: pointer;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px;
  text-align: center;
  transition: all var(--transition);
}

.template-card.active { border-color: var(--primary); }
.template-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }

.template-preview {
  height: 80px;
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
}

.template-card span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { background: var(--primary-dark); transform: scale(1.01); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.btn-sm { padding: 8px 14px; font-size: 13px; }

.btn-ghost {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-ghost:hover { background: var(--primary-50); color: var(--primary); border-color: var(--primary-200); }
.btn-ghost.btn-xs { padding: 4px 8px; font-size: 12px; }

/* ========== DATA TABLE ========== */
.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.search-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  flex: 1;
  max-width: 320px;
  transition: all var(--transition);
}

.search-inline:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.search-inline svg { color: var(--text-muted); flex-shrink: 0; }

.search-inline input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  width: 100%;
}

.search-inline input::placeholder { color: var(--text-muted); }

.info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

.info-banner svg { flex-shrink: 0; }

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background: var(--primary-50);
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  border-bottom: 1px solid var(--border-light);
}

.data-table td {
  padding: 12px 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  font-weight: 500;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover { background: var(--primary-50); }

.data-table .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}

.status-badge.good { background: var(--success-bg); color: var(--success-text); }
.status-badge.warning { background: var(--warning-bg); color: var(--warning-text); }
.status-badge.danger { background: var(--danger-bg); color: var(--danger-text); }

.text-danger { color: var(--danger); font-weight: 600; }
.text-ok { color: var(--success); font-weight: 600; }
.text-muted { color: var(--text-muted); font-size: 12px; }

/* ========== OVERLAY (mobile) ========== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 90;
  backdrop-filter: blur(4px);
}

.overlay.active { display: block; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
  }

  .sidebar.open { transform: translateX(0); }
  .sidebar.collapsed { width: var(--sidebar-width); } /* don't collapse on mobile */
  .menu-toggle { display: flex; }
  .sidebar-collapse-btn { display: none !important; }
  .search-box { width: 220px; }
}

@media (max-width: 640px) {
  .content { padding: 16px; }

  .welcome {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    align-items: flex-start;
  }

  .stats { width: 100%; justify-content: space-between; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .search-box { width: 160px; }
  .search-kbd { display: none; }
  .header { padding: 0 16px; }

  /* Compact square cards on mobile */
  .card {
    padding: 14px;
    gap: 10px;
  }
  .card-top {
    flex-direction: column;
    gap: 8px;
  }
  .card-icon {
    width: 40px;
    height: 40px;
  }
  .card-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .card-status {
    font-size: 10px;
    padding: 2px 8px;
    align-self: flex-start;
  }
  .card-body h3 {
    font-size: 13px;
    line-height: 1.3;
  }
  .card-body p {
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-footer {
    padding-top: 10px;
  }
  .card-btn {
    font-size: 11px;
    padding: 6px 10px;
  }
  .card-btn svg {
    display: none;
  }

  .module-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .module-hero-status { align-self: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .template-grid { flex-direction: column; }
}

/* ============================================
   XIN NGHI MODULE — Calendar & Leave
   ============================================ */

.xn-workspace {
  padding: 0 !important;
  overflow: visible;
}

/* Top bar */
.xn-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
}

.xn-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Stats bar */
.xn-stats-bar {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-light);
}

.xn-stats-bar::-webkit-scrollbar { height: 4px; }
.xn-stats-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.xn-stat-empty {
  padding: 16px 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.xn-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 180px;
  flex-shrink: 0;
}

.xn-stat-card:hover {
  border-color: var(--primary-200);
  background: var(--primary-50);
}

.xn-stat-card.active {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.xn-stat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.xn-stat-info {
  flex: 1;
  min-width: 0;
}

.xn-stat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.xn-stat-bar {
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  margin-bottom: 4px;
}

.xn-bar-used {
  background: #F59E0B;
  border-radius: 3px 0 0 3px;
  transition: width 0.4s ease;
}

.xn-bar-pending {
  background: var(--primary-200);
  transition: width 0.4s ease;
}

.xn-stat-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Calendar header */
.xn-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-light);
}

.xn-cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xn-cal-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  min-width: 140px;
  text-align: center;
}

/* Calendar grid */
.xn-cal-grid {
  padding: 0 8px 8px;
}

.xn-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.xn-cal-dow {
  border-bottom: 1px solid var(--border-light);
}

.xn-cal-dow-cell {
  padding: 10px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.xn-cal-dow-cell.xn-sunday {
  color: var(--danger);
}

.xn-cal-cell {
  min-height: 90px;
  padding: 4px 6px;
  border: 1px solid var(--border-light);
  border-top: none;
  border-left: none;
  position: relative;
  transition: background 0.15s ease;
}

.xn-cal-row:last-child .xn-cal-cell {
  border-bottom: none;
}

.xn-cal-cell:first-child {
  border-left: none;
}

.xn-cal-cell:last-child {
  border-right: none;
}

.xn-cal-cell.xn-sunday,
.xn-cal-cell.xn-saturday {
  background: rgba(241, 245, 249, 0.5);
}

.xn-cal-cell.xn-other-month {
  opacity: 0.35;
}

.xn-cal-cell.xn-today {
  background: rgba(37, 99, 235, 0.04);
}

.xn-cal-cell.xn-today .xn-cal-num {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.xn-cal-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: inline-flex;
}

.xn-sunday .xn-cal-num {
  color: var(--danger);
}

.xn-cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Event cards */
.xn-event {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
}

.xn-event:hover {
  filter: brightness(0.95);
  transform: scale(1.02);
}

/* Trang thai don */
.xn-ev-pending {
  background: #DBEAFE;
  color: #1D4ED8;
  border-left: 2px solid #93C5FD;
}

.xn-ev-approved {
  background: #FFEDD5;
  color: #C2410C;
  border-left: 2px solid #FED7AA;
}

.xn-ev-rejected {
  background: #FEE2E2;
  color: #991B1B;
  border-left: 2px solid #FECACA;
}

.xn-ev-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.xn-ev-pending .xn-ev-dot { background: #3B82F6; }
.xn-ev-approved .xn-ev-dot { background: #EA580C; }
.xn-ev-rejected .xn-ev-dot { background: #DC2626; }

.xn-ev-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.xn-event-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  padding: 1px 4px;
}

.xn-event-more:hover { text-decoration: underline; }

/* Event animation khi moi them */
.xn-event.new {
  animation: xnPopIn 0.25s ease;
}

@keyframes xnPopIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Day popup */
.xn-day-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 9998;
  animation: fadeIn 0.15s ease;
}
.xn-day-popup {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 280px;
  animation: xnSlideDown 0.2s ease;
}

.xn-day-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.xn-day-popup-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.xn-day-popup-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.xn-day-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease;
}

.xn-day-popup-item:hover { filter: brightness(0.97); }

.xn-day-popup-item.xn-ev-pending { background: #EFF6FF; }
.xn-day-popup-item.xn-ev-approved { background: #FFF7ED; }
.xn-day-popup-item.xn-ev-rejected { background: #FEF2F2; }

.xn-day-popup-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.xn-day-popup-info { flex: 1; min-width: 0; }
.xn-day-popup-name { font-size: 12px; font-weight: 700; color: var(--text-primary); display: block; }
.xn-day-popup-reason { font-size: 11px; color: var(--text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xn-day-popup-status { font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Modal overlay + modal */
.xn-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  padding-top: 80px;
}

.xn-modal-overlay.active {
  display: flex;
}

.xn-modal {
  background: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  animation: xnSlideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes xnSlideDown {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.xn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-light);
}

.xn-modal-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.xn-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
}

.xn-modal-close:hover {
  background: var(--bg-base);
  color: var(--text-primary);
}

.xn-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.xn-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}

/* Leave type chips */
.xn-type-select {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xn-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-base);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.xn-type-chip input { display: none; }

.xn-type-chip.active {
  background: var(--primary-50);
  border-color: var(--primary);
  color: var(--primary);
}

.xn-type-chip:hover {
  border-color: var(--primary-200);
}

/* Header actions + HR info */
.xn-top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.xn-hr-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-top: 4px;
  background: #EDE9FE;
  color: #6D28D9;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}
.xn-hr-info:empty { display: none; }
.xn-hr-current {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.xn-hr-current.has-hr {
  background: #EDE9FE;
  border-color: #C4B5FD;
  display: flex;
  align-items: center;
  gap: 12px;
}
.xn-hr-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}
.xn-hr-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #8B5CF6;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.xn-hr-meta {
  flex: 1;
}
.xn-hr-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}
.xn-hr-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.xn-btn-danger {
  color: var(--danger) !important;
}

/* === HR modal v2 — searchable picker === */
.xn-hr-modal {
  max-width: 520px;
  width: 100%;
}
.xn-hr-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 12px;
  background: #FFFBEB;
  border-left: 3px solid #F59E0B;
  border-radius: 4px;
  margin-top: 14px;
}
.xn-hr-note strong { color: #B45309; }
.xn-hr-picker {
  margin-top: 18px;
}
.xn-hr-picker-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.xn-hr-search-wrap {
  position: relative;
}
.xn-hr-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.xn-hr-search {
  width: 100%;
  padding: 10px 36px 10px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 14px;
  background: var(--bg-base);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.xn-hr-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.xn-hr-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0;
  background: var(--border);
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xn-hr-search-clear:hover { background: var(--text-muted); color: #fff; }
.xn-hr-list {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-base);
}
.xn-hr-list::-webkit-scrollbar { width: 6px; }
.xn-hr-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.xn-hr-list-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.xn-hr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--bg-secondary);
  transition: background 0.12s ease;
}
.xn-hr-row:last-child { border-bottom: 0; }
.xn-hr-row:hover { background: var(--bg-secondary); }
.xn-hr-row.selected {
  background: #EDE9FE;
}
.xn-hr-row.selected .xn-hr-row-name { color: #6D28D9; }
.xn-hr-row.current {
  background: #FEF3C7;
  cursor: not-allowed;
  opacity: 0.7;
}
.xn-hr-row-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.xn-hr-row.selected .xn-hr-row-avatar {
  background: #8B5CF6;
  color: #fff;
}
.xn-hr-row-info { flex: 1; min-width: 0; }
.xn-hr-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xn-hr-row-id {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.xn-hr-row-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: #92400E;
  color: #fff;
  flex-shrink: 0;
}
.xn-hr-row.selected .xn-hr-row-check {
  color: #6D28D9;
  font-size: 18px;
  flex-shrink: 0;
}
.xn-hr-selected-info {
  margin-top: 8px;
  padding: 10px 12px;
  background: #EDE9FE;
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: #6D28D9;
  display: none;
}
.xn-hr-selected-info.show { display: block; }

/* Half-day toggle + session chips */
.xn-halfday-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #F1F5F9;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}
.xn-halfday-toggle input[type="checkbox"] {
  width: 16px; height: 16px; cursor: pointer;
}
.xn-halfday-toggle strong {
  color: var(--primary);
}
.xn-session-chips {
  display: flex;
  gap: 8px;
}
.xn-session-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  background: var(--bg-base);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.xn-session-chip input { display: none; }
.xn-session-chip:has(input:checked) {
  background: var(--primary-50);
  border-color: var(--primary);
  color: var(--primary);
}
.xn-event-half {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.5);
  margin-left: 2px;
}

/* Date row */
.xn-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.xn-date-row.xn-single-date {
  grid-template-columns: 1fr;
}

/* Calc info */
.xn-calc-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 14px;
  background: var(--primary-50);
  border-radius: var(--radius-xs);
  border: 1px solid var(--primary-200);
  min-height: 0;
}

.xn-calc-info:empty {
  display: none;
}

.xn-calc-error {
  color: var(--danger);
  font-weight: 600;
}

.xn-calc-warning {
  color: #F59E0B;
  font-weight: 700;
}

/* Detail modal */
.xn-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xn-detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.xn-detail-emp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xn-detail-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.xn-detail-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
}

.xn-badge-pending { background: #DBEAFE; color: #1D4ED8; }
.xn-badge-approved { background: #FFEDD5; color: #C2410C; }
.xn-badge-rejected { background: #FEE2E2; color: #991B1B; }

.xn-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.xn-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.xn-detail-label {
  font-weight: 700;
  color: var(--text-muted);
  min-width: 100px;
  flex-shrink: 0;
}

.xn-detail-row span:last-child {
  color: var(--text-primary);
  font-weight: 500;
}

/* Reject button */
.xn-btn-reject {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

.xn-btn-reject:hover {
  background: #FEE2E2 !important;
}

/* Delete button */
.xn-btn-delete {
  border-color: #9CA3AF !important;
  color: #6B7280 !important;
}

.xn-btn-delete:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: #FEE2E2 !important;
}

/* Toast container */
.xn-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xn-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: xnSlideInRight 0.3s ease;
  max-width: 400px;
}

.xn-toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.xn-toast-success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.xn-toast-error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.xn-toast-warning {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.xn-toast-out {
  animation: xnSlideOutRight 0.3s ease forwards;
}

@keyframes xnSlideInRight {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes xnSlideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100px); }
}

/* ====== XIN NGHI RESPONSIVE ====== */
@media (max-width: 768px) {
  .xn-cal-cell { min-height: 70px; }
  .xn-event { font-size: 9px; padding: 1px 4px; }
  .xn-cal-num { font-size: 11px; }
  .xn-stats-bar { padding: 12px 16px; }
  .xn-stat-card { min-width: 160px; }
  .xn-top-bar { padding: 16px; flex-wrap: wrap; gap: 8px; }
  .xn-cal-header { padding: 12px 16px; }
  .xn-date-row { grid-template-columns: 1fr; }
  .xn-modal { margin: 0 16px; max-width: calc(100vw - 32px); }
  .xn-modal-overlay { padding-top: 40px; }
}

@media (max-width: 480px) {
  .xn-cal-cell { min-height: 60px; padding: 2px; }
  .xn-ev-text { display: none; }
  .xn-event { padding: 2px 3px; justify-content: center; }
  .xn-ev-dot { width: 6px; height: 6px; }
  .xn-cal-dow-cell { font-size: 10px; padding: 8px 2px; }
}

/* ============================================
   NHAN VIEN MODULE
   ============================================ */

/* -- Layout -- */
.nv-workspace { position: relative; }
.nv-list-page, .nv-detail-page { padding: 0; }

/* -- Summary cards -- */
.nv-summary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.nv-summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.nv-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.nv-summary-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nv-summary-icon svg { width: 18px; height: 18px; }
.nv-summary-info { display: flex; flex-direction: column; min-width: 0; }
.nv-summary-num { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-summary-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }

/* -- Toolbar -- */
.nv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nv-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  flex: 1;
  min-width: 200px;
}
.nv-search-box input {
  border: none; outline: none; background: none;
  font-family: inherit; font-size: 0.9rem;
  color: var(--text-primary); width: 100%;
}
.nv-search-box svg { color: var(--text-muted); flex-shrink: 0; }
.nv-select {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-family: inherit; font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* -- Employee grid -- */
.nv-emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.nv-emp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  cursor: default;
}
.nv-emp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-200);
}
.nv-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.nv-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.78rem;
  flex-shrink: 0;
}
.nv-avatar-lg {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.3rem;
  flex-shrink: 0;
  position: relative;
}
.nv-avatar-sm {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.65rem;
  flex-shrink: 0;
}
.nv-card-info { flex: 1; min-width: 0; }
.nv-card-info h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-card-pos { font-size: 0.75rem; color: var(--text-secondary); display: block; }
.nv-card-dept { font-size: 0.72rem; color: var(--text-muted); }

.nv-card-alert {
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.nv-card-alert.warning { background: var(--warning-bg); color: var(--warning-text); }
.nv-card-alert.danger { background: var(--danger-bg); color: var(--danger-text); }

.nv-card-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.nv-card-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.nv-card-stat-icon { font-size: 0.85rem; }

.nv-card-btn {
  width: 100%;
  padding: 7px;
  background: var(--primary-50);
  color: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--transition);
}
.nv-card-btn:hover {
  background: var(--primary);
  color: #fff;
}
.nv-card-actions {
  display: flex;
  gap: 6px;
}
.nv-card-actions .nv-card-btn { flex: 1; }
.nv-card-cc-btn {
  padding: 7px 10px;
  background: #EFF6FF;
  color: #2563EB;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.nv-card-cc-btn:hover {
  background: #2563EB;
  color: #fff;
}
.nv-card-del-btn {
  width: 32px;
  padding: 7px 0;
  background: #FEF2F2;
  color: #EF4444;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nv-card-del-btn:hover {
  background: #EF4444;
  color: #fff;
}
.btn-danger-ghost {
  color: #EF4444 !important;
}
.btn-danger-ghost:hover {
  background: #FEF2F2 !important;
}

/* -- Section header -- */
.nv-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.nv-section-header h3 { font-size: 1.05rem; font-weight: 700; }
.nv-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 20px 0 12px;
  color: var(--text-primary);
}

/* -- Salary table -- */
.nv-salary-table { font-size: 0.85rem; }
.nv-table-emp {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nv-text-bold { font-weight: 700; }
.text-right { text-align: right; }
.nv-tfoot-row {
  background: var(--primary-50);
  font-weight: 700;
}

/* -- Detail page -- */
.nv-back-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 16px;
}
.nv-back-btn:hover { text-decoration: underline; }

.nv-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.nv-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nv-profile-info h2 { font-size: 1.4rem; font-weight: 800; }
.nv-profile-info span { font-size: 0.85rem; color: var(--text-secondary); }
.nv-profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* -- Tabs -- */
.nv-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 20px;
  overflow-x: auto;
}
.nv-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  white-space: nowrap;
}
.nv-tab:hover { color: var(--text-primary); }
.nv-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* -- Tab content animation -- */
.fade-slide-in {
  animation: nvFadeSlide 0.25s ease;
}
@keyframes nvFadeSlide {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* -- Profile tab -- */
.nv-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.nv-info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.nv-info-card-full { grid-column: 1 / -1; }
.nv-info-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.nv-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.85rem;
}
.nv-info-label { color: var(--text-secondary); }
.nv-info-total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
}

.nv-leave-bar {
  height: 8px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.nv-leave-progress {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.8s ease;
}

/* -- Attendance tab -- */
.nv-att-page { }
.nv-att-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.nv-cal-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nv-cal-title { font-weight: 700; font-size: 1rem; }
.nv-att-actions { display: flex; gap: 8px; }

.nv-att-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.nv-att-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  box-shadow: var(--shadow-sm);
}
.nv-att-stat-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
}
.nv-att-stat-num.good { color: var(--success); }
.nv-att-stat-num.danger { color: var(--danger); }
.nv-att-stat-num.warning { color: var(--warning); }
.nv-att-stat-num.info { color: var(--accent); }
.nv-att-stat span:last-child { font-size: 0.78rem; color: var(--text-muted); }

.nv-att-table tbody tr { cursor: pointer; transition: background var(--transition); }
.nv-att-table tbody tr:hover { background: var(--primary-50); }
.nv-weekend-row { background: #F8FAFC; }
.nv-weekend-row td { color: var(--text-muted); }

/* status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge.good { background: var(--success-bg); color: var(--success-text); }
.status-badge.warning { background: var(--warning-bg); color: var(--warning-text); }
.status-badge.danger { background: var(--danger-bg); color: var(--danger-text); }
.status-badge.info { background: #DBEAFE; color: #1E40AF; }
.status-badge.muted { background: #F1F5F9; color: #94A3B8; }

/* -- Salary tab -- */
.nv-salary-page {}
.nv-sal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.nv-sal-actions { display: flex; align-items: center; gap: 10px; }

.nv-sal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.nv-sal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.nv-sal-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.nv-sal-income h4 { color: var(--success); }
.nv-sal-deduct h4 { color: var(--danger); }

.nv-sal-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.nv-sal-row span:last-child { font-weight: 600; color: var(--text-primary); }
.nv-sal-total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
  font-weight: 700;
}
.nv-sal-total span { color: var(--text-primary) !important; font-weight: 700 !important; }

.nv-sal-net {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin-bottom: 20px;
}
.nv-sal-net span:first-child { font-size: 0.95rem; font-weight: 600; }
.nv-sal-net-amount { font-size: 1.8rem; font-weight: 800; }

.nv-sal-progress { margin-bottom: 20px; }
.nv-sal-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.nv-sal-progress-bar {
  height: 8px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
}
.nv-sal-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.8s ease;
  animation: nvFillBar 0.8s ease-out;
}
.nv-sal-progress-fill.warning { background: var(--warning); }
@keyframes nvFillBar { from { width: 0; } }

/* -- Advance tab -- */
.nv-adv-page {}
.nv-adv-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.nv-adv-limit {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.nv-adv-limit-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.nv-adv-form {}
.nv-adv-info {
  background: var(--primary-50);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}
.nv-adv-info .nv-info-row { font-size: 0.85rem; }

/* -- KPI tab -- */
.nv-kpi-page {}
.nv-kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.nv-kpi-score-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 24px 32px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.nv-kpi-score { display: flex; align-items: baseline; }
.nv-kpi-score-num { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); }
.nv-kpi-score-max { font-size: 1rem; color: var(--text-muted); margin-left: 4px; }
.nv-kpi-rank {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 1.1rem;
}
.nv-rank-sm { padding: 2px 10px; font-size: 0.75rem; }
.nv-rank-s { background: linear-gradient(135deg, #F59E0B, #EF4444); color: #fff; }
.nv-rank-a { background: #D1FAE5; color: #065F46; }
.nv-rank-b { background: #DBEAFE; color: #1E40AF; }
.nv-rank-c { background: #FEF3C7; color: #92400E; }
.nv-rank-d { background: #FEE2E2; color: #991B1B; }
.nv-kpi-bonus { font-size: 0.9rem; color: var(--text-secondary); }

.nv-kpi-criteria { margin-bottom: 20px; }
.nv-kpi-criterion {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.nv-kpi-criterion-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.nv-kpi-criterion-header span:last-child { font-weight: 600; }
.nv-kpi-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
}
.nv-kpi-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.nv-kpi-history { margin-bottom: 20px; }
.nv-kpi-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
}
.nv-kpi-history-item span:first-child { width: 80px; color: var(--text-secondary); }
.nv-kpi-mini-bar { flex: 1; height: 6px; background: var(--border-light); border-radius: 999px; overflow: hidden; }
.nv-kpi-history-score { font-weight: 700; width: 30px; text-align: right; }

/* KPI modal form */
.nv-kpi-form-info { font-size: 0.88rem; margin-bottom: 16px; color: var(--text-secondary); }
.nv-kpi-criterion-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.nv-kpi-criterion-name { flex: 1; font-size: 0.85rem; }
.nv-kpi-slider {
  width: 120px;
  accent-color: var(--primary);
}
.nv-kpi-score-display { width: 40px; font-weight: 700; font-size: 0.85rem; text-align: center; }

/* -- Docs tab -- */
.nv-docs-list { }
.nv-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: all var(--transition);
}
.nv-doc-row:hover { box-shadow: var(--shadow-sm); }
.nv-doc-icon { font-size: 1.2rem; }
.nv-doc-name { flex: 1; font-size: 0.88rem; font-weight: 600; }
.nv-doc-date { font-size: 0.8rem; color: var(--text-muted); }

/* -- Empty state -- */
.nv-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* -- Modals -- */
.nv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding-top: 60px;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}
.nv-modal-overlay.active { display: flex; }
.nv-modal {
  background: var(--bg-surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: nvModalIn 0.2s ease;
}
.nv-modal-lg { max-width: 640px; }
@keyframes nvModalIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.nv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-light);
}
.nv-modal-header h3 { font-size: 1.05rem; font-weight: 700; }
.nv-modal-close {
  background: none; border: none;
  font-size: 1.5rem; color: var(--text-muted);
  cursor: pointer; line-height: 1;
}
.nv-modal-close:hover { color: var(--text-primary); }
.nv-modal-body { padding: 24px; }
.nv-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}

/* -- Form grid in modals -- */
.nv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nv-form-grid .full { grid-column: 1 / -1; }

/* -- Attendance form -- */
.nv-att-form .form-group { margin-bottom: 14px; }

/* -- Toast -- */
.nv-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nv-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  font-weight: 600;
  animation: nvToastIn 0.3s ease;
  border-left: 4px solid var(--success);
}
.nv-toast-success { border-left-color: var(--success); }
.nv-toast-error { border-left-color: var(--danger); }
.nv-toast-warning { border-left-color: var(--warning); }
.nv-toast-icon { font-size: 1.1rem; }
.nv-toast-out { animation: nvToastOut 0.3s ease forwards; }
@keyframes nvToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nvToastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* -- Confirm Dialog -- */
.nv-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.nv-confirm-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.nv-confirm-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 24px;
  width: 380px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  transform: scale(0.9) translateY(10px);
  transition: transform .25s ease;
}
.nv-confirm-overlay.active .nv-confirm-box {
  transform: scale(1) translateY(0);
}
.nv-confirm-icon {
  font-size: 2.8rem;
  margin-bottom: 8px;
}
.nv-confirm-box h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--text-primary);
}
.nv-confirm-box p {
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.nv-confirm-actions {
  display: flex;
  gap: 12px;
}
.nv-confirm-actions button {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.nv-confirm-actions button:active { transform: scale(0.97); }
.nv-confirm-actions .btn-ghost {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.nv-confirm-actions .btn-ghost:hover {
  background: var(--border-color);
}
.nv-confirm-actions .btn-danger {
  background: #EF4444;
  color: #fff;
}
.nv-confirm-actions .btn-danger:hover {
  background: #DC2626;
}

/* ============================================
   CHAM CONG V2 — Calendar Heatmap + Stats
   ============================================ */

/* -- Alerts -- */
.cc-alerts { margin-bottom: 16px; }
.cc-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  animation: ccSlideDown 0.3s ease;
  border-left: 4px solid;
}
.cc-alert-warning { background: #FEF3C7; color: #92400E; border-left-color: #F59E0B; }
.cc-alert-danger { background: #FEE2E2; color: #991B1B; border-left-color: #EF4444; }
.cc-alert-info { background: #DBEAFE; color: #1E40AF; border-left-color: #2563EB; }
.cc-alert-icon { font-size: 1.2rem; }
@keyframes ccSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -- Month Nav -- */
.cc-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}
.cc-month-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* -- Stats Grid (4 cards) -- */
.cc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.cc-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cc-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cc-stat-icon { font-size: 1.6rem; margin-bottom: 6px; }
.cc-stat-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.cc-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 8px; }
.cc-stat-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cc-stat-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}
.cc-stat-sub { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.cc-stat-sub-good { color: var(--success); }
.cc-stat-sub-danger { color: var(--danger); }

/* Animated fill */
.cc-fill-animate {
  width: 0;
  animation: ccFillWidth 1s ease-out 0.3s both;
}
@keyframes ccFillWidth { to { width: var(--fill-width); } }

/* -- Progress Section -- */
.cc-progress-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.cc-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.cc-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cc-progress-label {
  width: 110px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}
.cc-progress-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
}
.cc-progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}
.cc-progress-bar-fill.cc-fill-green { background: var(--success); }
.cc-progress-bar-fill.cc-fill-blue { background: var(--accent); }
.cc-progress-bar-fill.cc-fill-orange { background: #F97316; }
.cc-progress-text {
  width: 180px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

/* -- Calendar Heatmap -- */
.cc-calendar-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.cc-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.cc-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cc-cal-header {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 0;
}
.cc-cal-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  animation: ccCalDayIn 0.3s ease both;
  min-height: 60px;
}
.cc-cal-cell:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.cc-cal-empty { cursor: default; }
.cc-cal-empty:hover { transform: none; box-shadow: none; }
.cc-cal-day {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}
.cc-cal-icon {
  font-size: 0.72rem;
  margin-top: 2px;
}
.cc-cal-label {
  font-size: 0.6rem;
  font-weight: 600;
  margin-top: 1px;
  opacity: 0.85;
}

/* Calendar Today */
.cc-cal-today {
  outline: 2.5px solid var(--primary);
  outline-offset: -2px;
}
.cc-cal-today .cc-cal-day { font-weight: 800; }

/* Calendar status backgrounds */
.cc-bg-present { background: #D1FAE5; color: #065F46; }
.cc-bg-late { background: #FEF3C7; color: #92400E; }
.cc-bg-absent { background: #FEE2E2; color: #991B1B; }
.cc-bg-leave { background: #DBEAFE; color: #1D4ED8; }
.cc-bg-holiday { background: #F3E8FF; color: #6B21A8; }
.cc-bg-weekend { background: #F1F5F9; color: #94A3B8; }
.cc-bg-overtime { background: #FFF7ED; color: #C2410C; }
.cc-bg-future { background: #FAFAFA; color: #CBD5E1; border: 1px dashed #E2E8F0; }

@keyframes ccCalDayIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Calendar Tooltip */
.cc-tooltip {
  position: absolute;
  background: #0F172A;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-100%);
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: opacity 0.15s ease;
}
.cc-tooltip-show { opacity: 1; }
.cc-tooltip-title { font-weight: 700; margin-bottom: 4px; }
.cc-tooltip-status { margin-bottom: 2px; }

/* Attendance status badges */
.cc-badge-holiday { background: #F3E8FF; color: #6B21A8; }
.cc-badge-overtime { background: #FFF7ED; color: #C2410C; }

/* -- Detail Accordion -- */
.cc-detail-section {
  margin-bottom: 24px;
}
.cc-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition);
}
.cc-accordion-btn:hover { background: var(--primary-50); }
.cc-accordion-arrow {
  transition: transform var(--transition);
}
.cc-accordion-open .cc-accordion-arrow { transform: rotate(180deg); }
.cc-accordion-body {
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  animation: ccSlideDown 0.2s ease;
}

/* -- Charts Grid -- */
.cc-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.cc-chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

/* Bar chart */
.cc-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding-bottom: 24px;
  position: relative;
}
.cc-bar-baseline {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(24px + 140px * 8 / 12);
  border-top: 2px dashed var(--accent);
  opacity: 0.4;
}
.cc-bar-baseline::after {
  content: '8h';
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 0.65rem;
  color: var(--accent);
  font-weight: 700;
}
.cc-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.cc-bar {
  width: 100%;
  max-width: 20px;
  border-radius: 3px 3px 0 0;
  transition: height 0.6s ease;
  position: relative;
  min-height: 2px;
}
.cc-bar-normal { background: var(--success); }
.cc-bar-short { background: var(--warning); }
.cc-bar-overtime { background: #F97316; }
.cc-bar-zero { background: var(--danger); min-height: 4px; }
.cc-bar-val {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cc-bar-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
}
.cc-chart-legend-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.cc-bar-normal-dot { background: var(--success); }
.cc-bar-short-dot { background: var(--warning); }
.cc-bar-overtime-dot { background: #F97316; }

/* Check-in trend chart */
.cc-checkin-chart {
  display: flex;
  gap: 4px;
  height: 120px;
}
.cc-checkin-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--text-muted);
  font-weight: 600;
  width: 36px;
  flex-shrink: 0;
  padding: 4px 0;
}
.cc-checkin-area {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  position: relative;
}
.cc-checkin-threshold {
  position: absolute;
  left: 0; right: 0;
  bottom: 33.33%;
  border-top: 2px dashed var(--danger);
  opacity: 0.3;
}
.cc-dot-col {
  flex: 1;
  position: relative;
  height: 100%;
}
.cc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.cc-dot-late { background: var(--danger); }
.cc-avg-checkin {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 10px;
}

/* -- Review Section -- */
.cc-review-section { margin-bottom: 24px; }
.cc-review-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.cc-review-list { margin-bottom: 14px; }
.cc-review-item {
  padding: 8px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-light);
}
.cc-review-item:last-child { border-bottom: none; }
.cc-review-good span:first-child { color: var(--success); }
.cc-review-warning span:first-child { color: var(--warning); }
.cc-review-danger span:first-child { color: var(--danger); }
.cc-review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 0.88rem;
  font-weight: 600;
}
.cc-stars { display: flex; gap: 2px; }
.cc-star {
  font-size: 1.3rem;
  color: #E2E8F0;
  animation: ccStarPop 0.3s ease both;
}
.cc-star-active { color: #F59E0B; }
@keyframes ccStarPop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
.cc-rating-text { font-size: 0.82rem; color: var(--text-muted); }
.cc-review-trend {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* -- Trend Section (6 months) -- */
.cc-trend-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.cc-trend-list { }
.cc-trend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.cc-trend-row:last-child { border-bottom: none; }
.cc-trend-month {
  width: 36px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.cc-trend-bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
}
.cc-trend-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
  transition: width 0.8s ease;
}
.cc-trend-pct {
  width: 45px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}
.cc-trend-stars {
  font-size: 0.72rem;
  color: #F59E0B;
  letter-spacing: 1px;
}

/* -- Admin Actions -- */
.cc-admin-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ============================================
   CHAM CONG V2 — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .cc-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cc-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cc-stat-card { padding: 12px; }
  .cc-stat-value { font-size: 1.2rem; }
  .cc-progress-row { flex-wrap: wrap; }
  .cc-progress-label { width: 100%; }
  .cc-progress-text { width: 100%; text-align: left; margin-top: 4px; }
  .cc-calendar-grid { gap: 2px; }
  .cc-cal-cell { min-height: 40px; }
  .cc-cal-label { display: none; }
  .cc-cal-icon { font-size: 0.9rem; }
  .cc-cal-day { font-size: 0.75rem; }
  .cc-month-nav { flex-wrap: wrap; gap: 8px; }
  .cc-bar-chart { height: 100px; }
  .cc-checkin-chart { height: 80px; }
  .cc-admin-actions { flex-direction: column; }
}
@media (max-width: 480px) {
  .cc-stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cc-stat-card { padding: 10px; }
  .cc-stat-value { font-size: 1rem; }
  .cc-stat-icon { font-size: 1.2rem; }
  .cc-stat-bar { display: none; }
  .cc-legend { gap: 6px; }
  .cc-legend-item { font-size: 0.65rem; }
}

/* ============================================
   NHAN VIEN MODULE — RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .nv-summary-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .nv-summary-row { grid-template-columns: repeat(2, 1fr); }
  .nv-sal-grid { grid-template-columns: 1fr; }
  .nv-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nv-summary-row { grid-template-columns: repeat(2, 1fr); }
  .nv-emp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .nv-profile-header { flex-direction: column; text-align: center; }
  .nv-profile-actions { justify-content: center; }
  .nv-tabs { gap: 0; }
  .nv-tab { padding: 8px 12px; font-size: 0.8rem; }
  .nv-sal-net { flex-direction: column; gap: 8px; text-align: center; }
  .nv-sal-net-amount { font-size: 1.4rem; }
  .nv-kpi-score-card { flex-direction: column; text-align: center; }
  .nv-modal { margin: 0 12px; max-width: calc(100vw - 24px); }
  .nv-form-grid { grid-template-columns: 1fr; }
  .nv-toolbar { flex-wrap: wrap; }
  .nv-search-box { width: 100%; }
  .nv-toolbar .nv-select { flex: 1; min-width: 0; font-size: 12px; }
  .nv-toolbar .btn-primary { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; }
}

/* ============================================
   SIDEBAR BADGE + LOGOUT
   ============================================ */
.nav-badge {
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: auto;
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.sidebar-logout-btn {
  background: none;
  border: none;
  color: var(--sidebar-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  margin-left: auto;
}
.sidebar-logout-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.sidebar-footer .sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================
   PENDING ACCOUNTS PANEL
   ============================================ */
.nv-pending-section {
  background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  border: 1px solid #FDE68A;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.nv-pending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.nv-pending-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #92400E;
}
.nv-pending-count {
  background: #EF4444;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.nv-pending-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nv-pending-card {
  background: #fff;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  padding: 16px;
}
.nv-pending-card-top {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
}
.nv-pending-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nv-pending-info h4 { font-size: 0.95rem; font-weight: 700; }
.nv-pending-info span { font-size: 0.82rem; color: var(--text-secondary); }
.nv-pending-rules {
  color: var(--success) !important;
  font-weight: 600;
}
.nv-pending-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #FDE68A;
}

/* ============================================
   PHAN QUYEN MODULE
   ============================================ */
.pq-container { display: flex; flex-direction: column; gap: 16px; }
.pq-legend {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 18px;
  background: var(--bg-surface); border-radius: var(--radius); border: 1px solid var(--border-color);
}
.pq-legend-item {
  display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600;
  color: var(--lc); white-space: nowrap;
}
.pq-toolbar {
  display: flex; gap: 12px; align-items: center;
}
.pq-search {
  flex: 1; padding: 10px 14px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem;
  background: var(--bg-surface); outline: none; transition: border .2s;
}
.pq-search:focus { border-color: var(--primary); }
.pq-hint {
  font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap;
}
.pq-table-wrap {
  overflow-x: auto; background: var(--bg-surface);
  border-radius: var(--radius); border: 1px solid var(--border-color);
}
.pq-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.pq-table thead { background: var(--bg-secondary); }
.pq-table th {
  padding: 12px 10px; text-align: center; font-weight: 700; font-size: 0.78rem;
  color: var(--text-secondary); white-space: nowrap; border-bottom: 2px solid var(--border-color);
}
.pq-th-emp { text-align: left; min-width: 180px; position: sticky; left: 0; background: var(--bg-secondary); z-index: 1; }
.pq-th-mod { min-width: 80px; }
.pq-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background .1s; }
.pq-table tbody tr:hover { background: var(--primary-50, #EFF6FF); }
.pq-td-emp {
  position: sticky; left: 0; background: var(--bg-surface); z-index: 1;
  padding: 10px 12px; cursor: pointer; transition: background .15s;
}
.pq-td-emp:hover .pq-emp-name { color: var(--primary); text-decoration: underline; }
.pq-table tbody tr:hover .pq-td-emp { background: var(--primary-50, #EFF6FF); }
.pq-emp-info { display: flex; align-items: center; gap: 10px; }
.pq-emp-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}
.pq-emp-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.pq-emp-code { font-size: 0.75rem; color: var(--text-secondary); }
.pq-role-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 10px; border-radius: 10px;
  border: 1.5px solid; white-space: nowrap; line-height: 1.5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.pq-cell {
  text-align: center; padding: 8px 6px; position: relative; cursor: pointer;
  transition: background .1s;
}
.pq-cell:hover { background: rgba(37,99,235,0.08); transform: scale(1.15); }
.pq-cell:active { transform: scale(0.95); }
.pq-cell-icon { font-size: 1.1rem; }
.pq-cell-lv { display: none; }

/* Dropdown chọn quyền */
.pq-dropdown {
  background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  z-index: 9999; min-width: 170px; padding: 6px; overflow: hidden;
  animation: pqDdIn .15s ease;
}
@keyframes pqDdIn { from { opacity: 0; } to { opacity: 1; } }
.pq-dd-header {
  padding: 8px 12px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color); margin-bottom: 4px;
}
.pq-dd-header small { font-weight: 400; color: var(--primary); }
.pq-dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; background: none;
  font-family: inherit; font-size: 0.85rem; cursor: pointer; border-radius: 8px;
  transition: background .1s;
}
.pq-dd-item:hover { background: #F1F5F9; }
.pq-dd-item.active { background: #EFF6FF; font-weight: 700; }

/* Panel slide-in */
.pq-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.pq-panel-overlay.open { opacity: 1; pointer-events: auto; }
.pq-panel {
  position: fixed; top: 0; right: -460px; width: 440px; max-width: 90vw;
  height: 100vh; background: #fff; z-index: 201;
  box-shadow: -4px 0 30px rgba(0,0,0,0.12);
  transition: right .3s ease; overflow-y: auto;
}
.pq-panel.open { right: 0; }
.pq-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.pq-panel-header h3 { margin: 0; font-size: 1rem; }
.pq-panel-close {
  width: 32px; height: 32px; border: none; background: var(--bg-secondary);
  border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background .15s;
}
.pq-panel-close:hover { background: var(--border-color); }
.pq-panel-body { padding: 20px 24px; }
.pq-panel-info {
  display: flex; gap: 12px; font-size: 0.85rem; color: var(--text-secondary);
}
.pq-panel-module {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #F1F5F9;
}
.pq-panel-mod-name { font-weight: 600; font-size: 0.88rem; min-width: 120px; }
.pq-panel-mod-btns { display: flex; gap: 4px; }
.pq-lvl-btn {
  width: 36px; height: 32px; border: 2px solid transparent;
  border-radius: 8px; background: #F8FAFC; cursor: pointer;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.pq-lvl-btn:hover { background: #EFF6FF; border-color: #BFDBFE; }
.pq-lvl-btn.active {
  background: color-mix(in srgb, var(--btn-c) 15%, white);
  border-color: var(--btn-c);
}

/* Lịch sử thay đổi */
.pq-log-item {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0;
  border-bottom: 1px solid #F8FAFC; font-size: 0.82rem;
}
.pq-log-date { color: var(--text-secondary); min-width: 120px; }
.pq-log-detail { font-weight: 600; flex: 1; }
.pq-log-by { color: var(--text-secondary); font-style: italic; }

/* Thông báo đổi quyền */
.perm-notif-list {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
  text-align: left;
}
.perm-notif-row {
  display: flex; justify-content: space-between; padding: 8px 12px;
  background: #F0FDF4; border-radius: 8px; font-size: 0.88rem;
}
.perm-notif-module { font-weight: 600; }
.perm-notif-change { color: var(--success); font-weight: 600; }

/* Toast container cho phan quyen (nếu ko có nvToast) */
.pq-container .nv-toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 2000;
}

@media (max-width: 768px) {
  .pq-panel { width: 100vw; right: -100vw; }
  .pq-th-mod { min-width: 60px; font-size: 0.7rem; }
  .pq-legend { gap: 8px; font-size: 0.75rem; }
}

/* ============================================
   MODULE NOI QUY - Styles
   ============================================ */

.nq-workspace {
  max-width: 960px;
  margin: 0 auto;
}

/* Tabs */
.nq-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid var(--border, #BFDBFE);
}
.nq-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary, #6B7280);
  cursor: pointer;
  transition: all 0.2s;
}
.nq-tab:hover { background: #F0F4FF; }
.nq-tab.active {
  background: var(--primary, #2563EB);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

/* Cards */
.nq-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border, #BFDBFE);
  padding: 20px;
  margin-bottom: 16px;
}
.nq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.nq-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
}
.nq-meta {
  font-size: 0.82rem;
  color: var(--text-secondary, #6B7280);
  margin-top: 4px;
}

/* Toggle wrap */
.nq-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.nq-toggle-label {
  color: var(--text-secondary, #6B7280);
}

/* Section list */
.nq-sections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nq-section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-base, #EFF6FF);
  border-radius: 10px;
  border: 1px solid var(--border, #BFDBFE);
  transition: box-shadow 0.2s;
}
.nq-section-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.nq-section-drag {
  cursor: grab;
  color: var(--text-secondary, #6B7280);
  font-size: 1.1rem;
}
.nq-section-info {
  flex: 1;
  min-width: 0;
}
.nq-section-title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.nq-section-preview {
  font-size: 0.82rem;
  color: var(--text-secondary, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nq-section-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Filter bar */
.nq-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.nq-filter-btn {
  padding: 8px 18px;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary, #6B7280);
  cursor: pointer;
  transition: all 0.2s;
}
.nq-filter-btn:hover { background: #F8FAFC; }
.nq-filter-btn.active.danger { background: #FEF2F2; border-color: #FECACA; color: var(--danger, #EF4444); }
.nq-filter-btn.active.good { background: #F0FDF4; border-color: #BBF7D0; color: var(--success, #10B981); }
.nq-filter-btn.active.info { background: #EFF6FF; border-color: #BFDBFE; color: var(--primary, #2563EB); }

/* Rules list */
.nq-rules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nq-rule-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border, #BFDBFE);
  transition: box-shadow 0.2s;
}
.nq-rule-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.nq-rule-card.nq-rule-disabled { opacity: 0.5; }
.nq-rule-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.nq-rule-info { flex: 1; min-width: 0; }
.nq-rule-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 2px; }
.nq-rule-desc { font-size: 0.82rem; color: var(--text-secondary, #6B7280); margin-bottom: 4px; }
.nq-rule-amount { font-weight: 600; font-size: 0.88rem; color: var(--primary, #2563EB); margin-bottom: 4px; }
.nq-rule-meta { font-size: 0.78rem; color: var(--text-secondary, #6B7280); }
.nq-rule-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* Warning bar */
.nq-warning-bar {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: #C2410C;
  font-weight: 500;
  margin-top: 16px;
  text-align: center;
}

/* Shift config */
.nq-shift-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nq-shift-section h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #1E293B);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E5E7EB;
}
.nq-info-line {
  font-size: 0.85rem;
  color: var(--text-secondary, #6B7280);
  margin-top: 6px;
}

/* Workday chips */
.nq-workdays {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nq-workday-chip {
  padding: 8px 14px;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary, #6B7280);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}
.nq-workday-chip input { display: none; }
.nq-workday-chip.active {
  background: var(--primary, #2563EB);
  color: #fff;
  border-color: var(--primary, #2563EB);
}

/* Simulator */
.nq-sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.nq-sim-item {
  padding: 14px 16px;
  background: var(--bg-base, #EFF6FF);
  border-radius: 10px;
  border: 1px solid var(--border, #BFDBFE);
}
.nq-sim-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary, #6B7280);
  margin-bottom: 4px;
}
.nq-sim-item strong {
  font-size: 0.88rem;
  color: var(--text-primary, #1E293B);
}

/* Rule form category chips */
.nq-rule-form-cats {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.nq-cat-chip {
  padding: 8px 20px;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.nq-cat-chip.active {
  background: var(--primary, #2563EB);
  color: #fff;
  border-color: var(--primary, #2563EB);
}

/* Impact tab */
.nq-impact-emp {
  padding: 14px 0;
  border-bottom: 1px solid #E5E7EB;
}
.nq-impact-emp:last-child { border-bottom: none; }
.nq-impact-emp-name {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.nq-impact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.85rem;
}
.nq-impact-rule {
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.78rem;
}
.nq-impact-rule.penalty { background: #FEF2F2; color: var(--danger, #EF4444); }
.nq-impact-rule.bonus { background: #F0FDF4; color: var(--success, #10B981); }
.nq-impact-rule.allowance { background: #EFF6FF; color: var(--primary, #2563EB); }
.nq-impact-detail { flex: 1; color: var(--text-secondary, #6B7280); }
.nq-impact-amount { font-weight: 600; }

/* Checkpoint Panel */
.nq-checkpoint-panel {
  background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
  border: 1px solid #BBF7D0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.nq-cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.nq-cp-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary, #1E293B);
}
.nq-cp-time {
  font-family: 'Courier New', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary, #2563EB);
}
.nq-cp-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nq-cp-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--border, #BFDBFE);
  transition: all 0.2s;
}
.nq-cp-step.done {
  background: #F0FDF4;
  border-color: #BBF7D0;
}
.nq-cp-step.next {
  background: #EFF6FF;
  border-color: var(--primary, #2563EB);
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}
.nq-cp-step.disabled { opacity: 0.45; }
.nq-cp-icon { font-size: 1.4rem; flex-shrink: 0; }
.nq-cp-info { flex: 1; min-width: 0; }
.nq-cp-label { font-weight: 600; font-size: 0.88rem; }
.nq-cp-status { font-size: 0.78rem; color: var(--text-secondary, #6B7280); margin-top: 2px; }
.nq-cp-check { color: var(--success, #10B981); font-size: 1.2rem; font-weight: 700; }
.nq-cp-pending { font-size: 0.78rem; color: var(--text-secondary, #6B7280); }
.nq-cp-countdown {
  text-align: center;
  padding: 10px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 8px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: #C2410C;
}
.nq-cp-summary {
  text-align: center;
  padding: 10px;
  background: #EFF6FF;
  border-radius: 8px;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary, #2563EB);
}
.nq-cp-error {
  text-align: center;
  padding: 12px;
  color: var(--danger, #EF4444);
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
  .nq-tabs { flex-wrap: wrap; }
  .nq-tab { flex: 1 1 45%; font-size: 0.82rem; padding: 8px 10px; }
  .nq-filter-bar { flex-wrap: wrap; }
  .nq-rule-card { flex-direction: column; }
  .nq-rule-actions { flex-direction: row; }
  .nq-section-item { flex-wrap: wrap; }
  .nq-sim-grid { grid-template-columns: 1fr; }
  .nq-cp-step { flex-wrap: wrap; }
}

/* ============================================
   VIDEO JOBS — Sora 2 Module
   ============================================ */

/* Toast */
.vj-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vj-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  animation: vjSlideIn 0.3s ease;
  max-width: 420px;
  font-family: 'Nunito', sans-serif;
}
.vj-toast-icon { font-size: 1rem; flex-shrink: 0; }
.vj-toast-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.vj-toast-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.vj-toast-warning { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.vj-toast-out { animation: vjSlideOut 0.3s ease forwards; }
@keyframes vjSlideIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes vjSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } }

.vj-workspace { padding: 0 !important; }

.vj-layout {
  display: flex;
  min-height: 600px;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface);
}

.vj-panel-left {
  width: 340px;
  min-width: 340px;
  border-right: 1px solid var(--border-light, #E2E8F0);
  display: flex;
  flex-direction: column;
  background: var(--bg-base, #F0F7FF);
}

.vj-panel-right {
  flex: 1;
  overflow-y: auto;
  max-height: 80vh;
}

.vj-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
}

.vj-panel-header .btn-primary {
  width: 100%;
}

.vj-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
  color: var(--text-muted);
}

.vj-search input {
  border: none;
  background: none;
  flex: 1;
  font-size: 0.875rem;
  outline: none;
  color: var(--text-primary);
  font-family: 'Nunito', sans-serif;
}

.vj-job-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.vj-empty-list {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
  font-size: 0.875rem;
}

.vj-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}
.vj-empty-state h3 { color: var(--text-primary); margin-bottom: 8px; }
.vj-empty-state p { font-size: 0.875rem; }

/* Job Cards */
.vj-job-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 6px;
  background: var(--bg-surface);
}
.vj-job-card:hover {
  border-color: var(--primary-200, #BFDBFE);
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.vj-job-card.active {
  border-color: var(--primary);
  background: var(--primary-50, #EFF6FF);
  box-shadow: 0 2px 12px rgba(37,99,235,0.12);
}
.vj-job-card-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.vj-job-card-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.vj-job-card-stats {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.vj-job-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badges */
.vj-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.vj-badge.pending { background: #F1F5F9; color: #64748B; }
.vj-badge.running { background: #DBEAFE; color: #2563EB; animation: vjPulse 2s infinite; }
.vj-badge.completed { background: #D1FAE5; color: #059669; }
.vj-badge.partial { background: #FEF3C7; color: #D97706; }
.vj-badge.failed { background: #FEE2E2; color: #DC2626; }

@keyframes vjPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.vj-btn-report {
  background: none;
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: 'Nunito', sans-serif;
  transition: all 0.15s;
}
.vj-btn-report:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50, #EFF6FF);
}

/* ---- FORM ---- */
.vj-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vj-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light, #E2E8F0);
}
.vj-form-header h3 { margin: 0; font-size: 1.1rem; }
.vj-btn-delete {
  background: none;
  border: 1px solid #FCA5A5;
  color: #DC2626;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  transition: all 0.15s;
}
.vj-btn-delete:hover { background: #FEE2E2; }

.vj-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.vj-field {
  margin-bottom: 18px;
}
.vj-field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.vj-field .required { color: #EF4444; }
.vj-field input,
.vj-field select,
.vj-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-light, #E2E8F0);
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: 'Nunito', sans-serif;
  background: var(--bg-input, #fff);
  color: var(--text-primary);
  transition: border-color 0.15s;
}
.vj-field input:focus,
.vj-field select:focus,
.vj-field textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.vj-field small {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Prompts */
.vj-prompts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, #E2E8F0);
}
.vj-prompts-header h4 { margin: 0; font-size: 0.95rem; }

.vj-prompt-card {
  background: var(--bg-base, #F0F7FF);
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.vj-prompt-card:hover { border-color: var(--primary-200, #BFDBFE); }

.vj-prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.vj-prompt-num {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.85rem;
}
.vj-prompt-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.vj-prompt-remove:hover { opacity: 1; }

.vj-prompt-card .vj-field { margin-bottom: 12px; }
.vj-prompt-card .vj-field:last-child { margin-bottom: 0; }

/* Settings */
.vj-settings {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, #E2E8F0);
}
.vj-settings h4 { margin: 0 0 14px; font-size: 0.95rem; }
.vj-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Form footer */
.vj-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light, #E2E8F0);
  background: var(--bg-base, #F0F7FF);
}

.btn-secondary {
  padding: 10px 20px;
  border: 1.5px solid var(--border-light, #E2E8F0);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-danger {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: #EF4444;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover { background: #DC2626; }
.btn-danger.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* ---- RUNNING VIEW ---- */
.vj-running {
  padding: 24px;
}
.vj-running-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}
.vj-running-header h3 { margin: 0 0 4px; font-size: 1.05rem; }
.vj-running-time { font-size: 0.8rem; color: var(--text-muted); }

.vj-progress-bar {
  height: 10px;
  background: #E2E8F0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.vj-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #8B5CF6);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.vj-progress-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 20px;
}

.vj-prompt-statuses {
  margin-bottom: 24px;
}
.vj-prompt-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
}
.vj-prompt-status-row:nth-child(odd) { background: var(--bg-base, #F0F7FF); }
.vj-prompt-status-icon { font-size: 1rem; }
.vj-prompt-status-title { flex: 1; font-weight: 600; color: var(--text-primary); }
.vj-prompt-status-label { color: var(--text-muted); font-size: 0.8rem; }

/* Log Panel */
.vj-log-header {
  margin-bottom: 10px;
}
.vj-log-header h4 { margin: 0; font-size: 0.9rem; }

.vj-log-panel {
  background: #0F172A;
  border-radius: 12px;
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  color: #CBD5E1;
}
.vj-log-line {
  white-space: pre-wrap;
  word-break: break-all;
}
.vj-log-time { color: #64748B; }
.vj-log-line.log-start { color: #3B82F6; }
.vj-log-line.log-send { color: #A78BFA; }
.vj-log-line.log-success { color: #34D399; }
.vj-log-line.log-poll { color: #64748B; }
.vj-log-line.log-download { color: #38BDF8; }
.vj-log-line.log-upload { color: #FBBF24; }
.vj-log-line.log-error { color: #F87171; }
.vj-log-line.log-rename { color: #F472B6; }
.vj-log-line.log-stop { color: #FB923C; }
.vj-log-line.log-info { color: #A78BFA; }

/* ---- REPORT VIEW ---- */
.vj-report {
  padding: 24px;
}
.vj-report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.vj-report-header h3 { margin: 0 0 4px; font-size: 1.05rem; }
.vj-report-meta { font-size: 0.8rem; color: var(--text-muted); }
.vj-report-summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-base, #F0F7FF);
  padding: 8px 16px;
  border-radius: 10px;
}

.vj-report-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.vj-report-item {
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 12px;
  overflow: hidden;
}
.vj-report-item.completed { border-left: 4px solid #10B981; }
.vj-report-item.failed { border-left: 4px solid #EF4444; }

.vj-report-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-base, #F0F7FF);
  font-weight: 600;
  font-size: 0.9rem;
}
.vj-report-item-num { color: var(--primary); }
.vj-report-item-title { flex: 1; }
.vj-report-item-status { font-size: 1.1rem; }

.vj-report-item-body {
  padding: 12px 16px;
}
.vj-report-row {
  font-size: 0.84rem;
  margin-bottom: 6px;
  line-height: 1.5;
}
.vj-report-label {
  font-weight: 600;
  color: var(--text-secondary);
}
.vj-report-error { color: #DC2626; }
.vj-drive-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.vj-drive-link:hover { text-decoration: underline; }

.vj-report-footer {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.vj-report-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.vj-report-footer a:hover { text-decoration: underline; }

.vj-report-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, #E2E8F0);
}

/* ===== FACE ID MODAL ===== */
#faceModal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.face-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.face-content {
  position: relative; background: #fff; border-radius: 16px;
  width: min(420px, 95vw); max-height: 95vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4); z-index: 1;
}
.face-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #E2E8F0;
}
.face-header h3 { font-size: 15px; font-weight: 700; margin: 0; }
.face-close-btn {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: #94A3B8; line-height: 1;
}

/* Video */
.face-video-wrap {
  position: relative; background: #000; aspect-ratio: 4/3; overflow: hidden;
}
#faceVideo {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
}
.face-overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none;
}
.face-guide {
  width: 160px; height: 200px; border: 3px solid rgba(255,255,255,0.6);
  border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
}
.face-status {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 13px; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8); padding: 4px;
}
.face-status.ok { color: #4ADE80; }

/* Conditions */
.face-conditions {
  padding: 10px 16px; display: flex; flex-direction: column; gap: 5px;
  background: #F8FAFC; border-bottom: 1px solid #E2E8F0; font-size: 13px;
}
.face-cond-ok { color: #16A34A; font-weight: 600; }
.face-cond-err { color: #DC2626; font-weight: 600; }

.face-wifi-label {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  font-size: 13px; cursor: pointer; border-bottom: 1px solid #E2E8F0;
}

/* Buttons */
.face-actions { padding: 12px 16px; }
.face-capture-btn {
  width: 100%; padding: 12px; background: #2563EB; color: #fff;
  border: none; border-radius: 10px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.face-capture-btn:hover { background: #1D4ED8; }
.face-capture-btn:disabled { background: #93C5FD; cursor: not-allowed; }

/* Result */
.face-result {
  text-align: center; padding: 0 16px 14px; font-size: 13px; font-weight: 600;
  min-height: 20px;
}
.face-ok { color: #16A34A; }
.face-err { color: #DC2626; }

/* Register banner */
.face-register-banner {
  text-align: center; padding: 16px; background: #FEF3C7;
  border-radius: 10px; font-size: 13px; color: #92400E;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .vj-layout { flex-direction: column; }
  .vj-panel-left { width: 100%; min-width: auto; border-right: none; border-bottom: 1px solid var(--border-light, #E2E8F0); max-height: 300px; }
  .vj-settings-grid { grid-template-columns: 1fr; }
  .vj-report-header { flex-direction: column; }
}

/* ============================================
   PUSH NOTIFICATION BANNER
   ============================================ */
.push-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: white;
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
}
.push-banner span { flex: 1; }
.push-banner-btn {
  background: white;
  color: #2563EB;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
}
.push-banner-btn:active { opacity: 0.8; }
.push-banner-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  min-height: 36px;
}
.push-banner-close:hover { opacity: 1; }

/* ============================================
   NOTIFICATION BELL + DROPDOWN
   ============================================ */
.notif-bell {
  position: relative;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.15s;
  display: flex;
  align-items: center;
}
.notif-bell:hover { background: var(--primary-50); }
.notif-bell svg { color: var(--text-secondary); }

.notif-badge {
  position: absolute;
  top: 2px; right: 0;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  animation: badgePulse 2s infinite;
}

.notif-dropdown {
  position: absolute;
  top: calc(var(--header-height) - 6px);
  right: 16px;
  width: 360px;
  max-height: 460px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 700;
  font-size: 14px;
}
.notif-read-all {
  background: none; border: none;
  color: var(--primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.notif-list {
  overflow-y: auto;
  max-height: 400px;
  flex: 1;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}
.notif-item:hover { background: var(--primary-50); }
.notif-item.unread { background: #EFF6FF; }
.notif-item.unread:hover { background: #DBEAFE; }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.notif-icon.info { background: #DBEAFE; }
.notif-icon.leave { background: #D1FAE5; }
.notif-icon.attendance { background: #FEF3C7; }
.notif-icon.salary { background: #E0E7FF; }
.notif-icon.system { background: #F1F5F9; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.notif-msg { color: var(--text-secondary); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.notif-empty { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 13px; }

@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed;
    top: 54px; left: 8px; right: 8px;
    width: auto;
    max-height: 70vh;
    border-radius: 16px;
  }
}

/* ============================================
   KINH DOANH MODULE — Mobile Responsive Override
   All tabs: HH, TLG, NH, NCC, HD, POS, DTGH,
   KH, SQ, PT, BC, MI, CH
   ============================================ */

/* Sheet slide-up animation (shared) */
@keyframes hhSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ══════════════════════════════════════
   TABLET ≤ 900px
   ══════════════════════════════════════ */
@media (max-width: 900px) {
  /* ── Tab bar compact ── */
  #hh-module-tabs { gap: 0 !important; padding: 0 4px !important; }
  .hh-module-tab { padding: 10px 12px !important; font-size: 12px !important; }

  /* ── HH Toolbar ── */
  #hh-toolbar { padding: 10px 12px !important; gap: 8px !important; }
  .hh-search-w { flex: 1 1 100% !important; min-width: 0 !important; order: -1 !important; }
  .hh-btn { padding: 8px 12px !important; font-size: 12px !important; }

  /* ── HH Stats ── */
  #hh-stats {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 8px !important; padding: 10px 12px !important; background: #F0F2F5 !important;
  }
  #hh-stats > span, #hh-stats > div {
    background: #fff; padding: 10px 12px; border-radius: 10px;
    border: 1px solid #E5E7EB; display: flex; flex-direction: column; gap: 2px; line-height: 1.4;
  }
  #hh-stats b { font-size: 15px !important; color: #1890ff !important; }

  /* ── HH Table min-width ── */
  .hh-tbl { min-width: 0 !important; }

  /* ── HH Modal tablet ── */
  .hh-modal { max-width: 95vw !important; margin: 10px auto !important; }
  .hh-fullmodal-inner { max-width: 100% !important; width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
  .hh-fg { grid-template-columns: 1fr !important; }
  .hh-fg3 { grid-template-columns: 1fr 1fr !important; }

  /* ── HH Detail ── */
  .hh-detail-head { flex-direction: column !important; align-items: center !important; text-align: center; }
  .hh-detail-grid { grid-template-columns: 1fr 1fr !important; padding: 12px !important; }

  /* ── TLG: Thiết Lập Giá ── */
  #pg-root { flex-direction: column !important; }
  #pg-sidebar { width: 100% !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px solid #E2E8F0 !important; max-height: 200px !important; overflow-y: auto !important; }
  #pg-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  .pg-price-input { width: 80px !important; }

  /* ── NH: Nhập Hàng ── */
  .nh-form-body { grid-template-columns: 1fr !important; }
  .nh-left { border-right: none !important; }
  .nh-right { width: 100% !important; max-height: 40vh !important; border-top: 1px solid #DBEAFE; }
  #nh-form-wrap { height: auto !important; min-height: auto !important; max-height: none !important; }

  /* ── NCC: Nhà Cung Cấp ── */
  #ncc-root { flex-direction: column !important; min-height: auto !important; }
  .ncc-fg { grid-template-columns: 1fr !important; }
  .ncc-modal { max-width: 95vw !important; }

  /* ── HD: Hóa Đơn ── */
  #hd-root { flex-direction: column !important; }
  #hd-detail.open { width: 100% !important; min-width: 0 !important; position: fixed !important; inset: 0 !important; z-index: 150 !important; }

  /* ── DTGH: Đối Tác Giao Hàng ── */
  #dtgh-root { flex-direction: column !important; min-height: auto !important; }
  .dtgh-fg { grid-template-columns: 1fr !important; }
  .dtgh-modal { max-width: 95vw !important; }

  /* ── KH: Khách Hàng ── */
  #kh-root { flex-direction: column !important; min-height: auto !important; }

  /* ── SQ: Sổ Quỹ ── */
  #sq-root { flex-direction: column !important; overflow: visible !important; }
  #sq-filter { width: 100% !important; max-height: 200px !important; border-right: none !important; border-bottom: 1px solid #e8e8e8 !important; overflow-y: auto !important; }

  /* ── PT: Phân Tích ── */
  #pt-root { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  #pt-sidebar { width: 100% !important; max-height: 180px !important; border-right: none !important; border-bottom: 1px solid #E2E8F0 !important; }
  .pt-grid-2 { grid-template-columns: 1fr !important; }

  /* ── BC: Báo Cáo ── */
  #bc-root { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  #bc-sidebar { width: 100% !important; max-height: 200px !important; border-right: none !important; border-bottom: 1px solid #E2E8F0 !important; }

  /* ── CH: Cấu Hình ── */
  .ch-stats-bar { grid-template-columns: 1fr 1fr !important; }
  .ch-clients-grid { grid-template-columns: 1fr !important; }
  .ch-wrap { padding: 14px !important; }

  /* ── POS: Bán Hàng (tablet) ── */
  #pos-wrapper { overflow: hidden !important; }
  #pos-tabs-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 4px) !important; }
  #pos-body { flex: 1 !important; flex-direction: column !important; position: relative !important; overflow: hidden !important; }
  #pos-left { flex: 1 !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
  #pos-items-list { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; }
  #pos-mode-tabs { flex-shrink: 0 !important; }
  #pos-right {
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; min-width: 0 !important; max-height: 50vh !important;
    border-left: none !important; border-top: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
    z-index: 10 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
  }
}

/* ══════════════════════════════════════
   PHONE ≤ 768px
   ══════════════════════════════════════ */
@media (max-width: 768px) {

  /* ────── SHARED: Tab bar → pills ────── */
  #hh-module-tabs {
    padding: 6px 8px !important; gap: 4px !important;
    border-bottom: none !important; background: #F0F2F5 !important;
  }
  .hh-module-tab {
    padding: 8px 14px !important; font-size: 12px !important; font-weight: 600 !important;
    border-radius: 20px !important; border-bottom: none !important; margin-bottom: 0 !important;
    background: #fff !important; color: #64748B !important;
    border: 1px solid #E5E7EB !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .hh-module-tab.active {
    background: #2563EB !important; color: #fff !important;
    border-color: #2563EB !important; box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
  }
  .hh-module-tab:hover { color: #2563EB !important; }
  .hh-module-tab.active:hover { color: #fff !important; }

  /* ────── SHARED: Dropdown menus → bottom sheet ────── */
  .bc-dropdown-menu, .mi-dropdown-menu {
    position: fixed !important; left: 8px !important; right: 8px !important;
    top: auto !important; bottom: 0 !important; width: auto !important;
    max-height: 60vh !important; border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15) !important; z-index: 500 !important;
  }

  /* ────── SHARED: All module sidebars hidden ────── */
  #pg-sidebar, #sq-filter, #pt-sidebar, #bc-sidebar { display: none !important; }

  /* ────── SHARED: All tables → horizontal scroll ────── */
  .nh-tbl, .hd-tbl, .dtgh-tbl, .ncc-tbl, .kh-tbl,
  .bc-tbl, .pt-table, #sq-table, .pg-table,
  .hh-sc-tbl, .nh-prod-tbl {
    font-size: 12px !important;
  }
  .nh-tbl th, .hd-tbl th, .dtgh-tbl th, .ncc-tbl th, .kh-tbl th,
  .bc-tbl th, .pt-table th, #sq-table th, .pg-table th {
    padding: 8px 10px !important; font-size: 11px !important;
  }
  .nh-tbl td, .hd-tbl td, .dtgh-tbl td, .ncc-tbl td, .kh-tbl td,
  .bc-tbl td, .pt-table td, #sq-table td, .pg-table td {
    padding: 8px 10px !important;
  }

  /* ────── SHARED: All modals → bottom sheet ────── */
  .hh-overlay, .nh-modal-overlay, .ncc-overlay, .dtgh-overlay, .kh-overlay {
    align-items: flex-end !important; padding: 0 !important;
  }
  .hh-modal, .nh-modal, .ncc-modal, .dtgh-modal, .kh-modal,
  .ch-modal-overlay > div {
    max-width: 100% !important; width: 100% !important; margin: 0 !important;
    border-radius: 20px 20px 0 0 !important; max-height: 92vh !important;
    animation: hhSheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }

  /* ────── SHARED: Form grids → single column ────── */
  .hh-fg, .hh-fg3, .ncc-fg, .dtgh-fg, .kh-fg {
    grid-template-columns: 1fr !important;
  }

  /* ══════ TAB HH: Hàng Hóa ══════ */

  /* Toolbar: search riêng 1 hàng, buttons 1 hàng ngang */
  #hh-toolbar {
    display: flex !important; flex-wrap: wrap !important;
    padding: 10px !important; gap: 8px !important;
  }
  .hh-search-w { width: 100% !important; flex: 1 1 100% !important; min-width: 0 !important; }
  .hh-search-w input { height: 42px !important; font-size: 14px !important; padding-left: 38px !important; }
  #hh-toolbar .hh-btn {
    min-height: 36px !important; padding: 6px 12px !important;
    font-size: 12px !important; flex: 1 1 auto !important;
    justify-content: center !important; white-space: nowrap !important;
  }

  /* Stats → compact 2x2 */
  #hh-stats { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 8px !important; }
  #hh-stats > span, #hh-stats > div { padding: 8px 10px; border-radius: 8px; font-size: 11px; }
  #hh-stats b { font-size: 14px !important; }

  /* Table → horizontal scroll with card-like rows */
  #hh-table-w { overflow-x: auto !important; padding: 0 !important; background: #fff !important; -webkit-overflow-scrolling: touch; }
  .hh-tbl { min-width: 600px !important; font-size: 12px !important; }
  .hh-tbl th { padding: 8px 10px !important; font-size: 11px !important; }
  .hh-tbl td { padding: 8px 10px !important; }
  .hh-img { width: 36px !important; height: 36px !important; border-radius: 6px !important; }
  .hh-pname { max-width: 140px !important; font-size: 12px !important; }
  .hh-pcode { font-size: 10px !important; }
  .hh-act { width: 28px !important; height: 28px !important; font-size: 12px !important; }

  /* Pagination */
  #hh-pager { padding: 8px 10px !important; gap: 4px !important; justify-content: center !important; }
  .hh-pg-info { flex: 1 1 100% !important; text-align: center !important; margin-bottom: 4px; font-size: 12px !important; }
  .hh-pg-btn { min-width: 38px !important; min-height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 6px 10px !important; font-size: 13px !important; border-radius: 8px !important; }

  /* Modal → Bottom Sheet */
  .hh-modal-header { padding: 14px 16px !important; }
  .hh-modal-title { font-size: 16px !important; }
  .hh-tab-panel { padding: 14px 16px !important; }
  .hh-tabs { padding: 0 12px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .hh-tab { padding: 10px 14px !important; font-size: 12px !important; }
  .hh-modal-footer { padding: 12px 16px !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }

  /* Full-screen modal */
  .hh-fullmodal { padding: 0 !important; }
  .hh-fullmodal-inner { max-width: 100vw !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
  .hh-fm-header { padding: 12px 14px !important; padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important; }
  .hh-fm-tabs { padding: 0 8px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .hh-fm-tab { padding: 10px 14px !important; font-size: 12px !important; }
  .hh-fm-panel { padding: 14px !important; }
  .hh-fm-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }
  .hh-fm-info-grid { grid-template-columns: 1fr !important; }
  .hh-fm-info-item:nth-child(odd) { border-right: none !important; }

  /* Detail view compact */
  .hh-detail-head { flex-direction: column !important; align-items: center !important; padding: 14px !important; text-align: center; }
  .hh-detail-img { width: 80px !important; height: 80px !important; }
  .hh-detail-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px !important; }
  .hh-detail-card { padding: 10px !important; }
  .hh-detail-val { font-size: 13px !important; }
  .hh-sec-hdr { padding: 14px !important; min-height: 44px; }
  #hh-root { min-height: auto !important; }

  /* ══════ TAB TLG: Thiết Lập Giá ══════ */
  #pg-root { min-height: auto !important; }
  #pg-main { min-width: 0 !important; }
  #pg-toolbar { padding: 10px !important; flex-wrap: wrap !important; gap: 6px !important; }
  #pg-toolbar input, #pg-toolbar select, .pg-select {
    font-size: 14px !important; height: 40px !important;
  }
  .pg-price-input { width: 70px !important; font-size: 12px !important; padding: 6px 4px !important; }
  .pg-pb-chip { padding: 6px 10px !important; font-size: 11px !important; }

  /* ══════ TAB NH: Nhập Hàng ══════ */
  #nh-form-wrap { height: auto !important; min-height: auto !important; }
  .nh-form-hdr { padding: 10px 14px !important; }
  .nh-form-hdr h3 { font-size: 14px !important; }
  .nh-form-body { grid-template-columns: 1fr !important; overflow: visible !important; }
  .nh-left { border-right: none !important; overflow: visible !important; }
  .nh-right { max-height: none !important; border-top: 2px solid #DBEAFE !important; padding: 14px !important; }
  .nh-search-bar { padding: 10px 12px !important; gap: 6px !important; }
  .nh-prod-search { height: 42px !important; font-size: 14px !important; }
  .nh-icon-btn { width: 42px !important; height: 42px !important; }
  .nh-form-footer { padding: 10px 14px !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important; }
  .nh-form-footer .hh-btn, .nh-form-footer button { min-height: 42px !important; font-size: 13px !important; flex: 1 !important; justify-content: center !important; display: flex !important; align-items: center !important; }
  /* Nhập hàng list table */
  .nh-filter-input { height: 40px !important; font-size: 14px !important; }
  .nh-modal { max-width: 100% !important; border-radius: 20px 20px 0 0 !important; padding: 20px 16px !important; }
  .nh-modal-overlay { align-items: flex-end !important; }

  /* ══════ TAB NCC: Nhà Cung Cấp ══════ */
  #ncc-root { min-height: auto !important; }
  #ncc-main { min-width: 0 !important; }
  .ncc-toolbar {
    flex-wrap: wrap !important; padding: 10px !important; gap: 8px !important;
  }
  .ncc-toolbar input {
    height: 42px !important; font-size: 14px !important;
    flex: 1 1 100% !important; order: -1 !important;
  }
  .ncc-toolbar button, .ncc-toolbar .hh-btn {
    min-height: 38px !important; flex: 1 !important;
    font-size: 12px !important; justify-content: center !important;
  }
  .ncc-modal { padding: 20px 16px !important; }
  /* NCC table scroll */
  .ncc-tbl { font-size: 12px !important; }
  .ncc-tbl th { padding: 8px 10px !important; font-size: 11px !important; }
  .ncc-tbl td { padding: 8px 10px !important; }
  /* NCC column popup */
  .ncc-col-popup { width: 280px !important; right: 0 !important; left: auto !important; }

  /* ══════ TAB HD: Hóa Đơn ══════ */
  #hd-root { min-height: auto !important; }
  #hd-main { min-width: 0 !important; }
  #hd-content { flex-direction: column !important; }
  #hd-list { min-width: 0 !important; overflow-x: auto !important; }
  /* HD toolbar */
  .hd-toolbar {
    flex-wrap: wrap !important; padding: 10px !important; gap: 8px !important;
  }
  .hd-toolbar input, .hd-toolbar select {
    height: 40px !important; font-size: 14px !important;
  }
  .hd-toolbar input[type="search"], .hd-toolbar input[type="text"] {
    flex: 1 1 100% !important; order: -1 !important;
  }
  /* HD table */
  .hd-tbl { font-size: 12px !important; }
  .hd-tbl th { padding: 8px 10px !important; font-size: 11px !important; }
  .hd-tbl td { padding: 8px 10px !important; }
  /* HD detail → full-screen overlay */
  #hd-detail.open {
    width: 100% !important; min-width: 0 !important;
    position: fixed !important; inset: 0 !important; z-index: 200 !important;
    overflow-y: auto !important; background: #fff !important;
  }
  .hd-dtabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .hd-dtab { white-space: nowrap !important; padding: 10px 14px !important; font-size: 12px !important; }
  .hd-summary { padding: 12px !important; }
  .hd-total { font-size: 14px !important; }
  /* HD edit modal → full screen */
  .hd-edit-overlay {
    align-items: flex-end !important; padding: 0 !important;
  }
  .hd-edit-modal, .hd-edit-overlay > div {
    max-width: 100vw !important; width: 100vw !important;
    border-radius: 20px 20px 0 0 !important; max-height: 95vh !important;
  }
  .hd-edit-hdr { padding: 12px 14px !important; }
  .hd-edit-body { padding: 12px !important; }
  .hd-edit-footer {
    padding: 10px 14px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
  .hd-edit-tbl { font-size: 12px !important; }
  .hd-edit-tbl th, .hd-edit-tbl td { padding: 6px 8px !important; }
  .hd-ship-grid { grid-template-columns: 1fr !important; }
  .hd-ship-block { padding: 10px !important; }

  /* ══════ TAB POS: Bán Hàng — MULTI-LAYER MOBILE ══════ */

  /* Wrapper: full screen, no horizontal overflow */
  #pos-wrapper {
    position: fixed !important; inset: 0 !important;
    overflow: hidden !important;
  }

  /* Tab bar: safe-area top + compact */
  #pos-tabs-bar {
    padding: 4px 6px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    gap: 3px !important; min-height: 38px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }
  .pos-tab { padding: 5px 10px !important; font-size: 11px !important; }
  .pos-tab-add { padding: 5px 8px !important; font-size: 14px !important; }

  /* Body: full height, relative for overlay */
  #pos-body {
    flex: 1 !important; display: flex !important;
    flex-direction: column !important; overflow: hidden !important;
    position: relative !important;
  }

  /* LEFT = base layer, flex column */
  #pos-left {
    flex: 1 !important; min-height: 0 !important;
    overflow: hidden !important; display: flex !important;
    flex-direction: column !important;
  }
  #pos-search-bar { padding: 8px 10px !important; }
  #pos-search-input {
    height: 40px !important; font-size: 14px !important;
    padding: 10px 14px !important; border-radius: 10px !important;
  }
  #pos-items-list { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; }
  #pos-items-table { font-size: 13px !important; }
  #pos-items-table th { padding: 8px 8px !important; font-size: 10px !important; }
  #pos-items-table td { padding: 8px 8px !important; }
  #pos-note-bar { padding: 6px 10px !important; }
  #pos-note-input { padding: 8px 10px !important; font-size: 13px !important; }

  /* ══════════════════════════════════════════════════════════
     POS MOBILE NATIVE LAYOUT — 2 screens (BÁN / THANH TOÁN)
     Màn 1: pos-left full-screen, mode tabs sticky top, cart bar fixed bottom
     Màn 2: pos-right slide-in full-screen modal (customer + payment)
     ══════════════════════════════════════════════════════════ */

  /* ─── LEFT = main scroll container (Màn BÁN) ─── */
  #pos-left {
    flex: 1 !important; width: 100% !important; min-width: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
    background: #FAFBFF !important;
  }

  /* Mode tabs: MOVE TO TOP via flex order, sticky → luôn hiển thị */
  #pos-mode-tabs {
    order: -2 !important;
    position: sticky !important; top: 0 !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    flex-shrink: 0 !important;
    background: #fff !important;
    border-top: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
    z-index: 20 !important;
  }
  .pos-mode-tab {
    font-size: 13px !important; padding: 12px 14px !important;
    white-space: nowrap !important; min-height: 44px !important;
    font-weight: 600 !important;
  }

  /* Search bar: sticky ngay dưới mode tabs */
  #pos-search-bar {
    order: -1 !important;
    position: sticky !important; top: 44px !important;
    background: #fff !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 8px 12px !important;
    z-index: 19 !important;
  }
  #pos-search-input {
    height: 44px !important; font-size: 16px !important;
    padding: 10px 14px !important; border-radius: 12px !important;
  }

  /* Items list: bỏ scroll riêng — delegate scroll cho pos-left */
  #pos-items-list {
    flex: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    background: #fff !important;
  }
  #pos-items-table { font-size: 14px !important; }
  #pos-items-table th { padding: 10px 8px !important; font-size: 11px !important; }
  #pos-items-table td { padding: 12px 8px !important; }

  /* Delivery form (Bưu điện): inline trong pos-left, scroll chung */
  #pos-delivery-form {
    flex: none !important;
    background: #fff !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #pos-delivery-form input,
  #pos-delivery-form select,
  #pos-delivery-form textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  /* ─── POSTAL/DELIVERY FORM: force vertical stack on mobile ─── */
  /* Top-level flex rows (postal 55/45 & delivery partner+phí ship) → stack */
  #pos-delivery-form > div {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Direct child columns become full-width blocks */
  #pos-delivery-form > div > div {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Inner flex rows (2-3 inputs side by side) → allow wrap, full width */
  #pos-delivery-form > div > div > div {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }
  /* Any input that uses fixed inline widths (phí ship 120px, weight 70px, dims 30-65px) */
  #pos-delivery-form input[style*="width:120px"],
  #pos-delivery-form input[style*="width: 120px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Keep small dimension inputs compact but readable */
  #pos-delivery-form input[type="number"][style*="width:30px"],
  #pos-delivery-form input[type="number"][style*="width:32px"],
  #pos-delivery-form input[type="number"][style*="width:65px"],
  #pos-delivery-form input[type="number"][style*="width:70px"] {
    width: 56px !important;
    min-height: 38px !important;
    padding: 6px !important;
    font-size: 14px !important;
  }
  /* "Ghi chú bưu tá" inline input → full width on its own line */
  #pos-delivery-form input[placeholder*="Ghi chú bưu"],
  #pos-delivery-form input[placeholder*="Ghi ch\00fa b\01b0u"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  /* Right-column VNP service box: phí ship row stays visible */
  #pos-delivery-form input[id="pos-postal-shipfee"],
  #pos-delivery-form input[id="pos-ship-fee"] {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Note bar */
  #pos-note-bar { padding: 10px 12px !important; background: #fff !important; flex: none !important; }
  #pos-note-input { padding: 12px 14px !important; font-size: 15px !important; min-height: 44px !important; border-radius: 10px !important; }

  /* ─── CART BAR (fixed bottom — inject via JS) ─── */
  #pos-cart-bar {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    min-height: 64px !important;
    padding: 10px 16px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 60%, #0A3880 100%) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    z-index: 100 !important;
    box-shadow: 0 -6px 24px rgba(13,71,161,0.35) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.15) !important;
    transition: transform 0.2s, filter 0.15s !important;
    transform: translateY(0) !important;
  }
  #pos-cart-bar:active { filter: brightness(0.9) !important; transform: translateY(1px) !important; }
  #pos-cart-bar.empty { transform: translateY(120%) !important; pointer-events: none !important; }
  #pos-cart-bar .pcb-left {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: 14px !important; opacity: 0.95 !important;
  }
  #pos-cart-bar .pcb-count-badge {
    background: #FFC107 !important; color: #1E293B !important;
    min-width: 26px !important; height: 26px !important;
    border-radius: 13px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-weight: 800 !important; font-size: 13px !important;
    padding: 0 8px !important;
  }
  #pos-cart-bar .pcb-total {
    font-size: 18px !important; font-weight: 800 !important; letter-spacing: 0.3px !important;
    flex: 1 !important; text-align: center !important;
  }
  #pos-cart-bar .pcb-right {
    display: flex !important; align-items: center !important; gap: 4px !important;
    background: rgba(255,255,255,0.2) !important;
    padding: 8px 14px !important; border-radius: 20px !important;
    font-size: 13px !important; font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* ─── RIGHT = full-screen modal (Màn THANH TOÁN) ─── */
  #pos-right {
    display: none !important;  /* ẩn mặc định trên mobile */
  }
  #pos-wrapper.pos-mobile-cart #pos-right {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    max-height: none !important; min-height: 0 !important;
    margin: 0 !important;
    border: none !important; border-radius: 0 !important;
    box-shadow: none !important;
    background: #F1F5F9 !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
    animation: posSlideInRight 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  @keyframes posSlideInRight {
    from { transform: translateX(100%); opacity: 0.8; }
    to   { transform: translateX(0);    opacity: 1; }
  }
  /* Hide static pos-tabs-bar & cart-bar khi đang ở màn thanh toán */
  #pos-wrapper.pos-mobile-cart #pos-tabs-bar { display: none !important; }
  #pos-wrapper.pos-mobile-cart #pos-cart-bar { display: none !important; }

  /* Header của modal với nút back (inject via JS) */
  #pos-mobile-header {
    display: none !important;
  }
  #pos-wrapper.pos-mobile-cart #pos-mobile-header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: 8px !important; padding-right: 16px !important;
    background: linear-gradient(135deg, #1E3A5F 0%, #1565C0 50%, #0D47A1 100%) !important;
    color: #fff !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 10001 !important;
    box-shadow: 0 2px 12px rgba(13,71,161,0.3) !important;
  }
  #pos-mobile-header .pmh-back {
    width: 44px !important; height: 44px !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 22px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important;
  }
  #pos-mobile-header .pmh-back:active { background: rgba(255,255,255,0.3) !important; }
  #pos-mobile-header .pmh-title {
    font-size: 17px !important; font-weight: 800 !important; letter-spacing: 0.3px !important;
  }
  #pos-mobile-header .pmh-total {
    margin-left: auto !important;
    font-size: 16px !important; font-weight: 800 !important;
    background: rgba(255,255,255,0.15) !important;
    padding: 6px 12px !important; border-radius: 20px !important;
  }

  /* Larger tap targets inside cart modal */
  #pos-wrapper.pos-mobile-cart #pos-right input,
  #pos-wrapper.pos-mobile-cart #pos-right select,
  #pos-wrapper.pos-mobile-cart #pos-right textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  #pos-wrapper.pos-mobile-cart #pos-right button {
    min-height: 44px !important;
  }

  /* Card-style sections inside modal */
  #pos-wrapper.pos-mobile-cart #pos-staff-customer,
  #pos-wrapper.pos-mobile-cart #pos-summary,
  #pos-wrapper.pos-mobile-cart #pos-payment {
    background: #fff !important;
    margin: 10px 12px 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  }

  /* Hide old drag handle if still injected */
  #pos-right .pos-sheet-handle { display: none !important; }
  #pos-right::before { display: none !important; }

  #pos-staff-customer {
    padding: 8px 14px !important;
    flex-wrap: wrap !important;
  }
  .pos-customer-chip { margin-top: 6px !important; }
  #pos-summary { padding: 8px 14px !important; }
  .pos-summary-row { font-size: 13px !important; margin-bottom: 8px !important; }
  .pos-summary-row.total { font-size: 18px !important; padding-top: 10px !important; margin-top: 8px !important; }
  .pos-val { font-size: 14px !important; }
  #pos-payment { padding: 8px 14px !important; }
  .pos-quick-amounts { flex-wrap: wrap !important; gap: 6px !important; }
  .pos-quick-amt { min-height: 36px !important; font-size: 12px !important; flex: 1 1 28% !important; }

  /* Actions bar: sticky bottom */
  #pos-actions {
    padding: 8px 14px !important; gap: 8px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    position: sticky !important; bottom: 0 !important; background: #fff !important;
    border-top: 1px solid #E2E8F0 !important;
  }
  #pos-print-btn { padding: 10px 14px !important; font-size: 16px !important; border-radius: 10px !important; }
  #pos-checkout-btn { padding: 10px !important; font-size: 16px !important; border-radius: 10px !important; }

  /* POS modals → bottom sheet */
  .pos-qr-overlay, .pos-settings-overlay { align-items: flex-end !important; }
  .pos-qr-modal, .pos-settings-panel {
    max-width: 100% !important; width: 100% !important;
    border-radius: 20px 20px 0 0 !important; max-height: 90vh !important;
  }
  .pos-settings-panel { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }

  /* ─── UNIT DROPDOWN → centered modal popup ───
     Inline style on #pos-unitdd-* sets position:absolute top:100% left:0 which
     gets clipped at right edge of table. On mobile, force it to a centered
     fixed modal with a dark backdrop (box-shadow trick). JS toggles display
     inline — we override all OTHER properties so the modal centers when shown. */
  [id^="pos-unitdd-"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(340px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 260px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10010 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border: none !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow:
      0 24px 60px rgba(15, 23, 42, 0.35),
      0 0 0 100vmax rgba(15, 23, 42, 0.55) !important;
  }
  [id^="pos-unitdd-"] > div {
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1) !important;
  }
  [id^="pos-unitdd-"] > div:last-child { border-bottom: none !important; }
  [id^="pos-unitdd-"] > div:active { background: #EFF6FF !important; }
  [id^="pos-unitdd-"] > div > span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
  }

  /* ══════ TAB DTGH: Đối Tác Giao Hàng ══════ */
  #dtgh-root { min-height: auto !important; }
  #dtgh-main { min-width: 0 !important; overflow-x: auto !important; }
  /* DTGH toolbar */
  .dtgh-toolbar {
    flex-wrap: wrap !important; padding: 10px !important; gap: 8px !important;
  }
  .dtgh-toolbar input {
    height: 42px !important; font-size: 14px !important;
    flex: 1 1 100% !important; order: -1 !important;
  }
  .dtgh-toolbar button, .dtgh-toolbar .hh-btn {
    min-height: 38px !important; flex: 1 !important;
    font-size: 12px !important; justify-content: center !important;
  }
  /* DTGH table */
  .dtgh-tbl { font-size: 12px !important; }
  .dtgh-tbl th { padding: 8px 10px !important; font-size: 11px !important; }
  .dtgh-tbl td { padding: 8px 10px !important; }
  /* DTGH modal */
  .dtgh-modal { padding: 20px 16px !important; }
  .dtgh-col-popup { width: 280px !important; right: 0 !important; left: auto !important; }

  /* ══════ TAB KH: Khách Hàng ══════ */
  #kh-root { min-height: auto !important; }
  #kh-main { min-width: 0 !important; overflow-x: auto !important; }
  /* KH toolbar */
  .kh-toolbar {
    flex-wrap: wrap !important; padding: 10px !important; gap: 8px !important;
  }
  .kh-toolbar input {
    height: 42px !important; font-size: 14px !important;
    flex: 1 1 100% !important; order: -1 !important;
  }
  .kh-toolbar button, .kh-toolbar .hh-btn {
    min-height: 38px !important; flex: 1 !important;
    font-size: 12px !important; justify-content: center !important;
  }
  /* KH stats */
  .kh-stats {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 6px !important; padding: 8px !important;
  }
  .kh-stat-card {
    padding: 10px !important; font-size: 12px !important;
    min-width: 0 !important;
  }
  /* KH table */
  .kh-tbl { font-size: 12px !important; }
  .kh-tbl th { padding: 8px 10px !important; font-size: 11px !important; }
  .kh-tbl td { padding: 8px 10px !important; }
  /* KH expand/detail */
  .kh-expand-wrap { padding: 10px !important; }
  .kh-exp-hdr { flex-wrap: wrap !important; gap: 8px !important; padding: 10px !important; }
  .kh-exp-qs { margin-left: 0 !important; flex-wrap: wrap !important; gap: 8px !important; }
  .kh-tt-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .kh-cn-total { flex-wrap: wrap !important; gap: 8px !important; padding: 8px 12px !important; }
  /* KH modal */
  .kh-modal { padding: 20px 16px !important; }
  .kh-eform-row { grid-template-columns: 1fr !important; }
  .kh-dtabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 0 10px !important; }
  .kh-col-popup { width: 280px !important; right: 0 !important; left: auto !important; }

  /* ══════ TAB SQ: Sổ Quỹ ══════ */
  #sq-root { height: auto !important; overflow: visible !important; }
  #sq-main { overflow: visible !important; }
  #sq-toolbar {
    flex-wrap: wrap !important; gap: 6px !important; padding: 10px !important;
  }
  #sq-toolbar input, #sq-toolbar select {
    font-size: 14px !important; min-height: 40px !important;
    flex: 1 1 45% !important;
  }
  #sq-toolbar button {
    font-size: 12px !important; min-height: 38px !important;
    flex: 1 !important; justify-content: center;
  }
  #sq-summary { overflow-x: auto !important; padding: 8px !important; }
  #sq-summary-values {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    font-size: 12px !important; gap: 0 !important;
  }
  #sq-summary-values > div {
    padding: 8px 10px !important; min-width: 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }
  /* SQ table wrapper scroll */
  #sq-table { min-width: 500px !important; font-size: 12px !important; }
  #sq-table th { padding: 8px 10px !important; font-size: 11px !important; }
  #sq-table td { padding: 8px 10px !important; }

  /* ══════ TAB PT: Phân Tích ══════ */
  #pt-root { height: auto !important; overflow: visible !important; }
  #pt-header { flex-wrap: wrap !important; gap: 6px !important; padding: 10px !important; }
  #pt-header select, #pt-header input { font-size: 13px !important; height: 38px !important; }
  #pt-content { overflow: visible !important; padding: 10px !important; }
  .pt-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pt-section { padding: 12px !important; }
  .pt-warn-grid { grid-template-columns: 1fr !important; }

  /* ══════ TAB BC: Báo Cáo ══════ */
  #bc-root { height: auto !important; overflow: visible !important; }
  #bc-main { min-width: 0 !important; }
  #bc-wrap { padding: 10px !important; }
  .bc-hdr { flex-wrap: wrap !important; gap: 8px !important; }
  .bc-hdr select, .bc-hdr input { font-size: 13px !important; height: 38px !important; }

  /* ══════ TAB CH: Cấu Hình ══════ */
  .ch-wrap { padding: 12px !important; }
  .ch-stats-bar { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ch-clients-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ch-section-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; gap: 0 !important; }
  .ch-section-tabs button { white-space: nowrap !important; padding: 10px 14px !important; font-size: 12px !important; }
  .ch-client-card { padding: 14px !important; }
  .ch-form-group input, .ch-form-group select, .ch-form-group textarea { font-size: 14px !important; }
  .ch-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .ch-modal-overlay > div { border-radius: 20px 20px 0 0 !important; max-height: 92vh !important; width: 100% !important; }

  /* ══════ TAB MI: Mẫu In ══════ */
  /* Mẫu In uses shared table styles, already covered above */

  /* ══════ Tổng Quan (hhtq-) ══════ */
  .hhtq-wrapper { flex-direction: column !important; }
  .hhtq-main { min-width: 0 !important; }
  .hhtq-sidebar { width: 100% !important; border-left: none !important; border-top: 1px solid #E2E8F0 !important; max-height: 300px !important; overflow-y: auto !important; }
  .hhtq-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .hhtq-top-grid { grid-template-columns: 1fr !important; }
  .hhtq-chart-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  .hhtq-chart-controls { flex-wrap: wrap !important; gap: 6px !important; }
  .hhtq-select, .hhtq-select-sm { font-size: 12px !important; }
}

/* ══════════════════════════════════════
   SMALL PHONE ≤ 400px
   ══════════════════════════════════════ */
@media (max-width: 400px) {
  .hh-module-tab { padding: 7px 10px !important; font-size: 11px !important; }
  #hh-toolbar { padding: 8px !important; }
  #hh-stats { gap: 4px !important; padding: 6px !important; }
  #hh-stats > span, #hh-stats > div { padding: 6px 8px; font-size: 10px; }
  #hh-stats b { font-size: 13px !important; }
  .hh-tbl { min-width: 500px !important; }
  .hh-img { width: 32px !important; height: 32px !important; }
  .hh-pname { max-width: 100px !important; font-size: 11px !important; }

  /* NH compact */
  .nh-right { padding: 10px !important; }
  .nh-right-row { font-size: 12px !important; }

  /* SQ compact */
  #sq-table { min-width: 400px !important; }

  /* PT compact */
  .pt-kpi-grid { gap: 6px !important; }
  .pt-section { padding: 8px !important; }

  /* POS compact */
  .pos-tab { padding: 5px 8px !important; font-size: 10px !important; }
  #pos-items-table th, #pos-items-table td { padding: 6px 4px !important; font-size: 11px !important; }
}

/* ============================================
   DASHBOARD HOME — Module Grid
   ============================================ */

/* Fade-in stagger animation */
@keyframes dhomeFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wrapper */
.dhome-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Greeting — compact */
.dhome-greeting {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  border-radius: 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.dhome-greeting::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -15%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}
.dhome-greeting-emoji {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.dhome-greeting-text h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}
.dhome-greeting-text p {
  font-size: 13px;
  margin: 0;
  opacity: 0.85;
  font-weight: 500;
}

/* Module Grid */
.dhome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Module Card */
.dhome-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--card-bg, #f8fafc);
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: dhomeFadeIn 0.35s ease both;
  position: relative;
  overflow: hidden;
}
.dhome-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--card-accent, #1890ff);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dhome-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}
.dhome-card:hover::after {
  opacity: 1;
}
.dhome-card:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Card Icon */
.dhome-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Card Body */
.dhome-card-body {
  flex: 1;
  min-width: 0;
}
.dhome-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 3px;
  line-height: 1.3;
}
.dhome-card-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop: wider grid */
@media (min-width: 769px) {
  .dhome-wrapper {
    padding: 40px 20px;
  }
  .dhome-greeting {
    padding: 24px 28px;
    margin-bottom: 32px;
  }
  .dhome-greeting-emoji {
    font-size: 42px;
  }
  .dhome-greeting-text h2 {
    font-size: 22px;
  }
  .dhome-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  .dhome-card {
    padding: 20px;
    gap: 14px;
  }
  .dhome-card-icon {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
  .dhome-card-name {
    font-size: 15px;
  }
  .dhome-card-desc {
    font-size: 12px;
  }
}

/* Small phone ≤400px: tighter */
@media (max-width: 400px) {
  .dhome-wrapper {
    padding: 16px 10px;
  }
  .dhome-greeting {
    padding: 14px 16px;
    gap: 10px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  .dhome-greeting-emoji {
    font-size: 28px;
  }
  .dhome-greeting-text h2 {
    font-size: 16px;
  }
  .dhome-grid {
    gap: 8px;
  }
  .dhome-card {
    padding: 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .dhome-card-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 10px;
  }
  .dhome-card-name {
    font-size: 13px;
  }
  .dhome-card-desc {
    font-size: 10px;
    -webkit-line-clamp: 1;
  }
}

/* ============================================
   ENHANCED MOBILE RESPONSIVE — Fix 5
   Safe area, touch targets, animations, sheets
   ============================================ */

/* --- iOS Safe Area Insets --- */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    padding-top: calc(env(safe-area-inset-top) + 6px);
    height: auto;
    min-height: var(--header-height);
  }
  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Global Mobile Tap Effects --- */
@media (max-width: 1024px) {
  /* Tap highlight */
  .nav-item, .btn, .btn-sm, .btn-primary, .btn-outline,
  .nv-emp-card, .nv-tab, .cc-cal-cell, .xn-cal-cell,
  .face-capture-btn, .xn-event, .module-card {
    -webkit-tap-highlight-color: rgba(37,99,235,0.15);
    touch-action: manipulation;
  }

  /* Active press effect */
  .nav-item:active, .btn:active, .btn-sm:active,
  .nv-emp-card:active, .module-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* Smooth scrolling */
  .content, .sidebar-nav, .table-wrapper,
  .xn-stats-bar, .nv-detail-page, .cc-detail-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Better font rendering on mobile */
  body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
}

/* --- Mobile ≤768px: Core Layout --- */
@media (max-width: 768px) {
  :root { --header-height: auto; }

  /* Header — single row, pushed below status bar */
  .header {
    height: auto;
    padding: 54px 14px 10px 14px;
    gap: 0;
  }
  .header-left { display: none; }
  .header-right {
    flex: 1;
    gap: 12px;
    justify-content: flex-start;
  }
  .search-box { flex: 1; width: auto; height: 44px; padding: 10px 16px; font-size: 15px; border-radius: 12px; }
  .search-box input { font-size: 15px; }
  .search-box svg { width: 18px; height: 18px; }
  .notif-bell { flex-shrink: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px; }
  .notif-bell svg { width: 24px; height: 24px; }
  .header-avatar { flex-shrink: 0; margin-left: auto; width: 40px; height: 40px; font-size: 14px; }
  .menu-toggle { min-width: 44px; min-height: 44px; padding: 8px; }
  .menu-toggle svg { width: 24px; height: 24px; }

  /* Content area — safe area for all modules (header is hidden) */
  .content {
    padding: 12px;
    padding-top: max(env(safe-area-inset-top, 0px), 20px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }

  /* Sidebar overlay */
  .sidebar {
    width: 280px;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }

  /* Buttons: bigger touch targets */
  .btn, .btn-sm {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Tables: horizontal scroll hint */
  .table-wrapper {
    position: relative;
    margin: 0 -12px;
    padding: 0 12px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .table-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .table-wrapper.scrollable::after { opacity: 1; }

  .data-table th, .data-table td {
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Modal: bottom sheet style */
  .modal-overlay, .xn-modal-overlay, .nv-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal, .xn-modal, .nv-modal {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }

  /* Face ID modal */
  .face-content {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 95vh !important;
  }
  #faceModal {
    align-items: flex-end !important;
  }

  /* Stats cards compact */
  .stats { gap: 8px; }
  .stat-card { padding: 10px 12px; }

  /* Module hero compact */
  .module-hero { padding: 16px; gap: 12px; }

  /* Form fields */
  .form-group input, .form-group select, .form-group textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 10px 12px;
  }

  /* Search box compact */
  .search-box {
    height: 36px;
    font-size: 13px;
  }
}

/* --- Small phone ≤480px --- */
@media (max-width: 480px) {
  .content { padding: 8px; padding-top: max(env(safe-area-inset-top, 0px), 20px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 10px); }

  .header {
    padding: 50px 10px 8px 10px;
  }

  /* Search box */
  .search-box {
    height: 42px;
    padding: 8px 14px;
    font-size: 14px;
  }
  .search-box input { font-size: 14px; }
  .search-kbd { display: none; }

  /* Welcome card */
  .welcome {
    padding: 16px;
    border-radius: 12px;
  }
  .welcome h2 { font-size: 1.1rem; }

  /* Stats */
  .stats { flex-wrap: wrap; }
  .stat-card {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 10px;
  }
  .stat-card .value { font-size: 1.1rem; }
  .stat-card .label { font-size: 10px; }

  /* Grid */
  .grid { gap: 8px; }

  /* Cards even more compact on tiny screens */
  .card {
    padding: 10px;
    gap: 8px;
    border-radius: 12px;
  }
  .card-icon {
    width: 36px;
    height: 36px;
  }
  .card-body h3 { font-size: 12px; }
  .card-body p { font-size: 10px; -webkit-line-clamp: 1; }
  .card-footer { padding-top: 8px; }
  .card-btn { font-size: 10px; padding: 5px 8px; }

  /* Module cards */
  .module-card { padding: 14px; }

  /* Sidebar compact */
  .sidebar { width: 260px; }
  .sidebar-header { padding: 14px 14px 12px; }
  .logo-icon { width: 34px; height: 34px; }
  .logo-text { font-size: 13px; }
  .nav-item { padding: 10px 14px; font-size: 13px; }

  /* Employee cards - mobile compact */
  .nv-emp-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .nv-emp-card { padding: 10px; }
  .nv-avatar { width: 30px; height: 30px; font-size: 0.68rem; border-radius: 8px; }
  .nv-card-top { gap: 8px; margin-bottom: 6px; }
  .nv-card-info h4 { font-size: 0.78rem; }
  .nv-card-pos { font-size: 0.68rem; }
  .nv-card-stats { gap: 3px; padding: 6px 0; margin-bottom: 6px; }
  .nv-card-stat { font-size: 0.72rem; gap: 4px; }
  .nv-card-stat-icon { font-size: 0.78rem; }
  .nv-card-btn { padding: 6px; font-size: 0.72rem; }
  .nv-card-cc-btn { padding: 6px 8px; font-size: 0.68rem; }
  .nv-card-del-btn { width: 28px; padding: 6px 0; font-size: 14px; }
  .nv-card-actions { gap: 4px; }
  .nv-card-alert { padding: 3px 6px; font-size: 0.68rem; margin-bottom: 6px; }
  .nv-emp-avatar { width: 30px; height: 30px; font-size: 12px; }
  /* Summary cards - mobile compact */
  .nv-summary-row { gap: 8px; }
  .nv-summary-card { padding: 10px; gap: 8px; }
  .nv-summary-icon { width: 32px; height: 32px; border-radius: 8px; }
  .nv-summary-icon svg { width: 15px; height: 15px; }
  .nv-summary-num { font-size: 0.9rem; }
  .nv-summary-label { font-size: 0.68rem; }

  /* Calendar cells tighter */
  .cc-cal-cell { min-height: 34px; padding: 2px; }
  .cc-cal-day { font-size: 0.7rem; }

  /* Leave calendar */
  .xn-cal-cell { min-height: 50px; padding: 1px; }
  .xn-cal-num { font-size: 10px; }

  /* Buttons */
  .btn { border-radius: 10px; }

  /* Info banner compact */
  .info-banner { padding: 10px 12px; font-size: 12px; gap: 8px; }

  /* Profile */
  .nv-profile-avatar { width: 64px; height: 64px; font-size: 1.2rem; }
}

/* --- Bottom Sheet Animation --- */
@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Pull-down indicator for bottom sheets (mobile) --- */
@media (max-width: 768px) {
  .modal::before, .xn-modal::before, .nv-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #CBD5E1;
    border-radius: 2px;
    margin: 8px auto 4px;
  }
}

/* --- Landscape phone adjustments --- */
@media (max-height: 500px) and (max-width: 900px) {
  .face-video-wrap { aspect-ratio: 16/9; max-height: 200px; }
  .face-guide { width: 100px; height: 130px; }
  .modal, .xn-modal, .nv-modal { max-height: 95vh !important; }
  .header { height: 44px; }
  .content { height: 100vh; }
}

/* --- Tablet tweaks (768-1024) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .content { padding: 16px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .nv-summary-row { grid-template-columns: repeat(3, 1fr); }
  .nv-emp-grid { grid-template-columns: repeat(3, 1fr); }
  .cc-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== HÀNG HÓA - TAB TỔNG QUAN (hhtq-) ===== */
@keyframes hhtq-fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hhtq-skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes hhtq-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.hhtq-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  min-height: 600px;
  animation: hhtq-fadeInUp .35s ease both;
}
.hhtq-main {
  padding: 20px 24px;
  overflow-y: auto;
}
.hhtq-sidebar {
  border-left: 1px solid var(--border-light, #DBEAFE);
  padding: 20px 16px;
  overflow-y: auto;
  background: linear-gradient(180deg, #F8FAFF 0%, #F0F4FA 100%);
}

/* Section label */
.hhtq-section-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  padding: 0 0 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--primary-100, #DBEAFE);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hhtq-section-label::before {
  content: '';
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--primary, #2563EB), var(--primary-light, #3B82F6));
  border-radius: 2px;
  flex-shrink: 0;
}

/* KPI Grid */
.hhtq-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.hhtq-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid var(--border-light, #DBEAFE);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(37,99,235,0.06));
  transition: all .22s ease;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
/* Khối text bên phải icon phải có flex:1 + min-width:0 để số không bị cắt */
.hhtq-kpi-card > div:not(.hhtq-kpi-icon) {
  flex: 1 1 auto;
  min-width: 0;
}
.hhtq-kpi-card > .hhtq-kpi-icon {
  flex: 0 0 auto;
}
.hhtq-kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, transparent);
  transition: background .22s ease;
}
.hhtq-kpi-card:nth-child(1)::after { background: linear-gradient(90deg, #34D399, #10B981); }
.hhtq-kpi-card:nth-child(2)::after { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.hhtq-kpi-card:nth-child(3)::after { background: linear-gradient(90deg, #F87171, #EF4444); }
.hhtq-kpi-card:nth-child(4)::after { background: linear-gradient(90deg, #60A5FA, #3B82F6); }
.hhtq-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37,99,235,0.12);
  border-color: var(--primary-200, #BFDBFE);
}
.hhtq-kpi-card:last-child { border-right: none; }

/* KPI Icon */
.hhtq-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.hhtq-kpi-icon.hhtq-green { background: linear-gradient(135deg, #34D399, #10B981); color: #fff; }
.hhtq-kpi-icon.hhtq-orange { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #fff; }
.hhtq-kpi-icon.hhtq-red { background: linear-gradient(135deg, #F87171, #EF4444); color: #fff; }
.hhtq-kpi-icon.hhtq-blue { background: linear-gradient(135deg, #60A5FA, #3B82F6); color: #fff; }
.hhtq-kpi-icon.hhtq-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; }

/* Hàng "Công nợ & Tồn kho" — top border màu theo từng card */
.hhtq-kpi-grid-debt .hhtq-kpi-card:nth-child(1)::after { background: linear-gradient(90deg, #F87171, #EF4444); }
.hhtq-kpi-grid-debt .hhtq-kpi-card:nth-child(2)::after { background: linear-gradient(90deg, #A78BFA, #7C3AED); }
.hhtq-kpi-grid-debt .hhtq-kpi-card:nth-child(3)::after { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.hhtq-kpi-grid-debt .hhtq-kpi-card:nth-child(4)::after { background: linear-gradient(90deg, #60A5FA, #3B82F6); }

/* Hàng "Tài chính & Lợi nhuận" — top border + nhấn nổi cho card Tài Chính */
.hhtq-kpi-grid-profit .hhtq-kpi-card:nth-child(1)::after { background: linear-gradient(90deg, #6366F1, #4F46E5); height: 4px; }
.hhtq-kpi-grid-profit .hhtq-kpi-card:nth-child(1) { background: linear-gradient(180deg, #EEF2FF 0%, #fff 60%); }
.hhtq-kpi-grid-profit .hhtq-kpi-card:nth-child(2)::after,
.hhtq-kpi-grid-profit .hhtq-kpi-card:nth-child(3)::after,
.hhtq-kpi-grid-profit .hhtq-kpi-card:nth-child(4)::after { background: linear-gradient(90deg, #34D399, #10B981); }

/* Chấm xanh nhấp nháy cạnh tiêu đề "Tài chính & Lợi nhuận" */
.hhtq-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
  animation: hhtq-pulse 1.6s ease-out infinite;
}
@keyframes hhtq-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129, 0); }
}

/* KPI Text */
.hhtq-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hhtq-kpi-value {
  font-size: clamp(14px, 1.35vw, 21px);
  font-weight: 800;
  color: var(--text-primary, #0F172A);
  line-height: 1.15;
  font-family: 'JetBrains Mono', 'Nunito', monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
/* 2 hàng KPI số to (Công nợ & Tài chính) — text dài hơn, ép font nhỏ hơn 1 bậc để vừa khít */
.hhtq-kpi-grid-debt .hhtq-kpi-value,
.hhtq-kpi-grid-profit .hhtq-kpi-value {
  font-size: clamp(13px, 1.18vw, 19px);
}
.hhtq-kpi-grid-debt .hhtq-kpi-icon,
.hhtq-kpi-grid-profit .hhtq-kpi-icon {
  width: 38px; height: 38px;
  font-size: 18px;
}
.hhtq-kpi-grid-debt .hhtq-kpi-card,
.hhtq-kpi-grid-profit .hhtq-kpi-card {
  padding: 14px 12px;
  gap: 10px;
}
.hhtq-kpi-sub {
  font-size: 11px;
  color: var(--text-muted, #94A3B8);
  margin-top: 3px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chart Box */
.hhtq-chart-box {
  background: #fff;
  border: 1px solid var(--border-light, #DBEAFE);
  border-radius: var(--radius-sm, 10px);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(37,99,235,0.06));
  transition: box-shadow .22s ease;
}
.hhtq-chart-box:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,0.1);
}
.hhtq-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hhtq-chart-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}
.hhtq-dt-total {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary, #2563EB);
  font-family: 'JetBrains Mono', 'Nunito', monospace;
  letter-spacing: -0.02em;
}
.hhtq-chart-controls { display: flex; align-items: center; gap: 8px; }
.hhtq-type-toggle {
  display: flex;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 8px;
  overflow: hidden;
  background: var(--primary-50, #EFF6FF);
}
.hhtq-type-btn {
  padding: 5px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted, #94A3B8);
  font-size: 14px;
  transition: all .15s ease;
}
.hhtq-type-btn:hover { color: var(--primary, #2563EB); }
.hhtq-type-btn.active {
  background: var(--primary, #2563EB);
  color: #fff;
  box-shadow: 0 1px 4px rgba(37,99,235,0.3);
}
.hhtq-select {
  padding: 5px 10px;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary, #0F172A);
  cursor: pointer;
  background: #fff;
  font-weight: 500;
  transition: border-color .2s, box-shadow .2s;
}
.hhtq-select:focus {
  border-color: var(--primary, #2563EB);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  outline: none;
}

/* Chart Tabs */
.hhtq-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-light, #DBEAFE);
  margin-bottom: 16px;
}
.hhtq-tab {
  padding: 7px 18px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #94A3B8);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .18s ease;
}
.hhtq-tab:hover { color: var(--primary-light, #3B82F6); }
.hhtq-tab.active {
  color: var(--primary, #2563EB);
  border-bottom-color: var(--primary, #2563EB);
}
.hhtq-chart-wrap { position: relative; }

/* Date range */
.hhtq-date-range {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #475569);
}
.hhtq-date-range input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  transition: border-color .2s;
}
.hhtq-date-range input[type="date"]:focus {
  border-color: var(--primary, #2563EB);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.hhtq-date-range button {
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--primary, #2563EB), var(--primary-dark, #1D4ED8));
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: filter .15s;
}
.hhtq-date-range button:hover { filter: brightness(1.1); }

/* Top Grid */
.hhtq-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.hhtq-top-box {
  background: #fff;
  border: 1px solid var(--border-light, #DBEAFE);
  border-radius: var(--radius-sm, 10px);
  padding: 18px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(37,99,235,0.06));
  transition: box-shadow .22s ease, transform .22s ease;
}
.hhtq-top-box:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,0.1);
  transform: translateY(-1px);
}
.hhtq-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.hhtq-top-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  letter-spacing: -0.01em;
}
.hhtq-top-controls { display: flex; gap: 6px; }
.hhtq-select-sm {
  padding: 4px 8px;
  border: 1px solid var(--border, #BFDBFE);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-primary, #0F172A);
  cursor: pointer;
  background: #fff;
  font-weight: 500;
  transition: border-color .2s;
}
.hhtq-select-sm:focus {
  border-color: var(--primary, #2563EB);
  outline: none;
}

/* Alerts */
.hhtq-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.6;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hhtq-alert:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.hhtq-alert-warning {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FCD34D;
  color: #92400E;
}
.hhtq-alert-orange {
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border: 1px solid #FDBA74;
  color: #9A3412;
}
.hhtq-alert strong { color: var(--primary, #2563EB); font-weight: 700; }

/* Sidebar — Activity title */
.hhtq-activity-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  margin: 14px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.hhtq-activity-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--primary, #2563EB);
  border-radius: 2px;
}

/* Activity items */
.hhtq-activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  transition: background .15s ease;
}
.hhtq-activity-item:hover {
  background: rgba(37,99,235,0.04);
}
.hhtq-activity-icon {
  width: 32px; height: 32px;
  background: var(--primary-50, #EFF6FF);
  border: 1px solid var(--primary-100, #DBEAFE);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.hhtq-activity-time {
  color: var(--text-muted, #94A3B8);
  font-size: 11px;
  margin-top: 3px;
  font-weight: 500;
}
.hhtq-divider {
  border: none;
  border-top: 1px solid var(--border-light, #DBEAFE);
  margin: 0;
}
#hhtq-activity-feed {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
#hhtq-activity-feed::-webkit-scrollbar { width: 5px; }
#hhtq-activity-feed::-webkit-scrollbar-track { background: transparent; }
#hhtq-activity-feed::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
#hhtq-activity-feed::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* San pham ban table */
.hhtq-sp-ban-box {
  background: #fff;
  border: 1px solid var(--border-light, #DBEAFE);
  border-radius: var(--radius-sm, 10px);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(37,99,235,0.06));
}
.hhtq-sp-ban-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hhtq-btn-export {
  padding: 5px 14px;
  border: 1.5px solid #52c41a;
  border-radius: 6px;
  background: #f6ffed;
  color: #389e0d;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.hhtq-btn-export:hover {
  background: #52c41a;
  color: #fff;
}
.hhtq-search-input {
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  min-width: 180px;
  transition: border-color .2s;
}
.hhtq-search-input:focus { border-color: var(--primary, #2563EB); }
.hhtq-sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hhtq-sp-table thead th {
  background: #f0f5ff;
  color: var(--text-secondary, #475569);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 2px solid #DBEAFE;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.hhtq-sp-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--text-primary, #0F172A);
}
.hhtq-sp-table tbody tr:hover { background: #f0f5ff; }
.hhtq-sp-total td {
  background: #fafafa;
  border-top: 2px solid #DBEAFE;
  font-weight: 600;
}
.hhtq-profit-pos { color: #52c41a; }
.hhtq-profit-neg { color: #ff4d4f; }
#hhtq-sp-ban-table {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
#hhtq-sp-ban-table::-webkit-scrollbar { width: 5px; }
#hhtq-sp-ban-table::-webkit-scrollbar-track { background: transparent; }
#hhtq-sp-ban-table::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* Skeleton */
.hhtq-skeleton {
  background: linear-gradient(90deg, #EFF6FF 25%, #DBEAFE 50%, #EFF6FF 75%);
  background-size: 200% 100%;
  animation: hhtq-skeleton-wave 1.5s ease infinite;
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 1100px) {
  .hhtq-wrapper { grid-template-columns: 1fr; }
  .hhtq-sidebar { border-left: none; border-top: 1px solid var(--border-light, #DBEAFE); }
  .hhtq-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .hhtq-top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hhtq-kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .hhtq-main { padding: 12px; }
  .hhtq-chart-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hhtq-top-header { flex-direction: column; align-items: flex-start; }
}

/* --- Mobile: modules with edge-to-edge tab bars --- */
@media (max-width: 768px) {
  /* Hang hoa, Video: tab bar goes full-width, keep safe-area top/bottom */
  .content:has(.module-page[data-module="hang-hoa-tool"]),
  .content:has(.module-page[data-module="video-tool"]),
  .content.hh-module-active {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Module workspace: no border/radius on mobile for full-width feel */
  .module-workspace {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- Print-friendly: hide nav/sidebar --- */
@media print {
  .sidebar, .header, .menu-toggle, .overlay { display: none !important; }
  .app { display: block; }
  .main { margin: 0; }
  .content { height: auto; overflow: visible; padding: 0; }
}

/* ============================================
   KS THONG BAO MODULE — Thông báo Khách Sỉ
   ============================================ */
.kstb-container { max-width: 900px; margin: 0 auto; }
.kstb-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.kstb-btn-add {
  background: var(--primary, #4F46E5); color: #fff; border: none; padding: 10px 20px;
  border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .2s;
}
.kstb-btn-add:hover { opacity: .9; }

.kstb-card {
  background: #fff; border: 1px solid var(--border, #E2E8F0); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 12px; transition: box-shadow .2s;
}
.kstb-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.kstb-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.kstb-card-title { font-weight: 600; font-size: 15px; flex: 1; }
.kstb-status {
  font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 600;
}
.kstb-status-draft { background: #FEF3C7; color: #92400E; }
.kstb-status-published { background: #D1FAE5; color: #065F46; }
.kstb-card-meta {
  display: flex; gap: 16px; font-size: 13px; color: var(--text-secondary, #64748B);
  margin-bottom: 10px;
}
.kstb-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kstb-btn-action {
  border: 1px solid var(--border, #E2E8F0); background: #fff; padding: 6px 12px;
  border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .2s;
}
.kstb-btn-action:hover { background: #F8FAFC; }
.kstb-btn-publish { color: #059669; border-color: #059669; font-weight: 600; }
.kstb-btn-publish:hover { background: #ECFDF5; }
.kstb-btn-delete { color: #DC2626; }
.kstb-btn-delete:hover { background: #FEF2F2; border-color: #DC2626; }

/* Modal */
.kstb-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.kstb-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 700px;
  max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.kstb-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border, #E2E8F0);
}
.kstb-modal-header h3 { margin: 0; font-size: 17px; }
.kstb-modal-close {
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: var(--text-secondary); line-height: 1;
}
.kstb-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.kstb-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; margin-top: 14px; }
.kstb-label:first-child { margin-top: 0; }
.kstb-input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px; font-size: 14px; box-sizing: border-box;
}
.kstb-textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px; font-size: 13px; font-family: monospace; resize: vertical;
  box-sizing: border-box; min-height: 200px;
}
.kstb-btn-preview {
  margin-top: 10px; background: none; border: 1px solid var(--border, #E2E8F0);
  padding: 6px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
  color: var(--primary, #4F46E5);
}
.kstb-preview {
  margin-top: 12px; padding: 16px; background: #F8FAFC; border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px; font-size: 14px; line-height: 1.6; overflow: auto; max-height: 300px;
}
.kstb-preview img { max-width: 100%; height: auto; }
.kstb-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px;
  border-top: 1px solid var(--border, #E2E8F0);
}
.kstb-btn-cancel {
  background: #F1F5F9; color: var(--text-secondary); border: none; padding: 10px 20px;
  border-radius: 10px; font-weight: 600; cursor: pointer;
}
.kstb-btn-save {
  background: var(--primary, #4F46E5); color: #fff; border: none; padding: 10px 24px;
  border-radius: 10px; font-weight: 600; cursor: pointer;
}
.kstb-btn-save:hover { opacity: .9; }

@media (max-width: 640px) {
  .kstb-modal { max-width: 100%; margin: 10px; border-radius: 12px; }
  .kstb-card-meta { flex-direction: column; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   CTKM Modal — Chương trình Khuyến mại
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay: fade-in backdrop ── */
#ctkm-overlay {
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ctkmFadeIn .25s ease;
  align-items: center !important;
  padding: 24px !important;
}
@keyframes ctkmFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal container: slide-up + polish ── */
#ctkm-overlay > div:first-child {
  border-radius: 16px !important;
  box-shadow:
    0 25px 60px rgba(0,0,0,.18),
    0 8px 24px rgba(0,0,0,.08) !important;
  border: 1px solid rgba(255,255,255,.12);
  animation: ctkmSlideUp .3s cubic-bezier(.16,1,.3,1);
  max-width: 880px !important;
}
@keyframes ctkmSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header: gradient accent ── */
#ctkm-overlay .hh-modal-hdr {
  background: linear-gradient(135deg, #FFF8F0 0%, #FFF3E0 100%) !important;
  border-bottom: 2px solid #FFE0B2 !important;
  padding: 18px 24px !important;
  border-radius: 16px 16px 0 0;
}
#ctkm-overlay .hh-modal-hdr h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #E65100, #FF6D00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}
#ctkm-overlay .hh-modal-hdr button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(230,81,0,.08) !important;
  border: 1px solid rgba(230,81,0,.12) !important;
  color: #BF360C !important;
  font-size: 20px !important;
  transition: all .2s ease !important;
  display: flex; align-items: center; justify-content: center;
}
#ctkm-overlay .hh-modal-hdr button:hover {
  background: rgba(230,81,0,.15) !important;
  transform: rotate(90deg);
}

/* ── Tabs: polished tab bar ── */
#ctkm-tab-info,
#ctkm-tab-scope {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  transition: all .2s ease !important;
  border-bottom: 2.5px solid transparent !important;
  margin-bottom: -1px;
  border-radius: 0;
  position: relative;
  user-select: none;
}
#ctkm-tab-info:hover,
#ctkm-tab-scope:hover {
  color: #E65100 !important;
  background: rgba(230,81,0,.04) !important;
}
#ctkm-tab-info.active,
#ctkm-tab-scope[style*="border-bottom: 2px solid"] {
  color: #E65100 !important;
  border-bottom-color: #E65100 !important;
}

/* ── Body: scrollable content ── */
#ctkm-body {
  padding: 24px !important;
  background: #FAFBFC !important;
}
#ctkm-panel-info,
#ctkm-panel-scope {
  animation: ctkmContentIn .25s ease forwards;
}
@keyframes ctkmContentIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section cards inside panels ── */
#ctkm-panel-info > div[style*="border:1.5px"],
#ctkm-panel-info > div[style*="border: 1.5px"] {
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  transition: box-shadow .2s ease;
}
#ctkm-panel-info > div[style*="border:1.5px"]:hover,
#ctkm-panel-info > div[style*="border: 1.5px"]:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}

/* Section titles inside cards */
#ctkm-panel-info div[style*="font-size:13px"][style*="font-weight:700"],
#ctkm-panel-scope div[style*="font-size:13px"][style*="font-weight:700"] {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Grid row for name + desc */
#ctkm-panel-info > div[style*="grid-template-columns"] {
  gap: 16px !important;
  margin-bottom: 16px !important;
  background: #fff;
  padding: 18px 20px !important;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ── Form inputs ── */
#ctkm-overlay input[type="text"],
#ctkm-overlay input[type="number"],
#ctkm-overlay input[type="search"],
#ctkm-overlay input[type="datetime-local"],
#ctkm-overlay textarea,
#ctkm-overlay select,
#ctkm-name,
#ctkm-desc,
#ctkm-start,
#ctkm-end,
#ctkm-type,
#ctkm-note {
  border: 1.5px solid #D1D5DB !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  color: #111827 !important;
  background: #fff !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
  outline: none !important;
}
#ctkm-overlay input:focus,
#ctkm-overlay textarea:focus,
#ctkm-overlay select:focus {
  border-color: #E65100 !important;
  box-shadow: 0 0 0 3px rgba(230,81,0,.12) !important;
}
#ctkm-overlay input::placeholder,
#ctkm-overlay textarea::placeholder {
  color: #9CA3AF !important;
  font-weight: 400 !important;
}

/* Labels */
#ctkm-panel-info label[style*="font-size:12px"][style*="font-weight:600"],
#ctkm-panel-scope label[style*="font-size:12px"][style*="font-weight:600"] {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}

/* ── Tier rows ── */
#ctkm-panel-info div[style*="background:#FAFAFA"][style*="border-radius:8px"] {
  background: #fff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#ctkm-panel-info div[style*="background:#FAFAFA"][style*="border-radius:8px"]:hover {
  border-color: #FFB74D !important;
  box-shadow: 0 1px 4px rgba(230,81,0,.08);
}

/* Tier number badge */
#ctkm-panel-info div[style*="background:#FAFAFA"] > span:first-child {
  background: linear-gradient(135deg, #E65100, #FF6D00) !important;
  color: #fff !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0;
}

/* Tier remove button */
#ctkm-panel-info div[style*="background:#FAFAFA"] > button:last-child {
  color: #CBD5E1 !important;
  font-size: 18px !important;
  transition: color .15s ease !important;
}
#ctkm-panel-info div[style*="background:#FAFAFA"] > button:last-child:hover {
  color: #EF4444 !important;
}

/* ── Add tier button ── */
#ctkm-panel-info button[style*="border:1px dashed #1890ff"] {
  border: 1.5px dashed #E65100 !important;
  color: #E65100 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  transition: all .2s ease !important;
  background: rgba(230,81,0,.02) !important;
}
#ctkm-panel-info button[style*="border:1px dashed #1890ff"]:hover {
  background: rgba(230,81,0,.06) !important;
  border-style: solid !important;
  transform: translateY(-1px);
}

/* ── Gift tags ── */
#ctkm-panel-info span[style*="background:#FFF3E0"][style*="border:1px solid #FFB74D"] {
  background: linear-gradient(135deg, #FFF8F0, #FFF3E0) !important;
  border: 1px solid #FFCC80 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
#ctkm-panel-info span[style*="background:#FFF3E0"] span[style*="cursor:pointer"] {
  color: #BF360C !important;
  font-weight: 700 !important;
  transition: color .15s !important;
}
#ctkm-panel-info span[style*="background:#FFF3E0"] span[style*="cursor:pointer"]:hover {
  color: #D32F2F !important;
}

/* Add gift button */
#ctkm-panel-info button[style*="border:1px dashed #E65100"] {
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-weight: 600 !important;
  transition: all .15s ease !important;
}
#ctkm-panel-info button[style*="border:1px dashed #E65100"]:hover {
  background: rgba(230,81,0,.06) !important;
  border-style: solid !important;
}

/* ── Radio & Checkbox ── */
#ctkm-overlay input[type="radio"],
#ctkm-overlay input[type="checkbox"] {
  accent-color: #E65100;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
#ctkm-overlay label[style*="cursor:pointer"] {
  transition: color .15s ease !important;
}
#ctkm-overlay label[style*="cursor:pointer"]:hover {
  color: #E65100 !important;
}

/* ── Footer ── */
#ctkm-overlay .hh-modal-footer {
  background: #fff !important;
  border-top: 1px solid #E5E7EB !important;
  padding: 16px 24px !important;
  border-radius: 0 0 16px 16px;
}

/* Save button (Lưu) */
#ctkm-overlay .hh-modal-footer .hh-btn-p[style*="background:#E65100"] {
  background: linear-gradient(135deg, #E65100, #FF6D00) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 28px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 3px 10px rgba(230,81,0,.3) !important;
  transition: all .2s ease !important;
  letter-spacing: .2px;
}
#ctkm-overlay .hh-modal-footer .hh-btn-p[style*="background:#E65100"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(230,81,0,.4) !important;
}
#ctkm-overlay .hh-modal-footer .hh-btn-p[style*="background:#E65100"]:active {
  transform: scale(.97);
}

/* Cancel button (Bỏ qua) */
#ctkm-overlay .hh-modal-footer .hh-btn-o {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #64748B !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all .2s ease !important;
}
#ctkm-overlay .hh-modal-footer .hh-btn-o:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

/* ── Scope tab: Customer groups & Products ── */
#ctkm-panel-scope > div[style*="border:1.5px"],
#ctkm-panel-scope > div[style*="border: 1.5px"] {
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* Product search dropdown */
#ctkm-panel-scope div[style*="position:absolute"][style*="z-index"] {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;
  border: 1px solid #E5E7EB !important;
}
#ctkm-panel-scope div[style*="position:absolute"] > div[style*="cursor:pointer"]:hover {
  background: #FFF8F0 !important;
}

/* Product table */
#ctkm-panel-scope table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
#ctkm-panel-scope th {
  background: #F8FAFC !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: #64748B !important;
  padding: 8px 12px !important;
}
#ctkm-panel-scope td {
  padding: 8px 12px !important;
}
#ctkm-panel-scope tr:hover td {
  background: #FFF8F0 !important;
}

/* ── CTKM list section ── */
#ctkm-list-section {
  background: #FAFBFC !important;
  border-top: 2px solid #FFE0B2 !important;
  padding: 20px !important;
}
#ctkm-list-section h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* CTKM list table */
#ctkm-list-container table {
  border-collapse: collapse;
  width: 100%;
}
#ctkm-list-container th {
  background: #F8FAFC;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #64748B;
  border-bottom: 2px solid #E5E7EB;
}
#ctkm-list-container tr:hover td {
  background: #FFF8F0;
}

/* ── CTKM toolbar buttons ── */
button[onclick="hhOpenPromo()"] {
  border-color: #E65100 !important;
  color: #E65100 !important;
  font-weight: 700 !important;
  transition: all .2s ease !important;
}
button[onclick="hhOpenPromo()"]:hover {
  background: #FFF3E0 !important;
  border-color: #E65100 !important;
  box-shadow: 0 2px 6px rgba(230,81,0,.15);
  transform: translateY(-1px);
}
#ctkm-list-toggle-btn {
  border-color: #E65100 !important;
  color: #E65100 !important;
  transition: all .2s ease !important;
}
#ctkm-list-toggle-btn:hover {
  background: #FFF3E0 !important;
  box-shadow: 0 2px 6px rgba(230,81,0,.15);
}

/* ── Responsive: CTKM modal ── */
@media (max-width: 768px) {
  #ctkm-overlay {
    padding: 8px !important;
    align-items: flex-end !important;
  }
  #ctkm-overlay > div:first-child {
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }
  #ctkm-body {
    padding: 16px !important;
  }
  #ctkm-panel-info > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== KS Dashboard Tab System ===== */
.kstb-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid #e2e8f0; padding-bottom: 0;
}
.kstb-tab {
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  border: none; background: none; cursor: pointer;
  color: #64748b; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .2s; border-radius: 8px 8px 0 0;
}
.kstb-tab:hover { color: #334155; background: #f8fafc; }
.kstb-tab-active { color: #2563eb; border-bottom-color: #2563eb; background: #eff6ff; }

/* Summary Cards */
.kstb-dash-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px;
}
.kstb-dash-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 18px 16px; text-align: center;
}
.kstb-dash-card-icon { font-size: 26px; margin-bottom: 8px; }
.kstb-dash-card-value { font-size: 28px; font-weight: 800; color: #1e293b; }
.kstb-dash-card-label { font-size: 12px; color: #64748b; margin-top: 4px; font-weight: 500; }

/* Chart */
.kstb-dash-chart-wrap {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 20px; margin-bottom: 24px;
}
.kstb-dash-chart-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.kstb-dash-period-btns { display: flex; gap: 4px; }
.kstb-period-btn {
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
  cursor: pointer; color: #64748b; transition: all .15s;
}
.kstb-period-btn:hover { border-color: #93c5fd; color: #2563eb; }
.kstb-period-active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* Customer Table */
.kstb-dash-table-wrap {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 20px; margin-bottom: 24px;
}
.kstb-dash-table-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.kstb-dash-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.kstb-dash-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.kstb-dash-table th {
  text-align: left; padding: 10px 12px; font-weight: 600;
  color: #64748b; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.kstb-dash-table td {
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
  color: #334155; vertical-align: middle;
}
.kstb-dash-table tr:hover { background: #f8fafc; }
.kstb-td-name { font-weight: 600; }

/* Badges */
.kstb-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.kstb-badge-active { background: #D1FAE5; color: #065F46; }
.kstb-badge-dormant { background: #FEE2E2; color: #991B1B; }
.kstb-badge-never { background: #FEF3C7; color: #92400E; }
.kstb-badge-cart { background: #DBEAFE; color: #1E40AF; }

/* Pagination */
.kstb-dash-pagination {
  display: flex; gap: 4px; justify-content: center; margin-top: 16px;
}
.kstb-page-btn {
  width: 32px; height: 32px; border: 1px solid #e2e8f0;
  background: #fff; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #64748b;
}
.kstb-page-btn:hover { border-color: #93c5fd; color: #2563eb; }
.kstb-page-active { background: #2563eb; color: #fff; border-color: #2563eb; }

/* Cart badge clickable */
.kstb-cart-clickable { cursor: pointer; transition: all .15s; }
.kstb-cart-clickable:hover { background: #93C5FD; transform: scale(1.1); }

/* Cart popup table */
.kstb-cart-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kstb-cart-table th {
  text-align: left; padding: 10px 16px; font-weight: 600;
  color: #64748b; font-size: 11px; text-transform: uppercase;
  background: #f8fafc; border-bottom: 2px solid #e2e8f0;
}
.kstb-cart-table td { padding: 10px 16px; border-bottom: 1px solid #f1f5f9; }
.kstb-cart-table tr:hover { background: #f8fafc; }
.kstb-cart-table tfoot td { border-top: 2px solid #e2e8f0; border-bottom: none; background: #f8fafc; }
.kstb-cart-product-name { font-weight: 600; color: #1e293b; }
.kstb-cart-product-unit { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* Filter Grid — bộ lọc dạng ô nổi bật */
.kstb-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}
.kstb-filter-item {
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kstb-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0;
}
.kstb-filter-control {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow .2s;
}
.kstb-filter-control:focus {
  box-shadow: 0 0 0 2px rgba(99,102,241,.3);
}
/* Màu từng ô */
.kstb-filter-search { background: #EEF2FF; }
.kstb-filter-search .kstb-filter-label { color: #4338CA; }
.kstb-filter-search .kstb-filter-control { background: #fff; border: 1px solid #C7D2FE; }

.kstb-filter-status { background: #F0FDF4; }
.kstb-filter-status .kstb-filter-label { color: #15803D; }
.kstb-filter-status .kstb-filter-control { background: #fff; border: 1px solid #BBF7D0; }

.kstb-filter-group { background: #FFF7ED; }
.kstb-filter-group .kstb-filter-label { color: #C2410C; }
.kstb-filter-group .kstb-filter-control { background: #fff; border: 1px solid #FED7AA; }

.kstb-filter-cart { background: #EFF6FF; }
.kstb-filter-cart .kstb-filter-label { color: #1D4ED8; }
.kstb-filter-cart .kstb-filter-control { background: #fff; border: 1px solid #BFDBFE; }

.kstb-filter-sort { background: #FAF5FF; }
.kstb-filter-sort .kstb-filter-label { color: #7E22CE; }
.kstb-filter-sort .kstb-filter-control { background: #fff; border: 1px solid #E9D5FF; }

/* Responsive */
@media (max-width: 768px) {
  .kstb-dash-cards { grid-template-columns: repeat(2, 1fr); }
  .kstb-dash-table-wrap { overflow-x: auto; }
  .kstb-dash-table { min-width: 850px; }
  .kstb-filter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 12px 12px;
  }
  .kstb-filter-search {
    grid-column: 1 / -1;
  }
}

/* ─────────────────────────────────────────────
   AI Mini Chat (added 2026-05-23)
   ───────────────────────────────────────────── */
.ai-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #4f9bf7, #2d7de8);
  border: none; cursor: pointer; z-index: 10001;
  box-shadow: 0 4px 16px rgba(45,125,232,0.4);
  font-size: 28px; color: #fff;
  transition: transform 0.18s ease;
  display: flex; align-items: center; justify-content: center;
}
.ai-fab:hover { transform: scale(1.06); }
.ai-fab.ai-hidden { display: none; }

.ai-panel {
  position: fixed; bottom: 96px; right: 24px;
  width: 380px; height: 560px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  z-index: 9999; display: flex; flex-direction: column;
  overflow: hidden;
  font-family: 'Nunito', system-ui, sans-serif;
}
.ai-panel.ai-hidden { display: none; }

.ai-panel-header {
  background: linear-gradient(135deg, #4f9bf7, #2d7de8);
  color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.ai-panel-title { font-weight: 700; font-size: 15px; }
.ai-panel-actions { display: flex; gap: 4px; }
.ai-btn-icon {
  background: rgba(255,255,255,0.18); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  font-size: 13px; line-height: 1;
}
.ai-btn-icon:hover { background: rgba(255,255,255,0.32); }

.ai-panel-body {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  background: #f6f8fb; display: flex; flex-direction: column; gap: 8px;
}
.ai-empty { color: #8a9bb3; text-align: center; padding: 32px 16px; font-size: 13px; }

.ai-msg {
  max-width: 88%; padding: 9px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.45; word-wrap: break-word;
  white-space: pre-wrap;
}
.ai-msg-user {
  align-self: flex-end; background: #2d7de8; color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-bot {
  align-self: flex-start; background: #fff; color: #1f2d3d;
  border: 1px solid #e3eaf3; border-bottom-left-radius: 4px;
}
.ai-msg-system {
  align-self: center; background: #fff8e0; color: #6b5a16;
  font-size: 12px; padding: 5px 10px;
}

.ai-panel-input {
  display: flex; gap: 6px; padding: 10px;
  border-top: 1px solid #e3eaf3; background: #fff;
}
.ai-input-field {
  flex: 1; padding: 8px 12px; border: 1px solid #d4dde8;
  border-radius: 18px; font-family: inherit;
  /* CRITICAL: phải >= 16px nếu không iOS Safari sẽ auto-zoom khi focus */
  font-size: 16px; line-height: 1.35;
  /* Auto-grow (JS xử lý), max 160px ≈ 7 dòng */
  resize: none; max-height: 160px; min-height: 38px; outline: none;
  overflow-y: hidden;
  transition: height 0.08s ease-out;
  -webkit-appearance: none;
}
.ai-input-field:focus { border-color: #2d7de8; }
.ai-send-btn, .ai-stop-btn {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  cursor: pointer; font-size: 18px; color: #fff; flex-shrink: 0;
  touch-action: manipulation;
}
.ai-send-btn { background: #2d7de8; }
.ai-stop-btn { background: #d97757; }
.ai-stop-btn.ai-hidden { display: none; }
.ai-btn-icon { touch-action: manipulation; }
.ai-fab { touch-action: manipulation; }

@media (max-width: 640px) {
  /* Tránh bottom-nav: dùng safe-area-inset + offset cao hơn */
  .ai-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    right: 16px; width: 54px; height: 54px; font-size: 26px;
    z-index: 10001;
  }
  /* Mobile panel: KHÔNG padding container (gây vỡ layout flex).
     An toàn safe-area cho header (notch) + input (home indicator) riêng. */
  .ai-panel {
    inset: 0; width: 100%; height: 100%; height: 100dvh;
    border-radius: 0; z-index: 10002;
  }
  .ai-panel-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .ai-panel-input {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ai-panel-body {
    -webkit-overflow-scrolling: touch;
  }
  /* Nút action header to hơn 1 chút cho ngón tay bấm dễ */
  .ai-btn-icon { width: 36px; height: 36px; font-size: 17px; }
  /* Input mobile: padding to + font-size 16px (đã có toàn cục, kế thừa) */
  .ai-input-field { padding: 10px 14px; }
  .ai-send-btn, .ai-stop-btn { width: 44px; height: 44px; font-size: 20px; }
}
/* End AI Mini Chat */

/* AI Mini Chat — markdown inline elements (added 2026-05-23) */
.ai-msg-bot strong { font-weight: 700; color: #1f2d3d; }
.ai-msg-bot em { font-style: italic; }
.ai-msg-bot code {
  background: #eef2f7; padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: #2d3a4f;
}
.ai-msg-bot a {
  color: #2d7de8; text-decoration: underline; word-break: break-word;
}
.ai-msg-bot a:hover { color: #1b5fbd; }

/* AI Mini Chat — markdown block elements: tables, lists, headings (2026-05-30) */
.ai-msg-bot .ai-md-tablewrap {
  margin: 8px 0;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,40,80,0.04);
}
.ai-msg-bot .ai-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: normal;
}
.ai-msg-bot .ai-md-table th,
.ai-msg-bot .ai-md-table td {
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef2f7;
  word-break: break-word;
  white-space: normal;
}
.ai-msg-bot .ai-md-table thead th {
  background: linear-gradient(180deg, #eef4fb, #e3edf8);
  font-weight: 700;
  color: #1f2d3d;
  border-bottom: 1.5px solid #cfdbeb;
  white-space: nowrap;
  position: sticky; top: 0;
}
.ai-msg-bot .ai-md-table tbody tr:nth-child(even) td { background: #fafbfc; }
.ai-msg-bot .ai-md-table tbody tr:last-child td { border-bottom: none; }
.ai-msg-bot .ai-md-table tbody tr:hover td { background: #f3f7fc; }

.ai-msg-bot .ai-md-list {
  margin: 4px 0 4px 4px;
  padding-left: 18px;
}
.ai-msg-bot .ai-md-list li { margin: 2px 0; }

.ai-msg-bot .ai-md-h2,
.ai-msg-bot .ai-md-h3,
.ai-msg-bot .ai-md-h4 {
  margin: 8px 0 4px;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.3;
}
.ai-msg-bot .ai-md-h2 { font-size: 15px; }
.ai-msg-bot .ai-md-h3 { font-size: 14px; }
.ai-msg-bot .ai-md-h4 { font-size: 13.5px; color: #2d7de8; }

/* AI Mini Chat — KH theme (mode customer-facing tại /module/khach-si/app) (2026-05-31) */
.ai-panel-kh .ai-panel-header {
  background: linear-gradient(135deg, #ff8a65, #f06292);
}
.ai-fab-kh {
  background: linear-gradient(135deg, #ff8a65, #f06292) !important;
  box-shadow: 0 4px 16px rgba(240, 98, 146, 0.42) !important;
}
.ai-panel-kh .ai-msg-user {
  background: #f06292;
}
.ai-panel-kh .ai-send-btn {
  background: #f06292;
}
.ai-panel-kh .ai-input-field:focus {
  border-color: #f06292;
}
.ai-panel-kh .ai-msg-bot a {
  color: #f06292;
}
.ai-panel-kh .ai-md-table thead th {
  background: linear-gradient(180deg, #ffe9e2, #ffd6cc);
  border-bottom-color: #f06292;
}
.ai-panel-kh .ai-md-h4 {
  color: #f06292;
}

/* AI Mini Chat — chip preview ảnh đính kèm (internal bot xanh).
   Trước đây rule này chỉ có trong modules/ai-mini-chat.css (KH bot hồng) nên
   bot nội bộ thiếu → ảnh preview hiện kích thước gốc tràn full màn hình. */
.ai-image-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin: 4px 12px;
  background: #f1f5f9; border-radius: 10px; font-size: 12px;
}
.ai-image-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.ai-image-chip span { flex: 1; color: #475569; }
.ai-image-chip button {
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: #e2e8f0; color: #475569; cursor: pointer; font-size: 12px;
  flex: 0 0 auto;
}
.ai-image-chip button:hover { background: #cbd5e1; }

/* AI Mini Chat — image rendering (markdown ![]() + auto-link URL ảnh) (2026-05-30) */
.ai-msg-bot .ai-md-imgwrap {
  display: block;
  margin: 6px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #d9e3ef;
  background: #f4f7fb;
  max-width: 100%;
  width: max-content;
  line-height: 0;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-msg-bot .ai-md-imgwrap:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20,40,80,0.10);
}
.ai-msg-bot .ai-md-img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: #f4f7fb;
}
/* Ảnh đứng riêng trong <li> bullet — bỏ marker mặc định cho gọn */
.ai-msg-bot .ai-md-list li:has(> .ai-md-imgwrap:only-child) {
  list-style: none;
  margin-left: -18px;
}

/* AI Mini Chat — typing indicator "Trợ lý đang trả lời..." */
.ai-msg-bot.ai-typing {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; max-width: max-content; align-self: flex-start;
}
.ai-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2d7de8; opacity: 0.5;
  animation: ai-typing-bounce 1.4s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
.ai-typing-label {
  font-size: 12px; color: #6b7c93; font-style: italic;
}
@keyframes ai-typing-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* ============================================================
   MODULE ĐĂNG BÀI ZALO — giao diện mobile-app (db-*)
   Desktop: layout card thoáng. Mobile (<=640px): bottom tab bar,
   card xếp dọc, vùng chạm >=44px, search dính.
   ============================================================ */
.db-root { --db-pri:#8B5CF6; --db-pri-d:#7c3aed; --db-pri-50:#f5f3ff; --db-pri-100:#ede9fe;
  --db-ink:#111827; --db-mut:#9ca3af; --db-line:#eef0f4; --db-ok:#16a34a; --db-warn:#d97706; --db-danger:#dc2626;
  --db-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.06); }
.db-root *{ -webkit-tap-highlight-color:transparent; }
/* Bỏ padding 24px mặc định của .module-workspace — db-head/db-content tự kiểm soát lề,
   tránh lồng padding 3 lớp (content + workspace + db-content) gây phí chiều ngang */
.module-workspace.db-root{ padding:0; }

.db-head{ padding:20px 24px 0; }
.db-title{ font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;display:flex;align-items:center;gap:8px; }
.db-subtitle{ color:#6b7280;margin:0 0 14px;font-size:14px; }

/* ---- Tabs (desktop pills) ---- */
.db-tabs{ display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
.db-tab{ display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border:none;border-radius:12px;
  background:#f3f4f6;color:#374151;font-weight:600;cursor:pointer;font-size:14px;transition:.18s;position:relative; }
.db-tab .db-ti{ font-size:16px;line-height:1; }
.db-tab:hover{ background:#e9eaee; }
.db-tab.active{ background:var(--db-pri);color:#fff;box-shadow:0 4px 12px rgba(139,92,246,.3); }

.db-content{ padding:0 24px 28px; }

/* ---- Search ---- */
.db-search{ display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--db-line);
  border-radius:14px;padding:11px 14px;box-shadow:var(--db-shadow);margin-bottom:6px; }
.db-search .db-sic{ font-size:17px;color:var(--db-mut); }
.db-search input{ border:none;outline:none;flex:1;font-size:15px;background:transparent;min-width:0; }

/* ---- Section header ---- */
.db-sech{ display:flex;align-items:center;gap:10px;margin:18px 2px 10px; }
.db-sech h3{ margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em; }
.db-sech .db-sub{ color:#6b7280;font-size:13px;margin:2px 0 0;font-weight:400; }
.db-count{ background:var(--db-pri-100);color:var(--db-pri-d);font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px; }
.db-sech .db-spacer{ flex:1; }

/* ---- Product card ---- */
.db-list{ display:flex;flex-direction:column;gap:11px; }
.db-pcard{ background:#fff;border:1px solid var(--db-line);border-radius:16px;padding:13px;box-shadow:var(--db-shadow); }
.db-pc-top{ display:flex;gap:12px;align-items:center; }
.db-thumb{ width:54px;height:54px;border-radius:13px;flex:none;object-fit:cover;background:linear-gradient(135deg,#ede9fe,#dbeafe);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#a78bfa; }
.db-thumb.sm{ width:44px;height:44px;border-radius:11px;font-size:18px; }
.db-thumb.xs{ width:34px;height:34px;border-radius:9px;font-size:15px; }
.db-pc-body{ flex:1;min-width:0; }
.db-pc-name{ font-weight:700;font-size:14.5px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.db-pc-name.one{ -webkit-line-clamp:1; }
.db-pc-code{ color:var(--db-mut);font-size:12px;margin-top:3px; }
.db-chips{ display:flex;flex-wrap:wrap;gap:6px;margin-top:7px; }
.db-chip{ font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:8px;background:#f3f4f6;color:#4b5563;display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
.db-chip.src{ background:var(--db-pri-50);color:var(--db-pri-d); }
.db-chip.stock{ background:#ecfdf5;color:#047857; }
.db-chip.warn{ background:#fef2f2;color:#b91c1c; }

/* ---- Buttons ---- */
.db-actions{ display:flex;gap:9px;margin-top:12px; }
.db-btn{ border:none;border-radius:12px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;transition:.15s;white-space:nowrap; }
.db-btn:active{ transform:scale(.97); }
.db-btn.grow{ flex:1; }
.db-btn.ok{ background:var(--db-ok);color:#fff;box-shadow:0 4px 12px rgba(22,163,74,.26); }
.db-btn.pri{ background:var(--db-pri);color:#fff;box-shadow:0 4px 12px rgba(139,92,246,.26); }
.db-btn.ghost{ background:#fff;color:#374151;border:1.5px solid #e5e7eb; }
.db-btn.danger{ background:#fff;color:var(--db-danger);border:1.5px solid #fecaca; }
.db-btn.icon{ flex:0 0 52px;padding:10px; }
.db-btn.sm{ min-height:40px;padding:8px 14px;font-size:13px;border-radius:11px; }

/* ---- Empty state ---- */
.db-empty{ padding:26px 20px;text-align:center;color:var(--db-mut);background:#fafafa;border-radius:14px;font-size:14px;line-height:1.5; }

/* ---- Auto category card ---- */
.db-acard{ background:#fff;border:1px solid var(--db-line);border-left:4px solid var(--db-pri);border-radius:16px;padding:15px;box-shadow:var(--db-shadow);margin-bottom:12px; }
.db-acard.paused{ border-left-color:#fca5a5;background:#fff8f8; }
.db-acard.unconfig{ border-left-color:#fcd34d;background:#fffbeb; }
.db-ac-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px; }
.db-ac-title{ font-weight:800;font-size:1.05rem; }
.db-ac-sub{ color:var(--db-mut);font-size:12px;margin-top:3px;line-height:1.5; }
.db-status{ font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;flex:none; }
.db-st-blue{ background:#eff6ff;color:#2563eb; } .db-st-green{ background:#ecfdf5;color:#16a34a; }
.db-st-red{ background:#fef2f2;color:#dc2626; } .db-st-amber{ background:#fffbeb;color:#d97706; } .db-st-grey{ background:#f3f4f6;color:#6b7280; }
.db-nextbox{ margin:12px 0;padding:12px;background:linear-gradient(135deg,#faf9ff,#f3f4f6);border-radius:13px; }
.db-nl{ font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:5px; }
.db-stats{ display:flex;gap:8px;margin-top:12px; }
.db-statbox{ flex:1;background:#f9fafb;border-radius:11px;padding:9px;text-align:center; }
.db-statbox b{ display:block;font-size:1.15rem;line-height:1.1;color:var(--db-ink); }
.db-statbox span{ font-size:10.5px;color:var(--db-mut); }
.db-ac-foot{ display:flex;gap:9px;margin-top:12px; }
.db-warnbar{ margin-top:11px;padding:10px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:11px;font-size:12.5px;color:#b91c1c;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap; }
.db-remain{ margin-top:11px;border-top:1px solid var(--db-line);padding-top:6px;max-height:320px;overflow:auto; }
.db-remain-item{ display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #f5f5f5; }
.db-remain-item:first-child{ border-top:none; }
.db-rk{ width:22px;color:var(--db-mut);font-size:12px;text-align:right;flex:none; }
.db-rn{ flex:1;min-width:0;font-size:14px; }
.db-rn-name{ font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.db-rmeta{ color:var(--db-mut);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; }

/* ---- Config card ---- */
.db-kv{ display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:13px;color:#374151; }
.db-kv .db-k{ color:var(--db-mut);margin-right:4px; }
.db-form{ margin-top:16px;padding:16px;border:1px solid var(--db-line);border-radius:16px;background:#fff;box-shadow:var(--db-shadow); }
.db-form h3{ font-weight:800;margin:0 0 14px;font-size:1.08rem; }
.db-fgrid{ display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.db-form label{ display:block;font-size:13px;font-weight:600;color:#374151; }
.db-form .db-field{ width:100%;padding:11px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:15px;margin-top:6px;background:#fff;min-height:44px; }
.db-checkrow{ display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14px;font-weight:600;color:#374151; }
.db-checkrow input{ width:20px;height:20px; }
.db-groupbox{ margin-top:8px;border:1px solid var(--db-line);border-radius:12px;padding:10px; }
.db-grouplist{ max-height:220px;overflow:auto; }
.db-grouplist label{ display:flex;align-items:center;gap:9px;padding:7px 0;font-weight:400;font-size:14px; }
.db-grouplist input{ width:19px;height:19px;flex:none; }
.db-backup-box{ margin-top:16px;padding:14px;border:1px dashed #fcd34d;border-radius:12px;background:#fffbeb; }

/* ---- Logs card ---- */
.db-logcard{ background:#fff;border:1px solid var(--db-line);border-radius:16px;padding:13px;box-shadow:var(--db-shadow); }
.db-log-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:10px; }
.db-log-when{ color:var(--db-mut);font-size:12px;white-space:nowrap; }
.db-log-name{ font-weight:700;font-size:14.5px;line-height:1.3; }
.db-log-meta{ color:var(--db-mut);font-size:12px;margin-top:2px; }
.db-log-stat{ font-size:12px;color:var(--db-mut);margin-top:6px; }
.db-gchips{ display:flex;flex-wrap:wrap;gap:5px;margin-top:9px; }
.db-gchip{ font-size:11.5px;padding:3px 8px;border-radius:7px;display:inline-flex;align-items:center;gap:3px; }
.db-gchip.ok{ background:#dcfce7;color:#166534; } .db-gchip.no{ background:#fee2e2;color:#991b1b; }
.db-pager{ margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:center; }
.db-pager button{ min-width:44px;min-height:44px;border:1px solid #e5e7eb;background:#fff;border-radius:11px;cursor:pointer;font-size:16px; }
.db-pager button:disabled{ opacity:.4; }

/* ---- Stats ---- */
.db-segs{ display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
.db-seg{ padding:9px 14px;border:none;border-radius:11px;cursor:pointer;font-weight:700;font-size:13.5px;background:#f3f4f6;color:#374151;min-height:42px; }
.db-seg.active{ background:var(--db-pri);color:#fff; }
.db-chartcard{ background:#fff;border:1px solid var(--db-line);border-radius:16px;padding:16px;box-shadow:var(--db-shadow); }
.db-stbl{ width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--db-line);border-radius:14px;overflow:hidden;margin-top:14px; }
.db-stbl th{ background:#fafafa;text-align:left;padding:11px;font-size:13px; }
.db-stbl td{ padding:11px;border-top:1px solid var(--db-line);font-size:14px; }

/* ============================================================
   MOBILE  <= 640px : bottom tab bar + nén padding
   ============================================================ */
@media (max-width:640px){
  .db-head{ padding:14px 16px 0; }
  .db-title{ font-size:1.3rem; }
  .db-subtitle{ font-size:12.5px;margin-bottom:10px; }

  /* search dính dưới đầu trang */
  .db-search{ position:sticky;top:0;z-index:20; }

  /* tabs -> bottom navigation bar */
  .db-tabs{ position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;gap:0;flex-wrap:nowrap;
    background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--db-line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 18px rgba(16,24,40,.06); }
  .db-tab{ flex:1;flex-direction:column;gap:3px;background:none!important;color:#9ca3af!important;
    box-shadow:none!important;padding:6px 0;border-radius:0;font-size:10.5px;min-height:52px;justify-content:center; }
  .db-tab .db-ti{ font-size:22px;filter:grayscale(1) opacity(.55);transition:.2s; }
  .db-tab.active{ color:var(--db-pri-d)!important; }
  .db-tab.active .db-ti{ filter:none;transform:translateY(-1px); }
  .db-tab.active::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--db-pri); }

  /* chừa chỗ cho bottom bar */
  .db-content{ padding:0 16px 84px!important; }

  /* card xếp dọc — chip xuống dòng gọn */
  .db-ac-foot{ flex-wrap:wrap; }
  .db-ac-foot .db-btn{ flex:1 1 auto; }
  .db-fgrid{ grid-template-columns:1fr; }   /* form 1 cột */
  .db-log-head{ flex-direction:column;gap:4px; }
  .db-segs .db-seg{ flex:1 1 calc(50% - 8px); }  /* 2 cột nút kỳ */
}