/**
 * ==========================================
 * ADMIN DASHBOARD STYLES
 * ==========================================
 * CSS cho trang quản trị Admin
 * Part 12A: Base styles
 */

/* ==========================================
   CSS VARIABLES
   ========================================== */
:root {
  /* Colors - Primary */
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --primary-bg: #eef2ff;

  /* Colors - Secondary */
  --secondary: #64748b;
  --secondary-light: #94a3b8;
  --secondary-dark: #475569;

  /* Colors - Status */
  --success: #10b981;
  --success-bg: #d1fae5;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --info: #0ea5e9;
  --info-bg: #e0f2fe;

  /* Colors - Platform */
  --shopee: #ee4d2d;
  --lazada: #0f146d;
  --tiktok: #000000;
  --facebook: #1877f2;
  --youtube: #ff0000;

  /* Colors - Gray Scale */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
  --header-height: 60px;

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


  /* ── Semantic theme tokens (Light defaults) ── */
  --th-bg:           #f1f5f9;
  --th-surface:      #ffffff;
  --th-surface-2:    #f8fafc;
  --th-surface-3:    #f1f5f9;
  --th-text:         #1e293b;
  --th-text-muted:   #64748b;
  --th-text-subtle:  #94a3b8;
  --th-border:       #e2e8f0;
  --th-border-light: #f1f5f9;
  --th-input-bg:     #ffffff;
  --th-sidebar-bg:   #0f172a;
  --th-header-bg:    #ffffff;
  --th-shadow:       0 1px 3px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.05);
}

/* ==========================================
   DARK THEME
   ========================================== */
[data-theme="dark"] {
  --th-bg:           #0d1117;
  --th-surface:      #161b22;
  --th-surface-2:    #1c2230;
  --th-surface-3:    #212d3f;
  --th-text:         #e6edf3;
  --th-text-muted:   #9aa4b0;
  --th-text-subtle:  #868f9b;
  --th-border:       #30363d;
  --th-border-light: #21262d;
  --th-input-bg:     #0d1117;
  --th-sidebar-bg:   #161b22;
  --th-header-bg:    #161b22;
  --th-shadow:       0 1px 3px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.2);
}

/* Auto mode — follow OS preference */
[data-theme="auto"] {
  @media (prefers-color-scheme: dark) {
    --th-bg:           #0d1117;
    --th-surface:      #161b22;
    --th-surface-2:    #1c2230;
    --th-surface-3:    #212d3f;
    --th-text:         #e6edf3;
    --th-text-muted:   #9aa4b0;
    --th-text-subtle:  #868f9b;
    --th-border:       #30363d;
    --th-border-light: #21262d;
    --th-input-bg:     #0d1117;
    --th-sidebar-bg:   #161b22;
    --th-header-bg:    #161b22;
    --th-shadow:       0 1px 3px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.2);
  }
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background: var(--th-bg);
  color: var(--th-text);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

.hidden {
  display: none !important;
}

/* ==========================================
   LOGIN PAGE
   ========================================== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: var(--spacing-lg);
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-2xl);
}

.login-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.login-logo {
  width: 80px;
  height: 80px;
  background: var(--primary-bg);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
}

.login-logo i {
  font-size: 2.5rem;
  color: var(--primary);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.login-subtitle {
  color: var(--gray-500);
  font-size: 0.875rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon i {
  position: absolute;
  left: var(--spacing-md);
  color: var(--gray-400);
  pointer-events: none;
}

.input-with-icon input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 2.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  transition: var(--transition);
}

/* Add extra padding-right when password toggle button exists */
.input-with-icon:has(.password-toggle) input {
  padding-right: 2.75rem;
}

.input-with-icon input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.password-toggle:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.remember-me {
  flex-direction: row;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.login-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--danger-bg);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 0.875rem;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: var(--spacing-lg) 0;
  color: var(--gray-400);
  font-size: 0.8rem;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}
.login-divider span {
  padding: 0 var(--spacing-md);
}

.btn-google-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-700);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}
.btn-google-login:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-google-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.google-btn-icon {
  width: 18px;
  height: 18px;
}

.login-footer {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.back-link {
  color: var(--gray-500);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: var(--transition);
}

.back-link:hover {
  color: var(--primary);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

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

.btn-outline {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-danger {
  background: var(--danger);
  color: var(--white);
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-success {
  background: var(--success);
  color: var(--white);
}

.btn-success:hover {
  background: #059669;
}

/* .btn-warning thiếu định nghĩa base → trước đây chỉ có nền .btn cơ bản, chìm vào nền tối */
.btn-warning {
  background: var(--warning);
  color: var(--white);
}

.btn-warning:hover {
  background: #d97706;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================
   ADMIN WRAPPER
   ========================================== */
.admin-wrapper {
  display: flex;
  min-height: 100vh;
  /* ⚠⚠ PHẢI LÀ clip, KHÔNG ĐƯỢC hidden. Theo chuẩn CSS, một trục để hidden thì trục kia tự thành
     auto ⇒ khối này biến thành HỘP CUỘN. Mà nó chỉ min-height:100vh (tự cao theo nội dung, không bao
     giờ tự cuộn), nên mọi position:sticky bên trong sẽ bám vào nó và KHÔNG BAO GIỜ DÍNH — lặng lẽ,
     không báo lỗi gì. Đây đúng là thứ đã làm dòng tiêu đề trang không dính (tìm ra 25/09/2026).
     clip chặn tràn ngang y như hidden nhưng KHÔNG tạo hộp cuộn. .admin-main và .admin-content
     đã dùng clip sẵn — riêng lớp bao ngoài cùng này bị sót. */
  overflow-x: clip;
  width: 100%;
}

/* ==========================================
   SIDEBAR
   ========================================== */
.admin-sidebar {
  width: var(--sidebar-width);
  background: var(--th-sidebar-bg, var(--gray-900));
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: var(--transition-slow);
}

.admin-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.admin-sidebar.collapsed .logo-text,
.admin-sidebar.collapsed .nav-section-title,
.admin-sidebar.collapsed .nav-link span,
.admin-sidebar.collapsed .nav-badge,
.admin-sidebar.collapsed .user-info {
  display: none;
}

.admin-sidebar.collapsed .nav-link {
  justify-content: center;
  padding: var(--spacing-md);
}

.admin-sidebar.collapsed .sidebar-user {
  justify-content: center;
}

/* ==========================================
   COLLAPSED SIDEBAR - CHỈ DESKTOP (>1024px)
   Tooltip, header, footer khi sidebar rút gọn
   ========================================== */
@media (min-width: 1025px) {
  /* Header: chỉ hiện logo, ẩn toggle khỏi header flow */
  .admin-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
  }

  /* Logo chỉ hiện icon */
  .admin-sidebar.collapsed .sidebar-logo {
    justify-content: center;
  }

  /* ==========================================
     NÚT TOGGLE FLOATING - giữa cạnh phải sidebar
     ========================================== */
  .admin-sidebar.collapsed .sidebar-toggle {
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    z-index: 101;
    border: 2px solid var(--white);
    transition: all 0.2s ease;
  }

  .admin-sidebar.collapsed .sidebar-toggle:hover {
    background: #4f46e5;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.5);
    transform: translateY(-50%) scale(1.15);
  }

  /* Nút toggle khi sidebar MỞ RỘNG - cũng đẹp hơn */
  .admin-sidebar:not(.collapsed) .sidebar-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.7rem;
  }

  .admin-sidebar:not(.collapsed) .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }

  /* Sidebar-nav: overflow visible để tooltip không bị cắt */
  .admin-sidebar.collapsed .sidebar-nav {
    overflow: visible;
  }

  /* Nav-link: vị trí relative cho tooltip */
  .admin-sidebar.collapsed .nav-link {
    position: relative;
    overflow: visible;
  }

  /* Tooltip: CHỈ cho text span, KHÔNG cho .nav-badge */
  .admin-sidebar.collapsed .nav-link:hover span:not(.nav-badge) {
    display: block !important;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-800);
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--radius);
    white-space: nowrap;
    z-index: 200;
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    pointer-events: none;
  }

  /* Mũi tên tooltip */
  .admin-sidebar.collapsed .nav-link:hover span:not(.nav-badge)::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--gray-800);
  }

  /* Ẩn nút đăng xuất trong sidebar rút gọn */
  .admin-sidebar.collapsed .logout-btn {
    display: none;
  }

  /* Footer gọn gàng */
  .admin-sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-700);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sidebar-logo i {
  font-size: 1.5rem;
  color: var(--primary-light);
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
}

.sidebar-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border-radius: var(--radius);
  color: var(--gray-400);
  transition: var(--transition);
}

.sidebar-toggle:hover {
  background: var(--gray-700);
  color: var(--white);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md) 0;
}

.nav-section {
  margin-bottom: var(--spacing-md);
}

.nav-section-title {
  display: block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.nav-list {
  list-style: none;
}

.nav-item {
  margin: 2px 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin: 0 var(--spacing-sm);
  border-radius: var(--radius);
  color: var(--gray-400);
  font-size: 0.875rem;
  transition: var(--transition);
}

.nav-link:hover {
  background: var(--gray-800);
  color: var(--white);
}

.nav-link.active {
  background: var(--primary);
  color: var(--white);
}

.nav-link i {
  width: 20px;
  text-align: center;
}

.nav-badge {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--danger);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
}

.sidebar-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: var(--gray-700);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
}

.user-role {
  font-size: 0.6875rem;
  color: var(--gray-500);
}

.logout-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-800);
  border-radius: var(--radius);
  color: var(--gray-400);
  transition: var(--transition);
}

.logout-btn:hover {
  background: var(--danger);
  color: var(--white);
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.admin-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  min-width: 0;
  overflow-x: clip;
  max-width: calc(100vw - var(--sidebar-width));
  transition: var(--transition-slow);
  padding-top: var(--header-height);
}

.admin-sidebar.collapsed ~ .admin-main {
  margin-left: var(--sidebar-collapsed-width);
  max-width: calc(100vw - var(--sidebar-collapsed-width));
}

/* ==========================================
   HEADER
   ========================================== */
.admin-header {
  height: var(--header-height);
  background: var(--th-header-bg);
  border-bottom: 1px solid var(--th-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 200;
  transition: left var(--transition-slow);
}

.admin-sidebar.collapsed ~ .admin-main .admin-header {
  left: var(--sidebar-collapsed-width);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius);
  color: var(--gray-600);
}

.header-logo {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-logo img {
  max-height: 32px;
  max-width: 150px;
  object-fit: contain;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb-item.active {
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-item {
  color: var(--gray-500);
}

.breadcrumb-item.active {
  color: var(--gray-800);
  font-weight: 500;
}

.breadcrumb-separator {
  color: var(--gray-300);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.brand-selector {
  min-width: 200px;
}

.brand-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.875rem;
  color: var(--gray-700);
  cursor: pointer;
}

.brand-select:focus {
  outline: none;
  border-color: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.header-action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border-radius: var(--radius);
  color: var(--gray-600);
  position: relative;
  transition: var(--transition);
}

.header-action-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--danger);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   ADMIN CONTENT
   ========================================== */
.admin-content {
  padding: var(--spacing-lg);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  /* clip giữ layout không tràn nhưng cho phép child (table-wrapper) tự cuộn */
}

.page-content {
  display: none;
  min-width: 0;
  max-width: 100%;
}

.page-content.active {
  display: block;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

/* ==========================================
   GIỮ CỨNG DÒNG TIÊU ĐỀ TRANG (sticky)
   ==========================================
   User yêu cầu 25/09/2026: trang nào có dòng tiêu đề + thanh công cụ thì dòng đó phải
   DÍNH LẠI khi cuộn — đỡ phải cuộn ngược lên mới đổi được ngày / bộ lọc / chế độ xem.
   Áp chung cho cả 17 trang đang dùng .page-header.

   ⚠ Trang cuộn theo CỬA SỔ (.admin-main chỉ có min-height:100vh, không tự cuộn), nên
     sticky bám vào viewport và top phải đúng bằng chiều cao thanh header cố định.
   ⚠⚠ .admin-main và .admin-content dùng overflow-x: clip — "clip" KHÔNG tạo hộp cuộn nên
     sticky vẫn chạy. Nếu sau này ai đổi thành overflow: hidden là GÃY NGAY: dòng tiêu đề
     hết dính mà không báo lỗi gì cả.
   ⚠ Phải kéo nền ra sát hai mép bằng lề âm đúng bằng padding của .admin-content, nếu không
     nội dung bên dưới sẽ lòi ra hai bên khi cuộn qua.
   ⚠ z-index 90: dưới thanh header cố định (200) và dưới mọi hộp thoại (>=10050), nhưng
     trên thẻ/bảng của trang. */
.page-header {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  background: var(--th-bg);
  margin-left: calc(var(--spacing-lg) * -1);
  margin-right: calc(var(--spacing-lg) * -1);
  padding: 0.65rem var(--spacing-lg) 0.7rem;
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--th-border);
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Màn hình QUÁ THẤP: dòng tiêu đề dính sẽ ăn hết chỗ đọc nội dung → thôi không dính nữa.
   ⚠⚠ ĐỪNG nâng ngưỡng này lên: đặt 520px thì laptop nhỏ / trang đang phóng to sẽ rơi vào đây và
   MẤT DÍNH mà không có dấu hiệu gì — đo thật 25/09 khung 290px đã dính bẫy này. 400px là mức chỉ
   còn đúng những khung thật sự quá thấp mới trúng. */
@media (max-height: 400px) {
  .page-header { position: static; }
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ==========================================
   DASHBOARD DATE FILTER
   ========================================== */
.dashboard-date-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: 12px 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.date-filter-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.date-filter-presets {
  display: flex;
  gap: 6px;
}

.date-preset {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--text-secondary);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.date-preset:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--primary-bg);
}

.date-preset.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.date-preset i {
  font-size: 0.75rem;
}

.date-filter-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  color: var(--text-primary);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
}

.date-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.date-separator {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.date-filter-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

#dateFilterApply {
  padding: 5px 12px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================
   STATS CARDS
   ========================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.stat-card {
  background: var(--white);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  transition: all 0.2s ease;
  position: relative;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

.stat-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-icon.live {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
}

.stat-icon.upcoming {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}

.stat-icon.hosts {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #2563eb;
}

.stat-icon.pics {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #be185d;
}

.stat-icon.sessions {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #4f46e5;
}

.stat-icon.total-hours {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}

.stat-icon.brands {
  background: linear-gradient(135deg, var(--primary-bg), #c4b5fd);
  color: var(--primary);
}

.stat-icon.rooms {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #059669;
}

.stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.stat-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-sub-label {
  font-size: 0.68rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.stat-trend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
  font-weight: 500;
  flex-shrink: 0;
}

.stat-trend.up {
  color: var(--success);
}

.stat-trend.down {
  color: var(--danger);
}

/* Chart notes */
.chart-note {
  margin: 0;
  padding: 0 16px 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.8;
}

/* ==========================================
   DETAIL MODAL (Hosts & Rooms)
   ========================================== */
.detail-btn {
  padding: 0.35rem 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px;
  gap: 0.3rem;
}

/* Detail modal: z-index cao hơn các modal khác */
#detailModal.active {
  z-index: 9999;
}

/* Confirm modal: luôn trên cùng (trên cả detail modal) */
#confirmModal.active {
  z-index: 99999;
}

#detailModal > .modal-content {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  animation: detailSlideUp 0.25s ease;
}

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

#detailModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

#detailModal .modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
}

#detailModal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.15s;
}

#detailModal .modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

#detailModal .modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Chart container inside detail modal */
.detail-chart-container {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: 8px;
  position: relative;
  height: 250px;
}

.detail-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.detail-date-range {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-date-range i {
  color: var(--primary);
}

.detail-table-wrapper {
  overflow-x: auto;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.detail-table thead th {
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.detail-table thead th.text-right {
  text-align: right;
}

.detail-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.1s;
}

.detail-table tbody tr:hover {
  background: var(--gray-50);
}

.detail-table tbody td {
  padding: 0.7rem 1rem;
  color: var(--gray-700);
}

.detail-table tbody td.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.detail-table tbody td.rank {
  font-weight: 700;
  color: var(--gray-400);
  width: 40px;
}

.detail-table tbody tr:nth-child(1) td.rank { color: #f59e0b; }
.detail-table tbody tr:nth-child(2) td.rank { color: #94a3b8; }
.detail-table tbody tr:nth-child(3) td.rank { color: #b45309; }

.detail-table tbody td .host-name,
.detail-table tbody td .room-name {
  font-weight: 500;
  color: var(--gray-900);
}

.detail-table tbody td .platform-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
  margin-left: 0.5rem;
}

.detail-summary {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: var(--gray-50);
  border-radius: 8px;
  display: flex;
  gap: 2rem;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.detail-summary strong {
  color: var(--gray-900);
}

@media (max-width: 768px) {
  #detailModal .modal-body { padding: 1rem; }
  .detail-summary { flex-direction: column; gap: 0.5rem; }
  .detail-btn span { display: none; }
  .detail-chart-container { height: 200px; }
}

/* ==========================================
   DASHBOARD WIDGETS
   ========================================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-lg);
}

.dashboard-widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.widget-lg {
  grid-column: span 8;
}

.widget-md {
  grid-column: span 4;
}

.widget-sm {
  grid-column: span 4;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.widget-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.widget-title i {
  color: var(--gray-500);
}

.widget-link {
  font-size: 0.8125rem;
  color: var(--primary);
  font-weight: 500;
}

.widget-link:hover {
  text-decoration: underline;
}

.widget-body {
  padding: var(--spacing-lg);
}

/* Today Schedule List */
.today-schedule-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--radius);
  background: var(--gray-50);
  transition: var(--transition);
}

.schedule-item:hover {
  background: var(--gray-100);
}

.schedule-item.live {
  background: var(--danger-bg);
}

.schedule-time {
  min-width: 100px;
  font-weight: 600;
  color: var(--gray-700);
}

.schedule-host {
  flex: 1;
  font-weight: 500;
  /* Ảnh host + tên + badge gán: xuống dòng gọn trong ô, không tràn đè cột Mã host */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.schedule-room {
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* ── Chọn nhiều host trong modal Thêm/Sửa lịch ── */
.sched-host-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  align-items: center;
  padding: 6px;
  margin-bottom: 8px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.sched-host-empty { font-size: 0.78rem; color: #94a3b8; font-style: italic; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.sched-host-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #3730a3;
}
.sched-host-chip-av { width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden; background: #e0e7ff; display: inline-flex; align-items: center; justify-content: center; }
.sched-host-chip-av img { width: 100%; height: 100%; object-fit: cover; }
.sched-host-chip-ph { font-size: 0.62rem; font-weight: 800; color: #6366f1; }
.sched-host-chip-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-host-chip-x {
  border: none; background: transparent; color: #6366f1; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 50%; transition: all 0.15s ease;
}
.sched-host-chip-x:hover { background: #dc2626; color: #fff; }
.sched-host-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sched-host-add > select, .sched-host-add > input { flex: 1; min-width: 150px; }
.sched-host-add > .btn { flex: none; white-space: nowrap; }
[data-theme="dark"] .sched-host-chips { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .sched-host-chip { background: #1c2333; border-color: #30363d; color: #a5b4fc; }
[data-theme="dark"] .sched-host-chip-av { background: #21262d; }
@media (max-width: 480px) { .sched-host-add > select, .sched-host-add > input, .sched-host-add > .btn { flex: 1 1 100%; } }

.schedule-platform {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.schedule-platform.shopee {
  background: rgba(238, 77, 45, 0.1);
  color: var(--shopee);
}

.schedule-platform.lazada {
  background: rgba(15, 20, 109, 0.1);
  color: var(--lazada);
}

.schedule-platform.tiktok {
  background: rgba(0, 0, 0, 0.1);
  color: var(--tiktok);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.activity-icon.add {
  background: var(--success-bg);
  color: var(--success);
}

.activity-icon.edit {
  background: var(--info-bg);
  color: var(--info);
}

.activity-icon.delete {
  background: var(--danger-bg);
  color: var(--danger);
}

.activity-icon.sync {
  background: var(--primary-bg);
  color: var(--primary);
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 0.875rem;
  color: var(--gray-700);
}

.activity-time {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 2px;
}

/* Loading Placeholder */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  color: var(--gray-400);
  gap: var(--spacing-sm);
}

/* ==========================================
   DATA TABLE
   ========================================== */
.data-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 100%;
}

.data-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Subtle scrollbar for table */
.data-table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.data-table-wrapper::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}
.data-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}
.data-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

/* ── Cột Thao tác sticky (cột cuối) ── */
/* Chỉ sticky khi KHÔNG phải td colspan (loading/empty state) */
.data-table th:last-child,
.data-table td:last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--white, #fff);
}

.data-table th:last-child {
  background: var(--gray-50);
  z-index: 3;
}

/* Viền trái nhẹ để tách biệt cột sticky */
.data-table th:last-child::before,
.data-table td:last-child:not([colspan])::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
  pointer-events: none;
}

/* Khi hover row, cột sticky cũng đổi nền */
.data-table tbody tr:hover td:last-child:not([colspan]) {
  background: var(--gray-50);
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}

/* Loading / Empty / Error state: td colspan căn giữa
   Đặt SAU rule chung để override text-align: left */
.data-table td[colspan] {
  text-align: center;
  white-space: normal;
  padding: var(--spacing-lg);
}

.data-table th {
  background: var(--gray-50);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

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

.data-table td {
  font-size: 0.8125rem;
  color: var(--gray-700);
}

/* Table Actions */
.table-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

.table-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--gray-500);
  transition: var(--transition);
  font-size: 0.75rem;
}

.table-action-btn:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.table-action-btn.edit:hover {
  background: var(--info-bg);
  color: var(--info);
}

.table-action-btn.delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge.active {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.inactive {
  background: var(--gray-200);
  color: var(--gray-600);
}

.status-badge.live {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-badge.upcoming {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-badge.past {
  background: var(--gray-200);
  color: var(--gray-500);
}

/* Pagination */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-top: 1px solid var(--gray-100);
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.pagination-btns {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-600);
  font-size: 0.875rem;
  transition: var(--transition);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.pagination-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================
   FILTER BAR
   ========================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-box i {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.search-box input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 2.5rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.875rem;
  min-width: 150px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
}

.filter-date {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.filter-date:focus {
  outline: none;
  border-color: var(--primary);
}

/* ============================================================================
   SCHEDULES PAGE 2.0 — Redesign (scoped vào #page-schedules để không đụng trang khác)
   Header · filter bar · template toolbar · stats/export · responsive
   ============================================================================ */

/* ── Header ── */
#page-schedules .page-header { gap: 0.85rem; flex-wrap: wrap; }
#page-schedules .page-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gray-900);
}
#page-schedules .page-title::before {
  content: ''; width: 5px; height: 1.25em; border-radius: 4px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
#page-schedules .page-actions { gap: 0.5rem; flex-wrap: wrap; }

/* ── Filter bar (card hiện đại, control cao đều 40px) ── */
#page-schedules .filter-bar {
  gap: 0.6rem; padding: 0.8rem; align-items: stretch;
  border: 1px solid var(--gray-100); border-radius: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
#page-schedules .filter-select,
#page-schedules .filter-date,
#page-schedules .search-box input {
  height: 40px; box-sizing: border-box;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: 0.85rem; color: #1e293b; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#page-schedules .filter-select {
  min-width: 138px; padding: 0 2rem 0 0.7rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 11px;
}
#page-schedules .filter-date { padding: 0 0.7rem; }
#page-schedules .filter-select:hover,
#page-schedules .filter-date:hover,
#page-schedules .search-box input:hover { border-color: #cbd5e1; }
#page-schedules .filter-select:focus,
#page-schedules .filter-date:focus,
#page-schedules .search-box input:focus {
  border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13);
}
#page-schedules .search-box { min-width: 200px; }
#page-schedules .search-box input { padding-left: 2.4rem; }
#page-schedules .search-box i { color: #94a3b8; }

/* ── Template toolbar (card sạch, segment màu cho Tiêu đề / Giỏ hàng) ── */
#scheduleTemplateToolbar.template-toolbar {
  padding: 0 !important; margin-bottom: 1rem;
  background: #fff !important; border: 1px solid var(--gray-100) !important;
  border-radius: 16px !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; }
.tt-seg {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.45rem 0.65rem; border-radius: 12px;
}
.tt-seg--title { background: #eef2ff; }
.tt-seg--cart  { background: #ecfdf5; }
.tt-seg-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 0.78rem; flex-shrink: 0; }
.tt-seg--title .tt-seg-icon { background: linear-gradient(135deg, #818cf8, #6366f1); }
.tt-seg--cart  .tt-seg-icon { background: linear-gradient(135deg, #34d399, #10b981); }
.tt-seg label { font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.tt-seg--title label { color: #4338ca; }
.tt-seg--cart  label { color: #047857; }
.tt-select {
  height: 36px; min-width: 180px; padding: 0 1.9rem 0 0.6rem;
  border: 1.5px solid #fff; border-radius: 9px; background-color: #fff;
  font-size: 0.82rem; color: #1e293b; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 11px;
  transition: box-shadow 0.15s;
}
.tt-select:focus { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.tt-actions { margin-left: auto; display: flex; gap: 0.45rem; flex-wrap: wrap; }
#scheduleTemplateToolbar .btn-sm { border-radius: 9px; font-weight: 600; }

/* ── Stats + export bar (gộp trong đầu data-card) ── */
/* :not([style*="none"]) → chỉ áp dụng layout khi JS đã hiện (display:block); khi ẩn (display:none) không ép hiện */
#page-schedules #scheduleStats.schedule-stats:not([style*="none"]) {
  padding: 0.7rem 1rem !important;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
}
#page-schedules #scheduleStatsText { font-size: 0.85rem; color: #475569; }
.schedule-export-container { margin-left: auto; }
.export-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.export-label { font-size: 0.8rem; color: #64748b; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; }
.export-label i { color: #94a3b8; }
.btn-export-filled-csv, .btn-export-filled-excel {
  border: 0 !important; color: #fff !important; font-weight: 700;
  border-radius: 9px; box-shadow: 0 3px 9px rgba(0,0,0,.12); transition: transform .15s;
}
.btn-export-filled-csv { background: linear-gradient(135deg, #34d399, #059669) !important; }
.btn-export-filled-excel { background: linear-gradient(135deg, #38bdf8, #2563eb) !important; }
.btn-export-filled-csv:hover, .btn-export-filled-excel:hover { transform: translateY(-1px); }
#scheduleExportContainer .btn-outline { border-radius: 9px; }

/* ── Data-card khung bảng ── */
#page-schedules .data-card {
  border-radius: 16px; border: 1px solid var(--gray-100);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); overflow: hidden;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  #page-schedules .filter-select { min-width: 120px; }
  .tt-row { gap: 0.6rem; }
}
@media (max-width: 767px) {
  #page-schedules .page-title { font-size: 1.35rem; }
  #page-schedules .filter-bar { gap: 0.5rem; }
  #page-schedules .filter-select,
  #page-schedules .filter-date { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
  #page-schedules .search-box { flex: 1 1 100%; margin-left: 0 !important; }
  .tt-seg { flex: 1 1 100%; }
  .tt-select { flex: 1 1 100%; min-width: 0; }  /* select xuống dòng riêng, đủ rộng để đọc */
  .tt-actions { margin-left: 0; width: 100%; }
  #page-schedules #scheduleStats.schedule-stats { flex-direction: column; align-items: flex-start; }
  .schedule-export-container { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  #page-schedules .page-actions { width: 100%; }
  #page-schedules .page-actions > .btn,
  #page-schedules .page-actions > .schedule-actions-menu { flex: 1; }
  #page-schedules .page-actions .schedule-menu-trigger { width: 100%; justify-content: center; }
  #page-schedules .filter-select,
  #page-schedules .filter-date { flex: 1 1 100%; }
  .export-buttons { width: 100%; }
  .export-buttons .btn { flex: 1; justify-content: center; }
}

/* ── Dark theme ── */
[data-theme="dark"] #page-schedules .filter-bar,
[data-theme="dark"] #scheduleTemplateToolbar.template-toolbar,
[data-theme="dark"] #page-schedules .data-card { background: var(--th-card, #1e293b) !important; border-color: rgba(148,163,184,.2) !important; }
[data-theme="dark"] #page-schedules .filter-select,
[data-theme="dark"] #page-schedules .filter-date,
[data-theme="dark"] #page-schedules .search-box input,
[data-theme="dark"] .tt-select { background-color: #0f172a; color: #e2e8f0; border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .tt-seg--title { background: rgba(99,102,241,.15); }
[data-theme="dark"] .tt-seg--cart { background: rgba(16,185,129,.15); }
[data-theme="dark"] #page-schedules #scheduleStats.schedule-stats { background: rgba(15,23,42,.4) !important; border-bottom-color: rgba(148,163,184,.2) !important; }
[data-theme="dark"] #page-schedules #scheduleStatsText { color: #cbd5e1; }

/* ============================================================================
   SCHEDULES FILTER BAR 3.0 — ô lọc kiểu shadcn/ui faceted filter (js/filterSelect.js)
   <select> gốc bị ẩn (vẫn là nguồn dữ liệu), .fsx-trigger là nút hiển thị + popover .fsx-pop
   ============================================================================ */
#page-schedules .filter-bar.fsx-bar {
  flex-direction: row; flex-wrap: wrap;   /* đè .filter-bar{flex-direction:column} cũ ở ≤768px */
  gap: 8px; padding: 12px; align-items: center;
  background: #fff; border: 1px solid #e9eef5; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -14px rgba(15,23,42,.14);
}
.fsx { position: relative; display: inline-flex; align-items: center; min-width: 0; }
#page-schedules .fsx > select.fsx-native {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-width: 0 !important;
  opacity: 0 !important; pointer-events: none !important; padding: 0 !important; border: 0 !important; z-index: -1;
}
.fsx-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; max-width: 280px; min-width: 0;
  padding: 0 12px; border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #fff;
  color: #475569; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.fsx-trigger:hover { border-color: #94a3b8; background: #f8fafc; color: #0f172a; }
.fsx-trigger:focus-visible { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.fsx-trigger:disabled { opacity: .55; cursor: not-allowed; }
.fsx-ic { color: #94a3b8; font-size: .78rem; flex-shrink: 0; transition: color .15s; }
.fsx-val { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fsx-muted { color: #64748b; font-weight: 600; }
.fsx-lbl { color: #6366f1; font-weight: 600; font-size: .74rem; flex-shrink: 0; }
.fsx-sep { width: 1px; height: 14px; background: #c7d2fe; flex-shrink: 0; }
.fsx-caret { font-size: .58rem; color: #94a3b8; margin-left: 2px; transition: transform .18s; flex-shrink: 0; }
.fsx.is-open .fsx-caret { transform: rotate(180deg); }
.fsx.is-open .fsx-trigger { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
/* Đang lọc → nền indigo nhạt, viền liền, có nút × */
.fsx.is-active .fsx-trigger { border-style: solid; border-color: #a5b4fc; background: #eef2ff; color: #3730a3; padding-right: 32px; }
.fsx.is-active .fsx-trigger .fsx-val { font-weight: 800; }
.fsx.is-active .fsx-ic { color: #6366f1; }
.fsx.is-active .fsx-caret { display: none; }
.fsx-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: #6366f1;
  display: grid; place-items: center; font-size: .66rem; cursor: pointer; transition: background .15s, color .15s;
}
.fsx-clear:hover { background: #c7d2fe; color: #312e81; }
.fsx-clear:focus-visible { outline: 0; box-shadow: 0 0 0 2px #818cf8; }
/* Phòng = bộ lọc chính → viền liền, chữ đậm */
.fsx[data-for="scheduleRoomFilter"] .fsx-trigger { border-style: solid; border-color: #e2e8f0; color: #0f172a; font-weight: 800; min-width: 170px; }
.fsx[data-for="scheduleRoomFilter"] .fsx-ic { color: #6366f1; }
/* "Tất cả phòng" (value rỗng) là trạng thái hợp lệ → nền tím nhạt, không phải cảnh báo */
.fsx[data-for="scheduleRoomFilter"].is-empty .fsx-trigger { border-color: #c7d2fe; background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: #3730a3; }
/* Ô ngày */
.fsx-date { height: 38px; padding: 0 8px 0 12px; gap: 8px; border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.fsx-date:hover { border-color: #94a3b8; }
.fsx-date:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
#page-schedules .fsx-date input.filter-date {
  height: 34px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; width: 128px; font-weight: 600; color: #334155; font-family: inherit;
}
/* Quy tắc toàn cục ép input ≥16px !important (chống iOS tự zoom) → chỉ thu nhỏ trên màn rộng */
@media (min-width: 768px) {
  #page-schedules .fsx-date input.filter-date,
  #page-schedules .fsx-bar .search-box input,
  .fsx-pop .fsx-search input,
  #scheduleTemplateToolbar select.tt-select { font-size: .82rem !important; }
}
.fsx-date.is-active { border-style: solid; border-color: #a5b4fc; background: #eef2ff; padding-right: 32px; }
.fsx-date.is-active .fsx-ic { color: #6366f1; }
#page-schedules .fsx-date.is-active input.filter-date { color: #3730a3; font-weight: 800; }
#page-schedules .fsx-bar #scheduleExtraFilters { display: contents !important; }
.fsx-date-ph { display: none; }
/* Thiết bị cảm ứng: input date phủ kín ô (chạm đâu cũng mở lịch), rỗng thì hiện nhãn "Chọn ngày"
   vì iOS/Android không vẽ gì cho date rỗng ⇒ trước đây ô trông như bị ẩn mất. */
@media (pointer: coarse) {
  .fsx-date { position: relative; min-width: 150px; min-height: 40px; }
  #page-schedules .fsx-date input.filter-date {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
    padding: 0 34px 0 36px !important; opacity: 1; -webkit-appearance: none; appearance: none;
    text-align: left; z-index: 1; min-width: 0 !important;
  }
  #page-schedules .fsx-date input.filter-date::-webkit-date-and-time-value { text-align: left; }
  .fsx-date .fsx-ic { position: relative; z-index: 2; pointer-events: none; }
  .fsx-date .fsx-clear { z-index: 3; }
  .fsx-date.is-blank .fsx-date-ph {
    display: block; position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
    font-size: .8rem; font-weight: 600; color: #64748b; pointer-events: none; z-index: 2;
  }
  #page-schedules .fsx-date.is-blank input.filter-date { color: transparent !important; }
}
/* Tìm kiếm + phím tắt "/" */
#page-schedules .fsx-bar .search-box { flex: 1 1 220px; min-width: 180px; }
#page-schedules .fsx-bar .search-box input { height: 38px; border-radius: 10px; padding-right: 2.2rem; font-size: .82rem; }
.fsx-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: inherit; font-size: .66rem; font-weight: 700; line-height: 1; color: #94a3b8; border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; background: #f8fafc;
}
.search-box input:focus ~ .fsx-kbd, .search-box input:not(:placeholder-shown) ~ .fsx-kbd { display: none; }
/* Nút Xóa lọc tổng */
.fsx-reset {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: #dc2626; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fsx-reset:hover { background: #fef2f2; border-color: #fecaca; }
.fsx-reset:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.fsx-reset-n { min-width: 18px; height: 18px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .64rem; display: grid; place-items: center; padding: 0 5px; }
/* Popover */
@keyframes fsxIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.fsx-pop {
  position: fixed; z-index: 10050; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 18px 44px -14px rgba(15,23,42,.3), 0 2px 6px rgba(15,23,42,.06);
  display: flex; flex-direction: column; overflow: hidden; animation: fsxIn .14s ease-out; font-family: inherit;
}
.fsx-pop.is-up { transform-origin: bottom; }
.fsx-search { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-bottom: 1px solid #f1f5f9; color: #94a3b8; font-size: .78rem; flex-shrink: 0; }
.fsx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: .82rem; color: #0f172a; }
.fsx-list { overflow: auto; padding: 5px; flex: 1; outline: 0; overscroll-behavior: contain; }
.fsx-list:focus, .fsx-list:focus-visible { outline: 0 !important; box-shadow: none !important; border: 0 !important; }
.fsx-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: .8rem; font-weight: 500; color: #334155; cursor: pointer; user-select: none; }
.fsx-opt.is-active { background: #f1f5f9; color: #0f172a; }
.fsx-opt.is-selected { color: #3730a3; font-weight: 700; }
.fsx-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.fsx-opt.is-all { color: #64748b; }
.fsx-opt.is-all + .fsx-opt:not(.is-all) { margin-top: 5px; position: relative; }
.fsx-opt.is-all + .fsx-opt:not(.is-all)::before { content: ''; position: absolute; left: 6px; right: 6px; top: -3px; height: 1px; background: #f1f5f9; }
.fsx-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsx-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #cbd5e1; display: grid; place-items: center; font-size: .52rem; color: transparent; flex-shrink: 0; transition: all .12s; }
.fsx-opt.is-selected .fsx-check { background: #6366f1; border-color: #6366f1; color: #fff; }
.fsx-bdg { font-size: .62rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
.fsx-bdg.ok { color: #047857; background: #d1fae5; }
.fsx-empty { text-align: center; color: #94a3b8; font-size: .78rem; padding: 22px 10px; }
.fsx-empty i { display: block; font-size: 1.4rem; color: #cbd5e1; margin-bottom: 8px; }
.fsx-foot { border-top: 1px solid #f1f5f9; padding: 5px; flex-shrink: 0; }
.fsx-foot-btn { width: 100%; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #64748b; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fsx-foot-btn:hover { background: #f1f5f9; color: #0f172a; }

/* Template toolbar 3.0 */
#scheduleTemplateToolbar .tt-row { gap: 10px; padding: 12px; }
#scheduleTemplateToolbar .tt-seg { padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: 13px; gap: 9px; }
#scheduleTemplateToolbar .tt-seg--title { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-color: #e0e7ff; }
#scheduleTemplateToolbar .tt-seg--cart { background: linear-gradient(135deg, #ecfdf5, #f0fdfa); border-color: #d1fae5; }
#scheduleTemplateToolbar .tt-seg-icon { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 4px 10px -3px rgba(15,23,42,.25); }
#scheduleTemplateToolbar .tt-seg label { font-size: .8rem; font-weight: 700; }
#scheduleTemplateToolbar .tt-select { height: 34px; border: 1px solid rgba(15,23,42,.07); box-shadow: 0 1px 2px rgba(15,23,42,.05); font-weight: 700; }
#scheduleTemplateToolbar .tt-select:hover { border-color: #c7d2fe; }
#scheduleTemplateToolbar .tt-actions { gap: 6px; }
#scheduleTemplateToolbar .tt-actions .btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px;
  border: 1px solid #e2e8f0; background: #fff; color: #334155; font-size: .78rem; font-weight: 700;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: all .15s;
}
#scheduleTemplateToolbar .tt-actions .btn i { color: #64748b; }
#scheduleTemplateToolbar .tt-actions .btn:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; transform: translateY(-1px); }
#scheduleTemplateToolbar .tt-actions .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
#scheduleTemplateToolbar .tt-actions .btn.tt-temp-btn { border-color: #fcd34d; background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; }
#scheduleTemplateToolbar .tt-actions .btn.tt-temp-btn i { color: #d97706; }
#scheduleTemplateToolbar .tt-actions .btn.tt-temp-btn:hover { border-color: #f59e0b; box-shadow: 0 6px 14px -6px rgba(217,119,6,.5); }
.tt-temp-count { min-width: 18px; height: 18px; border-radius: 999px; background: #d97706; color: #fff; font-size: .64rem; display: grid; place-items: center; padding: 0 5px; }

/* Ca qua đêm (thanh lọc Lịch phát sóng) — công tắc + giờ "đến" */
.sch-night { display: inline-flex; align-items: center; height: 38px; border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .15s, background .15s; }
.sch-night-btn { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; border: 0; background: transparent; color: #475569;
  font-family: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sch-night-btn i { color: #94a3b8; }
.sch-night-btn:hover { color: #0f172a; background: #f8fafc; }
.sch-night-btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #818cf8; }
.sch-night-cut { display: none; align-items: center; gap: 5px; height: 100%; padding: 0 8px 0 10px; border-left: 1px solid #c7d2fe; font-size: .72rem; font-weight: 700; color: #6366f1; margin: 0; }
.sch-night-cut input { border: 0; outline: 0; background: transparent; font-family: inherit; font-weight: 800; color: #3730a3; width: 96px; }   /* đủ cả dạng 12 giờ "02:00 AM" */
@media (min-width: 768px) { .sch-night-cut input { font-size: .8rem !important; } }
.sch-night.is-on { border-style: solid; border-color: #a5b4fc; background: #eef2ff; }
.sch-night.is-on .sch-night-btn { color: #3730a3; }
.sch-night.is-on .sch-night-btn i { color: #6366f1; }
.sch-night.is-on .sch-night-cut { display: inline-flex; }
.sch-night-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: .62rem; font-weight: 800; color: #4338ca; background: #eef2ff;
  border: 1px solid #c7d2fe; border-radius: 999px; padding: 1px 7px; white-space: nowrap; vertical-align: 1px; }
.sch-room-pill { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 4px; font-size: .64rem; font-weight: 800; color: #6d28d9; background: #f5f3ff;
  border: 1px solid #ede9fe; border-radius: 6px; padding: 1px 6px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
/* Tất cả phòng: ẩn cài đặt theo phòng (mẫu tiêu đề/giỏ hàng + mẫu theo tổ hợp) — giữ Copy & Tiêu đề tạm thời */
#page-schedules.sch-all-rooms #scheduleTemplateToolbar .tt-seg,
#page-schedules.sch-all-rooms #templateMappingsContainer { display: none !important; }
#page-schedules.sch-all-rooms #scheduleTemplateToolbar .tt-actions { margin-left: 0; }
@media (max-width: 767px) {
  #page-schedules .fsx-bar > .sch-night { flex: 1 1 calc(50% - 6px); height: 40px; }
  .sch-night-btn { flex: 1; justify-content: center; }
  .sch-night.is-on .sch-night-btn { flex: 0 0 auto; }
  .sch-night.is-on .sch-night-cut { flex: 1; min-width: 0; }
  .sch-night-cut input { width: auto; flex: 1; min-width: 92px; }   /* chữ 16px (chống zoom iOS) cần rộng hơn */
}
@media (max-width: 480px) {
  .sch-night.is-on .sch-night-lbl { display: none; }
}
[data-theme="dark"] .sch-night { background: #0f172a; border-color: rgba(148,163,184,.3); }
[data-theme="dark"] .sch-night-btn { color: #cbd5e1; }
[data-theme="dark"] .sch-night.is-on { background: rgba(99,102,241,.18); border-color: rgba(129,140,248,.6); }
[data-theme="dark"] .sch-night-cut input { color: #c7d2fe; color-scheme: dark; }
[data-theme="dark"] .sch-night-badge { background: rgba(99,102,241,.2); border-color: rgba(129,140,248,.4); color: #c7d2fe; }
[data-theme="dark"] .sch-room-pill { background: rgba(139,92,246,.18); border-color: rgba(167,139,250,.35); color: #ddd6fe; }

/* Mẫu riêng theo tổ hợp Phòng/Platform/Brand — card-table kiểu Tabler */
#scheduleTemplateToolbar .tmx { border-top: 1px solid #eef2f7; padding: 14px 12px 12px; }
.tmx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tmx-head-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 5px 12px -4px rgba(124,58,237,.5); font-size: .85rem; }
.tmx-head-t { display: flex; flex-direction: column; min-width: 0; }
.tmx-head-t b { font-size: .88rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.tmx-head-t > span { font-size: .72rem; color: #94a3b8; font-weight: 600; }
.tmx-ctrls { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tmx-ctrl { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 11px; border: 1px solid #e2e8f0; background: #f8fafc; }
.tmx-ctrl--title { background: #eef2ff; border-color: #e0e7ff; }
.tmx-ctrl--cart { background: #ecfdf5; border-color: #d1fae5; }
.tmx-ctrl-lbl { font-size: .74rem; font-weight: 800; white-space: nowrap; }
.tmx-ctrl--title .tmx-ctrl-lbl { color: #4338ca; }
.tmx-ctrl--cart .tmx-ctrl-lbl { color: #047857; }
.tmx-ctrl .auto-apply-toggle { margin: 0; }
.tmx-apply { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 0; border-radius: 8px; color: #fff;
  font-family: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tmx-ctrl--title .tmx-apply { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 3px 8px -2px rgba(99,102,241,.5); }
.tmx-ctrl--cart .tmx-apply { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 3px 8px -2px rgba(5,150,105,.45); }
.tmx-apply:hover { transform: translateY(-1px); }
.tmx-apply:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.tmx-table { border: 1px solid #e9eef5; border-radius: 12px; overflow: hidden; background: #fff; }
.tmx-thead, .tmx-row { display: grid; grid-template-columns: minmax(170px, .9fr) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.tmx-thead { padding: 8px 14px; background: #f8fafc; border-bottom: 1px solid #eef2f7; font-size: .66rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.tmx-thead i { margin-right: 4px; opacity: .7; }
.tmx-rows { display: flex; flex-direction: column; }
.tmx-row { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; transition: background .15s; }
.tmx-row:last-child { border-bottom: 0; }
.tmx-row:hover { background: #fafbff; }
.tmx-combo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 4px; }
.tmx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tmx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 800; border-radius: 7px; padding: 3px 8px; white-space: nowrap; }
.tmx-chip i { font-size: .66rem; }
.tmx-chip--room { background: #f5f3ff; color: #6d28d9; }
.tmx-chip--plat { background: #eff6ff; color: #1d4ed8; }
.tmx-chip--brand { background: #fffbeb; color: #b45309; }
.tmx-count { align-self: flex-start; font-size: .66rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; }
.tmx-count--none { color: #b91c1c; background: #fef2f2; }
.tmx-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tmx-mlbl { display: none; font-size: .66rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.tmx-sel { position: relative; }
.tmx-sel::after { content: ''; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.tmx-sel select { width: 100%; height: 36px; box-sizing: border-box; appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1.5px solid #e2e8f0; border-radius: 9px; background: #fff; padding: 0 30px 0 11px; font-family: inherit; font-weight: 700; color: #334155;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.tmx-sel select:hover { border-color: #cbd5e1; }
.tmx-sel select:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
@media (min-width: 768px) { .tmx-sel select { font-size: .8rem !important; } }
.tmx-cell.is-custom .tmx-sel select { border-color: #a5b4fc; background: #eef2ff; color: #3730a3; }
.tmx-cell--cart.is-custom .tmx-sel select { border-color: #6ee7b7; background: #ecfdf5; color: #065f46; }
.tmx-pv { font-size: .72rem; font-weight: 600; color: #475569; background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 7px; padding: 4px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmx-pv::before { content: '\f06e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .6rem; color: #94a3b8; margin-right: 6px; }
.tmx-pv.empty { color: #cbd5e1; font-style: italic; }
@media (max-width: 1023px) {
  .tmx-ctrls { margin-left: 0; width: 100%; }
  .tmx-ctrl { flex: 1 1 auto; justify-content: space-between; }
}
@media (max-width: 767px) {
  .tmx-thead { display: none; }
  .tmx-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .tmx-mlbl { display: block; }
  .tmx-combo { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 0; }
}
@media (max-width: 480px) {
  .tmx-hide-xs { display: none; }
  .tmx-ctrl { flex: 1 1 100%; }
  .tmx-sel select { height: 40px; }
}
[data-theme="dark"] .tmx-table, [data-theme="dark"] .tmx-sel select { background: #0f172a; border-color: rgba(148,163,184,.25); color: #e2e8f0; }
[data-theme="dark"] .tmx-thead { background: #1e293b; border-color: rgba(148,163,184,.2); }
[data-theme="dark"] .tmx-row { border-color: rgba(148,163,184,.14); }
[data-theme="dark"] .tmx-row:hover { background: rgba(99,102,241,.06); }
[data-theme="dark"] .tmx-head-t b { color: #f1f5f9; }
[data-theme="dark"] .tmx-pv { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); color: #cbd5e1; }
[data-theme="dark"] .tmx-ctrl--title { background: rgba(99,102,241,.14); border-color: rgba(129,140,248,.25); }
[data-theme="dark"] .tmx-ctrl--cart { background: rgba(16,185,129,.12); border-color: rgba(52,211,153,.22); }
[data-theme="dark"] #scheduleTemplateToolbar .tmx { border-color: rgba(148,163,184,.18); }

/* Công cụ dropdown — menu kiểu command */
#page-schedules .schedule-menu-dropdown { min-width: 236px; padding: 6px; border-radius: 14px; border-color: #e9eef5; box-shadow: 0 20px 44px -14px rgba(15,23,42,.3), 0 2px 6px rgba(15,23,42,.06); }
#page-schedules .schedule-menu-item { border-radius: 9px; padding: 7px 10px; gap: 10px; font-size: .82rem; font-weight: 600; color: #1e293b; }
#page-schedules .schedule-menu-item i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; background: color-mix(in srgb, currentColor 11%, transparent); }
#page-schedules .schedule-menu-item:hover, #page-schedules .schedule-menu-item:focus-visible { background: #f1f5f9; outline: 0; }
#page-schedules .schedule-menu-divider { margin: 5px 6px; background: #f1f5f9; }

/* Ô tiêu đề có Tiêu đề tạm thời (bảng Lịch phát sóng) */
.ttmp-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 800; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 1px 8px; white-space: nowrap; flex-shrink: 0; }
.cell-generated-title.has-temp-title .ttmp-eff { gap: 6px; }
.cell-generated-title.has-temp-title .ttmp-eff .generated-text { color: #92400e; font-weight: 700; }
.ttmp-orig { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .7rem; color: #94a3b8; min-width: 0; }
.ttmp-orig-text { text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ttmp-orig .btn-edit-inline { opacity: .7; }
/* Modal Sửa tiêu đề / giỏ hàng 1 ca (crud.openEditScheduleContentModal) */
.stx-ov { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(15,23,42,.52) !important; }
.stx-modal { width: min(640px, 96vw) !important; max-width: 640px !important; max-height: 90vh; padding: 0 !important; border-radius: 18px !important; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px -12px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06) !important; animation: stxPop .24s cubic-bezier(.34,1.56,.64,1); }
@keyframes stxPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.stx-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eef2f7; background: linear-gradient(180deg, #eef2ff, #fff); }
.stx-head-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 6px 16px -4px rgba(99,102,241,.55); }
.stx-head-ic.cart { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 6px 16px -4px rgba(5,150,105,.5); }
.stx-head-t { min-width: 0; }
.stx-head-t h3 { margin: 0; font-size: 1.02rem; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.stx-head-t p { margin: 2px 0 0; font-size: .74rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stx-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: all .15s; }
.stx-x:hover { background: #f1f5f9; color: #0f172a; }
.stx-x:focus-visible, .stx-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.stx-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.stx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 10px; }
.stx-chip i { color: #6366f1; font-size: .7rem; }
.stx-lbl { display: flex; align-items: center; font-size: .72rem; font-weight: 800; color: #334155; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.stx-lbl span { margin-left: auto; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.stx-in { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; font-family: inherit; font-weight: 600; line-height: 1.5; color: #0f172a; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.stx-in:hover { border-color: #cbd5e1; }
.stx-in:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
@media (min-width: 768px) { .stx-modal textarea.stx-in { font-size: .88rem !important; } }
.stx-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid #eef2f7; }
.stx-foot-note { margin-right: auto; font-size: .72rem; color: #94a3b8; }
.stx-foot-note kbd { font-family: inherit; font-size: .66rem; border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: #f8fafc; color: #64748b; }
.stx-btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .15s; }
.stx-btn.ghost { background: #fff; border-color: #e2e8f0; color: #475569; }
.stx-btn.ghost:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.stx-btn.primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 4px 12px -3px rgba(99,102,241,.5); }
.stx-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 7px 16px -4px rgba(99,102,241,.55); }
.stx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (max-width: 480px) {
  .stx-ov { align-items: flex-end !important; padding: 0 !important; }
  .stx-modal { width: 100vw !important; max-width: 100vw !important; border-radius: 18px 18px 0 0 !important; max-height: 94vh; }
  .stx-head, .stx-body, .stx-foot { padding-left: 14px; padding-right: 14px; }
  .stx-foot-note { display: none; }
  .stx-foot .stx-btn.primary { flex: 1; justify-content: center; height: 42px; }
  .stx-foot .stx-btn.ghost { height: 42px; }
}
[data-theme="dark"] .stx-modal, [data-theme="dark"] .stx-x, [data-theme="dark"] .stx-btn.ghost { background: #161b22 !important; color: #e6edf3; border-color: #30363d; }
[data-theme="dark"] .stx-head { background: linear-gradient(180deg, rgba(99,102,241,.14), #161b22); border-color: #30363d; }
[data-theme="dark"] .stx-head-t h3, [data-theme="dark"] .stx-lbl { color: #e6edf3; }
[data-theme="dark"] .stx-foot { border-color: #30363d; }
[data-theme="dark"] .stx-chip { background: #21262d; border-color: #30363d; color: #c9d1d9; }
[data-theme="dark"] .stx-in { background: #0d1117; border-color: #30363d; color: #e6edf3; }
.so-temp-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .6rem; font-weight: 800; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 0 6px; vertical-align: 1px; }

/* Responsive */
@media (max-width: 1023px) {
  .fsx-trigger { max-width: 220px; }
}
@media (max-width: 767px) {
  #page-schedules .filter-bar.fsx-bar { padding: 10px; gap: 6px; align-items: stretch; }
  #page-schedules .fsx-bar > .fsx-date { flex: 1 1 calc(50% - 6px); min-width: 0; }
  #page-schedules .fsx-bar > .fsx, #page-schedules .fsx-bar #scheduleExtraFilters > .fsx { flex: 1 1 calc(50% - 6px); }
  #page-schedules .fsx-bar .fsx-trigger { width: 100%; max-width: none; height: 40px; }
  #page-schedules .fsx-bar > .fsx[data-for="scheduleRoomFilter"] { flex-basis: 100%; }
  .fsx-date { height: 40px; }
  #page-schedules .fsx-date input.filter-date { width: auto; flex: 1; min-width: 118px; }
  #page-schedules .fsx-bar .search-box { flex: 1 1 100%; margin-left: 0 !important; }
  .fsx-kbd { display: none; }
  #scheduleTemplateToolbar .tt-actions .btn { flex: 1 1 auto; justify-content: center; height: 38px; }
}
@media (max-width: 480px) {
  .fsx-reset { height: 40px; }
  .fsx-reset .fsx-hide-xs { display: none; }
  .fsx-trigger { font-size: .74rem; gap: 6px; padding: 0 10px; }
  .fsx.is-active .fsx-lbl, .fsx.is-active .fsx-sep { display: none; }
  #scheduleTemplateToolbar .tt-actions .btn { font-size: .72rem; padding: 0 9px; }
}
/* Dark */
[data-theme="dark"] #page-schedules .filter-bar.fsx-bar { background: var(--th-card, #1e293b); border-color: rgba(148,163,184,.2); }
[data-theme="dark"] .fsx-trigger, [data-theme="dark"] .fsx-date { background: #0f172a; border-color: rgba(148,163,184,.3); color: #cbd5e1; }
[data-theme="dark"] .fsx-trigger:hover { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .fsx.is-active .fsx-trigger, [data-theme="dark"] .fsx-date.is-active { background: rgba(99,102,241,.18); border-color: rgba(129,140,248,.6); color: #c7d2fe; }
[data-theme="dark"] .fsx-lbl { color: #a5b4fc; }
[data-theme="dark"] #page-schedules .fsx-date input.filter-date { color: #e2e8f0; color-scheme: dark; }
[data-theme="dark"] .fsx[data-for="scheduleRoomFilter"] .fsx-trigger { color: #f1f5f9; }
[data-theme="dark"] .fsx-pop { background: #1e293b; border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .fsx-search { border-color: rgba(148,163,184,.18); }
[data-theme="dark"] .fsx-search input { color: #f1f5f9; }
[data-theme="dark"] .fsx-opt { color: #cbd5e1; }
[data-theme="dark"] .fsx-opt.is-active { background: rgba(148,163,184,.14); color: #fff; }
[data-theme="dark"] .fsx-opt.is-selected { color: #c7d2fe; }
[data-theme="dark"] .fsx-foot { border-color: rgba(148,163,184,.18); }
[data-theme="dark"] .fsx-kbd { background: #0f172a; border-color: rgba(148,163,184,.3); }
[data-theme="dark"] #scheduleTemplateToolbar .tt-seg--title { background: rgba(99,102,241,.14); border-color: rgba(129,140,248,.25); }
[data-theme="dark"] #scheduleTemplateToolbar .tt-seg--cart { background: rgba(16,185,129,.12); border-color: rgba(52,211,153,.22); }
[data-theme="dark"] #scheduleTemplateToolbar .tt-actions .btn { background: #0f172a; border-color: rgba(148,163,184,.3); color: #cbd5e1; }
[data-theme="dark"] #scheduleTemplateToolbar .tt-actions .btn.tt-temp-btn { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: #fcd34d; }
[data-theme="dark"] #page-schedules .schedule-menu-item { color: #e2e8f0; }
[data-theme="dark"] #page-schedules .schedule-menu-item:hover { background: rgba(148,163,184,.14); }
[data-theme="dark"] .ttmp-tag, [data-theme="dark"] .so-temp-tag { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); color: #fcd34d; }
[data-theme="dark"] .cell-generated-title.has-temp-title .ttmp-eff .generated-text { color: #fcd34d; }

/* ==========================================
   SYNC & IMPORT/EXPORT CARDS
   ========================================== */
.sync-grid,
.import-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.sync-card,
.ie-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sync-log-card {
  grid-column: 1 / -1;
}

.sync-card-header,
.ie-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-100);
}

.sync-icon,
.ie-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.sync-icon.google,
.ie-icon.import {
  background: var(--primary-bg);
  color: var(--primary);
}

.sync-icon.manual {
  background: var(--info-bg);
  color: var(--info);
}

.sync-icon.log {
  background: var(--gray-200);
  color: var(--gray-600);
}

.ie-icon.export {
  background: var(--success-bg);
  color: var(--success);
}

.sync-card-header h3,
.ie-card-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.sync-card-body,
.ie-card-body {
  padding: var(--spacing-lg);
}

.sync-card-body p,
.ie-card-body p {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-md);
}

/* Auto-sync status info */
.auto-sync-status {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
}
.auto-sync-status.hidden { display: none; }
.auto-sync-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.825rem;
  color: #1e293b;
  padding: 3px 0;
}
.auto-sync-status-row i {
  color: #16a34a;
  width: 16px;
  text-align: center;
  font-size: 0.8rem;
}
.auto-sync-status-row strong {
  color: #15803d;
  font-weight: 600;
}

.sync-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sync-status {
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--gray-600);
}

.sync-log {
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 0.8125rem;
  padding: var(--spacing-sm);
  background: var(--gray-900);
  border-radius: var(--radius);
  color: var(--gray-300);
}

.sync-log-entry {
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--gray-800);
}

.sync-log-entry.success {
  color: var(--success);
}

.sync-log-entry.error {
  color: var(--danger);
}

.sync-card-footer,
.ie-card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: var(--spacing-md);
}

.file-upload:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.file-upload i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

/* ==========================================
   SETTINGS
   ========================================== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.settings-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all 0.2s ease;
}

.settings-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--gray-300);
}

.settings-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  background: linear-gradient(to bottom, var(--white) 0%, #fafbfc 100%);
}

.settings-card-header h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.settings-card-header h3 i {
  color: var(--primary);
  font-size: 1.125rem;
}

.settings-card-body {
  padding: 24px;
}

/* App Info Grid */
.app-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.app-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #f8fafb;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}

.app-info-item:hover {
  background: #f0f4f8;
  border-color: var(--gray-300);
}

.app-info-label {
  font-size: 0.75rem;
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-info-label i {
  color: var(--primary);
  font-size: 0.875rem;
}

.app-info-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

.form-control {
  width: 100%;
  padding: 0.625rem var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: var(--transition);
}

textarea.form-control {
  min-height: 80px;
}

select.form-control {
  min-height: 40px;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--gray-100);
  cursor: not-allowed;
}

.toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 12px;
}

.toggle-label span:first-child {
  flex: 1;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  display: inline-block;
  flex-shrink: 0;
  width: 48px;
  height: 26px;
  background: #ccc;
  border-radius: 26px;
  position: relative;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-input:checked + .toggle-slider {
  background: var(--primary, #4f46e5);
}

.toggle-input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

.toggle-slider:hover {
  background: #bbb;
}

.toggle-input:checked + .toggle-slider:hover {
  background: var(--primary-dark, #4338ca);
}

/* Radio Group */
.radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: var(--radius, 6px);
  transition: all 0.2s ease;
}

.radio-label:hover {
  background: var(--gray-50, #f9fafb);
}

.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary, #4f46e5);
}

.radio-label input[type="radio"]:checked + span {
  font-weight: 500;
  color: var(--primary, #4f46e5);
}

.radio-label:has(input:checked) {
  border-color: var(--primary, #4f46e5);
  background: var(--primary-light, #eef2ff);
}

/* Form Section */
.form-section {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius, 8px);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--gray-50, #f9fafb);
}

.form-section h4 {
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700, #374151);
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section h4 i {
  color: var(--primary, #4f46e5);
}

/* Form Row for side-by-side inputs */
.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 200px;
}

.form-row .col-6 {
  flex: 0 0 calc(50% - 8px);
  min-width: 150px;
}

.form-row .col-4 {
  flex: 0 0 calc(33.33% - 11px);
  min-width: 120px;
}

/* Text muted */
.text-muted {
  color: var(--gray-500, #6b7280);
  font-size: 0.875rem;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.connection-status i {
  font-size: 0.5rem;
}

.connection-status.connected i {
  color: var(--success);
}

.connection-status.disconnected i {
  color: var(--danger);
}

.settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--gray-200);
}

.settings-actions .btn {
  min-width: 140px;
}

/* ==========================================
   LOGS
   ========================================== */
.logs-list {
  max-height: 600px;
  overflow-y: auto;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.log-entry:hover {
  background: var(--gray-50);
}

.log-level {
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.log-level.info {
  background: var(--info-bg);
  color: var(--info);
}

.log-level.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.log-level.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.log-content {
  flex: 1;
}

.log-message {
  font-size: 0.875rem;
  color: var(--gray-700);
  word-break: break-word;
}

.log-time {
  font-size: 0.75rem;
  color: var(--gray-400);
  flex-shrink: 0;
}

/* ==========================================
   MODALS
   ========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--spacing-lg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-overlay.active:not(.fl-modal) > .modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 0;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

/* Form wrapping modal-body + footer needs flex too */
.modal-overlay.active:not(.fl-modal) > .modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.modal.show {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  z-index: 1;
}

.modal-content.modal-sm {
  max-width: 480px;
}

.modal-content.modal-lg {
  max-width: 700px;
}

/* Modal Loading Overlay */
.modal-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: var(--radius-xl);
}

.modal-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--primary);
}

.modal-loading-spinner i {
  font-size: 2rem;
}

.modal-loading-spinner span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gray-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.1rem;
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-shrink: 0;
}

/* Confirm Modal Specific Styles */
.confirm-modal .modal-body {
  padding: var(--spacing-xl);
  text-align: center;
}

.confirm-modal .modal-body p {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

.confirm-modal .modal-footer {
  justify-content: center;
}

/* ==========================================
   TOAST
   ========================================== */
.toast-container {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 200000;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-800);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-close:hover {
  opacity: 1;
}

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

.toast-success {
  background: var(--success);
}

.toast-error {
  background: var(--danger);
}

.toast-warning {
  background: var(--warning);
  color: var(--gray-900);
}

.toast-info {
  background: var(--info);
}

/* ==========================================
   LOADING OVERLAY
   ========================================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.loading-overlay.active {
  display: flex;
  opacity: 1;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.loading-spinner i {
  font-size: 2rem;
  color: var(--primary);
}

.loading-spinner span {
  color: var(--gray-600);
  font-size: 0.875rem;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .widget-lg {
    grid-column: span 12;
  }

  .widget-md,
  .widget-sm {
    grid-column: span 6;
  }
}

@media (max-width: 1024px) {
  /* Mobile: Ẩn hoàn toàn sidebar (kể cả khi collapsed) */
  .admin-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important; /* Full width khi mở overlay, không phải 70px */
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  /* Override collapsed ~ main-content rule (specificity cao hơn) */
  .admin-main,
  .admin-sidebar.collapsed ~ .admin-main {
    margin-left: 0;
    max-width: 100vw;
  }

  /* Header full width khi sidebar ẩn */
  .admin-header,
  .admin-sidebar.collapsed ~ .admin-main .admin-header {
    left: 0 !important;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .brand-selector {
    min-width: 140px;
  }

  .brand-select {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  /* Reset collapsed styles trên mobile - sidebar luôn full width khi mở */
  .admin-sidebar.collapsed .sidebar-header {
    flex-direction: row;
    padding: var(--spacing-lg);
    gap: var(--spacing-sm);
  }

  .admin-sidebar.collapsed .logo-text,
  .admin-sidebar.collapsed .nav-section-title,
  .admin-sidebar.collapsed .nav-link span,
  .admin-sidebar.collapsed .nav-badge,
  .admin-sidebar.collapsed .user-info {
    display: revert;
  }

  .admin-sidebar.collapsed .nav-link {
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-lg);
  }

  .admin-sidebar.collapsed .sidebar-user {
    justify-content: flex-start;
  }

  .admin-sidebar.collapsed .sidebar-footer {
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .admin-sidebar.collapsed .logout-btn {
    display: flex;
  }

  .admin-sidebar.collapsed .sidebar-toggle {
    width: 32px;
  }

  .admin-sidebar.collapsed .sidebar-nav {
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.75rem;
    gap: 0.625rem;
    border-radius: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 1.05rem;
    border-radius: 10px;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .stat-label {
    font-size: 0.72rem;
  }

  .stat-sub-label {
    display: none;
  }

  .dashboard-date-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .date-filter-left {
    flex-direction: column;
    width: 100%;
  }

  .date-filter-presets {
    width: 100%;
  }

  .date-preset {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
  }

  .date-filter-custom {
    width: 100%;
    flex-wrap: wrap;
  }

  .date-input {
    flex: 1;
    min-width: 0;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .widget-lg,
  .widget-md,
  .widget-sm {
    grid-column: span 1;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    min-width: 100%;
  }

  .header-right {
    gap: var(--spacing-sm);
  }

  .brand-selector {
    min-width: 120px;
  }

  .brand-select {
    padding: 5px 6px;
    font-size: 0.75rem;
  }

  .header-actions {
    display: none;
  }

  .admin-content {
    padding: var(--spacing-md);
  }

  /* Mobile: cho phép cuộn ngang thay vì ẩn cột */
  .data-table {
    min-width: 600px;
  }

  .data-table th,
  .data-table td {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* Loading/Empty trên mobile: giữ giữa viewport khi bảng rộng hơn màn hình */
  .data-table td[colspan] {
    padding: var(--spacing-lg) 0.5rem;
  }

  .data-table td[colspan] .empty-state,
  .data-table td[colspan] .loading-state {
    position: sticky;
    left: 0;
  }

  /* Scrollbar rõ hơn trên mobile để user biết có thể cuộn */
  .data-table-wrapper::-webkit-scrollbar {
    height: 4px;
  }

  .data-table-wrapper {
    scrollbar-width: thin;
  }

  .modal {
    margin: var(--spacing-md);
    max-height: calc(100vh - 2 * var(--spacing-md));
  }
}

@media (max-width: 480px) {
  .breadcrumb {
    display: none;
  }

  .brand-selector {
    min-width: 100px;
    flex: 1;
  }

  .login-container {
    padding: var(--spacing-lg);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .stat-card {
    padding: 0.625rem 0.75rem;
    gap: 0.5rem;
    border-radius: 10px;
  }

  .stat-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.95rem;
    border-radius: 8px;
  }

  .stat-value {
    font-size: 1.2rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .stat-trend,
  .stat-sub-label {
    display: none;
  }

  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .btn span {
    display: none;
  }

  .btn i {
    margin: 0;
  }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--gray-500); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }

/* Empty and Loading States */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--gray-500);
  text-align: center;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

.empty-state p {
  font-size: 0.9375rem;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--gray-500);
}

.loading-state i {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  color: var(--primary);
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-success {
  background: var(--success-bg);
  color: var(--success);
}

.status-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-info {
  background: var(--info-bg);
  color: var(--info);
}

.status-secondary {
  background: var(--gray-200);
  color: var(--gray-600);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.page-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 0 var(--spacing-sm);
  color: var(--gray-500);
}

.pagination-info {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ==========================================
   SORTABLE TABLE HEADERS
   ========================================== */
.sortable-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}

.sortable-header:hover {
  background: var(--gray-50);
}

.sort-icon {
  display: inline-block;
  margin-left: 4px;
  color: var(--gray-400);
  font-size: 0.75rem;
  vertical-align: middle;
}

.sort-icon.active {
  color: var(--primary);
}

/* ==========================================
   SCHEDULE PAGINATION BAR
   ========================================== */
.schedule-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

.rows-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.rows-per-page-select {
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
  outline: none;
}

.rows-per-page-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.schedule-pagination-info {
  font-size: 0.85rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.schedule-pagination-btns {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sch-page-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 6px;
}

.sch-page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.sch-page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.sch-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sch-page-ellipsis {
  padding: 0 4px;
  color: var(--gray-400);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .schedule-pagination-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .schedule-pagination-btns {
    justify-content: center;
  }
  .schedule-pagination-info {
    text-align: center;
  }
  .rows-per-page {
    justify-content: center;
  }
}

/* Form Groups */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-group .form-control {
  width: 100%;
}

.form-group small {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: 0.75rem;
  color: var(--gray-500);
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
}

.form-row .form-group {
  flex: 1;
}

/* Header User Dropdown */
.header-user-wrapper {
  position: relative;
}

.header-user-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.header-user-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--gray-700);
}

.header-user i {
  font-size: 1.25rem;
  color: var(--gray-500);
}

.header-user-arrow {
  font-size: 0.625rem;
  color: var(--gray-400);
  transition: transform 0.2s;
}

.header-user-btn.active .header-user-arrow {
  transform: rotate(180deg);
}

.header-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  z-index: 1000;
  overflow: hidden;
}

.header-user-dropdown.hidden {
  display: none;
}

.dropdown-user-info {
  padding: 12px 16px;
  background: var(--gray-50);
}

.dropdown-user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-800);
}

.dropdown-user-email {
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 2px;
}

.dropdown-divider {
  height: 1px;
  background: var(--gray-200);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gray-700);
  transition: background 0.15s;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--gray-100);
}

.dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--gray-500);
}

.dropdown-item-danger {
  color: var(--danger);
}

.dropdown-item-danger:hover {
  background: #fef2f2;
}

.dropdown-item-danger i {
  color: var(--danger);
}

/* ==========================================
   DASHBOARD WIDGETS - ENHANCED
   ========================================== */

/* Widget Badge */
.widget-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: var(--spacing-xs);
}
.widget-badge-danger { background: var(--danger); }

/* Widget: Ca đã kết thúc + Ca đã hủy */
.ended-item, .cancelled-item {
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100); transition: var(--transition);
}
.ended-item:last-child, .cancelled-item:last-child { border-bottom: none; }
.ended-item:hover { background: var(--gray-50); }
.cancelled-item:hover { background: #fef2f2; }
.ended-check, .cancelled-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem;
}
.ended-check { background: #dcfce7; color: #16a34a; }
.cancelled-x { background: #fee2e2; color: #dc2626; }
.ended-item .live-time, .cancelled-item .live-time { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.ended-badge, .cancelled-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800; border-radius: 999px;
  padding: 1px 8px; letter-spacing: .02em;
}
.ended-badge { background: #f1f5f9; color: #475569; }
.cancelled-badge { background: #fee2e2; color: #b91c1c; }
.cancelled-item .live-host { text-decoration: line-through; text-decoration-color: #fca5a5; text-decoration-thickness: 1.5px; }
.ended-item .start-time, .cancelled-item .start-time { font-size: 0.7rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }

/* Widget Scrollable */
.widget-scrollable {
  max-height: 280px;
  overflow-y: auto;
}

/* Widget Empty State */
.widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--gray-400);
  text-align: center;
}

.widget-empty i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.widget-empty p {
  font-size: 0.875rem;
  margin: 0;
}

/* Widget More Link */
.widget-more {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--gray-100);
  text-align: center;
}

.widget-more a {
  color: var(--primary);
  font-size: 0.875rem;
  text-decoration: none;
}

.widget-more a:hover {
  text-decoration: underline;
}

/* Chart Container */
.chart-container {
  position: relative;
  height: 220px;
  padding: var(--spacing-sm);
}

/* Live Now Items */
.live-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}

.live-item:last-child {
  border-bottom: none;
}

.live-item:hover {
  background: var(--gray-50);
}

.live-indicator {
  position: relative;
  width: 12px;
  height: 12px;
}

.live-indicator .pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--danger);
  border-radius: var(--radius-full);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

.live-host {
  font-weight: 500;
  color: var(--gray-800);
  /* Cho phép chip mã/ảnh host nằm cạnh tên mà không bị cắt (trước là nowrap+ellipsis) */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* ==========================================================================
   CHIP MÃ + ẢNH HOST TRÊN DASHBOARD
   Chỉ hiện cho host đã cấu hình mã hoặc ảnh (server gắn schedule.host_infos).
   Dùng chung cho widget Đang Live / Sắp diễn ra / Đã kết thúc / popup.
   ========================================================================== */
.dash-host-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.dash-host-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 3px;
  background: var(--gray-100, #f1f5f9);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 999px;
  line-height: 1;
}

/* Chip chỉ có mã (không ảnh) → padding đều 2 bên */
.dash-host-chip:not(:has(.dash-host-ava)) {
  padding: 3px 9px;
}

.dash-host-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-host-ava:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.32);
}

.dash-host-code {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4f46e5;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-theme="dark"] .dash-host-chip {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(129, 140, 248, 0.28);
}

[data-theme="dark"] .dash-host-code { color: #a5b4fc; }
[data-theme="dark"] .dash-host-ava { border-color: rgba(226, 232, 240, 0.85); }

/* Caption tên host dưới ảnh khi phóng to */
.image-zoom-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Chừa chỗ cho caption → ảnh cao tối đa 82vh thay vì 90vh */
.image-zoom-wrap img {
  max-height: 82vh;
}

.image-zoom-caption {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.live-room {
  font-size: 0.75rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Platform badge trong widget Đang Live */
.live-platform-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  background: var(--gray-50);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}
/* === SHOPEE & biến thể: SHP, SP, Shopee, ShopeeVideo, ShpVideo, ShopeeFood === */
.live-platform-badge.platform-shopee,
.live-platform-badge.platform-shp,
.live-platform-badge.platform-sp,
.live-platform-badge.platform-shopeevideo,
.live-platform-badge.platform-shpvideo,
.live-platform-badge.platform-shopeefood,
.live-platform-badge.platform-shopeelive,
.live-platform-badge[class*="platform-shp"],
.live-platform-badge[class*="platform-shopee"] {
  background: #fff0eb;
  color: #ee4d2d;
  border: 1px solid #fcc8b5;
}
/* === TIKTOK & biến thể: TTS, TT, TikTok, TikTokShop, TTShop, TTLive === */
.live-platform-badge.platform-tiktok,
.live-platform-badge.platform-tiktokshop,
.live-platform-badge.platform-tts,
.live-platform-badge.platform-tt,
.live-platform-badge.platform-ttshop,
.live-platform-badge.platform-ttlive,
.live-platform-badge.platform-tiktokshoplive,
.live-platform-badge[class*="platform-tiktok"],
.live-platform-badge[class*="platform-tts"] {
  background: #f0f0f0;
  color: #161823;
  border: 1px solid #c4c4c4;
}
/* === LAZADA & biến thể: LZD, LZ, Lazada, LazLive === */
.live-platform-badge.platform-lazada,
.live-platform-badge.platform-lzd,
.live-platform-badge.platform-lz,
.live-platform-badge.platform-lazlive,
.live-platform-badge[class*="platform-laz"],
.live-platform-badge[class*="platform-lzd"] {
  background: #eef2ff;
  color: #0f146d;
  border: 1px solid #c5cbff;
}
/* === FACEBOOK & biến thể: FB, FBLive, Facebook === */
.live-platform-badge.platform-facebook,
.live-platform-badge.platform-fb,
.live-platform-badge.platform-fblive,
.live-platform-badge.platform-facebooklive,
.live-platform-badge[class*="platform-fb"],
.live-platform-badge[class*="platform-facebook"] {
  background: #e7f0ff;
  color: #1877f2;
  border: 1px solid #b3d4ff;
}
/* === YOUTUBE & biến thể: YT, YouTube, YTLive === */
.live-platform-badge.platform-youtube,
.live-platform-badge.platform-yt,
.live-platform-badge.platform-ytlive,
.live-platform-badge.platform-youtubelive,
.live-platform-badge[class*="platform-youtube"],
.live-platform-badge[class*="platform-yt"] {
  background: #ffeaea;
  color: #ff0000;
  border: 1px solid #ffb3b3;
}
/* === INSTAGRAM & biến thể: IG, Instagram, IGLive === */
.live-platform-badge.platform-instagram,
.live-platform-badge.platform-ig,
.live-platform-badge.platform-iglive,
.live-platform-badge.platform-instagramlive,
.live-platform-badge[class*="platform-instagram"],
.live-platform-badge[class*="platform-ig"] {
  background: #fdf0ff;
  color: #c13584;
  border: 1px solid #e8b3f0;
}
/* === SENDO & biến thể: SD, Sendo === */
.live-platform-badge.platform-sendo,
.live-platform-badge.platform-sd,
.live-platform-badge[class*="platform-sendo"] {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}
/* === TIKI & biến thể === */
.live-platform-badge.platform-tiki,
.live-platform-badge.platform-tk,
.live-platform-badge[class*="platform-tiki"] {
  background: #e3f2fd;
  color: #1a94ff;
  border: 1px solid #90caf9;
}
/* === ZALO & biến thể === */
.live-platform-badge.platform-zalo,
.live-platform-badge.platform-zl,
.live-platform-badge[class*="platform-zalo"] {
  background: #e8f5e9;
  color: #0068ff;
  border: 1px solid #a5d6a7;
}

/* Brand badge (dùng chung cho live widget, upcoming card, và popup) */
.live-brand-badge,
.upcoming-brand,
.popup-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 0px 4px;
  border-radius: 3px;
  line-height: 1.5;
  background: #fde68a;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.upcoming-brand i {
  font-size: 0.5rem;
}

/* Custom legend cho Room Usage chart */
/* Room Usage: wrapper chứa cả chart + legend */
.room-usage-wrapper {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
  overflow: hidden;
}

.room-usage-chart-area {
  position: relative;
  height: 180px;
  flex-shrink: 0;
}

.room-chart-legend {
  margin-top: 10px;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.room-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #374151;
  flex-wrap: wrap;
}
.room-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.room-legend-name {
  font-weight: 500;
  white-space: nowrap;
}
.room-legend-badges {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}

.live-time {
  text-align: right;
  flex-shrink: 0;
}

.live-time .elapsed {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--danger);
}

.live-time .start-time {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* ==========================================
   Secondary Schedule (Lịch phụ) — Dashboard
   ========================================== */

/* Stat card sub-label for secondary count */
.stat-sec-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  padding: 1px 6px;
  margin-top: 3px;
  white-space: nowrap;
}

/* Divider between main and secondary schedule items */
.live-sec-divider {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: #f5f3ff;
  border-top: 1px solid #ede9fe;
  border-bottom: 1px solid #ede9fe;
  margin: 4px 0 0;
}
.live-sec-divider span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.upcoming-sec-divider {
  margin-top: 8px;
}

/* Secondary live-item */
.live-item-secondary {
  background: #fdfbff;
  border-left: 3px solid #a78bfa;
}
.live-item-secondary:hover {
  background: #f5f3ff;
}

/* Secondary pulse (violet) */
.live-indicator-sec .pulse-sec {
  background: #7c3aed !important;
  animation: pulse-sec 2s infinite;
}
@keyframes pulse-sec {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Secondary badge in host name / upcoming card */
.live-sec-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Secondary upcoming card */
.upcoming-card-secondary {
  border-left: 3px solid #a78bfa;
  background: #fdfbff;
}
.upcoming-card-secondary:hover {
  background: #f5f3ff;
}

/* ==========================================
   Upcoming Widget - Redesigned
   ========================================== */

/* Thông báo "Đã hết ca live hôm nay" */
.upcoming-today-done {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f0fdf4;
  border-left: 3px solid #22c55e;
  color: #15803d;
  font-size: 0.8125rem;
  font-weight: 500;
}

.upcoming-today-done i {
  color: #22c55e;
}

/* Section wrapper */
.upcoming-section {
  margin-bottom: 0;
}

.upcoming-section-body {
  padding: 4px 0;
}

/* Section header chung */
.upcoming-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
}

.upcoming-section-header .section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.upcoming-section-header .section-count {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Header "Hôm nay" */
.upcoming-section-header.today {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom: 1px solid #fde68a;
}

.upcoming-section-header.today .section-label {
  color: #92400e;
}

.upcoming-section-header.today .section-label i {
  color: #f59e0b;
}

.upcoming-section-header.today .section-count {
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
}

/* Header "Ngày mai" / ngày khác */
.upcoming-section-header.tomorrow {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1px solid #bfdbfe;
}

.upcoming-section-header.tomorrow .section-label {
  color: #1e40af;
}

.upcoming-section-header.tomorrow .section-label i {
  color: #3b82f6;
}

.upcoming-section-header.tomorrow .section-count {
  color: #1e40af;
  background: rgba(59, 130, 246, 0.12);
}

/* ==========================================
   Upcoming Card - List-style layout
   ========================================== */

.upcoming-card {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
  transition: background 0.15s ease;
}

.upcoming-card:last-child {
  border-bottom: none;
}

.upcoming-card:hover {
  background: var(--gray-50);
}

.upcoming-card.urgent {
  border-left: 3px solid var(--danger);
  background: rgba(239, 68, 68, 0.03);
}

.upcoming-card.soon {
  border-left: 3px solid var(--warning);
  background: rgba(245, 158, 11, 0.03);
}

/* Dòng 1: Thời gian  10:00 → 12:00  +  countdown */
.upcoming-card-time {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.upcoming-card-time .card-start {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
}

.upcoming-card-time .card-separator {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin: 0 1px;
}

.upcoming-card-time .card-end {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-500);
}

/* Dòng 2: Host */
.upcoming-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upcoming-card-host {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
}

.upcoming-card-host i {
  font-size: 0.625rem;
  color: var(--gray-400);
  width: 13px;
  text-align: center;
}

/* Dòng 3: Room + Platform + Duration */
.upcoming-card-details {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-left: 18px;
}

.upcoming-card-details .upcoming-room {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.upcoming-card-details .upcoming-room i {
  font-size: 0.5625rem;
  color: var(--gray-400);
}

/* Duration badge */
.upcoming-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--gray-100);
}

.upcoming-duration i {
  font-size: 0.5625rem;
}

/* Countdown pill — góc phải trên */
.upcoming-card-countdown {
  position: absolute;
  top: 10px;
  right: 12px;
}

.upcoming-card-countdown .countdown-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-500);
  background: var(--gray-50);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--gray-100);
  white-space: nowrap;
}

.upcoming-card-countdown.urgent .countdown-text {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

.upcoming-card-countdown.soon .countdown-text {
  color: #b45309;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

/* Platform badge */
.upcoming-platform {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.upcoming-platform.platform-shopee {
  background: #fff0eb;
  color: #ee4d2d;
  border: 1px solid #fcc8b5;
}

.upcoming-platform.platform-tiktok,
.upcoming-platform.platform-tiktokshop {
  background: #f0f0f0;
  color: #161823;
  border: 1px solid #d4d4d4;
}

.upcoming-platform.platform-lazada {
  background: #eef2ff;
  color: #0f146d;
  border: 1px solid #c5cbff;
}

.upcoming-platform:not(.platform-shopee):not(.platform-tiktok):not(.platform-lazada):not(.platform-tiktokshop) {
  background: var(--gray-50);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

/* Activity Items */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.activity-icon.info {
  background: var(--info-bg);
  color: var(--info);
}

.activity-icon.success {
  background: var(--success-bg);
  color: var(--success);
}

.activity-icon.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.activity-icon.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-message {
  font-size: 0.8125rem;
  color: var(--gray-700);
  line-height: 1.4;
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.activity-user {
  font-weight: 500;
}

/* ==========================================
   AVATAR / LOGO PICKER
   ========================================== */
.avatar-picker {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

.avatar-picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.avatar-picker-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.avatar-picker-tab:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.avatar-picker-tab.active {
  color: var(--primary);
  background: var(--white);
  border-bottom: 2px solid var(--primary);
}

.avatar-picker-panel {
  display: none;
  padding: 12px;
}

.avatar-picker-panel.active {
  display: block;
}

.avatar-picker-panel .form-control {
  font-size: 0.8125rem;
}

.avatar-picker-upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gray-500);
}

.avatar-picker-upload-area:hover {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.03);
  color: var(--primary);
}

.avatar-picker-upload-area i {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.avatar-picker-upload-area p {
  margin: 4px 0 0;
  font-size: 0.75rem;
}

.avatar-picker-preview {
  margin-top: 10px;
  text-align: center;
  display: none;
}

.avatar-picker-preview.has-image {
  display: block;
}

.avatar-picker-preview-wrap {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 2px solid var(--gray-200);
  background: var(--gray-100);
}

.avatar-picker-preview-wrap img {
  display: block;
  max-width: 160px;
  max-height: 160px;
  object-fit: contain;
}

.avatar-picker-preview-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

.avatar-picker-preview-wrap:hover .avatar-picker-preview-actions {
  opacity: 1;
}

.avatar-picker-preview-actions button {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.avatar-picker-preview-actions button:hover {
  background: var(--white);
  color: var(--primary);
}

.avatar-picker-preview-actions button.btn-remove:hover {
  color: var(--danger);
}

.avatar-picker-error {
  display: none;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  font-size: 0.75rem;
  align-items: center;
  gap: 6px;
}

.avatar-picker-error.show {
  display: flex;
}

.avatar-picker-hint {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-top: 4px;
}

/* Zoom Overlay */
.image-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease;
}

.image-zoom-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.image-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.image-zoom-close:hover {
  background: rgba(255,255,255,0.3);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Stat Card - Rooms icon: đã chuyển vào .stats-grid section */

/* ==========================================
   CRUD TABLE ENHANCEMENTS
   ========================================== */

/* Brand info */
.brand-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  object-fit: cover;
}

.brand-logo-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.brand-name {
  font-weight: 500;
}

/* Host info */
.host-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.host-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.host-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
}

.host-name {
  font-weight: 500;
}

.host-nickname {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* ─── Mã host trùng: badge tô màu theo nhóm (hue) ─── */
.host-code-dup {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.4;
  background: hsl(var(--dup-h, 0) 80% 95%);
  color: hsl(var(--dup-h, 0) 65% 32%);
  border: 1.5px solid hsl(var(--dup-h, 0) 70% 72%);
  white-space: nowrap;
}
.host-code-dup i {
  font-size: 0.72rem;
  opacity: 0.9;
}
[data-theme="dark"] .host-code-dup {
  background: hsl(var(--dup-h, 0) 45% 22%);
  color: hsl(var(--dup-h, 0) 85% 80%);
  border-color: hsl(var(--dup-h, 0) 50% 45%);
}

/* Banner cảnh báo mã host trùng */
.hosts-dup-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #92400e;
}
.hosts-dup-icon {
  font-size: 1.1rem;
  color: #d97706;
  margin-top: 2px;
}
.hosts-dup-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
}
.hosts-dup-text strong { font-size: 0.88rem; }
.hosts-dup-text > span { color: #b45309; }
.hosts-dup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.hosts-dup-group {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.hosts-dup-arrow {
  font-size: 0.7rem;
  color: hsl(var(--dup-h, 0) 50% 50%);
  flex-shrink: 0;
}
.hosts-dup-names {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hosts-dup-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  background: hsl(var(--dup-h, 0) 80% 94%);
  color: hsl(var(--dup-h, 0) 65% 32%);
  border: 1.5px solid hsl(var(--dup-h, 0) 70% 65%);
}
.hosts-dup-chip b { font-weight: 800; opacity: 0.85; }
.hosts-dup-name {
  padding: 2px 9px;
  border-radius: 7px;
  font-size: 0.77rem;
  font-weight: 600;
  background: hsl(var(--dup-h, 0) 80% 96%);
  color: hsl(var(--dup-h, 0) 55% 28%);
  border: 1px solid hsl(var(--dup-h, 0) 70% 80%);
}
.hosts-dup-name em { font-style: normal; opacity: 0.7; font-weight: 500; }
.hosts-dup-off { color: #ef4444; font-weight: 700; font-size: 0.72rem; }
[data-theme="dark"] .hosts-dup-warning {
  background: #3a2e0c;
  border-color: #6b5310;
  color: #fde68a;
}
[data-theme="dark"] .hosts-dup-text > span { color: #fcd34d; }
[data-theme="dark"] .hosts-dup-chip,
[data-theme="dark"] .hosts-dup-name {
  background: hsl(var(--dup-h, 0) 45% 22%);
  color: hsl(var(--dup-h, 0) 85% 80%);
  border-color: hsl(var(--dup-h, 0) 50% 45%);
}

@media (max-width: 480px) {
  .hosts-dup-warning { padding: 10px 12px; gap: 9px; }
  .hosts-dup-text { font-size: 0.76rem; }
}

/* ==========================================
   HOST — Banner quét từ lịch phát sóng
   (chưa đăng ký / thiếu ảnh-mã)
   ========================================== */
.hosts-scan-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid;
}
/* Banner "chưa đăng ký" — tông indigo (hành động thêm mới) */
#hostsScheduleWarning {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
/* Banner "thiếu ảnh/mã" — tông amber (cảnh báo bổ sung) */
#hostsIncompleteWarning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
/* Banner "trùng tên brand khác" — tông teal (đồng bộ) */
#hostsCrossBrandWarning {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #115e59;
}
.hosts-scan-icon {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.hosts-scan-icon--new { color: #6366f1; }
.hosts-scan-icon--warn { color: #d97706; }
.hosts-scan-icon--sync { color: #0d9488; }
.hosts-scan-brandcount {
  display: inline-block;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(13, 148, 136, 0.14);
  color: #0f766e;
}
.hosts-scan-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  flex: 1;
  min-width: 0;
}
.hosts-scan-text strong { font-size: 0.88rem; }
.hosts-scan-text > span { opacity: 0.85; }
.hosts-scan-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.hosts-scan-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.77rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid currentColor;
  color: inherit;
}
.hosts-scan-chip b { font-weight: 800; }
.hosts-scan-chip em { font-style: normal; opacity: 0.6; font-weight: 500; }
.hosts-scan-chip--btn {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hosts-scan-chip--btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px -2px rgba(146, 64, 14, 0.35);
}
.hosts-scan-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
}
.hosts-scan-tag--img { background: #fee2e2; color: #b91c1c; }
.hosts-scan-tag--code { background: #e0e7ff; color: #4338ca; }
.hosts-scan-more {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.7;
}
.hosts-scan-action {
  flex-shrink: 0;
  align-self: center;
}

/* Dark theme */
[data-theme="dark"] #hostsScheduleWarning {
  background: #1e1b4b;
  border-color: #3730a3;
  color: #c7d2fe;
}
[data-theme="dark"] #hostsIncompleteWarning {
  background: #3a2e0c;
  border-color: #6b5310;
  color: #fde68a;
}
[data-theme="dark"] #hostsCrossBrandWarning {
  background: #0c2e2a;
  border-color: #115e59;
  color: #99f6e4;
}
[data-theme="dark"] .hosts-scan-brandcount {
  background: rgba(45, 212, 191, 0.18);
  color: #5eead4;
}
[data-theme="dark"] .hosts-scan-chip {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .hosts-scan-tag--img { background: #451a1a; color: #fca5a5; }
[data-theme="dark"] .hosts-scan-tag--code { background: #1e1b4b; color: #a5b4fc; }

@media (max-width: 640px) {
  .hosts-scan-warning { flex-wrap: wrap; padding: 10px 12px; gap: 9px; }
  .hosts-scan-text { font-size: 0.76rem; }
  .hosts-scan-action { width: 100%; justify-content: center; }
}

/* Room info */
.room-name {
  font-weight: 500;
}

.room-platform {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.room-link {
  color: var(--primary);
}

.room-link:hover {
  color: var(--primary-dark);
}

/* Thumbnail ảnh phòng trong bảng danh sách */
.room-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.room-name-meta {
  min-width: 0;
  flex: 1;
}

.room-name-meta .room-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Khung cố định 66x46: mọi dòng thẳng hàng dù logo ngang hay vuông.
   Viền/nền đặt trên <img> để logo ngang không bị đóng khung thừa hai bên. */
.room-thumb {
  flex: 0 0 auto;
  width: 66px;
  height: 46px;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.room-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 9px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
}

/* Logo vuông → lấp đầy ô 46x46 */
.room-thumb img.is-square {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
}

/* Logo ngang → trải hết chiều ngang, contain nên không cắt mất chữ */
.room-thumb img.is-wide {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 7px;
  padding: 2px;
}

/* Logo dọc → canh theo chiều cao */
.room-thumb img.is-tall {
  height: 100%;
  width: auto;
  object-fit: contain;
  padding: 2px;
}

.room-thumb:not(.is-empty):hover {
  transform: translateY(-1px);
}

.room-thumb:not(.is-empty):hover img {
  border-color: #818cf8;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .18);
}

.room-thumb:not(.is-empty):focus-visible {
  outline: 0;
}

.room-thumb:not(.is-empty):focus-visible img {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

/* Chưa có ảnh / ảnh lỗi → ô gạch đứt, cùng cỡ khung nên bảng vẫn thẳng hàng */
.room-thumb.is-empty,
.room-thumb.is-broken {
  cursor: default;
  color: #cbd5e1;
  font-size: 1rem;
  border: 1.5px dashed #e2e8f0;
  background: #f8fafc;
  border-radius: 10px;
}

[data-theme="dark"] .room-thumb img,
[data-theme="dark"] .room-thumb.is-empty,
[data-theme="dark"] .room-thumb.is-broken {
  border-color: #334155;
  background: #1e293b;
}

@media (max-width: 767px) {
  .room-thumb {
    width: 54px;
    height: 40px;
  }

  .room-thumb img.is-square {
    width: 40px;
    height: 40px;
  }

  .room-name-cell {
    gap: 8px;
  }
}

/* Schedule info */
.schedule-host {
  font-weight: 500;
}

.schedule-room {
  font-size: 0.875rem;
}

.schedule-platform {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* Dashboard countdown - tabular-nums để số không nhảy */
.elapsed[data-start-time],
.countdown-text[data-start-time],
.popup-elapsed[data-start-time],
.popup-countdown[data-start-time] {
  font-variant-numeric: tabular-nums;
}

/* Schedule countdown - real-time timer */
.schedule-countdown {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.countdown-ending {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

.countdown-starting {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

/* ════════════════════════════════════════════════
   LỊCH PHỤ (secondary schedule) — hiển thị trong bảng
   Standalone row (ca phụ độc lập) + sub-row (trùng ca chính)
   Accent tím/indigo, bo tròn mềm, viền trái nhận diện nhanh
   ════════════════════════════════════════════════ */

/* ── Ca phụ độc lập: lịch chính KHÔNG có ca trùng giờ ── */
/* Stripe trái 3px + nền tím rất nhạt → nhìn 1 phát biết là lịch phụ */
.row-standalone-sec {
  background: linear-gradient(90deg,
    #8b5cf6 0, #8b5cf6 3px,
    rgba(139, 92, 246, 0.055) 3px, rgba(139, 92, 246, 0.018) 100%);
}
.row-standalone-sec:hover {
  background: linear-gradient(90deg,
    #7c3aed 0, #7c3aed 3px,
    rgba(139, 92, 246, 0.11) 3px, rgba(139, 92, 246, 0.05) 100%);
}
[data-theme="dark"] .row-standalone-sec {
  background: linear-gradient(90deg,
    #a78bfa 0, #a78bfa 3px,
    rgba(167, 139, 250, 0.10) 3px, rgba(167, 139, 250, 0.03) 100%);
}

/* Pill nhãn lịch phụ (đặt trong cột Host khi ca phụ không có host) */
.schedule-standalone-sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(99, 102, 241, 0.13));
  color: #6d28d9;
  border: 1px solid rgba(139, 92, 246, 0.34);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.schedule-standalone-sec-badge .ssb-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-standalone-sec-badge i {
  font-size: 0.78em;
  opacity: 0.85;
  flex-shrink: 0;
}
[data-theme="dark"] .schedule-standalone-sec-badge {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.20), rgba(129, 140, 248, 0.16));
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.42);
}

/* ── Sub-row: ca phụ TRÙNG giờ ca chính (hiện bổ trợ ngay dưới ca chính) ── */
.schedule-secondary-row {
  background: rgba(124, 58, 237, 0.035);
}
.schedule-secondary-row:hover {
  background: rgba(124, 58, 237, 0.07);
}
.schedule-secondary-row td {
  border-top: none !important;
  padding: 2px 12px 6px !important;
}
.ssr-arrow {
  color: #a78bfa;
  font-size: 0.72rem;
  margin-right: 6px;
}
.schedule-secondary-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.schedule-secondary-tag i { font-size: 0.82em; opacity: 0.8; }
.schedule-secondary-time {
  margin-left: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.ssr-cell-hosts {
  color: #475569;
  font-size: 0.82rem;
}
.ssr-nohost { color: #cbd5e1; }
.schedule-secondary-note-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  line-height: 1.6;
  text-transform: uppercase;
}
[data-theme="dark"] .schedule-secondary-tag {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.36);
  color: #c4b5fd;
}
[data-theme="dark"] .schedule-secondary-time { color: #94a3b8; }
[data-theme="dark"] .ssr-cell-hosts { color: #cbd5e1; }
[data-theme="dark"] .schedule-secondary-note-badge {
  background: linear-gradient(135deg, #ea6c0a, #d9600a);
}

/* ── Lịch CHÍNH: chỉ đánh dấu khi view có lẫn lịch phụ (để phân biệt rõ) ── */
/* Stripe trái emerald + nền xanh rất nhạt → đối lập với tím của lịch phụ */
.row-main-sched {
  background: linear-gradient(90deg,
    #10b981 0, #10b981 3px,
    rgba(16, 185, 129, 0.045) 3px, rgba(16, 185, 129, 0.012) 100%);
}
.row-main-sched:hover {
  background: linear-gradient(90deg,
    #059669 0, #059669 3px,
    rgba(16, 185, 129, 0.10) 3px, rgba(16, 185, 129, 0.04) 100%);
}
[data-theme="dark"] .row-main-sched {
  background: linear-gradient(90deg,
    #34d399 0, #34d399 3px,
    rgba(52, 211, 153, 0.09) 3px, rgba(52, 211, 153, 0.025) 100%);
}
.schedule-main-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(5, 150, 105, 0.12));
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.32);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.schedule-main-badge i { font-size: 0.8em; opacity: 0.85; }
[data-theme="dark"] .schedule-main-badge {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(16, 185, 129, 0.14));
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.4);
}

/* Mobile: thu gọn pill/tag */
@media (max-width: 480px) {
  .schedule-standalone-sec-badge { padding: 2px 8px; font-size: 0.66rem; gap: 4px; }
  .schedule-secondary-tag { padding: 1px 7px; font-size: 0.64rem; }
  .schedule-secondary-time { font-size: 0.7rem; margin-left: 5px; }
  .schedule-secondary-row td { padding: 2px 8px 5px !important; }
  /* Ca chính rất nhiều → ẩn chữ, chỉ giữ icon + stripe cho gọn */
  .schedule-main-badge { padding: 2px 6px; font-size: 0.6rem; }
  .schedule-main-badge .smb-text { display: none; }
}

/* Live row highlight */
.row-live {
  background: rgba(239, 68, 68, 0.05);
}
/* Ca đã đánh dấu HỦY (schedule flags) */
tr.sf-cancelled > td {
  background: #fef2f2 !important;
  color: #b91c1c;
  opacity: 0.6;
}
tr.sf-cancelled .sf-badge-wrap { opacity: 1; }

.row-live td:first-child {
  border-left: 3px solid var(--danger);
}

/* Row live: cột sticky cũng đổi nền */
.row-live td:last-child {
  background: rgba(239, 68, 68, 0.05);
}

/* ==========================================
   SCHEDULE CONFLICT WARNINGS
   ========================================== */

/* Trùng giờ cùng phòng: nền cam đậm, viền trái 4px */
.row-time-overlap {
  background: rgba(245, 158, 11, 0.13) !important;
}
.row-time-overlap td:first-child {
  border-left: 4px solid #f59e0b;
}

/* Trùng host cùng giờ cùng phòng: nền đỏ nhạt (nghiêm trọng nhất) */
.row-host-conflict {
  background: rgba(239, 68, 68, 0.12) !important;
}
.row-host-conflict td:first-child {
  border-left: 4px solid var(--danger);
}

/* Trùng host qua phòng khác: nền tím nhạt */
.row-cross-room-conflict {
  background: rgba(139, 92, 246, 0.08) !important;
}
.row-cross-room-conflict td:first-child {
  border-left: 3px solid #7c3aed;
}

/* Thiếu thông tin bắt buộc: nền xám nhạt */
.row-missing-info {
  background: rgba(107, 114, 128, 0.07) !important;
}
.row-missing-info td:first-child {
  border-left: 3px solid #9ca3af;
}

/* Conflict badge inline — thay thế icon đơn lẻ, hiển thị rõ nguyên nhân */
.conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
}
.conflict-badge-overlap {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.conflict-badge-host {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.45);
}
.conflict-badge-cross-room {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
  border: 1px solid rgba(139, 92, 246, 0.40);
}
.conflict-badge-missing {
  background: rgba(107, 114, 128, 0.13);
  color: #4b5563;
  border: 1px solid rgba(107, 114, 128, 0.35);
}

/* ==========================================
   SCHEDULE WARNINGS PANEL
   ========================================== */

.warnings-panel {
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: #fffbf0;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Trạng thái không có cảnh báo */
.warnings-panel.warnings-panel-ok {
  border-color: rgba(16, 185, 129, 0.35);
  background: #f0fdf8;
}
.warnings-panel-ok-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #065f46;
}
.warnings-panel-ok-content .fa-check-circle {
  color: #10b981;
  font-size: 1em;
}

.warnings-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(245,158,11,0.12) 0%, rgba(254,243,199,0.6) 100%);
  border-bottom: 1px solid rgba(245,158,11,0.25);
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
}
.warnings-panel-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.warnings-panel-title .fa-exclamation-triangle {
  color: #f59e0b;
  font-size: 1em;
}

.warnings-panel-toggle {
  background: none;
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 4px;
  color: #92400e;
  padding: 2px 7px;
  font-size: 0.75rem;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s;
  flex-shrink: 0;
}
.warnings-panel-toggle:hover {
  background: rgba(245,158,11,0.15);
}

.warnings-panel-body {
  padding: 8px 0;
}
.warnings-panel-body.warnings-collapsed {
  display: none;
}

/* Warn group */
.warn-group {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.warn-group:last-child { border-bottom: none; }

.warn-group-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.warn-type-overlap  { color: #b45309; background: rgba(245,158,11,0.07); }
.warn-type-host     { color: #b91c1c; background: rgba(239,68,68,0.06);  }
.warn-type-cross    { color: #6d28d9; background: rgba(139,92,246,0.07); }
.warn-type-missing  { color: #4b5563; background: rgba(107,114,128,0.06);}

.warn-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(0,0,0,0.08);
}

.warn-group-items {
  padding: 4px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Individual warn item */
.warn-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.82rem;
  color: #374151;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  user-select: none;
}
.warn-item:hover {
  background: rgba(0,0,0,0.04);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
}
.warn-item:active {
  background: rgba(0,0,0,0.09);
  transform: scale(0.995);
}

.warn-brief {
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.warn-scroll-link .warn-brief {
  cursor: pointer;
  text-decoration: underline dotted rgba(0,0,0,0.3);
}
.warn-scroll-link:hover .warn-brief {
  background: rgba(245,158,11,0.15);
  text-decoration: underline;
}

/* Tên phòng trong warn item (overview có thêm room name) */
.warn-brief-room {
  font-weight: 600;
  color: #374151;
}

/* Ngày tháng trong warn item */
.warn-brief-date {
  font-weight: 600;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

.warn-vs {
  font-weight: 700;
  color: #9ca3af;
  font-size: 1em;
}

.warn-overlap-range {
  font-size: 0.78rem;
  color: #b45309;
  font-style: italic;
}

.warn-cross-detail,
.warn-missing-detail {
  font-size: 0.78rem;
  color: #6b7280;
}

/* Flash animation khi click scroll-to (room-level, màu vàng) */
@keyframes warnFlash {
  0%   { box-shadow: inset 0 0 0 3px #f59e0b; background: rgba(245,158,11,0.2) !important; }
  60%  { box-shadow: inset 0 0 0 3px #f59e0b; background: rgba(245,158,11,0.1) !important; }
  100% { box-shadow: none; background: transparent; }
}
.warn-row-flash {
  animation: warnFlash 1.6s ease-out forwards;
}
/* Ca vừa được chọn từ panel cảnh báo: tô nền + vạch trái amber trên TỪNG Ô (tr không vẽ nền/box-shadow ổn định) */
@keyframes warnCellFlash { 0%, 40% { background: rgba(245,158,11,.28); } 100% { background: rgba(245,158,11,.1); } }
#page-schedules tr.warn-row-focus > td { animation: warnCellFlash 1.2s ease-out 2; background: rgba(245,158,11,.1) !important; transition: background .4s; }
#page-schedules tr.warn-row-focus > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.warn-scroll-link:focus-visible { outline: 0; border-radius: 4px; box-shadow: 0 0 0 3px rgba(245,158,11,.35); }
[data-theme="dark"] #page-schedules tr.warn-row-focus > td { background: rgba(245,158,11,.16) !important; }

/* Conflict-pair highlight — màu động qua CSS variable --cf-color */
@keyframes conflictFlash {
  0%   { box-shadow: inset 0 0 0 3px var(--cf-color,#ef4444);
         background: color-mix(in srgb, var(--cf-color,#ef4444) 15%, transparent) !important; }
  40%  { box-shadow: inset 0 0 0 2px var(--cf-color,#ef4444);
         background: color-mix(in srgb, var(--cf-color,#ef4444) 7%, transparent) !important; }
  100% { box-shadow: none; background: transparent !important; }
}
.warn-conflict-flash {
  animation: conflictFlash 2.4s ease-out forwards;
  position: relative;
  z-index: 2;
}

/* ── Dot màu đầu mỗi warn-item (toggle đường kẻ) ── */
.warn-pair-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  opacity: 0.42;
  border: 2px solid transparent;
  transition: opacity 0.18s, transform 0.15s, box-shadow 0.18s;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.warn-pair-dot:hover {
  opacity: 0.9;
  transform: scale(1.3);
}
/* Khi đường kẻ đang hiển thị */
.warn-item.warn-line-active .warn-pair-dot {
  opacity: 1;
  border-color: white;
  box-shadow: 0 0 0 2px var(--wl-color, #ef4444);
  transform: scale(1.2);
}
.warn-item.warn-line-active {
  border-left: 3px solid var(--wl-color, #ef4444);
  padding-left: 4px !important;
  background: color-mix(in srgb, var(--wl-color, #ef4444) 7%, transparent);
  border-radius: 3px;
}

/* ── Điều khiển tự tắt trong panel header ── */
.warn-autodismiss {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 4px;
  flex-shrink: 0;
}
.warn-ad-label {
  font-size: 0.71rem;
  color: #6b7280;
  white-space: nowrap;
  user-select: none;
}
.warn-ad-btns {
  display: flex;
  gap: 2px;
}
.warn-ad-btn {
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  transition: all 0.14s;
  line-height: 1.45;
}
.warn-ad-btn:hover { background: #e5e7eb; border-color: #9ca3af; }
.warn-ad-btn.active { background: #1d4ed8; border-color: #1d4ed8; color: white; }

/* ── Nút xoá tất cả đường kẻ ── */
.warn-clear-lines-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 0.95rem;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.14s, background 0.14s;
  flex-shrink: 0;
}
.warn-clear-lines-btn:hover { color: #ef4444; background: rgba(239,68,68,0.09); }

/* ── Conflict SVG lines: floating tooltip ── */
.so-cf-svgtip {
  position: fixed;
  z-index: 9999;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px 5px 9px;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  gap: 6px;
}
.so-cftip-icon {
  font-size: 13px;
  opacity: 0.8;
}
.so-cftip--overlap { color: #fbbf24; }
.so-cftip--host    { color: #f87171; }
.so-cftip--cross   { color: #c4b5fd; }
.so-cftip--missing { color: #94a3b8; }

/* Card glow when a conflict line is hovered */
.so-cf-card-hover {
  box-shadow: 0 0 0 2px var(--cf-accent, #ef4444), 0 4px 16px color-mix(in srgb, var(--cf-accent, #ef4444) 30%, transparent) !important;
  z-index: 10;
  position: relative;
  transition: box-shadow 0.15s !important;
}

/* ── Warn item content + goto button (new badge-based system) ── */
.warn-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.warn-goto-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(0,0,0,0.04);
  color: #6b7280;
  font-size: 0.72rem;
  border: none;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  margin-left: auto;
}
.warn-item:hover .warn-goto-btn,
.warn-item-single:hover .warn-goto-btn {
  background: rgba(29,78,216,0.1);
  color: #1d4ed8;
}
.warn-item-single {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.warn-item-single:hover { background: rgba(0,0,0,0.04); }

/* ── Conflict badges on schedule cards (so-cbadge) ── */
.so-cbadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px 2px 5px;
  border-radius: 10px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  margin-left: auto;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.so-cbadge:hover {
  opacity: 0.9;
  transform: scale(1.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.so-cbadge:focus-visible { outline: 2px solid var(--cf-accent, #ef4444); outline-offset: 1px; }

.so-cbadge--overlap {
  background: rgba(245,158,11,0.15);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.4);
}
.so-cbadge--host {
  background: rgba(239,68,68,0.13);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,0.4);
}
.so-cbadge--cross {
  background: rgba(139,92,246,0.13);
  color: #6d28d9;
  border: 1px solid rgba(139,92,246,0.38);
}
.so-cbadge--missing {
  background: rgba(107,114,128,0.11);
  color: #4b5563;
  border: 1px solid rgba(107,114,128,0.3);
}

/* Card conflict highlight — inset shadow so it stacks on top of status border-left */
.so-card[data-conflict-type] {
  box-shadow: inset 4px 0 0 var(--cf-accent, #ef4444), 0 0 0 1.5px color-mix(in srgb, var(--cf-accent, #ef4444) 35%, transparent);
  background: color-mix(in srgb, var(--cf-accent, #ef4444) 6%, #fff) !important;
}
.so-card[data-conflict-type]:hover {
  background: color-mix(in srgb, var(--cf-accent, #ef4444) 11%, #fff) !important;
}
.so-card[data-conflict-type="overlap"] { --cf-accent: #f59e0b; }
.so-card[data-conflict-type="host"]    { --cf-accent: #ef4444; }
.so-card[data-conflict-type="cross"]   { --cf-accent: #8b5cf6; }
.so-card[data-conflict-type="missing"] { --cf-accent: #9ca3af; }

/* ==========================================
   KEEP LIVE STYLES
   ========================================== */

/* Keep Live row highlight — saved groups (always visible) */
/* ═══════════════════════════════════════════════════════════════════════════
 * KEEP LIVE — Auto title bulk apply panel
 * ═══════════════════════════════════════════════════════════════════════════ */
.kl-auto-title-panel {
  background: linear-gradient(135deg, #faf5ff, #f0f9ff);
  border: 1.5px solid #c4b5fd;
  border-radius: 12px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
}
.kl-at-header {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.kl-at-header:hover { background: rgba(139, 92, 246, 0.06); }
.kl-at-title { font-weight: 700; color: #5b21b6; font-size: 0.86rem; flex: 1; }
.kl-at-badge {
  background: #ede9fe; color: #5b21b6; font-size: 0.7rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 12px;
}
.kl-at-chevron { color: #8b5cf6; font-size: 0.78rem; transition: transform 0.2s; }
.kl-at-body {
  padding: 0.65rem 0.9rem 0.85rem;
  border-top: 1px dashed #ddd6fe;
}
.kl-at-input-row { margin-bottom: 0.5rem; }
.kl-at-template-input {
  width: 100%; padding: 0.45rem 0.65rem;
  border: 1.5px solid #c4b5fd; border-radius: 8px;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.82rem; color: #1e293b;
  outline: none; transition: all 0.15s;
}
.kl-at-template-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.kl-at-chips { margin-bottom: 0.45rem; line-height: 1.7; }
.kl-at-ph-chip {
  display: inline-block;
  padding: 0.12rem 0.5rem; margin: 0.1rem;
  background: #fff; border: 1px solid #c4b5fd; border-radius: 12px;
  font-size: 0.7rem; color: #5b21b6; cursor: pointer;
  user-select: none; white-space: nowrap;
  transition: all 0.12s;
}
.kl-at-ph-chip:hover {
  background: #8b5cf6; color: #fff; border-color: #8b5cf6;
  transform: translateY(-1px);
}
.kl-at-preview {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px;
  font-size: 0.78rem; color: #166534; margin-bottom: 0.6rem;
}
.kl-at-preview .fa-eye { color: #22c55e; }
.kl-at-list-header {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.6rem 0 0.35rem;
  font-size: 0.76rem; font-weight: 600; color: #475569;
  flex-wrap: wrap;
}
.kl-at-list-header > span { flex: 1; min-width: 180px; }
.kl-at-mini-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  font-size: 0.72rem; color: #475569; cursor: pointer;
  transition: all 0.12s;
}
.kl-at-mini-btn:hover {
  background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
}
.kl-at-list {
  max-height: 220px; overflow-y: auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 0.25rem;
}
.kl-at-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px; cursor: pointer;
  font-size: 0.78rem; color: #374151;
  transition: background 0.1s;
}
.kl-at-row:hover:not(.disabled) { background: #f1f5f9; }
.kl-at-row.disabled { opacity: 0.55; cursor: not-allowed; }
.kl-at-row-chk { cursor: pointer; }
.kl-at-row-chk:disabled { cursor: not-allowed; }
.kl-at-row-meta { flex: 1; min-width: 0; }
.kl-at-no-title { color: #16a34a; font-size: 0.72rem; font-style: italic; }
.kl-at-existing-title {
  color: #94a3b8; font-size: 0.72rem; font-style: italic;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kl-at-empty { text-align: center; padding: 1rem; color: #94a3b8; font-size: 0.78rem; }
.kl-at-actions { margin-top: 0.65rem; display: flex; justify-content: flex-end; }
.kl-at-apply-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff; border: 0; border-radius: 8px;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transition: all 0.15s;
}
.kl-at-apply-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
.kl-at-apply-btn:disabled {
  opacity: 0.45; cursor: not-allowed; box-shadow: none;
}
.kl-at-hint {
  margin: 0.6rem 0 0; font-size: 0.7rem; color: #64748b;
  background: #f8fafc; padding: 0.4rem 0.6rem; border-radius: 6px;
  line-height: 1.5;
}
.kl-at-hint .fa-circle-info { color: #8b5cf6; margin-right: 4px; }
@media (max-width: 480px) {
  .kl-at-list-header { flex-direction: column; align-items: stretch; }
  .kl-at-list-header > span { min-width: 0; }
}

.keep-live-row {
  background: rgba(16, 185, 129, 0.06) !important;
  box-shadow: inset 4px 0 0 var(--keep-color, #10b981);
  transition: all 0.18s ease;
}

.keep-live-row[data-keep-live-type="saved"] {
  background: rgba(16, 185, 129, 0.09) !important;
  background: color-mix(in srgb, var(--keep-color, #10b981) 11%, transparent) !important;
}

.keep-live-row[data-keep-live-type="detected"] {
  background: rgba(245, 158, 11, 0.08) !important;
}

.keep-live-row:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  background: color-mix(in srgb, var(--keep-color, #10b981) 17%, transparent) !important;
}

.keep-live-row td:first-child {
  position: relative;
  font-weight: 700;
}

/* Keep Live hover effect (when hovering group card) */
.keep-live-hover {
  background: rgba(245, 158, 11, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

/* Keep Live indicator — pill màu theo nhóm (background/border/color set inline theo group) */
.keep-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-left: 5px;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-weight: 800;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.keep-live-indicator i { font-size: 0.62em; }

.keep-live-indicator .keep-live-label {
  font-size: 0.62em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ── Quick dissolve: pill KEEP bấm chọn để hủy + hàng đã chọn ── */
.keep-live-indicator.kl-quick-pill { cursor: pointer; }
.keep-live-indicator.kl-quick-pill:hover { filter: brightness(0.94); box-shadow: 0 2px 6px rgba(15,23,42,.16); }
.keep-live-indicator.kl-quick-on { outline: 2px solid #dc2626; outline-offset: 1px; }
.keep-live-indicator.kl-quick-on::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6em; margin-left: 2px; color: #dc2626; }
.keep-live-row.kl-quick-row-on { box-shadow: inset 4px 0 0 #dc2626, inset 0 0 0 1px rgba(220,38,38,.35); background: rgba(220,38,38,.06) !important; }

/* ── Bar nổi chọn/hủy Keep Live (passive mode, trang Lịch phát sóng) ── */
.klq-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 1200; max-width: min(96vw, 900px); width: max-content;
  background: rgba(255,255,255,.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(220,38,38,.18); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15,23,42,.18);
  /* Danh sách mở LÊN TRÊN (không đè pagination/nội dung phía dưới) */
  display: flex; flex-direction: column-reverse;
}
/* Chừa khoảng trống đáy trang khi bar hiện → không che pagination/hàng cuối */
body.kl-quick-active #page-schedules { padding-bottom: 88px; }
.klq-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap; }
.klq-title { font-size: 0.82rem; font-weight: 700; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
.klq-title i { color: #d97706; }
.klq-title b { color: #b45309; }
.klq-month { border: 1.5px solid #c7d2fe; background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 0.76rem; border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.klq-month:hover { border-color: #a5b4fc; }
.klq-month:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
.klq-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: #475569; cursor: pointer; user-select: none; }
.klq-selall input { width: 15px; height: 15px; accent-color: #dc2626; cursor: pointer; margin: 0; }
.klq-spacer { flex: 1; min-width: 6px; }
.klq-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-weight: 700; font-size: 0.78rem; border-radius: 10px; padding: 7px 13px; cursor: pointer; transition: all .15s ease; }
.klq-btn.klq-expand {
  border-color: transparent;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.32);
}
.klq-btn.klq-expand:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(99,102,241,.46); filter: brightness(1.04); }
.klq-btn.klq-expand:active { transform: translateY(0); }
/* Khi chưa mở danh sách → nhấp nháy nhẹ để mời gọi bấm chọn nhóm */
.klq-bar:not(.klq-open) .klq-expand { animation: klqExpandPulse 2s ease-in-out infinite; }
@keyframes klqExpandPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(99,102,241,.32); }
  50% { box-shadow: 0 4px 22px rgba(99,102,241,.6); }
}
.klq-btn.klq-dissolve { border-color: transparent; background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.3); }
.klq-btn.klq-dissolve:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220,38,38,.42); }
.klq-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.klq-list { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; max-height: 42vh; overflow: auto; border-bottom: 1px solid #f1f5f9; }
.klq-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; font-size: 0.78rem; transition: all .12s ease; }
.klq-item:hover { border-color: #cbd5e1; background: #f8fafc; }
.klq-item.on { border-color: #fca5a5; background: #fef2f2; }
.klq-item input { width: 15px; height: 15px; accent-color: #dc2626; cursor: pointer; margin: 0; flex: 0 0 auto; }
.klq-item-time { font-weight: 800; color: #b45309; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.klq-item-time i { font-size: 0.72em; color: #d97706; }
.klq-item-date { color: #64748b; font-weight: 600; white-space: nowrap; }
.klq-item-cnt { background: #eef2ff; color: #4f46e5; font-weight: 800; font-size: 0.7rem; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.klq-item-name { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[data-theme="dark"] .klq-bar { background: rgba(30,41,59,.97); border-color: rgba(220,38,38,.3); }
[data-theme="dark"] .klq-title { color: #e2e8f0; }
[data-theme="dark"] .klq-btn { background: #0f172a; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .klq-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .klq-item.on { background: #3f1d1d; border-color: #7f1d1d; }

@media (max-width: 560px) {
  .klq-bar { left: 8px; right: 8px; transform: none; width: auto; max-width: none; }
  .klq-title { font-size: 0.76rem; }
  .klq-btn { padding: 7px 10px; font-size: 0.74rem; }
  .klq-item-name { display: none; }
}

/* Thanh "Hủy ca đã chọn" (#sfManualBar, CRUD) và thanh Keep Live (.klq-bar) đều fixed bottom-center
   → khi cả 2 cùng hiện sẽ đè lên nhau. Xếp chồng: đẩy thanh hủy ca lên TRÊN thanh Keep Live.
   (.klq-bar chiếm ~88px đáy trang và bung danh sách lên trên, nên đặt ở bottom 96px là vừa khít.) */
body.kl-quick-active #sfManualBar { bottom: 96px !important; }
@media (max-width: 560px) {
  body.kl-quick-active #sfManualBar { left: 8px !important; right: 8px !important; transform: none !important; justify-content: center; }
}

/* Keep Live group card hover */
.keep-live-group-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

/* Keep Live toolbar animation */
#keepLiveToolbar {
  animation: keepLiveSlideIn 0.3s ease-out;
}

@keyframes keepLiveSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keep Live toggle button active state */
#keepLiveToggleBtn.active {
  background: #d97706 !important;
  color: white !important;
  border-color: #d97706 !important;
}

/* Keep Live results scrollbar */
#keepLiveResults::-webkit-scrollbar {
  width: 6px;
}

#keepLiveResults::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

#keepLiveResults::-webkit-scrollbar-thumb {
  background: rgba(217, 119, 6, 0.3);
  border-radius: 3px;
}

#keepLiveResults::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 119, 6, 0.5);
}

/* Keep Live Manual Mode - Selected rows */
.keep-live-manual-selected {
  background: rgba(217, 119, 6, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.25);
}

.keep-live-manual-selected td {
  border-top: 1px solid rgba(217, 119, 6, 0.2) !important;
  border-bottom: 1px solid rgba(217, 119, 6, 0.2) !important;
}

/* Keep Live checkbox cell */
.keep-live-checkbox-cell {
  background: rgba(254, 243, 199, 0.3);
}

.keep-live-manual-selected .keep-live-checkbox-cell {
  background: rgba(217, 119, 6, 0.15);
}

/* Keep Live checkbox disabled visual */
.keep-live-checkbox:disabled {
  opacity: 0.3;
}

/* Keep Live th-check header */
.keep-live-th-check {
  background: rgba(254, 243, 199, 0.5) !important;
}

/* ======================================================
   SCHEDULE PAGE — Collapsible toolbar dropdown menu
   ====================================================== */
.schedule-actions-menu {
  position: relative;
  display: inline-block;
}

.schedule-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 16px;
  height: 38px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 10px !important;
  /* Gradient nổi bật */
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35);
  transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
}
.schedule-menu-trigger:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(99,102,241,0.45);
  transform: translateY(-1px);
}
.schedule-menu-trigger.active {
  filter: brightness(0.95);
  box-shadow: 0 1px 4px rgba(99,102,241,0.3);
  transform: translateY(0);
}

.schedule-menu-trigger i.fas.fa-tools {
  font-size: 0.82rem;
}

.schedule-menu-caret {
  font-size: 0.6rem !important;
  opacity: 0.8;
  transition: transform 0.2s;
}

.schedule-menu-trigger.active .schedule-menu-caret {
  transform: rotate(180deg);
}

/* Dark mode */
[data-theme="dark"] .schedule-menu-trigger {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  box-shadow: 0 2px 10px rgba(79,70,229,0.4) !important;
}
[data-theme="dark"] .schedule-menu-trigger:hover {
  box-shadow: 0 4px 18px rgba(79,70,229,0.55) !important;
}

.schedule-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1200;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
  min-width: 210px;
  padding: 6px 0;
  animation: schedMenuSlideIn 0.18s ease-out;
}

.schedule-menu-dropdown.open {
  display: block;
}

/* Chống tràn mép trái trên màn hình hẹp: căn theo mép trái trigger + giới hạn bề rộng theo viewport */
@media (max-width: 767px) {
  .schedule-menu-dropdown {
    left: 0;
    right: auto;
    max-width: calc(100vw - 24px);
  }
}

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

.schedule-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border: none;
  background: transparent;
  color: var(--text-primary, #1e293b);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  white-space: nowrap;
}
.schedule-menu-item:hover {
  background: var(--bg-hover, #f1f5f9);
}
.schedule-menu-item i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.schedule-menu-item--keeplive {
  font-weight: 600;
  color: #d97706 !important;
}

.schedule-menu-divider {
  height: 1px;
  background: var(--border-color, #e2e8f0);
  margin: 4px 0;
}

/* ======================================================
   KEEP LIVE — Fullscreen mode
   ====================================================== */
#keepLiveToolbar.keep-live-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.25rem 1.5rem !important;
  overflow: hidden !important;
}

#keepLiveToolbar.keep-live-fullscreen #keepLiveResults {
  flex: 1 !important;
  max-height: none !important;
  margin-top: 1rem !important;
  overflow-y: auto !important;
}

/* ======================================================
   KEEP LIVE — Floating selection buttons
   ====================================================== */
.keep-live-floating-btns {
  position: fixed;
  z-index: 1500;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.keep-live-floating-inner {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #1c1917;
  color: #fff;
  border-radius: 40px;
  padding: 0.45rem 0.9rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28), 0 1px 6px rgba(0,0,0,0.18);
  white-space: nowrap;
  font-size: 0.82rem;
}

.keep-live-floating-info {
  font-size: 0.8rem;
  color: #fde68a;
  font-weight: 500;
  padding-right: 0.25rem;
}

.keep-live-floating-create {
  background: #059669 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s;
}
.keep-live-floating-create:hover {
  background: #047857 !important;
}
/* Edit-mode: floating "Cập nhật nhóm" button — override green with blue */
.keep-live-floating-create.edit-mode {
  background: #0284c7 !important;
}
.keep-live-floating-create.edit-mode:hover {
  background: #0369a1 !important;
}

/* Floating "Hủy Keep Live" button — red */
.keep-live-floating-remove {
  background: #dc2626 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer;
}
.keep-live-floating-remove:hover {
  background: #b91c1c !important;
}

/* Floating "Gộp nhóm" button — purple */
.keep-live-floating-merge {
  background: #7c3aed !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer;
}
.keep-live-floating-merge:hover {
  background: #6d28d9 !important;
}

.keep-live-floating-clear {
  background: transparent !important;
  color: #fca5a5 !important;
  border: 1px solid #7f1d1d !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 0.8rem !important;
  cursor: pointer;
}
.keep-live-floating-clear:hover {
  background: #7f1d1d !important;
  color: #fff !important;
}

/* ============================================================================
   KEEP LIVE 2.0 — Redesign (toolbar · smart panel · cards · responsive)
   Palette: amber (KL identity) · violet (AI/smart) · emerald (saved) · red (warn)
   ============================================================================ */

/* ── Toolbar (modern glass card) ── */
#keepLiveToolbar.kl-toolbar {
  padding: 0;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fcd34d;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.12), 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden;
}
.kl-toolbar-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245,158,11,0.18);
}
.kl-toolbar-brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 800; color: #92400e; font-size: 0.95rem;
}
.kl-toolbar-brand .kl-brand-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 3px 8px rgba(217,119,6,.3);
}
.kl-toolbar-field { display: flex; align-items: center; gap: 0.4rem; }
.kl-toolbar-field label { font-weight: 600; color: #78350f; font-size: 0.82rem; }
#keepLiveModeSelect.kl-mode-select {
  min-width: 130px; padding: 0.4rem 0.6rem;
  border: 1.5px solid #fcd34d; border-radius: 10px;
  background: #fff; color: #1e293b; font-size: 0.84rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
#keepLiveModeSelect.kl-mode-select:focus {
  outline: 0; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
/* Dropdown chọn phòng nhanh trong toolbar Keep Live */
.kl-room-field label i { color: #d97706; margin-right: 2px; }
#keepLiveRoomSelect.kl-room-select {
  min-width: 150px; max-width: 240px; padding: 0.4rem 0.6rem;
  border: 1.5px solid #fcd34d; border-radius: 10px;
  background: #fffbeb; color: #1e293b; font-size: 0.84rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
#keepLiveRoomSelect.kl-room-select:hover { border-color: #f59e0b; }
#keepLiveRoomSelect.kl-room-select:focus { outline: 0; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
[data-theme="dark"] #keepLiveRoomSelect.kl-room-select { background: var(--th-card, #1e293b); color: var(--th-text, #e2e8f0); border-color: rgba(245,158,11,.35); }
@media (max-width: 560px) { #keepLiveRoomSelect.kl-room-select { min-width: 120px; } }
.kl-toolbar-spacer { margin-left: auto; }
.kl-toolbar-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.kl-manual-controls { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

/* Toolbar buttons (uniform pill style, color via modifier) */
.kl-tbtn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.8rem; border: 1.5px solid transparent; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.kl-tbtn:hover:not(:disabled) { transform: translateY(-1px); }
.kl-tbtn:active:not(:disabled) { transform: translateY(0); }
.kl-tbtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.kl-tbtn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
.kl-tbtn--primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 4px 12px rgba(217,119,6,.28); }
.kl-tbtn--success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 4px 12px rgba(5,150,105,.25); }
.kl-tbtn--info    { background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; box-shadow: 0 4px 12px rgba(2,132,199,.22); }
.kl-tbtn--violet  { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.25); }
.kl-tbtn--ghost   { background: #fff; color: #b45309; border-color: #fcd34d; }
.kl-tbtn--ghost:hover { background: #fffbeb; }
.kl-tbtn--danger-ghost { background: #fff; color: #dc2626; border-color: #fecaca; }
.kl-tbtn--danger-ghost:hover { background: #fef2f2; }
.kl-tbtn--icon { padding: 0.42rem 0.55rem; }
.kl-selection-info { font-size: 0.82rem; color: #78350f; font-weight: 600; }
.kl-count-label { font-size: 0.8rem; color: #92400e; font-weight: 600; }

/* ── Results panel ── */
#keepLiveResults.kl-results { padding: 0.85rem; max-height: 440px; overflow-y: auto; }
.kl-section { margin-bottom: 0.9rem; }
.kl-section-head {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 800; font-size: 0.8rem; letter-spacing: .2px;
  margin-bottom: 0.5rem; text-transform: uppercase;
}
.kl-section-head--saved { color: #059669; }
.kl-section-head--detected { color: #d97706; }
.kl-section-head--muted { color: #94a3b8; text-transform: none; font-weight: 700; }

/* ── Smart Insights Panel ── */
.kl-smart {
  background: linear-gradient(135deg, #faf5ff, #eef2ff);
  border: 1.5px solid #c4b5fd; border-radius: 14px;
  margin-bottom: 0.85rem; overflow: hidden;
  box-shadow: 0 2px 10px rgba(124,58,237,.08);
}
.kl-smart-head {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.95rem; cursor: pointer; user-select: none;
  transition: background .15s;
}
.kl-smart-head:hover { background: rgba(124,58,237,.05); }
.kl-smart-icon {
  width: 26px; height: 26px; border-radius: 8px; color: #fff;
  display: grid; place-items: center; font-size: .78rem;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
}
.kl-smart-title { font-weight: 800; color: #5b21b6; font-size: 0.88rem; }
.kl-smart-sub { color: #7c3aed; font-size: 0.72rem; font-weight: 600; opacity: .85; }
.kl-smart-chevron { margin-left: auto; color: #8b5cf6; font-size: 0.78rem; }
.kl-smart-body { padding: 0.4rem 0.95rem 0.95rem; border-top: 1px dashed #ddd6fe; }
.kl-muted { color: #94a3b8; }

/* Stats grid */
.kl-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem;
  margin: 0.6rem 0 0.7rem;
}
.kl-stat {
  background: #fff; border: 1px solid #e9d5ff; border-radius: 12px;
  padding: 0.6rem 0.5rem; text-align: center; min-width: 0;
}
.kl-stat-val { font-size: 1.35rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.kl-stat-val small { font-size: 0.8rem; font-weight: 700; color: #64748b; }
.kl-stat-lbl {
  font-size: 0.66rem; color: #64748b; margin-top: 0.25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kl-stat-lbl i { color: #a78bfa; }
.kl-stat-hosts { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; min-height: 24px; align-items: center; }
.kl-chip-host {
  display: inline-flex; align-items: center; gap: 3px;
  background: #f3e8ff; color: #6b21a8; border-radius: 10px;
  padding: 0.1rem 0.4rem; font-size: 0.66rem; font-weight: 700;
}
.kl-chip-host b { color: #7c3aed; }
/* Coverage ring (conic) */
.kl-ring {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  margin: 0 auto; display: grid; place-items: center;
  background: conic-gradient(var(--ring, #10b981) calc(var(--pct, 0) * 1%), #e9d5ff 0);
}
.kl-ring::before {
  content: ''; position: absolute; width: 34px; height: 34px;
  border-radius: 50%; background: #fff;
}
.kl-ring span { position: relative; font-size: 0.64rem; font-weight: 800; color: #0f172a; }

/* Pattern card */
.kl-pattern-card {
  display: flex; align-items: center; gap: 0.6rem;
  background: #fff; border: 1px solid #ddd6fe; border-left: 3px solid #8b5cf6;
  border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 0.6rem;
}
.kl-pattern-info { flex: 1; min-width: 0; }
.kl-pattern-label { font-size: 0.7rem; color: #6b21a8; font-weight: 700; margin-bottom: 0.2rem; }
.kl-pattern-label i { color: #8b5cf6; }
.kl-pattern-skeleton {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 6px;
  padding: 0.15rem 0.45rem; font-family: 'Fira Code','Consolas',monospace;
  font-size: 0.76rem; color: #5b21b6; word-break: break-word;
}
.kl-pattern-sample { font-size: 0.72rem; color: #475569; margin-top: 0.25rem; }
.kl-use-pattern-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem; border: 0; border-radius: 9px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff;
  font-size: 0.76rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 10px rgba(99,102,241,.25); transition: transform .15s, box-shadow .15s;
}
.kl-use-pattern-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,.35); }
.kl-pattern-empty {
  font-size: 0.74rem; color: #6b21a8; background: #faf5ff;
  border: 1px dashed #c4b5fd; border-radius: 9px; padding: 0.5rem 0.65rem; margin-bottom: 0.6rem;
}
.kl-pattern-empty i { color: #f59e0b; margin-right: 4px; }

/* Bảng xếp hạng tiêu đề Keep phổ biến */
.kl-ranked { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; padding: 0.55rem 0.65rem; margin-bottom: 0.6rem; }
.kl-ranked-head { font-size: 0.74rem; font-weight: 800; color: #334155; display: flex; align-items: center; gap: 6px; margin-bottom: 0.5rem; flex-wrap: wrap; }
.kl-ranked-head i { color: #f59e0b; }
.kl-ranked-head .kl-muted { font-weight: 600; font-size: 0.68rem; }
.kl-ranked-list { display: flex; flex-direction: column; gap: 5px; }
.kl-ranked-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #eef2f7; border-radius: 9px; background: #f8fafc; transition: border-color .15s, background .15s; }
.kl-ranked-item:hover { border-color: #c7d2fe; background: #fff; }
.kl-ranked-rank { flex: 0 0 auto; font-size: 0.7rem; font-weight: 900; color: #6366f1; min-width: 22px; }
.kl-ranked-main { flex: 1; min-width: 0; }
.kl-ranked-sample { font-size: 0.78rem; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-ranked-sk { display: inline-block; margin-top: 2px; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 5px; padding: 0 5px; font-family: 'Fira Code','Consolas',monospace; font-size: 0.68rem; color: #5b21b6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-ranked-fixed { font-size: 0.66rem; color: #94a3b8; font-style: italic; }
.kl-ranked-bar { height: 4px; background: #eef2f7; border-radius: 3px; margin-top: 4px; overflow: hidden; }
.kl-ranked-bar span { display: block; height: 100%; background: linear-gradient(90deg,#8b5cf6,#6366f1); border-radius: 3px; }
.kl-ranked-count { flex: 0 0 auto; font-size: 0.72rem; font-weight: 900; color: #4f46e5; background: #eef2ff; border-radius: 999px; padding: 2px 9px; }
.kl-ranked-use { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 0; border-radius: 8px; background: linear-gradient(135deg,#8b5cf6,#6366f1); color: #fff; font-size: 0.73rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(99,102,241,.25); transition: transform .15s, box-shadow .15s; }
.kl-ranked-use:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,.38); }
[data-theme="dark"] .kl-ranked { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .kl-ranked-head { color: #e2e8f0; }
[data-theme="dark"] .kl-ranked-item { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .kl-ranked-sample { color: #f1f5f9; }
@media (max-width: 560px) {
  .kl-ranked-item { flex-wrap: wrap; }
  .kl-ranked-use { margin-left: auto; }
}

/* Warnings */
.kl-warn-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.kl-warn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.6rem; border-radius: 9px;
  font-size: 0.74rem; font-weight: 600; border: 1px solid transparent;
}
button.kl-warn { cursor: pointer; transition: transform .12s, box-shadow .12s; }
button.kl-warn:hover { transform: translateY(-1px); }
.kl-warn b { font-weight: 800; }
.kl-warn-act { font-weight: 700; opacity: .85; margin-left: 0.15rem; }
.kl-warn--amber { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.kl-warn--red   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.kl-warn--violet{ background: #f5f3ff; color: #6b21a8; border-color: #ddd6fe; }
.kl-warn--ok    { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* Group suggestions */
.kl-sugg-box { margin-top: 0.3rem; }
.kl-sugg-scan-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.5rem 0.8rem; border: 1.5px dashed #c4b5fd; border-radius: 10px;
  background: #fff; color: #6d28d9; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.kl-sugg-scan-btn:hover { background: #faf5ff; border-color: #8b5cf6; }
.kl-sugg-status {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  font-size: 0.76rem; color: #475569; padding: 0.4rem 0.1rem;
}
.kl-sugg-status--ok { color: #166534; }
.kl-sugg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 700; color: #6d28d9; margin-bottom: 0.4rem; flex-wrap: wrap;
}
.kl-sugg-rescan {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 7px;
  padding: 0.2rem 0.5rem; font-size: 0.7rem; color: #475569; cursor: pointer; transition: all .12s;
}
.kl-sugg-rescan:hover { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.kl-sugg-list { display: flex; flex-direction: column; gap: 0.4rem; }
.kl-sugg-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: #fff; border: 1px solid #e9d5ff; border-radius: 10px; padding: 0.45rem 0.65rem;
}
.kl-sugg-meta { font-size: 0.78rem; color: #334155; min-width: 0; }
.kl-sugg-meta b { color: #0f172a; }
.kl-sugg-create-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.7rem; border: 0; border-radius: 9px;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  font-size: 0.74rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 8px rgba(5,150,105,.25); transition: transform .15s;
}
.kl-sugg-create-btn:hover { transform: translateY(-1px); }

/* ── Group card (modern) ── */
.kl-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1;
  border-radius: 12px; padding: 0.7rem 0.85rem; margin-bottom: 0.6rem;
  transition: box-shadow .18s, transform .18s;
}
.kl-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); transform: translateY(-1px); }
.kl-card--saved { border-left-color: #10b981; background: linear-gradient(135deg,#f0fdf4 0%, #fff 60%); }
.kl-card--detected { border-left-color: #f59e0b; background: linear-gradient(135deg,#fffbeb 0%, #fff 60%); }
.kl-card--already-saved { border-left-color: #cbd5e1; opacity: .85; }
.kl-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kl-card-date {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 800; color: #0f172a; font-size: 0.86rem;
}
.kl-card-date i { color: #94a3b8; font-size: .8em; }
.kl-card-time {
  background: #fef3c7; color: #92400e; font-weight: 700;
  font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 8px;
}
.kl-card-pill {
  background: #f1f5f9; color: #475569; font-weight: 700;
  font-size: 0.68rem; padding: 0.12rem 0.45rem; border-radius: 8px;
}
.kl-card-spacer { margin-left: auto; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .kl-stat-grid { gap: 0.45rem; }
  .kl-stat-val { font-size: 1.2rem; }
}
@media (max-width: 767px) {
  #keepLiveResults.kl-results { padding: 0.6rem; }
  .kl-toolbar-spacer { margin-left: 0; width: 100%; }
  .kl-toolbar-actions { width: 100%; }
  .kl-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .kl-pattern-card { flex-direction: column; align-items: stretch; }
  .kl-use-pattern-btn { justify-content: center; }
}
@media (max-width: 480px) {
  .kl-toolbar-bar { padding: 0.6rem; gap: 0.45rem; }
  .kl-toolbar-brand { font-size: 0.85rem; width: 100%; }
  .kl-tbtn { padding: 0.42rem 0.6rem; font-size: 0.78rem; min-height: 36px; }
  .kl-tbtn .kl-tbtn-label { display: none; }       /* icon-only trên mobile nhỏ */
  .kl-tbtn--primary .kl-tbtn-label,
  .kl-tbtn--success .kl-tbtn-label { display: inline; } /* giữ label nút chính */
  .kl-smart-sub { display: none; }
  .kl-stat-val { font-size: 1.05rem; }
  .kl-stat-lbl { font-size: 0.6rem; }
  .kl-sugg-item { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .kl-sugg-create-btn { justify-content: center; }
}

/* ── Dark theme ── */
[data-theme="dark"] .kl-smart { background: rgba(124,58,237,.1); border-color: rgba(167,139,250,.35); }
[data-theme="dark"] .kl-smart-title { color: #c4b5fd; }
[data-theme="dark"] .kl-stat,
[data-theme="dark"] .kl-pattern-card,
[data-theme="dark"] .kl-sugg-item,
[data-theme="dark"] .kl-card { background: var(--th-card, #1e293b); border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .kl-stat-val,
[data-theme="dark"] .kl-card-date,
[data-theme="dark"] .kl-sugg-meta b { color: #e2e8f0; }
[data-theme="dark"] .kl-ring::before { background: #1e293b; }
[data-theme="dark"] .kl-ring span { color: #e2e8f0; }
[data-theme="dark"] .kl-pattern-skeleton { background: rgba(139,92,246,.15); color: #c4b5fd; }
[data-theme="dark"] #keepLiveToolbar.kl-toolbar { background: rgba(217,119,6,.12) !important; border-color: rgba(245,158,11,.3) !important; }
[data-theme="dark"] .kl-toolbar-bar { background: rgba(0,0,0,.15); border-bottom-color: rgba(245,158,11,.2); }
[data-theme="dark"] .kl-toolbar-brand,
[data-theme="dark"] .kl-toolbar-field label,
[data-theme="dark"] .kl-count-label,
[data-theme="dark"] .kl-selection-info { color: #fde68a; }
[data-theme="dark"] #keepLiveModeSelect.kl-mode-select { background: var(--th-card, #1e293b); color: var(--th-text, #e2e8f0); border-color: rgba(245,158,11,.35); }
[data-theme="dark"] .kl-tbtn--ghost { background: var(--th-card, #1e293b); color: #fcd34d; border-color: rgba(245,158,11,.35); }
[data-theme="dark"] .kl-warn--amber { background: rgba(245,158,11,.15); color: #fcd34d; border-color: rgba(245,158,11,.3); }
[data-theme="dark"] .kl-sugg-scan-btn { background: var(--th-card, #1e293b); color: #c4b5fd; }
[data-theme="dark"] .kl-chip-host { background: rgba(167,139,250,.18); color: #ddd6fe; }

/* Table actions */
.table-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.table-actions .btn-sm {
  padding: 3px 6px;
  font-size: 0.7rem;
  min-width: unset;
}

/* Required field */
.required {
  color: var(--danger);
}

/* ==========================================
   TOOLS MODULE - FILTER LINKS - Cards Layout
   ========================================== */

/* Cards Container */
.fl-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
  padding: 4px;
}

/* Empty State */
.fl-cards-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
  text-align: center;
}

.fl-cards-empty i {
  font-size: 3rem;
  color: var(--gray-300);
  margin-bottom: 16px;
}

.fl-cards-empty h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.fl-cards-empty p {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 20px;
}

.fl-cards-empty .btn {
  padding: 10px 20px;
  font-size: 0.875rem;
}

.fl-cards-empty.error i {
  color: var(--danger);
}

.fl-cards-empty.error h3 {
  color: var(--danger);
}

/* Link Card */
.fl-link-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  animation: fl-card-fade-in 0.4s ease-out both;
}

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

@keyframes fl-card-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fl-link-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(99, 102, 241, 0.08);
  transform: translateY(-2px);
}

.fl-link-card.inactive {
  opacity: 0.7;
  background: var(--gray-50);
}

.fl-link-card.inactive:hover {
  opacity: 1;
}

/* Card Header */
.fl-link-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--gray-100);
}

.fl-link-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fl-link-card-status.active {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
}

.fl-link-card-status.active i {
  color: #10b981;
  font-size: 0.5rem;
  animation: pulse-dot 2s ease-in-out infinite;
}

.fl-link-card-status.inactive {
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  color: var(--gray-600);
}

.fl-link-card-status.inactive i {
  font-size: 0.5rem;
  color: var(--gray-400);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Card Actions */
.fl-link-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fl-link-action {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.fl-link-action:hover {
  background: var(--primary);
  color: var(--white);
  transform: scale(1.08);
}

.fl-link-action:focus {
  outline: none;
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.fl-link-action:active {
  transform: scale(0.95);
}

.fl-link-action.danger:hover {
  background: var(--danger);
  color: var(--white);
}

/* Copy success animation */
.fl-link-action.copied {
  background: var(--success) !important;
  color: var(--white) !important;
  animation: fl-copy-success 0.3s ease;
}

@keyframes fl-copy-success {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Card Body */
.fl-link-card-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fl-link-card-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-link-card-title h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fl-link-card-desc {
  font-size: 0.8125rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card URL Box */
.fl-link-card-url {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-link-card-url label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fl-link-url-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--gray-100) 100%);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.fl-link-url-box i {
  color: var(--primary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.fl-link-url-box code {
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Card Stats */
.fl-link-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fl-link-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 0.75rem;
  color: var(--gray-600);
  border: 1px solid var(--gray-100);
}

.fl-link-stat i {
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.fl-link-stat strong {
  font-weight: 600;
  color: var(--gray-700);
}

/* Card Features */
/* Brand name badge */
.fl-card-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #6366f1;
  font-weight: 500;
  margin-top: 2px;
}
.fl-card-brand i { font-size: 0.65rem; }

/* Room chips on card */
.fl-card-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fl-card-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #0369a1;
  white-space: nowrap;
}
.fl-card-room-chip i { font-size: 0.6rem; opacity: 0.7; }
.fl-card-room-chip.more {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

/* Feature toggles */
.fl-link-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.fl-card-feat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.675rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #64748b;
}
.fl-card-feat i { font-size: 0.6rem; }
.fl-card-feat.notif { background: #fef2f2; color: #b91c1c; }
.fl-card-feat.event { background: #f0fdf4; color: #15803d; }
.fl-card-feat.pic { background: #eff6ff; color: #1d4ed8; }
.fl-card-feat.night { background: #eef2ff; color: #4338ca; }
.fl-card-feat.refresh { background: #fefce8; color: #a16207; }
.fl-card-feat.img { background: #faf5ff; color: #7c3aed; }

/* Updated date in footer */
.fl-link-updated {
  font-size: 0.75rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 5px;
}
.fl-link-updated i { font-size: 0.625rem; }

/* Card Footer */
.fl-link-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(145deg, var(--gray-50) 0%, var(--white) 100%);
  border-top: 1px solid var(--gray-100);
}

.fl-link-created {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.fl-link-created i {
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.fl-link-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.fl-link-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.4);
}

.fl-link-open i {
  font-size: 0.6875rem;
}

/* Responsive Cards */
@media (max-width: 900px) {
  .fl-cards-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .fl-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fl-link-card-header {
    padding: 12px 14px;
  }

  .fl-link-card-body {
    padding: 14px;
  }

  .fl-link-card-footer {
    padding: 12px 14px;
    flex-direction: column;
    gap: 12px;
  }

  .fl-link-open {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   TOOLS MODULE - SYNC
   ========================================== */

.sync-last-time {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-500);
  font-size: 0.8125rem;
  margin-top: var(--spacing-md);
}

.sync-last-time i {
  font-size: 0.75rem;
}

/* Sync Card Header Info */
.sync-card-header-info {
  flex: 1;
  min-width: 0;
}

.sync-card-header-info h3 {
  margin: 0;
}

.sync-card-subtitle {
  display: block;
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 400;
  margin-top: 2px;
}

/* Sync Rooms List */
.sync-rooms-list {
  margin-top: var(--spacing-md);
}

.sync-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  margin: 3px 4px 3px 0;
}

.sync-room-chip i {
  font-size: 0.625rem;
}

.sync-rooms-empty {
  font-size: 0.8125rem;
  color: var(--gray-400);
  font-style: italic;
}

/* Sync Option Items (checkbox redesign) */
.sync-option-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.sync-option-item:hover {
  background: var(--white);
  border-color: var(--gray-200);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.sync-option-item input[type="checkbox"] {
  display: none;
}

.sync-option-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.625rem;
  color: transparent;
  transition: all 0.2s ease;
  background: var(--white);
}

.sync-option-item input[type="checkbox"]:checked ~ .sync-option-check {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.sync-option-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.sync-option-info i {
  color: var(--gray-400);
  width: 16px;
  text-align: center;
}

/* Sync Progress Bar */
.sync-progress {
  margin-top: var(--spacing-sm);
}

.sync-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.sync-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light, #818cf8) 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
  animation: syncProgressPulse 1.5s ease-in-out infinite;
}

@keyframes syncProgressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.sync-progress-text {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 6px;
  text-align: center;
}

/* Sync Card Footer adjustments */
.sync-card-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.sync-log-list {
  max-height: 400px;
  overflow-y: auto;
}

.sync-log-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s;
}

.sync-log-item:hover {
  background: var(--gray-50);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: var(--radius);
}

.sync-log-item:last-child {
  border-bottom: none;
}

.sync-log-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  margin-top: 2px;
}

.sync-log-icon.success {
  background: var(--success-bg);
  color: var(--success);
}

.sync-log-icon.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.sync-log-icon.info {
  background: var(--primary-bg);
  color: var(--primary);
}

.sync-log-content {
  flex: 1;
  min-width: 0;
}

.sync-log-message {
  font-size: 0.8125rem;
  color: var(--gray-700);
  line-height: 1.4;
}

.sync-log-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--gray-400);
  margin-top: 4px;
}

.sync-log-time i {
  font-size: 0.625rem;
}

/* Sync Log Tags */
.sync-log-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.sync-log-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
}

.sync-log-tag i {
  font-size: 0.5625rem;
}

.sync-log-tag.google {
  background: #fef3e2;
  color: #d48307;
}

.sync-log-tag.refresh {
  background: var(--primary-bg);
  color: var(--primary);
}

.sync-log-tag.records {
  background: var(--gray-100);
  color: var(--gray-600);
}

.sync-log-tag.duration {
  background: var(--gray-100);
  color: var(--gray-600);
}

.sync-log-tag.added {
  background: #ecfdf5;
  color: #059669;
}

.sync-log-tag.updated {
  background: #eff6ff;
  color: #2563eb;
}

.sync-log-tag.removed {
  background: #fef2f2;
  color: #dc2626;
}

.sync-log-tag.rooms {
  background: #f5f3ff;
  color: #7c3aed;
}

.sync-log-tag.interval {
  background: #fde68a;
  color: #b45309;
}

.sync-log-tag.auto {
  background: #e0e7ff;
  color: #4338ca;
}

.sync-log-breakdown {
  margin-top: 5px;
  font-size: 0.6875rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 5px;
}

.sync-log-breakdown i {
  font-size: 0.625rem;
  flex-shrink: 0;
}

/* Sync Log Header Actions */
.sync-log-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.sync-log-header-actions .btn-ghost {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sync-log-header-actions .btn-ghost:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.sync-log-header-actions .btn-ghost.text-danger:hover {
  background: #fef2f2;
  color: var(--danger);
}

/* Sync Log Empty State */
.sync-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--gray-400);
  text-align: center;
}

.sync-log-empty i {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  opacity: 0.5;
}

.sync-log-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Sync Log Footer */
.sync-log-footer {
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--gray-100);
}

.sync-log-count {
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* ==========================================
   TOOLS MODULE - IMPORT/EXPORT
   ========================================== */

.file-upload.dragover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.file-upload.has-file {
  border-color: var(--success);
  background: var(--success-bg);
}

.file-upload.has-file i {
  color: var(--success);
}

.file-upload small {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: var(--spacing-xs);
}

/* ==========================================
   TOOLS MODULE - USERS
   ========================================== */

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 0.875rem;
}

.user-email {
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* ==========================================
   TOOLS MODULE - LOGS
   ========================================== */

.log-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--gray-400);
}

.log-user {
  font-weight: 500;
  color: var(--gray-500);
}

.log-action {
  color: var(--gray-400);
}

/* ==========================================
   TOOLS MODULE - FORM SECTIONS
   ========================================== */

.form-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: var(--spacing-lg) 0 var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--gray-200);
}

/* Btn small variants */
.btn-sm {
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* ==========================================
   SHEET CONFIGURATION UI
   ========================================== */

.form-section {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

.form-section h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-section h4 i {
  color: var(--primary);
}

.input-group {
  display: flex;
  gap: var(--spacing-sm);
}

.input-group .form-control {
  flex: 1;
}

.input-group .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.col-6 {
  width: calc(50% - var(--spacing-sm));
}

.sheet-range-config {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--gray-300);
}

.loading-inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
  color: var(--gray-500);
  padding: var(--spacing-sm) 0;
}

.loading-inline i {
  color: var(--primary);
}

.btn-block {
  width: 100%;
}

.data-preview-table {
  margin-top: var(--spacing-sm);
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.preview-table th,
.preview-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--gray-200);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.preview-table th {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--gray-700);
  position: sticky;
  top: 0;
}

.preview-table td {
  color: var(--gray-600);
}

.preview-table tr:hover td {
  background: var(--gray-50);
}

.text-warning {
  color: var(--warning);
}

.text-danger {
  color: var(--danger);
}

.text-muted {
  color: var(--gray-500);
}

/* ==========================================
   ROOM CONFIG PAGE STYLES
   ========================================== */

/* Room Selector */
.room-config-selector {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow);
}

.room-config-selector .form-group {
  max-width: 400px;
  margin-bottom: 0;
}

/* Room Config Container */
.room-config-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* ── rcm: Monthly Config Pills Bar (replaces rc-month-bar) ──────────────── */
.rcm-bar {
  display: flex; flex-direction: column; gap: 10px;
  background: #f8faff;
  border: 1.5px solid #c7d2fe;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

/* Top row: label + create button */
.rcm-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rcm-top-left { display: flex; align-items: center; gap: 8px; }
.rcm-title { font-size: .8125rem; font-weight: 700; color: #4338ca; }
.rcm-hint  { font-size: .72rem; color: #9ca3af; }

/* Pills row */
.rcm-pills-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }

.rcm-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 20px;
  border: 1.5px solid #e5e7eb; background: #fff;
  font-size: .775rem; font-weight: 500; color: #6b7280;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
  user-select: none; white-space: nowrap; line-height: 1.3;
}
.rcm-pill:hover { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }

.rcm-pill--active { border-color: #6366f1 !important; background: #eef2ff; color: #3730a3; font-weight: 600; }

.rcm-pill--base   { border-style: dashed; color: #9ca3af; }
.rcm-pill--base.rcm-pill--active { border-style: solid; background: #f0f4ff; color: #4338ca; }

/* Current month ring */
.rcm-pill--current { border-color: #fbbf24; }
.rcm-pill--current.rcm-pill--active { background: #fffbeb; color: #92400e; border-color: #f59e0b; }

/* Status dot */
.rcm-pill-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.rcm-pill--configured .rcm-pill-dot { background: #22c55e; }
.rcm-pill--empty      .rcm-pill-dot { background: #d1d5db; }
.rcm-pill--base       .rcm-pill-dot { display: none; }

.rcm-pill-label { letter-spacing: .01em; }
.rcm-pill-cur   { font-size: .65rem; color: #d97706; margin-left: 1px; }
.rcm-pill-check { font-size: .55rem; color: #16a34a; }

/* Action bar (shows when a month is selected) */
.rcm-action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  padding: 8px 13px;
}
.rcm-action-info { display: flex; align-items: center; gap: 7px; }
.rcm-action-name { font-size: .8125rem; font-weight: 700; color: #1e293b; }
.rcm-action-badge {
  font-size: .68rem; font-weight: 700;
  padding: 2px 9px; border-radius: 12px; white-space: nowrap;
}
.rcm-action-badge.has-config { background: #d1fae5; color: #065f46; }
.rcm-action-badge.no-config  { background: #fde68a; color: #92400e; }
.rcm-action-badge.locked     { background: #fee2e2; color: #991b1b; }
.rcm-action-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Locked month pill */
.rcm-pill--locked { border-color: #f97316 !important; }
.rcm-pill--locked .rcm-pill-dot { background: #f97316; }
.rcm-pill-lock { font-size: .55rem; color: #c2410c; }
.btn-warning-outline {
  color: #b45309;
  border-color: #fcd34d;
  background: transparent;
}
.btn-warning-outline:hover {
  background: #fffbeb;
  border-color: #b45309;
}
.btn-success-outline {
  color: #15803d;
  border-color: #86efac;
  background: transparent;
}
.btn-success-outline:hover {
  background: #f0fdf4;
  border-color: #15803d;
}
.btn-danger-outline {
  color: #dc2626;
  border-color: #fca5a5;
  background: transparent;
}
.btn-danger-outline:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

/* Room Info Card */
.rc-info-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  color: var(--white);
}

.rc-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rc-room-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.rc-brand-name {
  opacity: 0.8;
  font-size: 0.875rem;
}

/* Header actions row — Xem Sheet + badges + sync btn trên 1 hàng */
.rc-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Nút Xem Sheet trên nền tím */
.rc-header-actions .btn-outline {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
}

.rc-header-actions .btn-outline:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.5);
}

/* Badge container */
.rc-sync-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

/* Base badge style - solid colors visible on purple header */
.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.rc-badge i {
  font-size: 0.65rem;
}

/* ---- Mode badge (Tự động / Thủ công) ---- */
.rc-badge-mode {
  background: #ffffff;
  color: #6d28d9;
}

.rc-badge-mode.mode-auto {
  background: #fbbf24;
  color: #78350f;
}

.rc-badge-mode.mode-manual {
  background: #ffffff;
  color: #6d28d9;
}

/* ---- Auto-sync badge (Bật / Tắt) ---- */
.rc-badge-auto {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

.rc-badge-auto.auto-on {
  background: #34d399;
  color: #064e3b;
}

.rc-badge-auto.auto-off {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ---- Sync status badge (Đã / Chưa / Đang / Lỗi) ---- */
.rc-badge-status {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.rc-badge-status[style*="cursor: pointer"]:hover {
  background: rgba(255,255,255,0.35);
}

.rc-badge-status.pending {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.rc-badge-status.success {
  background: #34d399;
  color: #064e3b;
}

.rc-badge-status.error {
  background: #f87171;
  color: #fff;
}

.rc-badge-status.syncing {
  background: #60a5fa;
  color: #fff;
  animation: rc-sync-pulse 1.5s ease-in-out infinite;
}

@keyframes rc-sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Header sync button on purple bg */
.rc-sync-btn {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border: none !important;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  transition: all 0.2s ease;
}

.rc-sync-btn:hover {
  background: rgba(255,255,255,0.35) !important;
}

.rc-sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State - khi chưa chọn phòng */
.rc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--gray-500);
  min-height: 300px;
}

.rc-empty-state.hidden {
  display: none;
}

.rc-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.rc-empty-icon i {
  font-size: 2rem;
  color: var(--primary);
}

.rc-empty-state h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 0.5rem 0;
}

.rc-empty-state p {
  font-size: 0.9rem;
  color: var(--gray-400);
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

/* Tabs */
.rc-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--gray-100);
  padding: 0.25rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.rc-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.rc-tab:hover {
  color: var(--primary);
  background: var(--white);
}

.rc-tab.active {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.rc-tab i {
  font-size: 1rem;
}

/* Tab Contents */
.rc-tab-contents {
  min-height: 400px;
}

.rc-tab-content {
  display: none;
}

.rc-tab-content.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

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

/* Config Cards */
.rc-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.rc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.rc-card-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
}

.rc-card-header h4 i {
  color: var(--primary);
}

.rc-card-actions {
  display: flex;
  gap: 0.5rem;
}

.rc-card-body {
  padding: var(--spacing-lg);
}

/* Multi-tag container (for host columns, etc.) */
.multi-tag-container {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
}
.multi-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}
.multi-tag-list:not(:empty) {
  margin-bottom: 8px;
}
.multi-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 5px;
  font-size: 0.85em;
  font-weight: 600;
  color: #1e40af;
  line-height: 1;
}
.multi-tag-item .tag-index {
  background: #2563eb;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.75em;
  font-weight: 700;
  margin-right: 2px;
}
.multi-tag-item .tag-remove {
  cursor: pointer;
  color: #93c5fd;
  font-size: 0.8em;
  padding: 2px;
  border-radius: 3px;
  transition: all 0.15s;
  line-height: 1;
}
.multi-tag-item .tag-remove:hover {
  color: #dc2626;
  background: #fee2e2;
}
.multi-tag-item.tag-exclude {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border-color: #f87171;
  color: #b91c1c;
}
.multi-tag-item.tag-exclude .tag-remove {
  color: #fca5a5;
}
.multi-tag-item.tag-exclude .tag-remove:hover {
  color: #dc2626;
  background: #fee2e2;
}
.multi-tag-item.tag-allow-duplicate {
  background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
  border-color: #4ade80;
  color: #166534;
}
.multi-tag-item.tag-allow-duplicate .tag-remove {
  color: #86efac;
}
.multi-tag-item.tag-allow-duplicate .tag-remove:hover {
  color: #166534;
  background: #dcfce7;
}
.multi-tag-item.tag-allow-duplicate-code {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
  border-color: #60a5fa;
  color: #1e40af;
}
.multi-tag-item.tag-allow-duplicate-code .tag-remove {
  color: #93c5fd;
}
.multi-tag-item.tag-allow-duplicate-code .tag-remove:hover {
  color: #1e40af;
  background: #dbeafe;
}
.multi-tag-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.multi-tag-input-row .form-control {
  flex: 1;
  margin-bottom: 0 !important;
}

/* Auto-apply toggle switch */
.auto-apply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  margin-left: 4px;
}
.auto-apply-toggle input[type="checkbox"] {
  display: none;
}
.auto-apply-slider {
  position: relative;
  width: 36px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background 0.25s;
  flex-shrink: 0;
}
.auto-apply-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.auto-apply-toggle input:checked + .auto-apply-slider {
  background: #22c55e;
}
.auto-apply-toggle input:checked + .auto-apply-slider::after {
  transform: translateX(16px);
}
.auto-apply-label {
  font-size: 0.8em;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  transition: color 0.25s;
}
.auto-apply-toggle input:checked ~ .auto-apply-label {
  color: #16a34a;
  font-weight: 600;
}
/* Disabled state - chưa chọn mẫu template */
.auto-apply-toggle input:disabled + .auto-apply-slider {
  background: #e2e8f0;
  cursor: not-allowed;
  opacity: 0.5;
}
.auto-apply-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

/* Time Mode Sections */
.rc-time-single,
.rc-time-dual {
  transition: var(--transition);
}

/* Room Filter Config */
.rc-room-filter-config {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-200);
}

/* Analysis Results */
.rc-analysis-result {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

.analysis-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.analysis-stat {
  padding: 0.5rem 1rem;
  background: var(--white);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.analysis-stat strong {
  color: var(--primary);
}

.analysis-stat code {
  background: var(--primary-bg);
  color: var(--primary-dark);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.analysis-list {
  font-size: 0.875rem;
}

.analysis-list ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.analysis-list li {
  margin-bottom: 0.25rem;
}

.analysis-list code {
  background: var(--gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

/* Custom Columns */
.custom-column-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.custom-column-row .form-control {
  flex: 1;
}

.custom-column-row .custom-col-column {
  max-width: 80px;
}

.custom-column-row .btn-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Preview */
.rc-preview-options {
  margin-bottom: var(--spacing-md);
}

.rc-preview-options .form-group {
  max-width: 150px;
  margin-bottom: 0;
}

.rc-preview-container {
  min-height: 200px;
  max-height: 500px;
  overflow: auto;
}

.rc-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--gray-400);
}

.rc-preview-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.rc-preview-table-wrapper {
  overflow-x: auto;
}

.rc-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.rc-preview-table th,
.rc-preview-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid var(--gray-200);
}

.rc-preview-table th {
  background: var(--gray-100);
  font-weight: 600;
  white-space: nowrap;
}

.rc-preview-table tr:nth-child(even) {
  background: var(--gray-50);
}

.rc-preview-errors {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--warning-bg);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.rc-preview-errors ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

/* Actions */
.rc-actions {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.rc-actions .btn {
  flex: 1;
  max-width: 200px;
}

/* Button Success */
.btn-success {
  background: var(--success);
  color: var(--white);
  border-color: var(--success);
}

.btn-success:hover {
  background: #059669;
  border-color: #059669;
}

/* Button Small */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .rc-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .rc-tab {
    padding: 0.5rem 1rem;
  }

  .rc-tab span {
    display: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .rc-actions {
    flex-wrap: wrap;
  }

  .rc-actions .btn {
    max-width: none;
  }

  .rc-info-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .rc-header-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  .rc-sync-badges {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================
   PIC AVATAR TABS & UPLOAD
   ========================================== */
.pic-avatar-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}
.pic-avatar-tab {
  padding: 6px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85em;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.pic-avatar-tab:hover { color: #6366f1; }
.pic-avatar-tab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
  font-weight: 600;
}
.pic-avatar-tab i { margin-right: 4px; }
.pic-avatar-tab-content { position: relative; }
.pic-avatar-url-pane,
.pic-avatar-upload-pane { display: none; }
.pic-avatar-url-pane.active,
.pic-avatar-upload-pane.active { display: block; }
.pic-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #64748b;
  text-align: center;
  gap: 4px;
}
.pic-upload-zone:hover,
.pic-upload-zone.drag-over {
  border-color: #6366f1;
  background: #f0f0ff;
  color: #6366f1;
}
.pic-upload-zone i { font-size: 1.5em; margin-bottom: 4px; }
.pic-upload-zone small { font-size: 0.8em; color: #94a3b8; }
.pic-avatar-preview {
  display: flex;
  align-items: center;
}

/* ==========================================
   PIC URL LIST
   ========================================== */
.pic-urls-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.pic-urls-empty {
  color: #94a3b8;
  font-size: 0.85em;
  padding: 10px;
  text-align: center;
  border: 1px dashed #e2e8f0;
  border-radius: 6px;
}
.pic-urls-empty i { margin-right: 4px; }
.pic-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pic-url-fields {
  display: flex;
  flex: 1;
  gap: 6px;
}
.pic-url-fields .pic-url-title {
  flex: 0 0 35%;
  min-width: 0;
}
.pic-url-fields .pic-url-value {
  flex: 1;
  min-width: 0;
}
.pic-url-row .pic-url-remove {
  flex-shrink: 0;
}

/* ==========================================
   PIC DETAIL VIEW MODAL
   ========================================== */
.pic-detail-view { padding: 0; }

/* -- Header: Avatar + Info -- */
.pic-detail-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f0ff 0%, #f8fafc 100%);
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid #e8e8f8;
}
/* Avatar wrap - contains avatar + edit btn + editor */
.pic-detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.pic-detail-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,0.15);
  cursor: pointer;
}
.pic-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}
.pic-detail-avatar:hover img { transform: scale(1.05); }
.pic-detail-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(99,102,241,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  color: #fff;
  font-size: 1.2em;
  pointer-events: none;
}
.pic-detail-avatar:hover .pic-detail-avatar-overlay { opacity: 1; }
.pic-detail-avatar-empty {
  background: #e2e8f0;
  cursor: default;
}
.pic-detail-avatar-empty .pic-detail-avatar-placeholder,
.pic-detail-avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-detail-avatar-placeholder i { font-size: 2em; color: #94a3b8; }

/* Edit avatar button */
.pic-detail-avatar-edit {
  position: absolute;
  bottom: 0;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  border: 2px solid #fff;
  font-size: 0.75em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.15s;
  z-index: 2;
}
.pic-detail-avatar-edit:hover { background: #4f46e5; transform: scale(1.1); }

/* Avatar editor inline (inside modal flow, not floating) */
.pic-detail-avatar-editor-inline {
  margin: 0;
  padding: 0 16px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.pic-avatar-editor-inline-inner {
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pic-avatar-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pic-avatar-editor-title {
  font-size: 0.85em;
  font-weight: 600;
  color: #6366f1;
}
.pic-avatar-editor-title i { margin-right: 6px; }
.pic-avatar-editor-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pic-avatar-editor-close:hover { background: #fee2e2; color: #ef4444; }
.pic-avatar-editor-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e8e8f0;
  padding-bottom: 8px;
}
.pic-avatar-editor-tab {
  flex: 1;
  padding: 5px 8px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.8em;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.pic-avatar-editor-tab:hover { background: #f1f5f9; }
.pic-avatar-editor-tab.active { background: #ede9fe; color: #6366f1; font-weight: 600; }
.pic-avatar-editor-tab i { margin-right: 4px; }
.pic-avatar-editor-url-pane,
.pic-avatar-editor-upload-pane { display: none; }
.pic-avatar-editor-url-pane.active,
.pic-avatar-editor-upload-pane.active { display: block; }
.pic-avatar-editor-url-pane .form-control { font-size: 0.85em; padding: 7px 10px; }
.pic-avatar-editor-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.82em;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.pic-avatar-editor-dropzone:hover,
.pic-avatar-editor-dropzone.drag-over {
  border-color: #6366f1;
  color: #6366f1;
  background: #faf5ff;
}
/* Avatar editor preview */
.pic-avatar-editor-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.pic-avatar-editor-preview img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}
.pic-avatar-editor-preview-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: #fee2e2;
  color: #ef4444;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  transition: all 0.15s;
  flex-shrink: 0;
}
.pic-avatar-editor-preview-remove:hover { background: #ef4444; color: #fff; }
.pic-avatar-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.pic-avatar-editor-actions .btn { font-size: 0.8em; padding: 5px 12px; }
.pic-detail-info { flex: 1; min-width: 0; }
.pic-detail-name {
  font-size: 1.25em;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 5px 0;
  line-height: 1.2;
}
.pic-detail-code {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.85em;
}
.pic-detail-code i { color: #6366f1; font-size: 0.95em; }
.pic-detail-code code {
  background: #fff;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.95em;
  color: #6366f1;
  border: 1px solid #e2e8f0;
}
.pic-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pic-detail-badges .badge-type {
  background: #ede9fe;
  color: #6366f1;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 500;
}
.pic-detail-badges .badge-type i { margin-right: 4px; }

/* -- Contact rows -- */
.pic-detail-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.pic-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.pic-detail-row:hover { background: #f1f5f9; }
.pic-detail-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pic-detail-row-icon i { color: #6366f1; font-size: 0.9em; }
.pic-detail-row-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pic-detail-row-label {
  font-size: 0.75em;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.pic-detail-row-content > span:last-child {
  font-size: 0.95em;
  color: #334155;
}

/* -- Sections -- */
.pic-detail-section { margin-bottom: 14px; }
.pic-detail-section:last-child { margin-bottom: 0; }
.pic-detail-section-title {
  font-weight: 600;
  font-size: 0.85em;
  color: #475569;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pic-detail-section-title i { color: #6366f1; margin-right: 6px; }

/* -- URLs -- */
.pic-detail-urls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pic-detail-url-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6366f1;
  text-decoration: none;
  padding: 8px 14px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.9em;
  border: 1px solid #f1f5f9;
  transition: all 0.15s;
}
.pic-detail-url-item:hover {
  background: #ede9fe;
  border-color: #c7d2fe;
  transform: translateX(4px);
}
.pic-detail-url-item i { font-size: 0.8em; flex-shrink: 0; }
.pic-detail-url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pic-detail-empty {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.9em;
  padding: 8px 0;
}

/* -- Description -- */
.pic-detail-desc-content {
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
  font-size: 0.9em;
  line-height: 1.7;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #f1f5f9;
}
.pic-detail-desc-content img { max-width: 100%; height: auto; border-radius: 6px; }
.pic-detail-desc-content p { margin: 0 0 8px 0; }
.pic-detail-desc-content p:last-child { margin-bottom: 0; }

/* -- PIC Room Badges (table) -- */
.pic-room-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pic-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
.pic-room-badge i { font-size: 0.7rem; }
.pic-room-op {
  background: #ede9fe;
  color: #6d28d9;
}
.pic-room-tech {
  background: #fde68a;
  color: #b45309;
}
.pic-room-inactive {
  opacity: 0.5;
  text-decoration: line-through;
}
.pic-no-rooms {
  color: var(--gray-400);
  font-size: 0.85rem;
  font-style: italic;
}
.pic-brand-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pic-brand-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.4;
}
.pic-brand-label {
  font-size: 0.85rem;
  color: var(--gray-600);
}

/* -- PIC Detail Rooms (modal) -- */
.pic-detail-rooms-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pic-detail-rooms-brand-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: #4338ca;
  margin-bottom: 6px;
}
.pic-detail-rooms-brand-name i { margin-right: 4px; }
.pic-detail-rooms-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}
.pic-detail-room-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 0.85rem;
}
.pic-detail-room-role {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: #e0e7ff;
  color: #4338ca;
}
.pic-detail-room-platform {
  font-size: 0.75rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
}

/* -- PIC Room Assignment Edit UI -- */
.pic-detail-section-title .pic-room-add-btn {
  float: right;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 12px;
}
.pic-room-add-form {
  margin-top: 10px;
  padding: 10px;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
}
.pic-room-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.pic-room-add-row select {
  min-width: 120px;
  flex: 1;
  font-size: 0.85rem;
  padding: 4px 8px;
}
.pic-room-add-row .btn {
  flex-shrink: 0;
  padding: 4px 10px;
}
.pic-detail-room-item .pic-room-remove-btn {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.pic-detail-room-item:hover .pic-room-remove-btn {
  opacity: 1;
}
.btn-icon-xs {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.7rem !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* -- Lightbox -- */
.pic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
.pic-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  animation: picLightboxIn 0.2s ease;
}
.pic-lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  display: block;
}
.pic-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #475569;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.15s;
}
.pic-lightbox-close:hover { background: #ef4444; color: #fff; }
@keyframes picLightboxIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* -- Warning button style for edit -- */
.pic-detail-modal .btn-warning {
  background: #f59e0b;
  color: #fff;
  border: none;
}
.pic-detail-modal .btn-warning:hover {
  background: #d97706;
}

/* ==========================================
   PIC MULTI-SELECT COMPONENT
   ========================================== */
.pic-multi-select {
  position: relative;
  width: 100%;
}

.pic-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  min-height: 42px;
  max-height: 120px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.pic-selected-list:hover {
  border-color: var(--primary);
}

.pic-selected-list:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.pic-placeholder {
  color: var(--gray-400);
  font-size: 0.875rem;
}

.pic-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pic-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background var(--transition), color var(--transition);
}

.pic-tag-remove:hover {
  background: var(--primary);
  color: var(--white);
}

.pic-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
  max-height: 300px;
  overflow: hidden;
}

.pic-dropdown.show {
  display: block;
}

.pic-search-box {
  padding: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.pic-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition);
}

.pic-search-input:focus {
  border-color: var(--primary);
}

.pic-options {
  max-height: 240px;
  overflow-y: auto;
}

.pic-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  transition: background var(--transition);
}

.pic-option:hover {
  background: var(--gray-50);
}

.pic-option.selected {
  background: var(--primary-bg);
}

.pic-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.pic-option-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
}

.pic-option-code {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-family: monospace;
}

.pic-no-options {
  padding: 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* PIC Table Styles */
.pic-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pic-name {
  font-weight: 500;
  color: var(--gray-800);
}

/* Action Buttons */
.action-btns {
  display: flex;
  gap: 0.5rem;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-icon:hover {
  background: var(--primary);
  color: var(--white);
}

.btn-icon-danger:hover {
  background: var(--danger);
  color: var(--white);
}

/* Form Help Text */
.form-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* Required Indicator */
.required {
  color: var(--danger);
}

/* Room PICs Display */
.room-pics {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 250px;
}

.pic-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  word-break: break-word;
}

.pic-row i {
  color: var(--gray-500);
  width: 16px;
  min-width: 16px;
  text-align: center;
  margin-top: 2px;
}

.pic-row i.fa-headset {
  color: var(--primary);
}

.pic-row i.fa-tools {
  color: var(--secondary);
}

/* PIC names list */
.pic-row span {
  flex: 1;
}

/* PIC Type Badges */
.badge-operation {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--info-bg);
  color: var(--info);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-tech {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--warning-bg);
  color: #b45309;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-operation i,
.badge-tech i {
  font-size: 0.6875rem;
}

/* PIC Type Icon in multi-select */
.pic-type-icon {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.pic-option .pic-type-icon.fa-headset {
  color: var(--info);
}

.pic-option .pic-type-icon.fa-tools {
  color: var(--warning);
}

/* ==========================================
   PLATFORM CONFIG STYLES
   ========================================== */
.platform-item {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.platform-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.platform-name-input {
  flex: 1;
  min-width: 150px;
}

.platform-aliases-input {
  flex: 2;
  min-width: 200px;
}

.platform-name-input input,
.platform-aliases-input input {
  width: 100%;
  font-size: 0.875rem;
}

.btn-remove-platform {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-platform i {
  margin: 0;
}

#addPlatformBtn {
  margin-top: 0.5rem;
}

#addPlatformBtn i {
  margin-right: 0.375rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .platform-row {
    flex-wrap: wrap;
  }

  .platform-name-input,
  .platform-aliases-input {
    flex: 1 1 100%;
  }

  .btn-remove-platform {
    margin-left: auto;
  }
}

/* ================================================
   SHEET TEST RESULT STYLES
   ================================================ */
.sheet-test-result {
  padding: var(--spacing-md);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.sheet-test-result.loading {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sheet-test-result.success {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.sheet-test-result.error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

.sheet-test-result .test-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sheet-test-result .test-details {
  margin-left: 1.5rem;
}

.sheet-test-result .test-detail-item {
  padding: 0.25rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.sheet-test-result .test-detail-item i {
  margin-top: 0.2rem;
  font-size: 0.75rem;
}

.sheet-test-result .test-sample-data {
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 0.8rem;
  max-height: 150px;
  overflow-y: auto;
}

.sheet-test-result .test-sample-data table {
  width: 100%;
  border-collapse: collapse;
}

.sheet-test-result .test-sample-data th,
.sheet-test-result .test-sample-data td {
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-test-result .test-sample-data th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

/* ==========================================
   TEMPLATES PAGE STYLES
   ========================================== */

/* Info Card */
.info-card {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, #ebf4ff 0%, #f0f7ff 100%);
  border: 1px solid #c3dafe;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
}

.info-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  font-size: 1.25rem;
}

.info-card-content h4 {
  margin: 0 0 var(--spacing-xs);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
}

.info-card-content p {
  margin: 0 0 var(--spacing-sm);
  color: var(--gray-600);
  font-size: 0.875rem;
}

.info-card-content code {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Title Templates Table */
.title-templates-table {
  table-layout: fixed;
  width: 100%;
}

.title-templates-table td {
  white-space: normal;
  overflow: hidden;
}

/* Template Code Display */
.template-code {
  display: block;
  padding: 0.375rem 0.625rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.8125rem;
  color: var(--gray-700);
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Preview Box */
.preview-box {
  padding: var(--spacing-md);
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  min-height: 50px;
  display: flex;
  align-items: center;
}

.preview-box strong {
  color: var(--gray-800);
}

.preview-text {
  color: var(--success);
  font-weight: 500;
  word-break: break-all;
  overflow-wrap: break-word;
  display: block;
}

/* ════════ Trang "Quản lý mẫu tiêu đề" — giao diện nâng cấp (scoped) ════════ */
#page-title-templates .page-subtitle {
  margin: 4px 0 0; color: #64748b; font-size: 0.82rem; font-weight: 500;
}
#page-title-templates .info-card {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  border: 1.5px solid #c7d2fe; border-radius: 16px;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.07);
}
#page-title-templates .info-card-icon {
  background: linear-gradient(135deg, #6366f1, #7c3aed); color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
}
#page-title-templates .info-card-content h4 { color: #312e81; font-weight: 800; }
#page-title-templates .info-card-content code {
  background: #fff; color: #4338ca; border: 1px solid #c7d2fe;
  border-radius: 6px; padding: 1px 7px; font-weight: 600;
}
#page-title-templates .data-card {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gray-200); box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
#page-title-templates .title-templates-table thead th {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #475569; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.75rem 0.9rem; border-bottom: 2px solid var(--gray-200);
}
#page-title-templates .title-templates-table tbody td { padding: 0.7rem 0.9rem; vertical-align: middle; }
#page-title-templates .title-templates-table tbody tr { transition: background 0.12s ease; }
#page-title-templates .title-templates-table tbody tr:hover { background: #f6f8ff; }
#page-title-templates .title-templates-table tbody tr:last-child td { border-bottom: 0; }
#page-title-templates .template-code {
  background: #f1f5f9; border: 1px solid #e2e8f0; border-left: 3px solid #6366f1;
  border-radius: 8px; color: #334155;
}
#page-title-templates .preview-text {
  display: inline-block; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-left: 3px solid #16a34a; border-radius: 8px;
  padding: 0.4rem 0.7rem; color: #15803d; font-weight: 600; line-height: 1.4;
}
#page-title-templates .badge-success {
  background: #dcfce7; color: #15803d; border: 1px solid #86efac;
  border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 0.72rem;
}
#page-title-templates .badge-secondary {
  background: #f1f5f9; color: #94a3b8; border-radius: 999px; padding: 2px 10px; font-weight: 700;
}
#page-title-templates .action-buttons { display: flex; gap: 6px; }
#page-title-templates .btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5); border: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
@media (max-width: 640px) {
  #page-title-templates .title-templates-table { table-layout: auto; min-width: 640px; }
}

/* ── Nâng cấp v2 (theo skill): highlight placeholder · tabular · zebra · accent ── */
/* Accent bar tiêu đề (đồng bộ các trang đã redesign) */
#page-title-templates .page-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 800; letter-spacing: -0.02em;
}
#page-title-templates .page-title::before {
  content: ''; width: 5px; height: 1.15em; border-radius: 4px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
/* Token {placeholder} nổi bật trong template + ví dụ info-card */
#page-title-templates .tpl-ph {
  color: #6d28d9; font-weight: 700;
  background: rgba(124, 58, 237, 0.09); border-radius: 4px; padding: 0 2px;
}
#page-title-templates .info-card-content code .tpl-ph { background: rgba(124, 58, 237, 0.12); }
/* Số thứ tự: tabular + nhạt để mắt tập trung vào nội dung */
#page-title-templates .title-templates-table tbody td:first-child {
  font-variant-numeric: tabular-nums; color: #94a3b8; font-weight: 700;
}
/* Zebra nhẹ + hover nhấn viền trái (second-read moment) */
#page-title-templates .title-templates-table tbody tr:nth-child(even) { background: #fcfdff; }
#page-title-templates .title-templates-table tbody tr:hover {
  background: #f0f4ff; box-shadow: inset 3px 0 0 #6366f1;
}
#page-title-templates .title-templates-table tbody td strong { color: #1e293b; font-weight: 700; }
/* Action buttons có phản hồi nhấn */
#page-title-templates .action-buttons .btn { transition: transform 0.15s, box-shadow 0.15s; }
#page-title-templates .action-buttons .btn:hover { transform: translateY(-1px); }
#page-title-templates .action-buttons .btn:active { transform: translateY(0); }
/* Dark theme */
[data-theme="dark"] #page-title-templates .info-card { background: rgba(99,102,241,.12); border-color: rgba(124,58,237,.3); }
[data-theme="dark"] #page-title-templates .info-card-content code { background: rgba(15,23,42,.6); color: #c4b5fd; border-color: rgba(124,58,237,.35); }
[data-theme="dark"] #page-title-templates .template-code { background: #0f172a; border-color: rgba(148,163,184,.25); color: #cbd5e1; }
[data-theme="dark"] #page-title-templates .tpl-ph { color: #c4b5fd; background: rgba(124,58,237,.2); }
[data-theme="dark"] #page-title-templates .title-templates-table tbody tr:nth-child(even) { background: rgba(15,23,42,.3); }
[data-theme="dark"] #page-title-templates .title-templates-table tbody tr:hover { background: rgba(99,102,241,.13); }
[data-theme="dark"] #page-title-templates .preview-text { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #86efac; }
/* Tên mẫu (td strong) đặt màu cứng #1e293b → mất chữ trong dark */
[data-theme="dark"] #page-title-templates .title-templates-table tbody td strong { color: var(--th-text); }
[data-theme="dark"] #page-cart-templates .data-table tbody td strong { color: var(--th-text); }

/* ════════ Trang "Quản lý mẫu giỏ hàng" — đồng bộ với Mẫu tiêu đề (accent xanh lá) ════════ */
#page-cart-templates .page-subtitle { margin: 4px 0 0; color: #64748b; font-size: 0.82rem; font-weight: 500; }
#page-cart-templates .page-title { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: -0.02em; }
#page-cart-templates .page-title::before {
  content: ''; width: 5px; height: 1.15em; border-radius: 4px;
  background: linear-gradient(180deg, #10b981, #059669);
}
#page-cart-templates .data-card {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--gray-200); box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
#page-cart-templates .data-table thead th {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #475569; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.75rem 0.9rem; border-bottom: 2px solid var(--gray-200);
}
#page-cart-templates .data-table tbody td { padding: 0.7rem 0.9rem; vertical-align: middle; }
#page-cart-templates .data-table tbody tr { transition: background 0.12s ease; }
#page-cart-templates .data-table tbody tr:nth-child(even) { background: #fcfdff; }
#page-cart-templates .data-table tbody tr:hover { background: #f0fdf6; box-shadow: inset 3px 0 0 #10b981; }
#page-cart-templates .data-table tbody tr:last-child td { border-bottom: 0; }
#page-cart-templates .data-table tbody td:first-child { font-variant-numeric: tabular-nums; color: #94a3b8; font-weight: 700; }
#page-cart-templates .data-table tbody td strong { color: #1e293b; font-weight: 700; }
#page-cart-templates .template-code {
  display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; border-left: 3px solid #10b981;
  border-radius: 8px; color: #334155; padding: 0.35rem 0.6rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.8rem;
  word-break: break-word; overflow-wrap: break-word;
}
#page-cart-templates .tpl-ph { color: #6d28d9; font-weight: 700; background: rgba(124, 58, 237, 0.09); border-radius: 4px; padding: 0 2px; }
#page-cart-templates .badge-success { background: #dcfce7; color: #15803d; border: 1px solid #86efac; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 0.72rem; }
#page-cart-templates .badge-secondary { background: #f1f5f9; color: #94a3b8; border-radius: 999px; padding: 2px 10px; font-weight: 700; }
#page-cart-templates .action-buttons { display: flex; gap: 6px; }
#page-cart-templates .action-buttons .btn { transition: transform 0.15s, box-shadow 0.15s; }
#page-cart-templates .action-buttons .btn:hover { transform: translateY(-1px); }
#page-cart-templates .action-buttons .btn:active { transform: translateY(0); }
#page-cart-templates .btn-primary {
  background: linear-gradient(135deg, #10b981, #059669); border: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
@media (max-width: 640px) { #page-cart-templates .data-table { table-layout: auto; min-width: 640px; } }
[data-theme="dark"] #page-cart-templates .data-card { background: var(--th-card, #1e293b); border-color: rgba(148,163,184,.2); }
[data-theme="dark"] #page-cart-templates .template-code { background: #0f172a; border-color: rgba(148,163,184,.25); color: #cbd5e1; }
[data-theme="dark"] #page-cart-templates .tpl-ph { color: #c4b5fd; background: rgba(124,58,237,.2); }
[data-theme="dark"] #page-cart-templates .data-table tbody tr:nth-child(even) { background: rgba(15,23,42,.3); }
[data-theme="dark"] #page-cart-templates .data-table tbody tr:hover { background: rgba(16,185,129,.13); }

/* ════════ Modal Thêm/Sửa mẫu (tiêu đề & giỏ hàng) — placeholder picker + preview ════════ */
#titleTemplateModal .modal-title,
#cartTemplateModal .modal-title { font-weight: 800; }
#titleTemplateModal .placeholder-buttons,
#cartTemplateModal .placeholder-buttons {
  background: linear-gradient(135deg, #faf5ff, #eef2ff);
  border: 1px solid #ddd6fe; border-radius: 12px; padding: 0.6rem 0.7rem;
}
#titleTemplateModal .placeholder-buttons small,
#cartTemplateModal .placeholder-buttons small { color: #6d28d9; font-weight: 600; display: inline-block; margin-bottom: 0.35rem; }
#titleTemplateModal .placeholder-btn,
#cartTemplateModal .placeholder-btn {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.72rem; font-weight: 700;
  background: #fff; color: #5b21b6; border: 1px solid #c4b5fd; border-radius: 8px;
  padding: 0.2rem 0.5rem; margin: 0.12rem; transition: all 0.12s;
}
#titleTemplateModal .placeholder-btn:hover,
#cartTemplateModal .placeholder-btn:hover { background: #8b5cf6; color: #fff; border-color: #8b5cf6; transform: translateY(-1px); }
#titleTemplateModal .placeholder-btn:active,
#cartTemplateModal .placeholder-btn:active { transform: translateY(0); }
#titleTemplateModal .preview-box,
#cartTemplateModal .preview-box {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0; border-left: 4px solid #10b981; border-radius: 10px;
  padding: 0.7rem 0.85rem; min-height: 42px; color: #15803d; word-break: break-word;
}
#titleTemplateModal .preview-box strong,
#cartTemplateModal .preview-box strong { color: #166534; font-weight: 700; }
[data-theme="dark"] #titleTemplateModal .placeholder-buttons,
[data-theme="dark"] #cartTemplateModal .placeholder-buttons { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.3); }
[data-theme="dark"] #titleTemplateModal .placeholder-btn,
[data-theme="dark"] #cartTemplateModal .placeholder-btn { background: #1e293b; color: #c4b5fd; border-color: rgba(124,58,237,.35); }
[data-theme="dark"] #titleTemplateModal .preview-box,
[data-theme="dark"] #cartTemplateModal .preview-box { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #86efac; }

/* ════════ Popup "Danh sách mã Placeholder" — mã hiển thị ĐẦY ĐỦ, gọn đẹp ════════ */
#placeholdersModal .modal { max-width: min(780px, 96vw); }
.placeholders-table { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.placeholders-table thead th {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: #475569; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.6rem 0.8rem; text-align: left; border-bottom: 2px solid #e2e8f0; white-space: nowrap;
}
.placeholders-table tbody td { padding: 0.55rem 0.8rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.placeholders-table tbody tr:last-child td { border-bottom: 0; }
.placeholders-table tbody tr:hover { background: #f6f8ff; }
/* Cột Mã: co theo nội dung, chip hiển thị TRỌN VẸN không bị cắt */
.placeholders-table .ph-code-cell { width: 1%; white-space: nowrap; }
.placeholders-table code.ph-code {
  display: inline-block; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;
  border-radius: 6px; padding: 2px 9px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: 0.12s;
}
.placeholders-table code.ph-code:hover { background: #c7d2fe; border-color: #a5b4fc; }
.placeholders-table code.ph-code:active { transform: scale(0.96); }
.placeholders-table .ph-label-cell { white-space: nowrap; color: #0f172a; font-weight: 600; font-size: 0.8rem; }
.placeholders-table .ph-desc-cell { white-space: normal; color: #475569; font-size: 0.8rem; line-height: 1.45; word-break: break-word; }
@media (max-width: 560px) {
  .placeholders-table thead th:nth-child(2),
  .placeholders-table .ph-label-cell { display: none; } /* màn nhỏ: ẩn cột Tên cho gọn */
}

/* Placeholder Buttons */
.placeholder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: var(--spacing-sm);
  background: var(--gray-50);
  border-radius: var(--radius);
}

.placeholder-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: monospace;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.placeholder-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Button Sizes */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Margin utilities */
.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--gray-500);
}

/* Badge variants */
.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-secondary {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* Modal Sizes (moved to main modal section) */

/* Template Actions in Room Config */
.rc-template-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Horizontal Rule */
hr.my-4 {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--gray-200);
}

/* Text utilities */
.text-success {
  color: var(--success);
}

.mt-4 {
  margin-top: 1rem;
}

/* ================================================
 * GENERATED TITLE/CART COLUMNS
 * ================================================ */

.col-generated-title,
.col-generated-cart {
  min-width: 150px;
  max-width: 250px;
  overflow: hidden;
}

.cell-generated-title,
.cell-generated-cart {
  padding: 0.35rem 0.4rem !important;
  white-space: nowrap;
}
/* Cột "khác" (NOTE 2, cột custom...) — rút gọn nếu quá dài, xem đầy đủ qua nút 👁 */
.cell-truncate {
  max-width: 240px;
  overflow: hidden;
}
.cell-truncate .cell-truncate-text {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generated-content {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gray-200);
  max-width: 100%;
  overflow: hidden;
}

.generated-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.btn-copy-inline,
.btn-edit-inline {
  flex-shrink: 0;
  padding: 0.125rem 0.25rem;
  background: transparent;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-copy-inline:hover {
  background: var(--gray-200);
  color: var(--primary);
}

.btn-edit-inline:hover {
  background: var(--gray-200);
  color: var(--warning);
}

.btn-copy-inline.copied {
  color: var(--success);
}

.btn-copy-inline i,
.btn-edit-inline i {
  font-size: 0.7rem;
}

/* Cell with add button */
.cell-generated-title .btn-edit-inline,
.cell-generated-cart .btn-edit-inline {
  opacity: 0.6;
}

.cell-generated-title:hover .btn-edit-inline,
.cell-generated-cart:hover .btn-edit-inline {
  opacity: 1;
}

/* Locked edit button when auto mode is ON */
.btn-edit-inline.btn-auto-locked {
  opacity: 0.35 !important;
  cursor: not-allowed;
  color: var(--gray-500);
}
.btn-edit-inline.btn-auto-locked:hover {
  background: transparent;
  color: var(--gray-500);
  opacity: 0.5 !important;
}
.cell-generated-title:hover .btn-edit-inline.btn-auto-locked,
.cell-generated-cart:hover .btn-edit-inline.btn-auto-locked {
  opacity: 0.5 !important;
}

/* Title column styling */
.cell-generated-title .generated-content {
  border-left: 3px solid var(--primary);
}

/* Cart column styling */
.cell-generated-cart .generated-content {
  border-left: 3px solid var(--success);
}

/* Schedule table specific compact layout */
#schedulesTable {
  min-width: 800px;
}

#schedulesTable th,
#schedulesTable td {
  padding: 0.4rem 0.5rem;
}

#schedulesTable .table-actions {
  gap: 1px;
}

/* Responsive handling for generated columns */
@media (max-width: 1400px) {
  .col-generated-title,
  .col-generated-cart {
    min-width: 130px;
    max-width: 200px;
  }
}

@media (max-width: 1200px) {
  .col-generated-title,
  .col-generated-cart {
    min-width: 120px;
    max-width: 180px;
  }
}

/* Schedule table template info indicator */
.schedule-template-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: var(--radius);
}

.schedule-template-info i {
  color: var(--primary);
}

/* ================================================
 * EXPORT BUTTONS FOR GENERATED TITLES
 * ================================================ */

.schedule-export-container {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--gray-300);
}

.export-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.export-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
  margin-right: 0.5rem;
}

.export-label i {
  margin-right: 0.25rem;
}

.export-buttons .btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
}

.export-buttons .btn i {
  margin-right: 0.25rem;
}

/* Button variants for export */
.export-buttons .btn-primary {
  border-color: var(--primary);
  color: var(--primary);
}

.export-buttons .btn-primary:hover {
  background: var(--primary);
  color: white;
}

.export-buttons .btn-success {
  border-color: var(--success);
  color: var(--success);
}

.export-buttons .btn-success:hover {
  background: var(--success);
  color: white;
}

/* Prominent filled export buttons */
.export-buttons .btn-export-filled-csv {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  font-weight: 600;
}
.export-buttons .btn-export-filled-csv:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.export-buttons .btn-export-filled-excel {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 600;
}
.export-buttons .btn-export-filled-excel:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

/* Responsive for export buttons */
@media (max-width: 768px) {
  .export-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .export-label {
    margin-bottom: 0.5rem;
  }

  .export-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   CHECKBOX CARDS - Filter Link Selection
   ========================================== */

/* Checkbox Grid Container */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

.checkbox-grid::-webkit-scrollbar {
  width: 6px;
}

.checkbox-grid::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.checkbox-grid::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Individual Checkbox Card */
.checkbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.875rem 0.5rem;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.checkbox-card:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
  transform: translateY(-2px);
}

.checkbox-card.checked {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.checkbox-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checkbox Icon */
.checkbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.5rem;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  color: var(--gray-500);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.checkbox-card.checked .checkbox-icon {
  background: var(--primary);
  color: var(--white);
}

.checkbox-card:hover:not(.checked) .checkbox-icon {
  background: var(--primary-light);
  color: var(--white);
}

/* Checkbox Text */
.checkbox-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkbox-card.checked .checkbox-text {
  color: var(--primary-dark);
}

/* Check Mark */
.checkbox-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: 0.6rem;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-fast);
}

.checkbox-card.checked .checkbox-check {
  opacity: 1;
  transform: scale(1);
}

/* Badge Count */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 0.5rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

/* Platform Colors for Room Cards */
.checkbox-card.platform-shopee.checked {
  border-color: var(--shopee);
  background: rgba(238, 77, 45, 0.08);
}

.checkbox-card.platform-shopee.checked .checkbox-icon {
  background: var(--shopee);
}

.checkbox-card.platform-shopee.checked .checkbox-check {
  background: var(--shopee);
}

.checkbox-card.platform-lazada.checked {
  border-color: var(--lazada);
  background: rgba(15, 20, 109, 0.08);
}

.checkbox-card.platform-lazada.checked .checkbox-icon {
  background: var(--lazada);
}

.checkbox-card.platform-lazada.checked .checkbox-check {
  background: var(--lazada);
}

.checkbox-card.platform-tiktok.checked {
  border-color: var(--tiktok);
  background: rgba(0, 0, 0, 0.05);
}

.checkbox-card.platform-tiktok.checked .checkbox-icon {
  background: var(--tiktok);
}

.checkbox-card.platform-tiktok.checked .checkbox-check {
  background: var(--tiktok);
}

.checkbox-card.platform-facebook.checked {
  border-color: var(--facebook);
  background: rgba(24, 119, 242, 0.08);
}

.checkbox-card.platform-facebook.checked .checkbox-icon {
  background: var(--facebook);
}

.checkbox-card.platform-facebook.checked .checkbox-check {
  background: var(--facebook);
}

.checkbox-card.platform-youtube.checked {
  border-color: var(--youtube);
  background: rgba(255, 0, 0, 0.08);
}

.checkbox-card.platform-youtube.checked .checkbox-icon {
  background: var(--youtube);
}

.checkbox-card.platform-youtube.checked .checkbox-check {
  background: var(--youtube);
}

/* Hint Text */
.hint-text {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.hint-text i {
  color: var(--warning);
  margin-right: 0.25rem;
}

/* Empty hint in checkbox grid */
.empty-hint {
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.875rem;
}

.empty-hint i {
  margin-right: 0.5rem;
  color: var(--info);
}

/* Form Section Title */
.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-700);
}

.form-section-title i {
  color: var(--primary);
  font-size: 0.875rem;
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 576px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .checkbox-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    max-height: 180px;
  }

  .checkbox-card {
    padding: 0.625rem 0.375rem;
  }

  .checkbox-icon {
    width: 30px;
    height: 30px;
    font-size: 0.875rem;
  }

  .checkbox-text {
    font-size: 0.75rem;
  }
}


/* ==========================================
   SETTING CARD - Filter Link Advanced Settings
   ========================================== */
.setting-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  gap: 16px;
}

.setting-card:hover {
  background: var(--gray-100, #f3f4f6);
  border-color: var(--gray-300, #d1d5db);
}

.setting-info {
  flex: 1;
}

.setting-info h4 {
  margin: 0 0 4px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.setting-info p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
  line-height: 1.4;
}

.toggle-label.compact {
  justify-content: flex-end;
  flex-shrink: 0;
}

.toggle-label.compact span:first-child {
  display: none;
}

/* Character Count */
.char-count {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--gray-400, #9ca3af);
  margin-top: 4px;
}

/* Form Section Title Enhanced */
.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-700, #374151);
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.form-section-title i {
  color: var(--primary, #4f46e5);
  font-size: 1rem;
}

.form-section-title:first-of-type {
  margin-top: 0;
}

/* ==========================================
   RICH TEXT EDITOR - TinyMCE Wrapper
   ========================================== */
.rich-editor-wrapper {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.rich-editor-wrapper .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
}

.rich-editor-wrapper .tox-toolbar__primary {
  background: var(--gray-50, #f9fafb) !important;
  border-bottom: 1px solid var(--gray-200, #e5e7eb) !important;
}

.rich-editor-wrapper:focus-within {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.editor-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
}

.editor-hint i {
  margin-right: 4px;
  color: var(--primary, #4f46e5);
}

/* TinyMCE Custom Styles */
.tox .tox-statusbar {
  border-top: 1px solid var(--gray-200, #e5e7eb) !important;
}

.tox .tox-tbtn {
  cursor: pointer !important;
}

.tox .tox-tbtn:hover {
  background: var(--gray-100, #f3f4f6) !important;
}

/* Dark mode support for TinyMCE */
.dark-mode .rich-editor-wrapper {
  border-color: var(--gray-600);
  background: var(--gray-800);
}

.dark-mode .tox-toolbar__primary {
  background: var(--gray-700) !important;
}

/* ==========================================
   TAG INPUT - Notification Links
   ========================================== */
.field-description {
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
  margin: 4px 0 12px 0;
}

.tag-input-wrapper {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  min-height: 50px;
}

.tag-input-wrapper:focus-within {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--primary-light, #eef2ff);
  border: 1px solid var(--primary, #4f46e5);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--primary, #4f46e5);
  max-width: 100%;
}

.tag-item i {
  font-size: 0.75rem;
  opacity: 0.7;
}

.tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.tag-remove {
  border: none;
  background: none;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  padding: 0 2px;
  margin-left: 4px;
  font-size: 0.875rem;
  line-height: 1;
  transition: color 0.2s;
}

.tag-remove:hover {
  color: var(--danger, #ef4444);
}

.tag-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 8px;
  font-size: 0.875rem;
  background: transparent;
}

.tag-input::placeholder {
  color: var(--gray-400, #9ca3af);
}

/* ==========================================
   IMAGE LINKS CONTAINER
   ========================================== */
.image-links-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.image-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  transition: all 0.2s;
}

.image-link-item:hover {
  background: #fff;
  border-color: var(--gray-300, #d1d5db);
  box-shadow: var(--shadow-sm);
}

.image-preview {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gray-100, #f3f4f6);
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-link-info {
  flex: 1;
  min-width: 0;
}

.image-url {
  font-size: 0.8125rem;
  color: var(--gray-600, #4b5563);
  word-break: break-all;
}

.btn-icon-remove {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-icon-remove:hover {
  background: var(--danger-light, #fef2f2);
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}

.add-image-link-row {
  display: flex;
  gap: 10px;
}

.add-image-link-row .form-control {
  flex: 1;
}

.add-image-link-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Empty state for image container */
.image-links-container:empty::before {
  content: 'Chưa có hình ảnh nào';
  display: block;
  padding: 20px;
  text-align: center;
  color: var(--gray-400, #9ca3af);
  font-size: 0.875rem;
  background: var(--gray-50, #f9fafb);
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: 8px;
}

/* ==========================================
   OVERNIGHT OPTIONS
   ========================================== */
.overnight-options {
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50, #f9fafb);
  border-radius: 10px;
  border: 1px solid var(--gray-200, #e5e7eb);
  transition: all 0.3s ease;
}

.overnight-options.hidden {
  display: none;
}

.overnight-options label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700, #374151);
  margin-bottom: 10px;
}

.input-group-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.input-prefix,
.input-suffix {
  font-size: 0.875rem;
  color: var(--gray-600, #4b5563);
  white-space: nowrap;
}

.input-group-inline .form-control-sm {
  width: auto;
  min-width: 80px;
  max-width: 100px;
}

.overnight-options .hint-text {
  display: block;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
}

.overnight-options .hint-text i {
  color: var(--warning, #f59e0b);
  margin-right: 5px;
}

/* ==========================================
   AUTO REFRESH OPTIONS
   ========================================== */
.auto-refresh-options {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 3px solid var(--primary, #4f46e5);
  transition: all 0.3s ease;
}

.auto-refresh-options.hidden {
  display: none;
}

.auto-refresh-options label {
  font-size: 0.875rem;
  color: var(--gray-600, #4b5563);
  margin-bottom: 6px;
}

.auto-refresh-options select {
  max-width: 200px;
}

/* ==========================================
   RICH EDITOR WRAPPER
   ========================================== */
.rich-editor-wrapper {
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.rich-editor-wrapper .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
}

.editor-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--gray-500, #6b7280);
}

.editor-hint i {
  color: var(--info, #0ea5e9);
  margin-right: 5px;
}

/* Setting card enhancements */
.setting-card + .setting-card {
  margin-top: 12px;
}

/* Section divider style */
.form-section-title + .form-group {
  margin-top: 0;
}

/* ==========================================
   IMAGE UPLOAD ZONE - Attached Images
   ========================================== */
.image-upload-zone {
  border: 2px dashed var(--gray-300, #d1d5db);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  background: var(--gray-50, #f9fafb);
  transition: all 0.3s ease;
  cursor: pointer;
}

.image-upload-zone:hover {
  border-color: var(--primary, #4f46e5);
  background: var(--primary-bg, #eef2ff);
}

.image-upload-zone.drag-over {
  border-color: var(--primary, #4f46e5);
  background: var(--primary-bg, #eef2ff);
  transform: scale(1.01);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.upload-icon {
  font-size: 3rem;
  color: var(--gray-400, #9ca3af);
  margin-bottom: 12px;
  transition: color 0.2s;
}

.image-upload-zone:hover .upload-icon,
.image-upload-zone.drag-over .upload-icon {
  color: var(--primary, #4f46e5);
}

.upload-text {
  font-size: 0.9375rem;
  color: var(--gray-600, #4b5563);
  margin-bottom: 16px;
}

.upload-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.upload-btn {
  cursor: pointer;
}

.upload-btn input[type="file"] {
  display: none;
}

.upload-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--gray-500, #6b7280);
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 6px;
}

.upload-info i {
  color: var(--info, #0ea5e9);
}

/* Attached Images Grid */
.attached-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.attached-images-grid:empty {
  display: none;
}

.attached-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  border: 2px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s;
}

.attached-image-item:hover {
  border-color: var(--primary, #4f46e5);
  box-shadow: var(--shadow-md);
}

.attached-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.attached-image-item:hover .image-overlay {
  opacity: 1;
}

.btn-overlay {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gray-700, #374151);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.btn-overlay:hover {
  background: #fff;
  transform: scale(1.1);
}

.btn-overlay.btn-danger:hover {
  background: var(--danger, #ef4444);
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .image-upload-zone {
    padding: 24px 16px;
  }

  .upload-icon {
    font-size: 2.5rem;
  }

  .upload-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .upload-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .attached-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .btn-overlay {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}

/* ==========================================
   NOTIFICATION LINKS - Simple Tag Style
   ========================================== */
.notif-links-wrapper {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
}

.notif-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 40px;
}

.notif-links-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  color: var(--gray-400, #9ca3af);
  font-size: 0.875rem;
  font-style: italic;
}

/* Tag item */
.notif-link-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: var(--white, #fff);
  border: 1px solid var(--primary-light, #a5b4fc);
  border-radius: 8px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.notif-link-tag:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.notif-link-tag .tag-icon {
  color: var(--primary, #6366f1);
  font-size: 0.8rem;
}

.notif-link-tag .tag-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary-dark, #4338ca);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tag buttons */
.notif-link-tag .tag-btn-edit,
.notif-link-tag .tag-btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--gray-400, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.notif-link-tag .tag-btn-edit:hover {
  background: var(--primary-bg, #eef2ff);
  color: var(--primary, #6366f1);
}

.notif-link-tag .tag-btn-remove:hover {
  background: var(--danger-bg, #fef2f2);
  color: var(--danger, #ef4444);
}

/* Add link input row */
.notif-links-input-row {
  display: flex;
  gap: 10px;
}

.notif-links-input-row .form-control {
  flex: 1;
  font-size: 0.875rem;
  padding: 8px 12px;
  border-color: var(--gray-200, #e5e7eb);
}

.notif-links-input-row .form-control:focus {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Empty state */
.empty-list-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: var(--gray-50, #f8fafc);
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: 8px;
  color: var(--gray-400, #9ca3af);
  font-size: 0.875rem;
}

.empty-list-hint i {
  font-size: 1rem;
}

/* ==========================================
   NOTIFICATION IMAGES GRID - Enhanced
   ========================================== */
.notification-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  min-height: 60px;
}

.notification-image-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  border: 2px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s ease;
}

.notification-image-item:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}

.notification-image-item .image-preview-box {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.notification-image-item .image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.notification-image-item:hover .image-preview-box img {
  transform: scale(1.05);
}

.notification-image-item .image-preview-box.error {
  background: var(--danger-bg, #fef2f2);
}

.notification-image-item .image-preview-box.error::after {
  content: 'Lỗi tải hình';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: var(--danger, #ef4444);
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 4px;
}

.notification-image-item .image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.notification-image-item:hover .image-overlay {
  opacity: 1;
}

.notification-image-item .image-url-text {
  padding: 6px 8px;
  font-size: 0.6875rem;
  color: var(--gray-500, #64748b);
  background: var(--white, #fff);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Add Image Form */
.add-image-form {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.add-image-form .form-control {
  flex: 1;
  font-size: 0.875rem;
}

.add-image-form .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hint text enhancement */
.hint-text {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--gray-500, #64748b);
}

.hint-text i {
  color: var(--info, #0ea5e9);
  margin-right: 5px;
}

/* Responsive for notification components */
@media (max-width: 576px) {
  .notif-links-wrapper {
    padding: 10px;
  }

  .notif-link-tag {
    max-width: 100%;
  }

  .notif-link-tag .tag-title {
    max-width: 120px;
    font-size: 0.8125rem;
  }

  .notif-links-input-row {
    flex-direction: column;
  }

  .notif-links-input-row .btn {
    width: 100%;
  }

  .notification-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .add-image-form {
    flex-direction: column;
  }

  .add-image-form .btn {
    width: 100%;
  }
}

/* ==========================================
   ATTACHED IMAGES - Enhanced Upload Area
   ========================================== */
.attached-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  min-height: 50px;
}

.attached-image-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
  border: 2px solid var(--gray-200, #e5e7eb);
  transition: all 0.2s ease;
}

.attached-image-item:hover {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.18);
  transform: translateY(-3px);
}

.attached-image-item .attached-image-preview {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.attached-image-item .attached-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.attached-image-item:hover .attached-image-preview img {
  transform: scale(1.08);
}

.attached-image-item .attached-image-preview.error {
  background: var(--danger-bg, #fef2f2);
}

.attached-image-item .attached-image-preview.error::after {
  content: 'Lỗi tải hình';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  color: var(--danger, #ef4444);
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 10px;
  border-radius: 4px;
}

.attached-image-item .attached-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding-bottom: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.attached-image-item:hover .attached-image-overlay {
  opacity: 1;
}

.attached-image-item .attached-image-url {
  padding: 8px 10px;
  font-size: 0.6875rem;
  color: var(--gray-500, #64748b);
  background: var(--white, #fff);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Upload Area */
.attached-images-upload-area {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.upload-drop-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--gray-50, #f8fafc);
  border: 2px dashed var(--gray-300, #d1d5db);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-drop-zone:hover {
  background: var(--primary-bg, #eef2ff);
  border-color: var(--primary, #6366f1);
}

.upload-drop-zone.drag-over {
  background: var(--primary-bg, #eef2ff);
  border-color: var(--primary, #6366f1);
  transform: scale(1.02);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.upload-drop-zone .drop-zone-icon {
  font-size: 2.5rem;
  color: var(--gray-400, #9ca3af);
  margin-bottom: 10px;
  transition: color 0.2s;
}

.upload-drop-zone:hover .drop-zone-icon,
.upload-drop-zone.drag-over .drop-zone-icon {
  color: var(--primary, #6366f1);
}

.upload-drop-zone .drop-zone-text {
  font-size: 0.9375rem;
  color: var(--gray-600, #4b5563);
  margin-bottom: 6px;
}

.upload-drop-zone .drop-zone-or {
  font-size: 0.8125rem;
  color: var(--gray-400, #9ca3af);
  margin-bottom: 12px;
}

.upload-drop-zone .drop-zone-buttons {
  display: flex;
  gap: 10px;
}

/* Upload URL Section */
.upload-url-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-url-input-group {
  display: flex;
  gap: 10px;
}

.upload-url-input-group .form-control {
  flex: 1;
  font-size: 0.875rem;
}

.upload-url-input-group .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive for attached images */
@media (max-width: 768px) {
  .attached-images-upload-area {
    flex-direction: column;
  }

  .upload-drop-zone {
    padding: 20px 16px;
  }

  .upload-drop-zone .drop-zone-icon {
    font-size: 2rem;
  }

  .attached-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  .upload-url-input-group {
    flex-direction: column;
  }

  .upload-url-input-group .btn {
    width: 100%;
  }
}

/* ==========================================
   IMAGE PREVIEW MODAL - Lightbox Style
   ========================================== */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-preview-modal.active {
  opacity: 1;
}

.image-preview-modal.closing {
  opacity: 0;
}

.image-preview-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.image-preview-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.image-preview-content img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.image-preview-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.image-preview-loader {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 0.9rem;
}

.image-preview-loader i {
  font-size: 2rem;
}

/* ==========================================
   EDIT LINK POPUP MODAL
   ========================================== */
.edit-link-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.edit-link-modal.active {
  opacity: 1;
}

.edit-link-modal.closing {
  opacity: 0;
}

.edit-link-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.edit-link-dialog {
  position: relative;
  width: 100%;
  max-width: 450px;
  margin: 20px;
  background: var(--white, #fff);
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 1;
  animation: slideUp 0.25s ease;
}

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

.edit-link-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.edit-link-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-800, #1f2937);
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-link-header h4 i {
  color: var(--primary, #6366f1);
}

.edit-link-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-500, #6b7280);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.edit-link-close:hover {
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-700, #374151);
}

.edit-link-body {
  padding: 24px;
}

.edit-link-body .form-group {
  margin-bottom: 20px;
}

.edit-link-body .form-group:last-child {
  margin-bottom: 0;
}

.edit-link-body label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--gray-700, #374151);
  font-size: 0.9rem;
}

.edit-link-body label i {
  color: var(--gray-400, #9ca3af);
  font-size: 0.85rem;
}

.edit-link-body .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 10px;
  font-size: 0.95rem;
  transition: all 0.15s ease;
}

.edit-link-body .form-control:focus {
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

.edit-link-body .required {
  color: var(--danger, #ef4444);
}

.edit-link-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
  background: var(--gray-50, #f9fafb);
  border-radius: 0 0 16px 16px;
}

.edit-link-footer .btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.edit-link-footer .btn-secondary {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-600, #4b5563);
  border: 1px solid var(--gray-300, #d1d5db);
}

.edit-link-footer .btn-secondary:hover {
  background: var(--gray-200, #e5e7eb);
}

.edit-link-footer .btn-primary {
  background: var(--primary, #6366f1);
  color: #fff;
  border: none;
}

.edit-link-footer .btn-primary:hover {
  background: var(--primary-dark, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Responsive */
@media (max-width: 480px) {
  .edit-link-dialog {
    margin: 10px;
    border-radius: 12px;
  }

  .edit-link-header {
    padding: 14px 18px;
  }

  .edit-link-body {
    padding: 18px;
  }

  .edit-link-footer {
    padding: 14px 18px;
    flex-direction: column;
  }

  .edit-link-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .image-preview-close {
    top: 10px;
    right: 10px;
  }
}

/* ==========================================
   FILTER LINK MODAL - Premium Redesign 4.0
   ========================================== */

/* ---- Modal Container ---- */
.fl-modal.modal-overlay.active > .modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: static;
  max-width: 1400px;
  width: 98%;
  height: 90vh;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 25px 60px rgba(0, 0, 0, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.1);
  animation: flModalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Header ---- */
.fl-modal .modal-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border-bottom: none;
  padding: 20px 28px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.fl-modal .modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.fl-modal .modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.fl-modal .modal-header h3,
.fl-modal .modal-header .modal-title {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.12);
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.fl-modal .modal-header h3::before,
.fl-modal .modal-header .modal-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  animation: flPulse 2s ease infinite;
  flex-shrink: 0;
}

@keyframes flPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Close button - positioned at top-right corner of MODAL */
.fl-modal .modal-close,
.fl-modal .modal-header .modal-close,
.fl-modal .modal-header .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.fl-modal .modal-close:hover,
.fl-modal .modal-header .modal-close:hover,
.fl-modal .modal-header .close-btn:hover {
  background: rgba(0,0,0,0.45);
  color: #fff;
  transform: scale(1.1);
}

/* ---- Body ---- */
.fl-modal .modal-body {
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---- Form inside body ---- */
.fl-modal .modal-body .fl-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---- Tabs wrapper (fixed, no scroll) ---- */
.fl-modal .modal-body .fl-tabs-wrapper {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;
}

/* Reset inner .fl-tabs sticky when inside wrapper */
.fl-modal .modal-body .fl-tabs-wrapper .fl-tabs {
  position: relative;
  top: auto;
  box-shadow: none;
  background: transparent;
}

/* ---- Tab panels (the ONLY scroll container) ---- */
.fl-modal .modal-body .fl-tab-panels {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  min-height: 0;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar {
  width: 6px;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar-track {
  background: transparent;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

.fl-modal .modal-body .fl-tab-panels::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ---- Footer ---- */
.fl-modal .modal-footer {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.fl-modal .modal-footer .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.fl-modal .modal-footer .btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s ease;
}

.fl-modal .modal-footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.fl-modal .modal-footer .btn-primary:hover::before {
  left: 100%;
}

.fl-modal .modal-footer .btn-secondary,
.fl-modal .modal-footer .btn-outline {
  background: #fff;
  border: 2px solid #e2e8f0;
  color: #475569;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.fl-modal .modal-footer .btn-secondary:hover,
.fl-modal .modal-footer .btn-outline:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

/* ---- Form container ---- */
.fl-form {
  display: flex;
  flex-direction: column;
}

/* ==========================================
   Tab Navigation - Premium Style
   ========================================== */
.fl-tabs {
  display: flex;
  gap: 6px;
  padding: 16px 24px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.fl-tabs::-webkit-scrollbar {
  height: 4px;
}

.fl-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.fl-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.fl-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.fl-tab i {
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.fl-tab span {
  position: relative;
}

.fl-tab:hover {
  background: #f1f5f9;
  color: #475569;
}

/* Tab Active */
.fl-tab.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}

.fl-tab.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
  border-radius: 8px;
  pointer-events: none;
}

/* Tab notification badge */
.fl-tab .fl-tab-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  border: 2px solid #fff;
}

/* ==========================================
   Tab Content
   ========================================== */
.fl-tab-content {
  display: none;
  padding: 24px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 50%);
}

.fl-tab-content.active {
  display: block;
  animation: flTabFadeIn 0.3s ease;
}

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

/* ==========================================
   Section Cards - Premium Glass Style
   ========================================== */
.fl-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fl-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fl-section:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 4px 20px rgba(99, 102, 241, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.fl-section:hover::before {
  opacity: 1;
}

.fl-section:last-child {
  margin-bottom: 0;
}

/* Section Header - Premium Style */
.fl-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #fafbff 0%, #fff 100%);
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

/* Section Icon - Floating 3D Style */
.fl-section-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #6366f1;
  border-radius: 14px;
  font-size: 1.1rem;
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.fl-section:hover .fl-section-icon {
  transform: scale(1.05) rotate(-3deg);
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Color variants for section icons */
.fl-section-icon.green {
  background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%);
  color: #059669;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}

.fl-section-icon.orange {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  color: #ea580c;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.fl-section-icon.blue {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.fl-section-icon.purple {
  background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%);
  color: #9333ea;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}

.fl-section-icon.pink {
  background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
  color: #db2777;
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.2);
}

.fl-section-icon.cyan {
  background: linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%);
  color: #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}

/* Section Title */
.fl-section-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  flex: 1;
  letter-spacing: -0.02em;
}

/* Section Badge - Pill Style */
.fl-section-badge {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
}

/* Section Body */
.fl-section-body {
  padding: 24px;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
}

/* ==========================================
   Form Fields - Ultra Premium Style
   ========================================== */
.fl-field {
  margin-bottom: 24px;
}

.fl-field:last-child {
  margin-bottom: 0;
}

/* Label with floating effect feel */
.fl-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.fl-label i {
  color: #8b5cf6;
  font-size: 0.9rem;
  opacity: 0.8;
}

.fl-required {
  color: #ef4444;
  margin-left: 2px;
  font-weight: 700;
  animation: requirePulse 2s ease infinite;
}

@keyframes requirePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Input Wrapper with glow effect */
.fl-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.fl-input-icon {
  position: absolute;
  left: 18px;
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.fl-input-wrapper:focus-within .fl-input-icon {
  color: #6366f1;
  transform: scale(1.1);
}

/* Input - Neumorphic Style */
.fl-input {
  width: 100%;
  padding: 16px 18px 16px 50px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  color: #1e293b;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fl-input:hover {
  border-color: #c7d2fe;
  background: #fff;
}

.fl-input:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.1),
    0 4px 12px rgba(99, 102, 241, 0.08);
  outline: none;
  background: #fff;
}

.fl-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* Textarea */
.fl-textarea-wrapper {
  display: block;
}

.fl-textarea {
  width: 100%;
  padding: 16px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  resize: vertical;
  min-height: 110px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  color: #1e293b;
  line-height: 1.6;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fl-textarea:hover {
  border-color: #c7d2fe;
  background: #fff;
}

.fl-textarea:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.1),
    0 4px 12px rgba(99, 102, 241, 0.08);
  outline: none;
  background: #fff;
}

/* Hint Box - Info Card Style */
.fl-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  font-size: 0.8rem;
  color: #475569;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border-left: 4px solid #6366f1;
  line-height: 1.5;
}

.fl-hint i {
  color: #6366f1;
  font-size: 0.9rem;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ==========================================
   Select - Custom Dropdown Style
   ========================================== */

/* Ghi chú nhỏ dưới 1 field (nhẹ hơn .fl-hint vốn là callout cả khối) */
.fl-note {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #94a3b8;
}

[data-theme="dark"] .fl-note { color: #64748b; }

.fl-select-wrapper {
  position: relative;
}

.fl-select {
  width: 100%;
  padding: 16px 48px 16px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  cursor: pointer;
  appearance: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #1e293b;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fl-select:hover {
  border-color: #c7d2fe;
  background: #fff;
}

.fl-select:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.1),
    0 4px 12px rgba(99, 102, 241, 0.08);
  outline: none;
  background: #fff;
}

.fl-select-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-select:focus + .fl-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: #6366f1;
}

.fl-select-sm {
  padding: 12px 40px 12px 16px;
  font-size: 0.875rem;
  border-radius: 12px;
}

/* Row layout */
.fl-row {
  display: flex;
  gap: 24px;
}

.fl-field-half {
  flex: 1;
  min-width: 0;
}

/* ==========================================
   Toggle Card - Interactive Card Style
   ========================================== */
.fl-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.fl-toggle-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fl-toggle-card:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 8px 25px rgba(99, 102, 241, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

.fl-toggle-card:hover::before {
  opacity: 1;
}

.fl-toggle-card:last-child {
  margin-bottom: 0;
}

/* Toggle Info */
.fl-toggle-info {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

/* Toggle Icon - 3D Floating Style */
.fl-toggle-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: none;
  border-radius: 14px;
  color: #64748b;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fl-toggle-card:hover .fl-toggle-icon {
  transform: scale(1.05) rotate(-3deg);
}

.fl-toggle-icon.active {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(34, 197, 94, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Toggle Text */
.fl-toggle-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.fl-toggle-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.fl-toggle-text span {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
}

/* ==========================================
   Switch - Premium Animated Toggle
   ========================================== */
.fl-switch {
  position: relative;
  width: 58px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Ensure switch stays on right in toggle cards */
.fl-toggle-card > .fl-switch {
  margin-left: 16px;
}

.fl-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.fl-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

.fl-switch-slider:before {
  content: '';
  position: absolute;
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-switch input:checked + .fl-switch-slider {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(99, 102, 241, 0.35);
}

.fl-switch input:checked + .fl-switch-slider:before {
  transform: translateX(26px);
  box-shadow:
    0 3px 12px rgba(99, 102, 241, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Switch hover effect */
.fl-switch:hover .fl-switch-slider:before {
  transform: scale(1.05);
}

.fl-switch:hover input:checked + .fl-switch-slider:before {
  transform: translateX(26px) scale(1.05);
}

/* ==========================================
   Conditional Content - Expandable
   ========================================== */
.fl-conditional {
  margin-top: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 14px;
  animation: conditionalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fl-conditional::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 24px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-left: 1px solid rgba(99, 102, 241, 0.15);
  border-top: 1px solid rgba(99, 102, 241, 0.15);
  transform: rotate(45deg);
}

@keyframes conditionalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

.fl-conditional.hidden {
  display: none;
}

/* Dark: panel điều kiện (Ẩn nút copy / ca qua đêm / auto refresh…) — gradient lavender sáng cứng */
[data-theme="dark"] .fl-conditional { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .fl-conditional::before { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .fl-conditional .fl-label { color:var(--th-text); }

/* Time picker */
.fl-time-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fl-time-label {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ==========================================
   Room Grid - Ultra Premium Selection Cards
   ========================================== */
.fl-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  margin: -8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.fl-room-grid::-webkit-scrollbar {
  width: 8px;
}

.fl-room-grid::-webkit-scrollbar-track {
  background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
  border-radius: 8px;
}

.fl-room-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.fl-room-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%);
}

.fl-room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Shimmer effect on hover */
.fl-room-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.08) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.fl-room-card:hover::before {
  left: 100%;
}

.fl-room-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(99, 102, 241, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

.fl-room-card.selected {
  border-color: #6366f1;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.25),
    0 0 0 3px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Pulse animation for selected state */
.fl-room-card.selected::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  border: 2px solid rgba(99, 102, 241, 0.4);
  animation: roomCardPulse 2s ease-in-out infinite;
}

@keyframes roomCardPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.03);
  }
}

.fl-room-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fl-room-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 14px;
  color: #64748b;
  font-size: 1.3rem;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fl-room-card:hover .fl-room-icon {
  transform: scale(1.08) rotate(-3deg);
}

.fl-room-card.selected .fl-room-icon {
  transform: scale(1.1);
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Platform-specific icon styles with enhanced gradients */
.fl-room-card.platform-shopee .fl-room-icon {
  background: linear-gradient(145deg, #fff1ef 0%, #fecaca 100%);
  color: var(--shopee);
  box-shadow:
    0 4px 12px rgba(238, 77, 45, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-lazada .fl-room-icon {
  background: linear-gradient(145deg, #eef0ff 0%, #c7d2fe 100%);
  color: var(--lazada);
  box-shadow:
    0 4px 12px rgba(15, 36, 140, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-tiktok .fl-room-icon {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  color: var(--tiktok);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-facebook .fl-room-icon {
  background: linear-gradient(145deg, #e7f3ff 0%, #bfdbfe 100%);
  color: var(--facebook);
  box-shadow:
    0 4px 12px rgba(24, 119, 242, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-card.platform-youtube .fl-room-icon {
  background: linear-gradient(145deg, #ffebeb 0%, #fecaca 100%);
  color: var(--youtube);
  box-shadow:
    0 4px 12px rgba(255, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.fl-room-name {
  font-size: 0.82rem;
  font-weight: 650;
  color: #334155;
  text-align: center;
  line-height: 1.35;
  word-break: break-word;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}

.fl-room-card.selected .fl-room-name {
  color: #4338ca;
}

.fl-room-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0.5) rotate(-180deg);
}

.fl-room-card.selected .fl-room-check {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  opacity: 1;
  transform: scale(1) rotate(0deg);
  box-shadow:
    0 3px 10px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Check icon bounce animation */
.fl-room-card.selected .fl-room-check i {
  animation: checkBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

@keyframes checkBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ==========================================
   Empty State - Ultra Premium Illustration
   ========================================== */
.fl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 55px 24px;
  color: #94a3b8;
  position: relative;
}

.fl-empty-state::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: emptyStatePulse 3s ease-in-out infinite;
}

@keyframes emptyStatePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.fl-empty-state i {
  font-size: 3.2rem;
  opacity: 0.5;
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.fl-empty-state span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

/* ==========================================
   Links Container - Ultra Premium Glass
   ========================================== */
.fl-links-container {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.3s ease;
}

.fl-links-container:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-links-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.fl-links-list::-webkit-scrollbar {
  width: 6px;
}

.fl-links-list::-webkit-scrollbar-track {
  background: transparent;
}

.fl-links-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 6px;
}

.fl-links-list:empty {
  display: none;
}

.fl-links-add {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid #e2e8f0;
}

.fl-links-add .fl-input-wrapper {
  flex: 1;
}

.fl-links-add .fl-input {
  padding-left: 46px;
}

/* ==========================================
   Button - Ultra Premium Interactive
   ========================================== */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

/* Ripple effect container */
.fl-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.fl-btn:active::before {
  width: 300px;
  height: 300px;
}

.fl-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  color: #fff;
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fl-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 28px rgba(99, 102, 241, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.fl-btn-primary:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Shimmer animation for primary button */
.fl-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
}

.fl-btn-primary:hover::after {
  left: 100%;
}

.fl-btn-secondary {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  color: #475569;
  border: 2px solid #e2e8f0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-btn-secondary:hover {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #c7d2fe;
  color: #6366f1;
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-btn-secondary:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.fl-btn-sm {
  padding: 10px 16px;
  font-size: 0.82rem;
  border-radius: 12px;
}

.fl-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
}

.fl-btn-icon:hover i {
  transform: scale(1.15);
}

.fl-btn i {
  transition: transform 0.25s ease;
}

/* ==========================================
   Images Grid - Ultra Premium Gallery
   ========================================== */
.fl-images-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  padding: 4px;
}

.fl-images-grid:empty {
  display: none;
}

.fl-images-large {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid for images with titles - wider cards for better title input */
.fl-images-grid:has(.fl-image-with-title) {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .fl-images-grid:has(.fl-image-with-title) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================
   Image Add Section - Ultra Premium Glass
   ========================================== */
.fl-image-add {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: all 0.3s ease;
}

.fl-image-add:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 8px 28px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-image-add-tabs {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 6px 6px 0;
  gap: 4px;
}

.fl-image-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border-radius: 12px 12px 0 0;
  margin-bottom: -2px;
}

.fl-image-tab i {
  font-size: 1rem;
  transition: all 0.3s ease;
}

.fl-image-tab:hover {
  color: #475569;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.fl-image-tab:hover i {
  transform: scale(1.15);
}

.fl-image-tab.active {
  color: #6366f1;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  border: 2px solid #e2e8f0;
  border-bottom: 2px solid #ffffff;
  box-shadow:
    0 -4px 12px rgba(99, 102, 241, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-image-tab.active i {
  color: #8b5cf6;
}

.fl-image-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border-radius: 3px 3px 0 0;
  animation: tabSlideIn 0.3s ease;
}

@keyframes tabSlideIn {
  from {
    left: 50%;
    right: 50%;
    opacity: 0;
  }
  to {
    left: 20%;
    right: 20%;
    opacity: 1;
  }
}

.fl-image-add-content {
  padding: 20px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}

.fl-image-url-input {
  display: none;
  gap: 14px;
}

.fl-image-url-input.active {
  display: flex;
  animation: fadeSlideIn 0.3s ease;
}

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

.fl-image-url-input .fl-input-wrapper {
  flex: 1;
}

.fl-image-upload-input {
  display: none;
}

.fl-image-add-content .fl-image-upload-input:not(.fl-image-url-input.active ~ .fl-image-upload-input) {
  display: block;
  animation: fadeSlideIn 0.3s ease;
}

.fl-image-url-input.active + .fl-image-upload-input {
  display: none !important;
}

/* ==========================================
   Upload Zone - Ultra Premium Animated Dropzone
   ========================================== */
.fl-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 28px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 3px dashed #c7d2fe;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle pattern background */
.fl-upload-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.fl-upload-zone:hover::before {
  opacity: 0.3;
}

.fl-upload-zone:hover {
  border-color: #6366f1;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(99, 102, 241, 0.15),
    0 0 0 4px rgba(99, 102, 241, 0.08);
}

.fl-upload-zone.drag-over {
  border-color: #6366f1;
  border-style: solid;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  transform: scale(1.03);
  box-shadow:
    0 16px 40px rgba(99, 102, 241, 0.25),
    0 0 0 4px rgba(99, 102, 241, 0.15),
    inset 0 0 30px rgba(99, 102, 241, 0.05);
}

.fl-upload-zone.drag-over::before {
  opacity: 0;
}

.fl-upload-zone i {
  font-size: 2.8rem;
  color: #94a3b8;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.fl-upload-zone:hover i {
  color: #6366f1;
  transform: scale(1.15) translateY(-4px);
}

.fl-upload-zone.drag-over i {
  color: #6366f1;
  transform: scale(1.2) translateY(-8px);
  animation: uploadBounce 0.6s ease infinite;
}

@keyframes uploadBounce {
  0%, 100% {
    transform: scale(1.2) translateY(-8px);
  }
  50% {
    transform: scale(1.2) translateY(-14px);
  }
}

.fl-upload-zone span {
  font-size: 0.95rem;
  font-weight: 650;
  color: #475569;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
  transition: all 0.3s ease;
}

.fl-upload-zone:hover span {
  color: #6366f1;
}

.fl-upload-zone small {
  font-size: 0.82rem;
  color: #94a3b8;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.fl-upload-zone:hover small {
  color: #64748b;
}

/* ==========================================
   Editor Wrapper - Ultra Premium Neumorphic
   ========================================== */
.fl-editor-wrapper {
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
}

.fl-editor-wrapper:hover {
  border-color: #c7d2fe;
  box-shadow:
    0 6px 18px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-editor-wrapper:focus-within {
  border-color: #6366f1;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.12),
    0 8px 24px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.fl-editor-wrapper .rich-editor {
  border: none !important;
  border-radius: 0 !important;
}

/* TinyMCE in Filter Link Form - Enhanced Style */
#filterLinkForm .tox-tinymce {
  border-radius: 12px !important;
  border: 2px solid #e2e8f0 !important;
  overflow: hidden;
}

#filterLinkForm .tox-tinymce:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

#filterLinkForm .tox-toolbar__primary {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#filterLinkForm .tox-edit-area {
  background: #fff !important;
}

#filterLinkForm .tox-statusbar {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* ==========================================
   Time Picker - Ultra Premium Style
   ========================================== */
.fl-time-picker .fl-input {
  min-width: 140px;
  text-align: center;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ==========================================
   Responsive - Part 2 Enhancements
   ========================================== */
/* Responsive */
@media (max-width: 640px) {
  .fl-tabs {
    padding: 12px;
    gap: 2px;
  }

  .fl-tab {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .fl-tab span {
    display: none;
  }

  .fl-tab-content {
    padding: 14px;
  }

  .fl-row {
    flex-direction: column;
    gap: 12px;
  }

  .fl-room-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-toggle-card {
    padding: 12px;
  }

  .fl-toggle-icon {
    width: 36px;
    height: 36px;
  }

  .fl-section-body {
    padding: 14px;
  }
}

/* ==========================================
   FILTER LINK - Image Cards Ultra Premium
   ========================================== */

/* Image Card - Premium Glass Effect */
.fl-image-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
/* Kéo-thả sắp xếp lại thứ tự ảnh (pointer-drag, bóng dính chuột) */
.fl-image-card.fl-img-sortable { cursor: grab; will-change: transform; touch-action: none; }
.fl-image-card.fl-img-sortable:active { cursor: grabbing; }
/* Chỗ cũ của ảnh đang kéo → khoảng trống mờ, nét đứt */
.fl-image-card.fl-img-source-hidden {
  opacity: 0.18;
  filter: grayscale(1);
  outline: 2px dashed #c7d2fe;
  outline-offset: -2px;
  pointer-events: none;
}
.fl-image-card.fl-img-source-hidden img,
.fl-image-card.fl-img-source-hidden .fl-image-actions,
.fl-image-card.fl-img-source-hidden .fl-image-info { visibility: hidden; }
/* Bóng kéo dính theo con trỏ */
.fl-img-ghost {
  position: fixed;
  top: 0; left: 0;
  z-index: 100000;
  margin: 0;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.32);
  opacity: 0.96;
  cursor: grabbing;
  /* QUAN TRỌNG: tắt mọi transition kế thừa từ .fl-image-card để bóng bám sát con trỏ, không trễ */
  transition: none !important;
  will-change: transform;
}
.fl-img-ghost * { transition: none !important; animation: none !important; }
.fl-img-ghost .fl-image-actions { display: none !important; }
body.fl-img-dragging-active { user-select: none; cursor: grabbing; }

.fl-image-card:hover {
  border-color: #6366f1;
  box-shadow:
    0 8px 20px rgba(99, 102, 241, 0.15),
    0 0 0 2px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-3px);
}

.fl-image-card-lg {
  /* Larger cards for attached images */
}

.fl-image-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  overflow: hidden;
}

.fl-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-image-card:hover .fl-image-thumb img {
  transform: scale(1.08);
  filter: brightness(1.02);
}

.fl-image-thumb.error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
}

.fl-image-thumb.error::after {
  content: '\f03e';
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  font-size: 2.2rem;
  color: #cbd5e1;
}

/* Image Actions Overlay - Premium Glass */
.fl-image-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none; /* khi ẩn → cho phép kéo xuyên qua, không chặn pointerdown */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-image-card:hover .fl-image-actions {
  opacity: 1;
  pointer-events: auto; /* hover mới bật nút (vùng ảnh vẫn kéo được; chỉ 3 nút nhỏ chặn) */
}

.fl-img-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #475569;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(8px);
  opacity: 0;
}

.fl-image-card:hover .fl-img-btn {
  transform: translateY(0);
  opacity: 1;
}

.fl-image-card:hover .fl-img-btn:nth-child(1) {
  transition-delay: 0.05s;
}

.fl-image-card:hover .fl-img-btn:nth-child(2) {
  transition-delay: 0.1s;
}

.fl-image-card:hover .fl-img-btn:nth-child(3) {
  transition-delay: 0.15s;
}

.fl-img-btn:hover {
  transform: scale(1.15) translateY(-2px);
}

.fl-img-view:hover {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fl-img-edit:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fl-img-delete:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Image Number Badge - Premium Floating */
.fl-image-number {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 2;
  transition: all 0.25s ease;
}

.fl-image-card:hover .fl-image-number {
  transform: scale(1.1);
}

/* Image Title Input - Clean & Readable */
.fl-image-title-input {
  padding: 8px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.fl-image-title-input input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #334155;
  background: #f8fafc;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.fl-image-title-input input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.fl-image-title-input input:focus {
  outline: none;
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Image Info - Premium Glass Footer */
.fl-image-info {
  padding: 8px 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
}

.fl-image-url {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.fl-image-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 8px;
  letter-spacing: -0.01em;
}

.fl-image-badge.upload {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.12);
}

/* Empty State - Premium Illustration */
.fl-images-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 50px 24px;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border: 3px dashed #c7d2fe;
  border-radius: 18px;
  color: #94a3b8;
  position: relative;
  overflow: hidden;
}

.fl-images-empty::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: emptyImagePulse 3s ease-in-out infinite;
}

@keyframes emptyImagePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.2;
  }
}

.fl-images-empty i {
  font-size: 2.4rem;
  color: #94a3b8;
  position: relative;
  z-index: 1;
}

.fl-images-empty span {
  font-size: 0.92rem;
  font-weight: 600;
  color: #64748b;
  position: relative;
  z-index: 1;
}

/* ==========================================
   FILTER LINK - Edit Image URL Modal Ultra Premium
   ========================================== */

.fl-edit-url-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-edit-url-modal.active {
  opacity: 1;
  visibility: visible;
}

.fl-edit-url-modal.closing {
  opacity: 0;
}

.fl-edit-url-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.6) 0%,
    rgba(30, 41, 59, 0.7) 100%
  );
  backdrop-filter: blur(8px);
}

.fl-edit-url-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
  border-radius: 24px;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  animation: editModalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes editModalAppear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fl-edit-url-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  position: relative;
  overflow: hidden;
}

/* Shimmer effect on header */
.fl-edit-url-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: editHeaderShimmer 3s ease-in-out infinite;
}

@keyframes editHeaderShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

.fl-edit-url-header h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.fl-edit-url-header h4 i {
  color: #fff;
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

.fl-edit-url-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 1;
}

.fl-edit-url-close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(90deg);
}

.fl-edit-url-body {
  padding: 26px;
}

.fl-edit-url-preview {
  width: 100%;
  height: 200px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
}

.fl-edit-url-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 48%,
    rgba(99, 102, 241, 0.03) 50%,
    transparent 52%
  );
  background-size: 20px 20px;
  pointer-events: none;
}

.fl-edit-url-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.fl-edit-url-preview:hover img {
  transform: scale(1.02);
}

/* Wide dialog for edit image with tabs */
.fl-edit-url-dialog-wide {
  max-width: 680px;
}

.fl-edit-image-layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}

.fl-edit-image-layout .fl-edit-url-preview {
  width: 220px;
  height: 180px;
  flex-shrink: 0;
  margin-bottom: 0;
  border: 2px solid #e2e8f0;
}

.fl-edit-image-options {
  flex: 1;
  min-width: 0;
}

/* Edit Image Tabs - Premium Style */
.fl-edit-image-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.fl-edit-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 2px solid #e2e8f0;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.fl-edit-tab i {
  transition: all 0.3s ease;
}

.fl-edit-tab:hover {
  border-color: #c7d2fe;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
}

.fl-edit-tab:hover i {
  transform: scale(1.15);
}

.fl-edit-tab.active {
  border-color: #6366f1;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #6366f1;
  box-shadow:
    0 4px 12px rgba(99, 102, 241, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fl-edit-tab.active i {
  color: #8b5cf6;
}

/* Edit Image Content */
.fl-edit-image-content {
  min-height: 90px;
}

.fl-edit-url-input {
  display: none;
  gap: 12px;
}

.fl-edit-url-input.active {
  display: flex;
  animation: fadeSlideIn 0.3s ease;
}

.fl-edit-url-input .fl-input-wrapper {
  flex: 1;
}

.fl-edit-upload-input {
  display: none;
}

.fl-edit-upload-input.active {
  display: block;
}

.fl-edit-upload-input .fl-cover-dropzone {
  padding: 20px;
  min-height: auto;
}

@media (max-width: 640px) {
  .fl-edit-image-layout {
    flex-direction: column;
  }

  .fl-edit-image-layout .fl-edit-url-preview {
    width: 100%;
    height: 140px;
  }
}

.fl-edit-url-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 20px 26px;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 0 0 24px 24px;
}

/* ==========================================
   Responsive - Part 3 Enhancements
   ========================================== */
@media (max-width: 480px) {
  .fl-edit-url-dialog {
    margin: 10px;
    border-radius: 20px;
  }

  .fl-edit-url-header {
    padding: 16px 20px;
  }

  .fl-edit-url-header h4 {
    font-size: 1rem;
  }

  .fl-edit-url-body {
    padding: 20px;
  }

  .fl-edit-url-footer {
    padding: 16px 20px;
    flex-direction: column;
    gap: 10px;
  }

  .fl-edit-url-footer .fl-btn {
    width: 100%;
    justify-content: center;
  }

  .fl-img-btn {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .fl-image-add-tabs {
    padding: 4px 4px 0;
  }

  .fl-image-tab {
    padding: 12px 14px;
    font-size: 0.8rem;
  }

  .fl-upload-zone {
    padding: 32px 20px;
  }

  .fl-upload-zone i {
    font-size: 2.4rem;
  }

  .fl-images-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .fl-images-large {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-img-btn {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}

/* ==========================================
   FILTER LINK - Notification Links Ultra Premium
   ========================================== */

/* Links Empty State - Premium */
.fl-links-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  color: #94a3b8;
  position: relative;
}

.fl-links-empty::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: emptyLinksPulse 3s ease-in-out infinite;
}

@keyframes emptyLinksPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.fl-links-empty i {
  font-size: 1.8rem;
  color: #94a3b8;
  position: relative;
  z-index: 1;
}

.fl-links-empty span {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  position: relative;
  z-index: 1;
}

/* Link Item - Premium Glass */
.fl-link-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.fl-link-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.fl-link-item:last-child {
  margin-bottom: 0;
}

.fl-link-item:hover {
  border-color: #c7d2fe;
  background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%);
  transform: translateX(6px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
}

.fl-link-item:hover::before {
  transform: scaleY(1);
}

/* Link Icon - Premium */
.fl-link-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.fl-link-item:hover .fl-link-icon {
  background: linear-gradient(145deg, #eef2ff 0%, #c7d2fe 100%);
  transform: scale(1.08);
}

.fl-link-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.fl-link-icon i {
  font-size: 1rem;
  color: var(--gray-500);
}

.fl-link-item:hover .fl-link-icon {
  background: var(--primary);
}

.fl-link-item:hover .fl-link-icon i {
  color: var(--white);
}

/* Link Content */
.fl-link-content {
  flex: 1;
  min-width: 0;
}

.fl-link-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.fl-link-url {
  font-size: 0.75rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-link-note {
  font-size: 0.72rem;
  color: #6366f1;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-link-note i { font-size: 0.65rem; opacity: 0.8; flex-shrink: 0; }

/* Link Actions */
.fl-link-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fl-link-item:hover .fl-link-actions {
  opacity: 1;
}

.fl-link-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fl-link-btn:hover {
  transform: scale(1.1);
}

.fl-link-edit:hover {
  background: var(--info);
  color: var(--white);
}

.fl-link-delete:hover {
  background: var(--danger);
  color: var(--white);
}

/* Responsive for links */
@media (max-width: 480px) {
  .fl-link-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .fl-link-icon {
    width: 32px;
    height: 32px;
  }

  .fl-link-actions {
    opacity: 1;
  }

  .fl-link-btn {
    width: 28px;
    height: 28px;
  }
}

/* =========================================
   FILTER LINK - EVENTS SECTION
   ========================================= */

/* Events List */
.fl-events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Events Empty State */
.fl-events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: 12px;
  text-align: center;
}

.fl-events-empty i {
  font-size: 3rem;
  color: var(--gray-300);
  margin-bottom: 16px;
}

.fl-events-empty span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.fl-events-empty small {
  font-size: 0.85rem;
  color: var(--gray-400);
}

/* Event Item */
.fl-event-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fl-event-item:hover {
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

.fl-event-item.inactive {
  opacity: 0.6;
  background: var(--gray-50);
}

.fl-event-item.inactive:hover {
  opacity: 0.8;
}

/* Event Cover Image */
.fl-event-cover {
  width: 100px;
  height: 80px;
  flex-shrink: 0;
  background: var(--gray-100);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-event-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fl-event-cover i {
  font-size: 1.8rem;
  color: var(--gray-300);
}

.fl-event-cover.no-image {
  background: var(--gray-100);
}

.fl-event-cover.no-image img {
  display: none;
}

.fl-event-cover.no-image::after {
  content: '\f03e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--gray-300);
}

/* Event Content */
.fl-event-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-event-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fl-event-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
}

.fl-event-title em {
  color: var(--gray-400);
  font-weight: 400;
}

.fl-event-status .status-active {
  color: var(--success);
}

.fl-event-status .status-inactive {
  color: var(--gray-400);
}

/* Event Date Badge */
.fl-event-date {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fl-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.fl-event-badge i {
  font-size: 0.7rem;
}

.fl-event-badge.today {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}

.fl-event-badge.range {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}

.fl-event-badge.always {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
}

/* Event Source (Room/Brand) */
.fl-event-source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.fl-event-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
}

.fl-event-source-tag i {
  font-size: 0.65rem;
}

.fl-event-source-tag.brand {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

.fl-event-source-tag.room {
  background: rgba(6, 182, 212, 0.1);
  color: #0891b2;
}

/* Event Preview */
.fl-event-preview {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Event Actions */
.fl-event-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fl-event-item:hover .fl-event-actions {
  opacity: 1;
}

.fl-event-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fl-event-btn:hover {
  transform: scale(1.1);
}

.fl-event-edit:hover {
  background: var(--info);
  color: var(--white);
}

.fl-event-toggle:hover {
  background: var(--warning);
  color: var(--white);
}

.fl-event-delete:hover {
  background: var(--danger);
  color: var(--white);
}

/* Section header with button */
.fl-section-header .fl-btn {
  margin-left: auto;
}

.fl-btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Responsive for events */
@media (max-width: 640px) {
  .fl-event-item {
    flex-direction: column;
    gap: 12px;
  }

  .fl-event-cover {
    width: 100%;
    height: 140px;
  }

  .fl-event-actions {
    flex-direction: row;
    opacity: 1;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .fl-event-item {
    padding: 12px;
  }

  .fl-event-cover {
    height: 120px;
  }

  .fl-event-title {
    font-size: 0.95rem;
  }

  .fl-event-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

/* =========================================
   FILTER LINK - EVENT MODAL
   ========================================= */

/* Event Modal Overlay */
.fl-event-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fl-event-modal.active {
  opacity: 1;
}

.fl-event-modal.closing {
  opacity: 0;
}

.fl-event-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Event Modal Dialog */
.fl-event-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 950px;
  max-height: 92vh;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: eventModalSlideUp 0.25s ease;
  z-index: 1;
}

/* TinyMCE in Event Modal - ensure proper display */
.fl-event-modal .tox.tox-tinymce {
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  z-index: 10;
}

.fl-event-modal .tox .tox-toolbar,
.fl-event-modal .tox .tox-toolbar__primary {
  background: #f8fafc !important;
}

.fl-event-modal .tox .tox-tbtn {
  cursor: pointer;
}

.fl-event-modal .tox .tox-edit-area__iframe {
  background: #fff;
}

/* TinyMCE auxiliary elements (dropdowns, color picker, etc.) - ensure proper z-index */
.tox-tinymce-aux {
  z-index: 100001 !important;
}

.tox .tox-menu,
.tox .tox-dialog,
.tox .tox-dialog-wrap {
  z-index: 100002 !important;
}

.tox .tox-collection__item {
  cursor: pointer;
}

@keyframes eventModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fl-event-modal.closing .fl-event-modal-dialog {
  animation: eventModalSlideDown 0.2s ease forwards;
}

@keyframes eventModalSlideDown {
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Modal Header */
.fl-event-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.fl-event-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-event-modal-header h3 i {
  color: var(--primary);
}

.fl-event-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.fl-event-modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

/* Modal Body */
.fl-event-modal-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* Event Form */
.fl-event-form .fl-field {
  margin-bottom: 20px;
}

.fl-event-form .fl-field:last-child {
  margin-bottom: 0;
}

/* Event Title Input - Larger */
.fl-event-form #eventTitle {
  font-size: 1.1rem;
  font-weight: 500;
  padding: 14px 16px;
  border-width: 2px;
}

.fl-event-form #eventTitle:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* TinyMCE Container in Event Form */
.fl-event-form .tox-tinymce {
  border-radius: 10px !important;
  border: 2px solid var(--gray-200) !important;
}

.fl-event-form .tox-tinymce:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Cover Image Section */
.fl-event-cover-section {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-100);
}

.fl-event-cover-preview {
  width: 180px;
  height: 120px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
  border: 2px dashed var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
}

.fl-event-cover-preview i {
  font-size: 2rem;
  color: var(--gray-300);
  margin-bottom: 8px;
}

.fl-event-cover-preview span {
  font-size: 0.8rem;
  color: var(--gray-400);
}

.fl-event-cover-preview.has-image {
  border-style: solid;
  border-color: var(--primary-light);
}

.fl-event-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cover Actions */
.fl-event-cover-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fl-event-cover-tabs {
  display: flex;
  gap: 8px;
}

.fl-cover-tab {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.fl-cover-tab:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.fl-cover-tab.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

/* Cover Inputs */
.fl-event-cover-inputs {
  flex: 1;
}

.fl-cover-upload-input,
.fl-cover-url-input {
  display: none;
}

.fl-cover-upload-input.active,
.fl-cover-url-input.active {
  display: flex;
}

.fl-cover-url-input {
  gap: 8px;
}

.fl-cover-url-input .fl-input-wrapper {
  flex: 1;
}

/* Cover Dropzone */
.fl-cover-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 80px;
}

.fl-cover-dropzone:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.fl-cover-dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-bg);
  transform: scale(1.02);
}

.fl-cover-dropzone i {
  font-size: 1.5rem;
  color: var(--gray-400);
  margin-bottom: 6px;
}

.fl-cover-dropzone span {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}

.fl-cover-dropzone small {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 4px;
}

/* Date Type Options */
.fl-date-type-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 4 columns layout for Filter Link date type */
.fl-date-type-options.fl-date-type-4cols {
  grid-template-columns: repeat(4, 1fr);
}

/* Specific Date Section (for Filter Link) */
.fl-specific-date-section {
  display: none;
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  animation: fadeInSlide 0.2s ease;
}

.fl-specific-date-section.active {
  display: block;
}

.fl-date-type-option {
  cursor: pointer;
}

.fl-date-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fl-date-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.fl-date-type-card i {
  font-size: 1.5rem;
  color: var(--gray-400);
  transition: color 0.2s ease;
}

.fl-date-type-card span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-600);
  text-align: center;
}

.fl-date-type-option:hover .fl-date-type-card {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.fl-date-type-option.active .fl-date-type-card {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.fl-date-type-option.active .fl-date-type-card i {
  color: var(--primary);
}

.fl-date-type-option.active .fl-date-type-card span {
  color: var(--primary-dark);
}

/* Date Range Section */
.fl-date-range-section {
  display: none;
  margin-top: 16px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  animation: fadeInSlide 0.2s ease;
}

.fl-date-range-section.active {
  display: block;
}

/* Display Before Section */
.fl-display-before-section {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: 12px;
  animation: fadeInSlide 0.2s ease;
}

.fl-display-before-section.active {
  display: block;
}

.fl-display-before-section > .fl-label {
  margin-bottom: 10px;
}

.fl-before-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fl-before-option {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-600);
  text-align: center;
}

.fl-before-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fl-before-option i {
  font-size: 1.2rem;
  color: var(--gray-400);
  transition: color 0.2s ease;
}

.fl-before-option:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.fl-before-option.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary-dark);
}

.fl-before-option.active i {
  color: var(--primary);
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.fl-field-row:last-child {
  margin-bottom: 0;
}

.fl-field-row .fl-field {
  margin-bottom: 0;
}

/* Toggle Inline */
.fl-toggle-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: 10px;
  cursor: pointer;
}

.fl-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--gray-700);
}

.fl-toggle-label i {
  color: var(--gray-400);
}

.fl-toggle-text {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* Modal Footer */
.fl-event-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 0 0 16px 16px;
}

/* Button styles for modal */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fl-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.fl-btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.fl-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

.fl-btn-secondary:hover {
  background: var(--gray-200);
}

.fl-btn-danger {
  background: var(--danger);
  color: var(--white);
}

.fl-btn-danger:hover {
  background: #dc2626;
}

.fl-btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Responsive Event Modal */
@media (max-width: 768px) {
  .fl-event-modal {
    padding: 10px;
  }

  .fl-event-modal-dialog {
    max-height: 95vh;
  }

  .fl-event-cover-section {
    flex-direction: column;
  }

  .fl-event-cover-preview {
    width: 100%;
    height: 160px;
  }

  .fl-date-type-options {
    grid-template-columns: 1fr;
  }

  .fl-date-type-options.fl-date-type-4cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fl-date-type-options.fl-date-type-4cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .fl-event-modal-header {
    padding: 16px 20px;
  }

  .fl-event-modal-body {
    padding: 20px;
  }

  .fl-event-modal-footer {
    padding: 16px 20px;
    flex-direction: column;
  }

  .fl-event-modal-footer .fl-btn {
    width: 100%;
  }

  .fl-cover-dropzone {
    min-height: 60px;
    padding: 12px;
  }
}

/* ==========================================
   GOOGLE ACCOUNT SECTION (Sync Page)
   ========================================== */

.google-account-section {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

/* OAuth Config Panel */
.google-oauth-config {
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.google-oauth-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.google-oauth-config-header:hover {
  background: #f1f5f9;
}

.google-oauth-config-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.google-oauth-config-title > i {
  color: #94a3b8;
}

.google-oauth-config-arrow {
  color: #94a3b8;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.google-oauth-config-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #fef2f2;
  color: #dc2626;
}

.google-oauth-config-badge.configured {
  background: #f0fdf4;
  color: #16a34a;
}

.google-oauth-config-body {
  padding: 14px;
  border-top: 1px solid #e2e8f0;
  animation: googleFadeIn 0.2s ease;
}

.google-oauth-config-field {
  margin-bottom: 12px;
}

.google-oauth-config-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}

.google-oauth-config-field .form-control {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'SF Mono', 'Consolas', monospace;
  transition: border-color 0.2s;
}

.google-oauth-config-field .form-control:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.google-oauth-config-field small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #94a3b8;
}

.input-with-toggle {
  position: relative;
  display: flex;
}

.input-with-toggle .form-control {
  padding-right: 36px;
}

.btn-toggle-secret {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 34px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 6px 6px 0;
  transition: color 0.2s;
}

.btn-toggle-secret:hover {
  color: #475569;
}

.google-oauth-config-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.google-oauth-config-source {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* Chưa kết nối */
.google-not-connected {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: googleFadeIn 0.3s ease;
}

.google-not-connected .google-connect-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.google-connect-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary, #64748b);
  font-size: 14px;
}

/* --- Shared Accounts (dùng chung tài khoản) --- */
.google-shared-accounts {
  width: 100%;
}

.google-shared-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.google-shared-label i {
  color: var(--primary, #6366f1);
}

.google-shared-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.google-shared-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.google-shared-item:hover {
  background: #fff;
  border-color: var(--primary, #6366f1);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.1);
}

.google-shared-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.google-shared-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.google-shared-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8eaf6;
  color: #4285f4;
  font-size: 14px;
  flex-shrink: 0;
}

.google-shared-item-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.google-shared-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-shared-item-email {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-shared-item-brands {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-use-account-btn {
  flex-shrink: 0;
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.google-shared-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
  color: var(--text-tertiary, #94a3b8);
  font-size: 12px;
}

.google-shared-divider::before,
.google-shared-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200, #e2e8f0);
}

/* --- Shared Note (ghi chú dùng chung khi đã kết nối) --- */
.google-shared-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  margin-top: 8px;
}

.google-shared-note i {
  color: #3b82f6;
  flex-shrink: 0;
}

.google-connect-icon {
  font-size: 20px;
  color: var(--text-tertiary, #94a3b8);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-google:hover {
  background: #f8f9fa;
  border-color: #c6c9cc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.google-btn-logo {
  width: 18px;
  height: 18px;
}

/* Đã kết nối */
.google-connected {
  /* shown/hidden via .hidden class */
  animation: googleFadeIn 0.3s ease;
}

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

/* Disconnect button polish */
.google-user-info .btn-ghost.text-danger {
  transition: all 0.2s ease;
  border-radius: 8px;
  padding: 6px 8px;
}

.google-user-info .btn-ghost.text-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.google-user-info .btn-ghost.text-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.google-detail-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #475569;
}

.google-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.google-detail-row i {
  width: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

.google-detail-row strong {
  color: #334155;
  font-weight: 600;
}

.google-token-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  flex-shrink: 0;
}

.google-token-dot.active {
  background: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.google-token-dot.expired {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

.google-token-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--warning-bg, #fef3c7);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
}

.google-token-warning i {
  color: var(--warning, #f59e0b);
  flex-shrink: 0;
}

.google-token-warning span {
  flex: 1;
}

.btn-google-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-google-sm:hover {
  background: #f8f9fa;
}

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

.google-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color, #e2e8f0);
  flex-shrink: 0;
}

.google-user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.google-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.google-user-email {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 480px) {
  .google-not-connected {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .google-connect-prompt {
    justify-content: center;
  }

  .btn-google {
    justify-content: center;
  }
}

/* ==========================================
   USERS TABLE - REDESIGN
   ========================================== */

/* Table layout */
.users-table .th-stt { width: 50px; text-align: center; }
.users-table .th-user { min-width: 280px; }
.users-table .th-role { width: 120px; text-align: center; }
.users-table .th-auth { width: 150px; text-align: center; }
.users-table .th-status { width: 120px; text-align: center; }
.users-table .th-date { width: 120px; text-align: center; }
.users-table .th-actions { width: 130px; text-align: center; }

.users-table .td-stt {
  text-align: center;
  color: var(--gray-400);
  font-size: 0.8rem;
  font-weight: 500;
}

.users-table .td-role,
.users-table .td-auth,
.users-table .td-status,
.users-table .td-date {
  text-align: center;
}

.users-table .td-actions {
  text-align: center;
}

/* User row hover */
.users-table .user-row {
  transition: background-color var(--transition-fast);
}

.users-table .user-row:hover {
  background-color: var(--gray-50);
}

/* User info cell */
.user-tbl-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-tbl-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.user-tbl-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--gray-200);
}

.user-tbl-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
}

.user-tbl-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-tbl-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-tbl-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.user-tbl-username {
  color: var(--primary);
  font-weight: 500;
}

.user-tbl-email-sep {
  color: var(--gray-300);
}

.user-tbl-email {
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Role badges */
.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.user-role-badge i {
  font-size: 0.65rem;
}

.role-admin {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #fcd34d;
}

.role-editor {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: #075985;
  border: 1px solid #7dd3fc;
}

.role-viewer {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

/* Auth provider badges */
.user-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.user-auth-badge i {
  font-size: 0.7rem;
}

.auth-local {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

.auth-google {
  background: #fef7f0;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.auth-both {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border: 1px solid #6ee7b7;
}

/* Status badges */
.user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.user-status-badge i {
  font-size: 0.65rem;
}

.user-status-active {
  background: var(--success-bg);
  color: #065f46;
}

.user-status-inactive {
  background: var(--danger-bg);
  color: #991b1b;
}

/* Date cell */
.users-table .td-date {
  font-size: 0.8rem;
  color: var(--gray-600);
  line-height: 1.4;
}

.users-table .td-date small {
  color: var(--gray-400);
}

/* Action buttons */
.user-tbl-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.8rem;
}

.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-action-key:hover {
  background: #fde68a;
  border-color: #fcd34d;
  color: #92400e;
}

.btn-action-edit:hover {
  background: var(--primary-bg);
  border-color: var(--primary-light);
  color: var(--primary);
}

.btn-action-delete:hover {
  background: var(--danger-bg);
  border-color: #fca5a5;
  color: var(--danger);
}

/* Responsive */
@media (max-width: 768px) {
  .users-table .th-auth,
  .users-table .td-auth,
  .users-table .th-date,
  .users-table .td-date {
    display: none;
  }

  .users-table .th-user { min-width: 200px; }

  .user-tbl-email {
    max-width: 120px;
  }
}

/* ==========================================
   AVATAR UPLOAD IN MODAL
   ========================================== */

.avatar-upload-section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg);
}

.avatar-preview-wrap { flex-shrink: 0; }

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-md);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-preview #avatarPreviewIcon {
  font-size: 3rem;
  color: var(--gray-400);
}

.avatar-controls {
  flex: 1;
  min-width: 0;
}

.avatar-controls > label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  display: block;
}

.avatar-input-group {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.avatar-input-group .form-control {
  flex: 1;
  font-size: 0.8rem;
  padding: 6px 10px;
}

.avatar-input-group .btn { flex-shrink: 0; }

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.avatar-upload-btn {
  cursor: pointer;
  font-size: 0.75rem !important;
}

.avatar-upload-section small {
  display: block;
  font-size: 0.7rem;
  color: var(--gray-500);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .avatar-upload-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .avatar-input-group { flex-direction: column; }
  .avatar-upload-row { justify-content: center; }
}

/* ==========================================
   DROPDOWN AVATAR
   ========================================== */

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-avatar-wrap {
  flex-shrink: 0;
}

.dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-200);
}

/* ==========================================
   LOGS V2 - REDESIGN
   ========================================== */

.log-entry-v2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition-fast);
}
.log-entry-v2:hover { background: var(--gray-50); }
.log-entry-v2:last-child { border-bottom: none; }

.log-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 80px;
}

.log-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  min-width: 48px;
}

.level-info { background: var(--info-bg); color: var(--info); }
.level-success { background: var(--success-bg); color: #065f46; }
.level-warning { background: var(--warning-bg); color: #92400e; }
.level-error { background: var(--danger-bg); color: var(--danger); }
.level-debug { background: var(--gray-100); color: var(--gray-500); }

.log-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--gray-600);
  white-space: nowrap;
}
.log-action-badge i { font-size: 0.6rem; }

.log-body { flex: 1; min-width: 0; }

.log-msg {
  font-size: 0.85rem;
  color: var(--gray-800);
  line-height: 1.5;
  word-break: break-word;
}

.log-details-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
}

.log-detail-item {
  font-size: 0.75rem;
  color: var(--gray-600);
  background: var(--white);
  padding: 2px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}
.log-detail-item strong { color: var(--gray-700); font-weight: 600; }

.log-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.log-who, .log-brand, .log-ip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--gray-400);
}
.log-who i, .log-brand i, .log-ip i { font-size: 0.6rem; }
.log-who { color: var(--primary); font-weight: 500; }

.log-right {
  flex-shrink: 0;
  text-align: right;
  min-width: 90px;
}

.log-datetime {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.5;
}

.log-time-hour {
  color: var(--gray-400);
  font-size: 0.7rem;
}

@media (max-width: 768px) {
  .log-entry-v2 { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .log-left { flex-direction: row; min-width: auto; }
  .log-right { width: 100%; text-align: left; min-width: auto; }
  .log-datetime { font-size: 0.7rem; }
}

/* Import Preview */
.import-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gray-50, #f8f9fa);
  border: 1px solid var(--gray-200, #e9ecef);
  border-radius: var(--radius);
  max-height: 400px;
  overflow-y: auto;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.875rem;
}

.preview-header strong {
  color: var(--gray-700);
}

#previewInfo {
  color: var(--gray-500);
  font-size: 0.8125rem;
}

#previewTable {
  max-height: 200px;
  overflow: auto;
  margin-bottom: 0.75rem;
}

#previewTable table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

#previewTable th {
  position: sticky;
  top: 0;
  background: var(--white);
  padding: 0.5rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--gray-300);
  font-size: 0.75rem;
  color: var(--gray-700);
}

#previewTable td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
}

#previewValidation {
  font-size: 0.8125rem;
}

.validation-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.validation-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.validation-item i {
  font-size: 0.75rem;
}

.validation-item.valid {
  color: var(--success, #28a745);
}

.validation-item.invalid {
  color: var(--danger, #dc3545);
}

.validation-errors {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  max-height: 100px;
  overflow-y: auto;
}

.validation-error {
  font-size: 0.75rem;
  color: #856404;
  margin-bottom: 0.25rem;
}

.validation-error:last-child {
  margin-bottom: 0;
}

/* Import/Export Footer */
.ie-card-footer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ie-card-footer .btn-sm {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

/* Import History Section */
.import-history-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
}

.section-title i {
  color: var(--primary);
  font-size: 0.9rem;
}

.import-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.import-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.import-history-item:hover {
  background: var(--gray-100);
  transform: translateX(2px);
}

.history-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.history-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.875rem;
}

.history-item-icon.import {
  background: #e3f2fd;
  color: #1976d2;
}

.history-item-icon.export {
  background: #e8f5e9;
  color: #388e3c;
}

.history-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.history-item-title {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gray-800);
}

.history-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

.history-item-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.history-item-meta i {
  font-size: 0.625rem;
}

.history-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.history-item-time {
  font-size: 0.75rem;
  color: var(--gray-400);
}

.history-item-status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.history-item-status.success {
  background: #d4edda;
  color: #155724;
}

.history-item-status.warning {
  background: #fff3cd;
  color: #856404;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--gray-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.empty-state i {
  font-size: 2rem;
  opacity: 0.5;
}

/* Import Progress Overlay */
.import-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.import-progress-overlay.active {
  display: flex;
}

.import-progress-content {
  background: var(--white);
  border-radius: 12px;
  padding: 2rem;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.progress-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.progress-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  color: var(--gray-800);
}

.progress-header p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gray-500);
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #42a5f5);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.progress-stat {
  text-align: center;
}

.progress-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-800);
}

.progress-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

/* ==========================================
   RESPONSIVE DESIGN - IMPORT/EXPORT
   ========================================== */

@media (max-width: 1024px) {
  .import-export-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .import-history-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-item-right {
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5rem;
  }

  .history-item-meta {
    flex-wrap: wrap;
  }

  .ie-card-footer {
    flex-direction: column;
  }

  .ie-card-footer button {
    width: 100%;
  }
}

/* ==========================================
   ANIMATIONS & TRANSITIONS
   ========================================== */

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

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

.import-history-item {
  animation: slideInRight 0.3s ease-out;
}

.import-history-item:nth-child(1) { animation-delay: 0.05s; }
.import-history-item:nth-child(2) { animation-delay: 0.1s; }
.import-history-item:nth-child(3) { animation-delay: 0.15s; }
.import-history-item:nth-child(4) { animation-delay: 0.2s; }
.import-history-item:nth-child(5) { animation-delay: 0.25s; }

.import-preview {
  animation: fadeIn 0.3s ease-out;
}

.ie-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ie-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* File upload hover states */
.file-upload {
  transition: all 0.3s ease;
}

.file-upload:hover {
  border-color: var(--primary);
  background: #f8f9ff;
}

.file-upload.dragover {
  border-color: var(--primary);
  background: #e8f0fe;
  transform: scale(1.02);
}

/* ==========================================
   IE REDESIGN — v3 Components
   ========================================== */

.ie-subtitle {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin: 0;
  font-weight: 400;
}

.ie-card-header {
  gap: var(--spacing-md);
}

.ie-field-group {
  margin-bottom: var(--spacing-md);
}

.ie-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.ie-label i {
  margin-right: 5px;
  color: var(--primary);
  opacity: 0.7;
}

.ie-hint {
  display: block;
  color: var(--gray-400);
  font-size: 0.75rem;
  margin-top: 4px;
}

/* Format tabs */
.ie-format-tabs {
  display: flex;
  gap: 6px;
}

.ie-format-tab {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}

.ie-format-tab:hover {
  border-color: var(--primary-light, #6c8ef5);
  color: var(--primary);
}

.ie-format-tab.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.ie-format-tab:disabled,
.ie-format-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Room checklist */
.ie-room-select-wrap {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ie-room-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  background: var(--bg-secondary, #f8fafc);
}

.ie-room-search-row .filter-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.8125rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 6px);
  background: var(--white);
}

.ie-room-toggle-all {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 0;
  text-decoration: underline;
}

.ie-room-checklist {
  max-height: 160px;
  overflow-y: auto;
  padding: 4px 0;
}

.ie-room-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.875rem;
  color: var(--gray-700);
  user-select: none;
}

.ie-room-check-item:hover {
  background: var(--gray-50, #f9fafb);
}

.ie-room-check-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.ie-room-check-item .ie-room-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ie-room-check-item .ie-room-platform {
  font-size: 0.7rem;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 1px 5px;
  border-radius: 10px;
}

.ie-room-selected-info {
  padding: 5px 12px;
  font-size: 0.75rem;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-100);
  background: var(--bg-secondary, #f8fafc);
  font-style: italic;
}

/* Date range */
.ie-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ie-date-input-wrap {
  flex: 1;
}

.ie-date-label {
  display: block;
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-bottom: 3px;
  font-weight: 500;
}

.ie-date-input {
  width: 100%;
  font-size: 0.8125rem;
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 6px);
}

.ie-date-sep {
  color: var(--gray-400);
  font-size: 1.1rem;
  margin-top: 16px;
}

/* Export summary */
.ie-export-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--primary-bg, #eef2ff);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--primary, #4f7cf5);
  border: 1px solid var(--primary-light, #c7d7f9);
}

.ie-export-summary i {
  margin-top: 1px;
  flex-shrink: 0;
}

/* Preview badge */
.preview-badge {
  display: inline-block;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

/* Button loading state */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn .fas.fa-spinner {
  animation: spin 1s linear infinite;
}

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

/* ==========================================
   KEYBOARD SHORTCUTS HINT
   ========================================== */

.keyboard-hint {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.keyboard-hint.show {
  opacity: 1;
}

.kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.875em;
  margin: 0 0.125rem;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .import-history-item {
    border-width: 2px;
  }

  .history-item-status {
    border: 1px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================
   LOADING SKELETON
   ========================================== */

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-item {
  height: 60px;
  margin-bottom: 0.75rem;
}

/* ==========================================
   History Filters
   ========================================== */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auto-refresh-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #64748b;
  transition: color 0.2s;
}

.auto-refresh-toggle:hover {
  color: #475569;
}

.auto-refresh-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.auto-refresh-toggle i {
  font-size: 0.85rem;
}

.auto-refresh-toggle input:checked ~ i {
  color: #10b981;
  animation: spin 2s linear infinite;
}

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

.history-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.filter-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-select {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 160px;
}

.filter-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-clear-filters {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-filters:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.import-history-item.hidden {
  display: none;
}

/* Responsive filters */
@media (max-width: 768px) {
  .history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .history-filters {
    flex-direction: column;
  }

  .filter-input,
  .filter-select {
    width: 100%;
    min-width: auto;
  }
}

/* ==========================================
   WEBHOOKS SECTION
   ========================================== */
/* ==========================================
   WEBHOOKS PAGE - INFO BANNER
   ========================================== */
.webhooks-info-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
  border: 1px solid #7dd3fc;
  border-radius: 16px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.webhooks-info-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.webhooks-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.webhooks-info-icon i {
  font-size: 1.5rem;
  color: white;
}

.webhooks-info-content {
  flex: 1;
  min-width: 0;
}

.webhooks-info-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0c4a6e;
  margin: 0 0 4px 0;
}

.webhooks-info-desc {
  font-size: 0.8125rem;
  color: #0369a1;
  margin: 0;
  line-height: 1.5;
}

.webhooks-info-actions {
  flex-shrink: 0;
}

.btn-add-webhook {
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 59, 130, 246), 0.3);
}

/* ==========================================
   WEBHOOKS - SUMMARY BAR
   ========================================== */
.webhooks-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.webhooks-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: var(--gray-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.webhooks-summary-item .summary-count {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--gray-900);
}

.webhooks-summary-item.active-count .summary-icon {
  color: #10b981;
}

.webhooks-summary-item.inactive-count .summary-icon {
  color: #6b7280;
}

.webhooks-summary-item.total-count .summary-icon {
  color: #3b82f6;
}

/* ==========================================
   WEBHOOKS - LIST CONTAINER
   ========================================== */
.webhooks-list {
  display: grid;
  gap: 14px;
}

/* ==========================================
   WEBHOOKS - CARD
   ========================================== */
.webhook-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 0;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.webhook-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.webhook-card.inactive {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

.webhook-card.inactive:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: var(--gray-300);
}

/* Left status indicator */
.webhook-card-indicator {
  width: 5px;
  flex-shrink: 0;
  background: #10b981;
}

.webhook-card.inactive .webhook-card-indicator {
  background: #d1d5db;
}

/* Card body */
.webhook-card-body {
  flex: 1;
  padding: 18px 20px;
  min-width: 0;
}

/* Card header */
.webhook-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 12px;
}

.webhook-header-left {
  flex: 1;
  min-width: 0;
}

.webhook-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gray-900);
  margin: 0 0 4px 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.webhook-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.webhook-brand-badge.brand-specific {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}

.webhook-brand-badge.brand-all {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.webhook-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.webhook-status.active {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.webhook-status.active i {
  color: #10b981;
}

.webhook-status.inactive {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.webhook-status.inactive i {
  color: #9ca3af;
}

.webhook-status i {
  font-size: 0.5rem;
}

/* URL display */
.webhook-url {
  font-size: 0.75rem;
  color: var(--gray-500);
  word-break: break-all;
  margin-bottom: 12px;
  font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
  line-height: 1.5;
  background: var(--gray-50);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--gray-100);
  max-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Events tags */
.webhook-events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.webhook-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}

/* Event tag colors by category */
.webhook-event-tag.tag-schedule {
  background: #fde68a;
  color: #92400e;
  border: 1px solid #fde68a;
}
.webhook-event-tag.tag-sync {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
}
.webhook-event-tag.tag-host {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
}
.webhook-event-tag.tag-room {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}
.webhook-event-tag.tag-pic {
  background: #ccfbf1;
  color: #115e59;
  border: 1px solid #99f6e4;
}
.webhook-event-tag.tag-import,
.webhook-event-tag.tag-export {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.webhook-event-tag.tag-auth {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.webhook-event-tag.tag-settings {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.webhook-event-tag.tag-more {
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  font-style: italic;
}

/* Actions bar */
.webhook-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.webhook-actions .btn {
  padding: 6px 14px;
  font-size: 0.8125rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.webhook-actions .btn-icon {
  padding: 6px 10px;
}

.webhook-actions .btn i {
  font-size: 0.75rem;
}

/* ==========================================
   WEBHOOKS - MODAL ENHANCEMENTS
   ========================================== */
.webhook-modal-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.webhook-modal-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.webhook-modal-header-icon i {
  font-size: 1rem;
  color: white;
}

.webhook-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.webhook-url-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #64748b;
}

.webhook-url-hint i {
  color: #94a3b8;
  font-size: 0.6875rem;
}

.webhook-events-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.webhook-events-label-row label {
  margin-bottom: 0;
}

.webhook-events-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.webhook-events-quick-actions .btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  text-decoration: none;
}

.webhook-events-quick-actions .btn-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

.webhook-events-quick-actions .divider {
  color: var(--gray-300);
}

.webhook-toggle-row {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

/* Webhook Events Grid in Modal */
.webhook-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}

.webhook-events-grid::-webkit-scrollbar {
  width: 6px;
}
.webhook-events-grid::-webkit-scrollbar-track {
  background: transparent;
}
.webhook-events-grid::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

.webhook-event-group {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

.webhook-event-group:hover {
  border-color: var(--gray-300);
}

.webhook-event-group-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--gray-700);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 8px;
}

.webhook-event-group-title i {
  font-size: 0.8125rem;
  width: 18px;
  text-align: center;
}

/* Category-specific icon colors */
.webhook-event-group-title .icon-schedule { color: #d97706; }
.webhook-event-group-title .icon-sync { color: #0284c7; }
.webhook-event-group-title .icon-host { color: #db2777; }
.webhook-event-group-title .icon-room { color: #7c3aed; }
.webhook-event-group-title .icon-pic { color: #0d9488; }
.webhook-event-group-title .icon-import { color: #16a34a; }
.webhook-event-group-title .icon-auth { color: #dc2626; }
.webhook-event-group-title .icon-settings { color: #64748b; }

.webhook-event-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--gray-700);
  transition: color 0.15s ease;
}

.webhook-event-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  border-radius: 3px;
}

.webhook-event-checkbox:hover {
  color: var(--primary);
}

/* ==========================================
   WEBHOOKS - EMPTY STATE
   ========================================== */
.webhooks-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-500);
}

.webhooks-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.webhooks-empty-icon i {
  font-size: 1.75rem;
  color: #0ea5e9;
}

.webhooks-empty h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-700);
  margin: 0 0 6px 0;
}

.webhooks-empty p {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin: 0;
}

/* ==========================================
   WEBHOOKS - RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  .webhooks-info-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
  }

  .webhooks-info-actions {
    width: 100%;
  }

  .webhooks-info-actions .btn-add-webhook {
    width: 100%;
    justify-content: center;
  }

  .webhooks-summary {
    flex-direction: column;
  }

  .webhook-card {
    flex-direction: column;
  }

  .webhook-card-indicator {
    width: 100%;
    height: 4px;
  }

  .webhook-header {
    flex-direction: column;
    gap: 8px;
  }

  .webhook-actions {
    justify-content: flex-start;
  }

  .webhook-events-grid {
    grid-template-columns: 1fr;
  }

  .webhook-form-row {
    grid-template-columns: 1fr;
  }

  .webhook-events-label-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ==========================================
   INVALID LINK MESSAGE SECTION
   ========================================== */
.settings-section {
  grid-column: 1 / -1;
  margin-top: var(--spacing-xl);
  padding: 24px;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  border: 2px solid #f472b6;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.15);
}

.settings-section .section-header {
  display: flex;
  align-items: start;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid rgba(244, 114, 182, 0.3);
}

.settings-section .section-header-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-section .section-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #831843;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-section .section-header h3 i {
  color: #ec4899;
  font-size: 1.125rem;
}

.settings-section .section-description {
  margin: 0;
  font-size: 0.875rem;
  color: #9d174d;
  line-height: 1.5;
  max-width: 600px;
}

.settings-section .form-group {
  margin-bottom: var(--spacing-lg);
}

.settings-section .form-group label {
  display: block;
  font-weight: 600;
  color: #831843;
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
}

.settings-section .form-help {
  display: block;
  margin-top: var(--spacing-sm);
  color: #9d174d;
  font-size: 0.8125rem;
}

.settings-section .form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-md);
}

/* ==========================================
 * LOGO UPLOAD AREA
 * ========================================== */

.upload-area {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.upload-area:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.upload-area.drag-over {
  border-color: #3b82f6;
  background: #dbeafe;
  transform: scale(1.02);
}

.upload-placeholder i {
  font-size: 3rem;
  color: #94a3b8;
  margin-bottom: 1rem;
}

.upload-placeholder p {
  margin: 0.5rem 0;
  color: #64748b;
  font-size: 0.9375rem;
}

.upload-placeholder small {
  color: #94a3b8;
  font-size: 0.8125rem;
}

.upload-browse {
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
}

.upload-browse:hover {
  color: #2563eb;
}

/* Logo Preview Wrapper */
.logo-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo-preview-box {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.logo-preview-box:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.logo-preview-box img {
  display: block;
  max-width: 300px;
  max-height: 150px;
  object-fit: contain;
  margin: 0 auto;
}

.logo-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.logo-preview-box:hover .logo-preview-overlay {
  opacity: 1;
}

.btn-preview-action {
  background: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-preview-action:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-preview-action i {
  font-size: 1.25rem;
  color: #3b82f6;
}

.logo-preview-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Logo Zoom Modal */
.logo-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.logo-zoom-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.logo-zoom-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.logo-zoom-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.logo-zoom-close:hover {
  background: white;
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.logo-zoom-close i {
  font-size: 1.25rem;
  color: #1f2937;
}

.logo-zoom-image-container {
  background: transparent;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;
}

.logo-zoom-image-container img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-zoom-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: 0.875rem;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.logo-zoom-info i {
  font-size: 1rem;
}

/* ==========================================
   SHEET PREVIEW MODAL
   ========================================== */

.sheet-preview-modal {
  max-width: 95vw !important;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
/* Header/footer cố định; body lấp đầy phần giữa → modal dùng hết chiều cao, hết dư khoảng trắng nền */
.sheet-preview-modal .modal-header,
.sheet-preview-modal .modal-footer { flex: 0 0 auto; }
.sheet-preview-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;            /* KHÔNG cuộn ở body — tránh double-scroll */
  max-height: none;
  display: flex;
  flex-direction: column;
}
.sheet-preview-modal #sheetPreviewInfo,
.sheet-preview-modal .sheet-preview-loading,
.sheet-preview-modal .sheet-preview-error { flex: 0 0 auto; }
.sheet-preview-modal .sheet-preview-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sheet-preview-table-wrapper {
  background: white;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;              /* vùng cuộn DUY NHẤT — bảng lấp đầy phần còn lại */
}

.sheet-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-family: 'Courier New', monospace;
}

.sheet-preview-table th,
.sheet-preview-table td {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  min-width: 80px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-preview-table th {
  background: #f8f9fa;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  color: #495057;
}

.sheet-preview-table tbody tr:hover {
  background: #f8f9fa;
}

/* Row number column */
.sheet-preview-table .row-num {
  background: #e9ecef;
  font-weight: 600;
  text-align: center;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  color: #6c757d;
  position: sticky;
  left: 0;
  z-index: 5;
}

.sheet-preview-table thead .row-num {
  z-index: 11;
}

/* Cell với màu background từ Google Sheets */
.sheet-cell-colored {
  position: relative;
}

/* Text formatting */
.sheet-cell-bold {
  font-weight: 700;
}

.sheet-cell-italic {
  font-style: italic;
}

.sheet-cell-underline {
  text-decoration: underline;
}

.sheet-cell-strikethrough {
  text-decoration: line-through;
}

/* Spinner for loading */
.spinner {
  border: 4px solid #f3f4f6;
  border-top: 4px solid #6366f1;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Button trong rc-card-header */
.rc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rc-card-header h4 {
  margin: 0;
  flex: 1;
}

.rc-card-header .btn {
  flex-shrink: 0;
}

/* ==========================================
   SHEET PREVIEW - PART 2: CONFIG COLUMN HIGHLIGHTING
   ========================================== */

/* Config column highlighting - Time columns */
.config-column.config-time {
  background-color: #fff3cd !important;
  border-left: 3px solid #ffc107 !important;
  border-right: 3px solid #ffc107 !important;
}

.sheet-preview-table thead th.config-column.config-time {
  background-color: #ffecb5 !important;
  font-weight: 700;
}

/* Config column highlighting - Date columns */
.config-column.config-date {
  background-color: #cfe2ff !important;
  border-left: 3px solid #0d6efd !important;
  border-right: 3px solid #0d6efd !important;
}

.sheet-preview-table thead th.config-column.config-date {
  background-color: #b6d4fe !important;
  font-weight: 700;
}

/* Config column highlighting - Host columns */
.config-column.config-host {
  background-color: #d1ecf1 !important;
  border-left: 3px solid #0dcaf0 !important;
  border-right: 3px solid #0dcaf0 !important;
}

.sheet-preview-table thead th.config-column.config-host {
  background-color: #b8e3e9 !important;
  font-weight: 700;
}

/* Config column highlighting - Room columns */
.config-column.config-room {
  background-color: #d1e7dd !important;
  border-left: 3px solid #198754 !important;
  border-right: 3px solid #198754 !important;
}

.sheet-preview-table thead th.config-column.config-room {
  background-color: #badbcc !important;
  font-weight: 700;
}

/* Config column highlighting - Platform columns */
.config-column.config-platform {
  background-color: #e7d6f5 !important;
  border-left: 3px solid #9b59b6 !important;
  border-right: 3px solid #9b59b6 !important;
}

.sheet-preview-table thead th.config-column.config-platform {
  background-color: #d4bde8 !important;
  font-weight: 700;
}

/* Config column highlighting - Brand columns */
.config-column.config-brand {
  background-color: #ffe5cc !important;
  border-left: 3px solid #fd7e14 !important;
  border-right: 3px solid #fd7e14 !important;
}

.sheet-preview-table thead th.config-column.config-brand {
  background-color: #ffd4b3 !important;
  font-weight: 700;
}

/* Config column highlighting - Extra columns (product, notes, link, custom) */
.config-column.config-extra {
  background-color: #e2e3e5 !important;
  border-left: 3px solid #6c757d !important;
  border-right: 3px solid #6c757d !important;
}

.sheet-preview-table thead th.config-column.config-extra {
  background-color: #d3d4d6 !important;
  font-weight: 700;
}

/* Config label in header */
.sheet-preview-table thead th .config-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #495057;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Start row highlighting */
.sheet-preview-table tbody tr.start-row {
  background-color: #e7f3ff !important;
  border-top: 2px solid #0d6efd !important;
  border-bottom: 2px solid #0d6efd !important;
}

.sheet-preview-table tbody tr.start-row td {
  font-weight: 600;
}

/* Legend styling */
.sheet-legend {
  background: #f8f9fa;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border-left: 4px solid #6366f1;
}

.sheet-legend .legend-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #495057;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sheet-legend .legend-title i {
  color: #6366f1;
}

.sheet-legend .legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sheet-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6c757d;
}

.sheet-legend .legend-color {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.sheet-legend .legend-color.config-time {
  background-color: #fff3cd;
  border-color: #ffc107;
}

.sheet-legend .legend-color.config-date {
  background-color: #cfe2ff;
  border-color: #0d6efd;
}

.sheet-legend .legend-color.config-host {
  background-color: #d1ecf1;
  border-color: #0dcaf0;
}

.sheet-legend .legend-color.config-room {
  background-color: #d1e7dd;
  border-color: #198754;
}

.sheet-legend .legend-color.config-platform {
  background-color: #e7d6f5;
  border-color: #9b59b6;
}

.sheet-legend .legend-color.config-brand {
  background-color: #ffe5cc;
  border-color: #fd7e14;
}

.sheet-legend .legend-color.config-extra {
  background-color: #e2e3e5;
  border-color: #6c757d;
}

.sheet-legend .legend-text {
  font-weight: 500;
}

/* ==========================================
   SHEET PREVIEW - PART 3: UX IMPROVEMENTS
   ========================================== */

/* Clickable column headers */
.sheet-preview-table thead th[style*="cursor: pointer"]:hover {
  background-color: #e9ecef !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.sheet-preview-table thead th[style*="cursor: pointer"]:active {
  transform: translateY(0);
}

/* Load more button positioning */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* Refresh button styling */
#refreshSheetPreview {
  white-space: nowrap;
}

#refreshSheetPreview:hover {
  background-color: #f8f9fa;
}

/* Load more button styling */
#loadMoreSheetPreview {
  white-space: nowrap;
}

/* Info section improvements */
.sheet-preview-info > div > div {
  white-space: nowrap;
}

.sheet-preview-info strong {
  color: #495057;
}

/* ==========================================
   SHEET PREVIEW - PART 4: TAB DROPDOWN, HEADER ROW, SYNC
   ========================================== */

/* Controls row */
.sheet-preview-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.sheet-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sheet-control-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
  margin-bottom: 0;
}

.sheet-control-group label i {
  margin-right: 3px;
  color: #6c757d;
}

.sheet-control-select {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.85rem;
  background: white;
  color: #495057;
  min-width: 140px;
  max-width: 250px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-control-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

.sheet-control-input {
  padding: 5px 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.85rem;
  background: white;
  color: #495057;
  width: 70px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-control-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

/* Apply button */
#applySheetSettings {
  white-space: nowrap;
  padding: 5px 12px;
  font-size: 0.85rem;
}

/* Sync checkbox label */
.sheet-sync-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #6c757d;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  margin-left: auto;
}

.sheet-sync-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--primary);
}

.sheet-sync-label span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sheet-sync-label i {
  font-size: 0.75rem;
}

/* Stats row */
.sheet-preview-stats {
  padding-top: 8px;
  border-top: 1px solid #e9ecef;
}

/* Header row styling (rows before data start row) */
.sheet-preview-table tbody tr.header-row {
  background-color: #e8f4fd !important;
}

.sheet-preview-table tbody tr.header-row td {
  font-weight: 600;
  color: #0d6efd;
  font-size: 0.8rem;
}

.sheet-preview-table tbody tr.header-row td.row-num {
  color: #0d6efd;
  font-weight: 700;
}

/* Data start row highlight */
.sheet-preview-table tbody tr.start-row {
  border-top: 3px solid #28a745 !important;
}

.sheet-preview-table tbody tr.start-row td.row-num {
  color: #28a745;
  font-weight: 700;
}

/* Responsive controls */
@media (max-width: 768px) {
  .sheet-preview-controls {
    gap: 10px;
  }

  .sheet-control-select {
    min-width: 100px;
  }

  .sheet-sync-label {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================
   GOOGLE SHEET EMBEDDED MODAL (Admin Only)
   ========================================== */

/* Modal fullscreen variant */
.modal-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Google Sheet Embed Modal Styles */
.google-sheet-embed-modal .modal-body {
  padding: 0;
  overflow: hidden;
}

.google-sheet-iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.google-sheet-iframe-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* Loading animation for Google Sheet */
.google-sheet-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
}

.google-sheet-loading .spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Admin-only button styling */
.btn.admin-only {
  position: relative;
}

.btn.admin-only::after {
  content: '🔒';
  margin-left: 5px;
  font-size: 0.75em;
  opacity: 0.7;
}

/* Success button variant */
.btn-success {
  background: linear-gradient(135deg, #28a745 0%, #218838 100%);
  color: white;
  border: none;
}

.btn-success:hover {
  background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-success:active {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .modal-fullscreen .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-fullscreen .modal-footer > div {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* ==========================================
   DASHBOARD SCHEDULE POPUP
   ========================================== */

.dash-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.dash-popup-overlay.active {
  display: flex;
}

.dash-popup {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: dashPopupIn 0.25s ease-out;
}
@keyframes dashPopupIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dash-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}
.dash-popup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.dash-popup-title i {
  color: #6366f1;
}
.dash-popup-badge {
  background: #6366f1;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  margin-left: 4px;
}
.dash-popup-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s;
}
.dash-popup-close:hover {
  background: #f1f5f9;
  color: #475569;
}

.dash-popup-body {
  overflow-y: auto;
  padding: 1rem 1.5rem 1.5rem;
  flex: 1;
}

.dash-popup-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #94a3b8;
}
.dash-popup-empty i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

/* ── Date Group ── */
.popup-date-group {
  margin-bottom: 1.25rem;
}
.popup-date-group:last-child {
  margin-bottom: 0;
}

.popup-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.popup-date-header.today {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}
.popup-date-header.later {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  color: #5b21b6;
}
.popup-date-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.popup-date-count {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}

/* ── Schedule Card ── */
.popup-schedule-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  background: #fafbfc;
  margin-bottom: 0.5rem;
  transition: all 0.15s;
}
.popup-schedule-card:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
.popup-schedule-card.urgent {
  border-left: 3px solid #ef4444;
  background: #fef2f2;
}
.popup-schedule-card.soon {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}
.popup-schedule-card.popup-live {
  border-left: 3px solid #22c55e;
  background: #f0fdf4;
}
.popup-schedule-card.popup-live-secondary {
  border-left: 3px solid #a78bfa;
  background: #fdfbff;
}
.popup-schedule-card.popup-live-secondary:hover {
  background: #f5f3ff;
}
.popup-schedule-card.popup-card-secondary {
  border-left: 3px solid #a78bfa;
  background: #fdfbff;
}
.popup-schedule-card.popup-card-secondary:hover {
  background: #f5f3ff;
}
.popup-date-header.popup-sec-header {
  background: #ede9fe;
  color: #5b21b6;
}
/* ── Popup tabs bar (between header and body) ── */
.dash-popup-tabs-bar {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  background: #fff;
  flex-shrink: 0;
}
.popup-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  background: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.popup-tab:hover {
  color: #374151;
  background: #f3f4f6;
}
.popup-tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  background: #eff6ff;
}
.popup-tab[data-tab="secondary"].active {
  color: #5b21b6;
  border-bottom-color: #7c3aed;
  background: #ede9fe;
}
.popup-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e5e7eb;
  color: #374151;
}
.popup-tab.active .popup-tab-count {
  background: #dbeafe;
  color: #1d4ed8;
}
.popup-tab[data-tab="secondary"].active .popup-tab-count,
.popup-tab-count.sec {
  background: #ddd6fe;
  color: #5b21b6;
}
.popup-sec-note-row {
  font-size: 0.75rem;
  color: #fff;
  background: #f97316;
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.popup-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  margin: 8px 0 4px;
  border-radius: 6px;
}
.popup-section-header .popup-section-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
}
.popup-section-header.popup-section-main {
  background: #eff6ff;
  color: #1d4ed8;
}
.popup-section-header.popup-section-main .popup-section-count {
  background: #dbeafe;
  color: #1d4ed8;
}
.popup-section-header.popup-section-secondary {
  background: #ede9fe;
  color: #5b21b6;
}
.popup-section-header.popup-section-secondary .popup-section-count {
  background: #ddd6fe;
  color: #5b21b6;
}
.live-sec-note {
  font-size: 0.72rem;
  color: #fff;
  background: #f97316;
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-popup-empty-sm {
  padding: 8px 12px;
  color: #9ca3af;
  font-size: 0.8rem;
}
.live-pulse-sec {
  background: #7c3aed !important;
}

.popup-card-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 130px;
}
.popup-card-indicator.live-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: livePulseAnim 2s infinite;
}
@keyframes livePulseAnim {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.popup-card-time {
  display: flex;
  flex-direction: column;
}
.popup-time-main {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
}
.popup-time-duration {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

.popup-card-center {
  flex: 1;
  min-width: 0;
}
.popup-card-host {
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-card-host i {
  color: #6366f1;
  font-size: 0.8rem;
}
.popup-card-room {
  font-size: 0.8rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-card-room i {
  font-size: 0.7rem;
}

.popup-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 90px;
}
.popup-platform {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #e5e7eb;
  color: #374151;
}
.popup-platform.platform-shopee {
  background: #fee2e2;
  color: #dc2626;
}
.popup-platform.platform-tiktok,
.popup-platform.platform-tiktokshop {
  background: #1e293b;
  color: #fff;
}
.popup-platform.platform-lazada {
  background: #dbeafe;
  color: #1d4ed8;
}

.popup-countdown {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
}
.popup-countdown.urgent {
  color: #ef4444;
  font-weight: 700;
}
.popup-countdown.soon {
  color: #f59e0b;
  font-weight: 600;
}

.popup-elapsed {
  font-size: 0.78rem;
  color: #22c55e;
  font-weight: 500;
}

/* Popup card: Đã kết thúc + Đã hủy */
.popup-card-indicator.popup-ind-ended,
.popup-card-indicator.popup-ind-cancelled {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
  box-shadow: none; animation: none;
}
.popup-card-indicator.popup-ind-ended { background: #dcfce7; color: #16a34a; }
.popup-card-indicator.popup-ind-cancelled { background: #fee2e2; color: #dc2626; }
.popup-ended-tag, .popup-cancelled-tag {
  font-size: 0.66rem; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.popup-ended-tag { background: #f1f5f9; color: #475569; }
.popup-cancelled-tag { background: #fee2e2; color: #b91c1c; }
.popup-card-host.popup-host-strike { text-decoration: line-through; text-decoration-color: #fca5a5; text-decoration-thickness: 1.5px; }
.popup-cancelled .popup-time-main { color: #b91c1c; font-size: 0.86rem; }

/* ==========================================
   Secondary sub-row (chi tiết lịch phụ trong card)
   ========================================== */
.live-sec-subrow,
.popup-sec-subrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 6px;
  background: #f5f3ff;
  border-left: 2px solid #a78bfa;
  border-radius: 0 4px 4px 0;
  flex-wrap: wrap;
}
.live-sec-subrow .live-sec-badge,
.popup-sec-subrow .live-sec-badge {
  margin-left: 0;
  flex-shrink: 0;
}
.sec-sub-host,
.sec-sub-room {
  font-size: 0.72rem;
  color: #5b21b6;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.sec-sub-host i,
.sec-sub-room i {
  font-size: 0.65rem;
  opacity: 0.75;
}
.sec-sub-note {
  font-size: 0.7rem;
  color: #fff;
  background: #f97316;
  border-radius: 4px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.sec-sub-note i {
  font-size: 0.63rem;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .dash-popup-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .dash-popup {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
  .popup-schedule-card {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .popup-card-left {
    min-width: unset;
  }
  .popup-card-right {
    flex-direction: row;
    min-width: unset;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}

/* ==========================================
   SCHEDULE OVERVIEW
   ========================================== */

/* --- View Toggle --- */
.so-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 0.25rem;
}

.so-view-toggle .btn {
  border: none;
  border-radius: 0;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--white, #fff);
  color: var(--text-secondary, #64748b);
  transition: all 0.15s;
}

.so-view-toggle .btn + .btn {
  border-left: 1px solid var(--border, #e2e8f0);
}

.so-view-toggle .btn.active {
  background: var(--primary, #6366f1);
  color: #fff;
}

.so-view-toggle .btn:hover:not(.active) {
  background: var(--bg-light, #f8fafc);
}

/* ============================================================================
   TỔNG HỢP LỊCH PHÒNG LIVE 2.0 — Redesign (scoped #page-schedule-overview)
   Header accent · filter bar không stack full-width · control đồng đều · responsive
   ============================================================================ */
#page-schedule-overview .page-title {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 800; letter-spacing: -0.02em;
}
#page-schedule-overview .page-title::before {
  content: ''; width: 5px; height: 1.15em; border-radius: 4px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}
/* Filter bar: card hiện đại, control cao đều 42px, KHÔNG còn xếp dọc full-width */
#soFilterBar.filter-bar {
  gap: 0.6rem; padding: 0.85rem; align-items: center;
  border: 1px solid var(--gray-100); border-radius: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
#soFilterBar .form-control {
  width: auto; flex: 1 1 180px; min-width: 0; height: 42px; box-sizing: border-box;
  padding: 0 0.8rem; border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: 0.85rem; color: #1e293b; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#soFilterBar select.form-control {
  padding-right: 2rem; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 11px;
}
#soFilterBar .form-control:hover { border-color: #cbd5e1; }
#soFilterBar .form-control:focus { outline: 0; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13); }
#soFilterBar .so-time-range { flex: 0 0 auto; gap: 0.3rem; }
#soFilterBar .so-time-range .form-control { flex: 0 0 auto; width: 110px; }
#soFilterBar .search-box { flex: 2 1 240px; min-width: 200px; }
#soFilterBar .search-box input {
  height: 42px; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#soFilterBar .search-box input:hover { border-color: #cbd5e1; }
#soFilterBar .search-box input:focus { outline: 0; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13); }
#soFilterBar .search-box i { color: #94a3b8; }
#soFilterBar #soResultCount { font-weight: 700; color: #475569; }
/* Gemini export card — bo tròn + viền brand */
#geminiExportCard { border-radius: 16px !important; border: 1px solid #c7d2fe !important; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.07); }
/* Mobile: gỡ min-width inline cũ để link + nút không tràn ngang */
@media (max-width: 560px) {
  #geminiExportCard > div { flex-wrap: wrap; }
  #geminiExportCard > div > div { min-width: 0 !important; flex: 1 1 100% !important; }
}
/* Responsive */
@media (max-width: 767px) {
  #soFilterBar .form-control { flex: 1 1 calc(50% - 0.6rem); }
  #soFilterBar .search-box { flex: 1 1 100%; }
  #soFilterBar .so-time-range { flex: 1 1 100%; }
  #soFilterBar .so-time-range .form-control { flex: 1; width: auto; }
}
@media (max-width: 480px) {
  #page-schedule-overview .page-title { font-size: 1.35rem; }
  #soFilterBar .form-control { flex: 1 1 100%; }
}
/* Dark theme */
[data-theme="dark"] #soFilterBar.filter-bar { background: var(--th-card, #1e293b); border-color: rgba(148,163,184,.2); }
[data-theme="dark"] #soFilterBar .form-control,
[data-theme="dark"] #soFilterBar .search-box input { background: #0f172a; color: #e2e8f0; border-color: rgba(148,163,184,.25); }

/* --- Timeline Chart --- */
#soChart {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px 0;
}
.so-chart-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
}
.so-chart-body {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  overflow-x: auto;
  min-height: 90px;
  padding-bottom: 4px;
}
.so-chart-col {
  flex: 1;
  min-width: 26px;
  max-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}
.so-chart-col:hover .so-chart-bar { opacity: 0.82; }
.so-chart-bar {
  width: 90%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #6366f1, #a5b4fc);
  transition: opacity 0.15s;
  position: relative;
}
.so-chart-col.so-chart-now .so-chart-bar {
  background: linear-gradient(to top, #ef4444, #fca5a5);
}
.so-chart-col.so-chart-next .so-chart-bar {
  background: linear-gradient(to top, #0ea5e9, #7dd3fc);
}
.so-chart-col.so-chart-zero .so-chart-bar {
  background: var(--gray-200);
}
.so-chart-lbl {
  font-size: 0.6rem;
  color: var(--gray-500);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.so-chart-cnt {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gray-700);
  line-height: 1;
  margin-bottom: 2px;
}
/* --- Studio pills --- */
.so-chart-studios {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.so-cs-pill {
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.so-cs-pill:hover { background: var(--primary-bg); color: var(--primary); border-color: var(--primary); }
.so-cs-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

.so-chart-clickable { cursor: pointer; }
.so-chart-clickable:hover .so-chart-bar { filter: brightness(1.12); }
.so-chart-col.so-chart-active .so-chart-bar {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.so-chart-col.so-chart-active .so-chart-cnt { color: var(--primary); }

/* --- Chart detail panel --- */
.so-chart-detail {
  border-top: 1px solid var(--border);
  padding: 12px 16px 14px;
  background: var(--gray-50, #f8fafc);
}
.so-cd-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--gray-700);
  margin-bottom: 10px;
}
.so-cd-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 4px;
}
.so-cd-close:hover { color: var(--gray-700); }
.so-cd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-chart-detail .so-cd-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  padding: 8px 12px;
}
.so-cd-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}
.so-cd-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.so-cd-room {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-cd-meta {
  font-size: 0.72rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-cd-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 4px 8px;
  background: #f5f3ff;
  border-left: 3px solid #7c3aed;
  border-radius: 0 6px 6px 0;
}
.so-cd-sec-tag {
  font-size: 0.62rem;
  font-weight: 700;
  background: #7c3aed;
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.so-cd-sec-time {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6d28d9;
  flex-shrink: 0;
}
.so-cd-sec-host {
  font-size: 0.7rem;
  color: #4c1d95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-basis: 100%;
}
.so-cd-sec-note {
  font-size: 0.67rem;
  color: #6b7280;
  font-style: italic;
  width: 100%;
}
.so-cd-sec-extra {
  font-size: 0.67rem;
  color: #4b5563;
  width: 100%;
}
.so-cd-link {
  color: var(--gray-400);
  font-size: 0.75rem;
  flex-shrink: 0;
  padding: 4px;
}
.so-cd-link:hover { color: var(--primary); }

/* Fullscreen chart overlay */
.so-chart--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--white);
  overflow-y: auto;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
}
.so-chart--fullscreen .so-chart-body {
  max-height: none;
}

/* Timeline view link button in chart header */
.so-chart-view-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--primary-bg);
  color: var(--primary);
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.so-chart-view-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Fullscreen toggle button */
.so-chart-fs-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-500);
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.so-chart-fs-btn:hover {
  background: var(--primary-bg);
  color: var(--primary);
  border-color: var(--primary-light);
}

/* Brand sections inside chart detail */
.so-cd-brand-section {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.so-cd-brand-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--gray-100);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-200);
}
.so-cd-brand-cnt {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gray-500);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 0 7px;
  line-height: 1.6;
}

/* Card grid */
.so-cd-brand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
  background: var(--gray-50);
}

/* Session card */
.so-cd-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s;
}
.so-cd-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.09);
}
.so-cd-card--live     { border-left-color: var(--danger); }
.so-cd-card--upcoming { border-left-color: var(--info); }
.so-cd-card--ended    { border-left-color: var(--gray-300); opacity: 0.78; }
.so-cd-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.so-cd-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-cd-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 2px;
  border-top: 1px solid var(--gray-100);
}

/* Host line inside card */
.so-cd-host-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--gray-600);
}
.so-cd-host-line span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Platform label */
.so-cd-plat {
  font-size: 0.67rem;
  color: var(--gray-400);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* Time slot badge */
.so-cd-time-badge {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Status dots */
.so-cd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.so-cd-dot--live     { background: var(--danger); box-shadow: 0 0 0 2px #fee2e2; }
.so-cd-dot--upcoming { background: var(--info); }
.so-cd-dot--ended    { background: var(--gray-300); }

/* --- Stats Bar --- */
.so-stats-bar {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.8125rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.so-stat-pill {
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.so-stat-live { background: #fde68a; color: #92400e; }
.so-stat-upcoming { background: #dbeafe; color: #1e40af; }
.so-stat-ended { background: #f1f5f9; color: #64748b; }

/* Inline date label for cross-midnight sessions (22:00ⁿ⁄ᵒ⁴ – 01:00ⁿ⁄ᵒ⁵) */
.so-time-date {
  font-size: 0.55rem;
  font-weight: 600;
  color: #818cf8;
  background: #eef2ff;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 1px;
  vertical-align: super;
  line-height: 1;
  white-space: nowrap;
}

/* ── Ca đêm toggle button ──────────────────────────────────────────── */
#soOvernightToggle {
  transition: background .15s, color .15s, border-color .15s;
}
#soOvernightToggle.so-overnight-active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}
#soOvernightToggle.so-overnight-active i { color: #c7d2fe; }

/* Time cutoff input — shown inline when Ca đêm is active */
.so-overnight-btn-input {
  display: none;                /* shown via inline style when active */
  width: 88px;
  padding: 4px 7px;
  font-size: 0.78rem;
  border: 2px solid #818cf8;
  border-radius: var(--radius);
  color: #4f46e5;
  font-weight: 600;
  background: #eef2ff;
  vertical-align: middle;
  cursor: pointer;
}
.so-overnight-btn-input:focus { outline: none; border-color: #4f46e5; background: #e0e7ff; }

/* ── Compact card — overnight styling ─────────────────────────────── */
.so-card--overnight {
  border-left: 3px solid #818cf8 !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
}
.so-card-overnight {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6rem;
  color: #4f46e5;
  background: #e0e7ff;
  border-radius: 8px;
  padding: 1px 4px;
  flex-shrink: 0;
  font-weight: 700;
}
.so-card-overnight-lbl { font-size: 0.58rem; letter-spacing: -0.02em; }

/* ── Full view table — overnight row ──────────────────────────────── */
.so-overnight-row {
  background: #f5f3ff;
}
.so-overnight-row:hover { background: #ede9fe !important; }
.so-overnight-row .so-time-slot {
  color: #4f46e5;
  font-weight: 600;
}
.so-overnight-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6rem;
  color: #4f46e5;
  background: #e0e7ff;
  border-radius: 8px;
  padding: 1px 4px;
  margin-left: 4px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* --- Schedule List --- */
.so-schedule-list {
  padding: 0;
}

/* --- Brand Section (shared by both views) --- */
.so-brand-section {
  border-bottom: 2px solid var(--border);
}

.so-brand-section:last-child {
  border-bottom: none;
}

.so-brand-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--primary, #6366f1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.so-brand-header.so-brand-toggle {
  cursor: pointer;
  user-select: none;
}

.so-brand-header.so-brand-toggle:hover {
  filter: brightness(1.08);
}

.so-toggle-icon {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  width: 16px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.so-brand-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.so-brand-count {
  font-size: 0.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
}

.so-brand-pills {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}

.so-bpill {
  font-size: 0.6875rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
}

.so-bpill-live { background: rgba(255, 255, 255, 0.25); color: #fff; }
.so-bpill-upcoming { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); }
.so-bpill-ended { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }

/* ==========================================
   COMPACT VIEW
   ========================================== */

/* Room compact */
.so-room-compact {
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.so-room-compact:last-child {
  border-bottom: none;
}

.so-rc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #64748b);
  background: var(--bg-light, #f8fafc);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.so-rc-header.so-room-toggle:hover,
.so-room-header.so-room-toggle:hover {
  background: var(--bg-hover, #f1f5f9);
  filter: brightness(0.97);
}

.so-rc-header.so-room-toggle:hover .so-room-toggle-icon,
.so-room-header.so-room-toggle:hover .so-room-toggle-icon {
  color: var(--primary, #6366f1);
}

/* Collapsed room: kẻ đường gạch chân nhẹ thay cho border-bottom của body */
.so-room-compact:has(.so-room-body[style*="display:none"]) .so-rc-header,
.so-room-section:has(.so-room-body[style*="display:none"]) .so-room-header {
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.so-rc-platform {
  flex-shrink: 0;
  font-size: 1rem;
}

.so-rc-name {
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  font-size: 0.9375rem;
}

.so-rc-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.so-rc-studio {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.so-rc-meta {
  color: var(--text-secondary, #64748b);
  font-size: 0.75rem;
}

.so-rc-link {
  margin-left: auto;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.75rem;
  transition: color 0.15s;
}

.so-rc-link:hover {
  color: var(--primary, #6366f1);
}

/* Card Grid (compact view) */
.so-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.625rem 1.5rem;
}

.so-card {
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  transition: box-shadow 0.15s, background 0.1s;
  font-size: 0.8125rem;
  position: relative;
}

.so-card[data-card] {
  cursor: pointer;
}

.so-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.so-card.expanded {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  border-color: var(--primary, #6366f1);
}

/* Card status variants */
.so-card-live {
  border-left: 3px solid #ef4444;
  background: #fefce8;
}

.so-card-live:hover {
  background: #fef9c3;
}

.so-card-upcoming {
  border-left: 3px solid #3b82f6;
  background: #fff;
}

.so-card-upcoming:hover {
  background: #eff6ff;
}

.so-card-ended {
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
}

.so-card-ended:hover {
  background: #f1f5f9;
}

/* Card head: dot + time + link */
.so-card-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.so-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.so-dot-live {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
  animation: so-pulse 1.5s ease-in-out infinite;
}

.so-dot-upcoming {
  background: #3b82f6;
}

.so-dot-ended {
  background: #cbd5e1;
}

.so-card-time {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary, #1e293b);
}

.so-card-live .so-card-time {
  color: #92400e;
}

.so-card-ended .so-card-time {
  color: #64748b;
}

.so-card-ended .so-card-host {
  color: #64748b;
}

.so-card-ended .so-card-title {
  color: #94a3b8;
}

.so-card-link {
  margin-left: auto;
  color: var(--primary, #6366f1);
  opacity: 0.35;
  font-size: 0.8125rem;
  transition: opacity 0.15s;
}

.so-card:hover .so-card-link {
  opacity: 1;
}

/* Card host */
.so-card-host {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-primary, #1e293b);
  margin-bottom: 0.125rem;
}

.so-card-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Card title */
.so-card-title {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.35;
  word-break: break-word;
}

/* Card detail (expanded) */
.so-card-detail {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px dashed var(--border-light, #e2e8f0);
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
}

/* Inline note on compact card */
.so-card-note-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: #7c3aed;
  line-height: 1.4;
  background: #f5f3ff;
  border-left: 2px solid #a78bfa;
  border-radius: 0 4px 4px 0;
  padding: 0.2rem 0.4rem;
  word-break: break-word;
}
.so-card-note-inline i {
  font-size: 0.6rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: #7c3aed;
}
/* Sticky-note icon in card header */
.so-card-note-icon {
  font-size: 0.6rem;
  color: #7c3aed;
  opacity: 0.7;
  cursor: help;
  flex-shrink: 0;
}

/* Card expand hint */
.so-card-hint {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--primary, #6366f1);
  opacity: 0.6;
}

.so-card:hover .so-card-hint {
  opacity: 1;
}

/* Detail rows (shared by card detail) */
.so-cd-row {
  padding: 0.125rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
}

.so-cd-row i {
  width: 14px;
  margin-top: 0.125rem;
  font-size: 0.625rem;
  color: var(--text-secondary, #94a3b8);
  flex-shrink: 0;
}

.so-cd-row span {
  word-break: break-word;
}

/* ==========================================
   FULL VIEW (table-based)
   ========================================== */

/* Room Section */
.so-room-section {
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}

.so-room-section:last-child {
  border-bottom: none;
}

.so-room-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  background: var(--bg-light, #f8fafc);
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  user-select: none;
}

.so-room-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.so-room-name {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.so-room-studio {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.125rem;
}

.so-room-info {
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
}

.so-room-link {
  margin-left: auto;
}

/* Schedule Table */
.so-schedule-table-wrapper {
  overflow-x: auto;
}

.so-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.so-schedule-table thead th {
  padding: 0.375rem 0.75rem;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #64748b);
  background: var(--bg-light, #f8fafc);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.so-schedule-table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  vertical-align: middle;
}

/* Schedule Row */
.so-schedule-row:hover {
  background: var(--bg-light, #f8fafc);
}

.so-schedule-row.so-status-live {
  background: #fde68a;
}

.so-schedule-row.so-status-live:hover {
  background: #fde68a;
}

.so-schedule-row.so-status-past td {
  color: var(--text-secondary, #94a3b8);
  opacity: 0.7;
}

.so-schedule-row.so-status-upcoming {
  background: #eff6ff;
}

.so-schedule-row.so-status-upcoming:hover {
  background: #dbeafe;
}

/* ── Keep Live indicator (chip + accent cho row & card) ── */
.so-keep-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  white-space: nowrap;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
  border: 1px solid #c4b5fd;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.12);
  vertical-align: middle;
}
.so-keep-chip i { font-size: 0.58rem; }
/* Accent màu theo nhóm Keep Live (ca cùng nhóm = cùng màu qua biến --keep-color) */
.so-schedule-row.so-keep-row { box-shadow: inset 4px 0 0 var(--keep-color, #8b5cf6); }
.so-schedule-row.so-keep-row .so-time-slot { color: var(--keep-color, #6d28d9); }
.so-card--keep {
  border-color: var(--keep-color, #c4b5fd) !important;
  box-shadow: inset 4px 0 0 var(--keep-color, #8b5cf6), 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ── Bảng tổng hợp lịch — đẹp & dễ đọc hơn ── */
.so-schedule-table-wrapper {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: auto;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.so-schedule-table thead th {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  padding: 0.55rem 0.85rem;
  border-bottom: 2px solid var(--border, #e2e8f0);
}
.so-schedule-table tbody td { padding: 0.55rem 0.85rem; }
.so-schedule-table tbody tr:last-child td { border-bottom: 0; }
.so-schedule-row { transition: background 0.12s ease; }
.so-schedule-row:hover { background: #f8fafc; }

/* Secondary data block inside compact card */
.so-card-secondary {
  margin-top: 6px;
  padding: 5px 7px;
  background: #f5f3ff;
  border-left: 3px solid #7c3aed;
  border-radius: 0 5px 5px 0;
  font-size: 0.78rem;
}
.so-card-sec-header {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.so-card-sec-tag {
  background: #7c3aed;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
}
.so-card-sec-time {
  color: #6d28d9;
  font-weight: 600;
  font-size: 0.78rem;
}
.so-card-sec-host {
  color: #5b21b6;
  margin-top: 2px;
  font-size: 0.75rem;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.so-card-sec-note {
  color: #7e7e9a;
  margin-top: 2px;
  font-size: 0.72rem;
  font-style: italic;
}
.so-card-sec-extra {
  color: #5b6987;
  margin-top: 2px;
  font-size: 0.72rem;
}
.so-card-sec-extra-key {
  font-weight: 600;
  color: #4c5673;
}

/* Secondary Schedule Row */
.so-secondary-row td {
  background: #f5f3ff;
  border-top: none;
  padding-top: 3px;
  padding-bottom: 3px;
}
.so-secondary-row:hover td {
  background: #ede9fe;
}
.so-secondary-tag {
  display: inline-block;
  background: #7c3aed;
  color: #fff;
  font-size: 0.65em;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 4px;
  vertical-align: middle;
}
.so-secondary-time {
  font-size: 0.82em;
  color: #6d28d9;
  vertical-align: middle;
}

/* ── Lịch phụ ĐỘC LẬP trong Tổng hợp lịch (card + table) ── */
/* Card: viền trái + nền tím nhạt để phân biệt với ca chính */
.so-card.so-card--secstandalone {
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: inset 3px 0 0 #8b5cf6;
}
.so-card-sec-standalone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 2px 0 1px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(99, 102, 241, 0.13));
  border: 1px solid rgba(139, 92, 246, 0.34);
  color: #6d28d9;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.4;
}
.so-card-sec-standalone span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-card-sec-standalone i { font-size: 0.8em; opacity: 0.85; flex-shrink: 0; }

/* Table row: nền tím nhạt + stripe trái */
.so-schedule-row.so-secondary-row-standalone td {
  background: #faf5ff;
  box-shadow: inset 3px 0 0 #8b5cf6;
}
.so-schedule-row.so-secondary-row-standalone:hover td {
  background: #f3ebff;
}
.so-secondary-tag i { font-size: 0.85em; opacity: 0.9; margin-right: 1px; }

[data-theme="dark"] .so-card.so-card--secstandalone {
  background: linear-gradient(180deg, rgba(124,58,237,0.12) 0%, rgba(124,58,237,0.07) 100%);
  border-color: rgba(167, 139, 250, 0.3);
  box-shadow: inset 3px 0 0 #a78bfa;
}
[data-theme="dark"] .so-card-sec-standalone {
  background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(129,140,248,0.16));
  border-color: rgba(167, 139, 250, 0.42);
  color: #c4b5fd;
}
[data-theme="dark"] .so-schedule-row.so-secondary-row-standalone td {
  background: rgba(124, 58, 237, 0.10);
  box-shadow: inset 3px 0 0 #a78bfa;
}

/* Status Badge */
.so-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.so-badge i {
  font-size: 0.5rem;
}

.so-badge-live {
  background: #fde68a;
  color: #92400e;
  animation: so-pulse 2s ease-in-out infinite;
}

.so-badge-live i {
  color: #ef4444;
}

.so-badge-upcoming {
  background: #dbeafe;
  color: #1e40af;
}

.so-badge-ended {
  background: var(--bg-light, #f1f5f9);
  color: var(--text-secondary, #94a3b8);
}

.so-pulse-dot {
  animation: so-pulse 1.5s ease-in-out infinite;
}

/* Time Cell */
.so-time-cell {
  white-space: nowrap;
}

.so-time-slot {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  background: var(--bg-light, #f1f5f9);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.so-status-live .so-time-slot {
  background: #fbbf24;
  color: #78350f;
}

.so-status-past .so-time-slot {
  background: var(--bg-light, #f1f5f9);
  color: var(--text-secondary, #94a3b8);
}

@keyframes so-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Host Cell */
.so-host-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.so-host-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Ảnh thật (có data-full) → bấm phóng to được */
.so-host-avatar[data-full] {
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.so-host-avatar[data-full]:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.32);
}

.so-host-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.so-host-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.so-host-name {
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-host-code {
  font-size: 0.6875rem;
  color: var(--text-secondary, #94a3b8);
  font-family: 'JetBrains Mono', monospace;
}

/* Title / Cart / Note cells */
.so-title-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.so-cart-cell {
  max-width: 200px;
}

.so-cart-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

.so-note-cell {
  max-width: 120px;
}

.so-note-text {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
}

.so-note-wrap {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
  line-height: 1.4;
}

.so-note-short {
  display: inline;
}

.so-note-full {
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.so-note-toggle {
  color: var(--primary, #6366f1);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.so-note-toggle:hover {
  text-decoration: underline;
}

/* Action Cell */
.so-action-cell {
  text-align: center;
}

.so-action-cell .btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ==========================================
   SCHEDULE OVERVIEW - RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
  .so-stats-bar {
    gap: 0.75rem;
    font-size: 0.75rem;
  }

  #page-schedule-overview .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #page-schedule-overview .filter-bar select,
  #page-schedule-overview .filter-bar .search-box {
    min-width: 100% !important;
    width: 100%;
  }

  .so-view-toggle {
    order: -1;
    width: 100%;
    display: flex;
  }

  .so-view-toggle .btn {
    flex: 1;
  }

  /* Compact card grid responsive */
  .so-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
  }

  .so-card {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }

  .so-card-time {
    font-size: 0.75rem;
  }

  /* Full view responsive */
  .so-schedule-table {
    font-size: 0.75rem;
  }

  .so-schedule-table thead th,
  .so-schedule-table tbody td {
    padding: 0.375rem 0.5rem;
  }

  .so-title-cell {
    max-width: 150px;
  }

  .so-cart-cell {
    display: none;
  }

  .so-note-cell {
    display: none;
  }

  .so-status-cell {
    display: none;
  }

  .so-room-header {
    padding-left: 1rem;
  }

  .so-brand-pills {
    display: none;
  }

  /* Stats bar — inner content gap */
  .so-stats-bar {
    padding: 0.5rem 0.75rem;
  }
  .so-stats-bar > div {
    gap: 0.5rem !important;
    width: 100%;
  }

  /* Chart — prevent horizontal page overflow */
  #soChart {
    padding: 8px 10px 0;
    overflow: hidden;
  }
  .so-chart-hdr {
    flex-wrap: wrap;
    gap: 4px;
  }
  /* Hide "mỗi ô = 30 phút · nhấn cột để xem chi tiết" on mobile */
  .so-chart-hdr > div > span:first-child {
    display: none;
  }
  .so-chart-body {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
  .so-chart-col {
    min-width: 22px;
  }
  /* Studio filter pills — allow horizontal scroll instead of overflow */
  .so-chart-studios {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* Studio links panel */
  .so-slinks-hdr {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .so-slinks-note {
    display: none;
  }
  .so-slink-row {
    padding: 6px 12px;
    gap: 6px;
  }
  /* Hide the URL text on mobile — copy button is enough */
  .so-slink-url {
    display: none;
  }
  .so-slink-name {
    flex: 1;
    min-width: unset;
  }

  /* Gemini export URL input row */
  #geminiExportCard > div:first-child > div:last-child {
    min-width: 0 !important;
    width: 100%;
  }
}

/* ==========================================
   CHATBOT WIDGET
   ========================================== */

/* Floating Action Button */
.chatbot-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99,102,241,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.35rem;
  transition: transform var(--transition), box-shadow var(--transition);
  outline: none;
}
.chatbot-fab:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 28px rgba(99,102,241,0.55);
}
.chatbot-fab.active {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
}
.chatbot-fab .cb-fab-icon { transition: opacity var(--transition-fast), transform var(--transition-fast); }
.chatbot-fab .cb-fab-icon--close { display: none; }
.chatbot-fab.active .cb-fab-icon--open  { display: none; }
.chatbot-fab.active .cb-fab-icon--close { display: block; }

/* Pulse badge */
.chatbot-fab::after {
  content: 'AI';
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--success);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 4px;
  border-radius: var(--radius-full);
  line-height: 1;
}

/* Chat Window */
.chatbot-window {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 8999;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-slow) cubic-bezier(.34,1.56,.64,1),
              opacity var(--transition-slow) ease;
}
.chatbot-window.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

/* Header */
.cb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  flex-shrink: 0;
}
.cb-header-icon {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.cb-header-info { flex: 1; min-width: 0; }
.cb-header-title { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.cb-header-sub   { font-size: .72rem; opacity: .8; }
.cb-header-actions { display: flex; gap: 4px; }
.cb-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius);
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  transition: background var(--transition-fast);
}
.cb-icon-btn:hover { background: rgba(255,255,255,.28); }

/* Messages area */
.cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--gray-50);
  scroll-behavior: smooth;
}
.cb-messages::-webkit-scrollbar { width: 4px; }
.cb-messages::-webkit-scrollbar-track { background: transparent; }
.cb-messages::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }

/* Message rows */
.cb-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: cbFadeIn .2s ease;
}
@keyframes cbFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.cb-msg--user  { align-self: flex-end; align-items: flex-end; }
.cb-msg--model { align-self: flex-start; align-items: flex-start; }
.cb-msg--error { align-self: flex-start; align-items: flex-start; }

.cb-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: .85rem;
  line-height: 1.55;
  word-break: break-word;
}
.cb-msg--user  .cb-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cb-msg--model .cb-bubble {
  background: var(--white);
  color: var(--gray-800);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--gray-200);
}
.cb-msg--error .cb-bubble {
  background: var(--danger-bg);
  color: var(--danger);
  border-bottom-left-radius: 4px;
  font-size: .82rem;
}
.cb-bubble code {
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: .8em;
}
.cb-msg--user .cb-bubble code { background: rgba(255,255,255,.22); }

.cb-time {
  font-size: .68rem;
  color: var(--gray-400);
  margin-top: 3px;
  padding: 0 2px;
}

/* Interpretation hint — dòng nhỏ hiển thị bot đã hiểu gì */
.cb-interpretation {
  font-size: 0.7rem;
  color: var(--gray-400);
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 90%;
  font-style: italic;
}
.cb-interpretation i {
  font-size: 0.65rem;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Clarification chips — lựa chọn nhanh khi bot cần xác nhận */
.cb-clarification-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-width: 90%;
}
.cb-clarification-chip {
  background: var(--white);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-clarification-chip:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(79, 124, 245, 0.3);
}

/* Typing indicator */
.cb-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 11px 16px;
  min-width: 52px;
}
.cb-typing span {
  width: 7px;
  height: 7px;
  background: var(--gray-400);
  border-radius: 50%;
  animation: cbDot 1.2s infinite;
}
.cb-typing span:nth-child(2) { animation-delay: .2s; }
.cb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cbDot {
  0%,80%,100% { transform: scale(.7); opacity:.5; }
  40%          { transform: scale(1);  opacity:1;  }
}

/* Input area */
.cb-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.cb-input-wrap {
  flex: 1;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  padding: 6px 10px;
  transition: border-color var(--transition-fast);
}
.cb-input-wrap:focus-within {
  border-color: var(--primary);
  background: var(--white);
}
#chatbotInput {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: .85rem;
  color: var(--gray-800);
  resize: none;
  outline: none;
  max-height: 120px;
  min-height: 22px;
  line-height: 1.5;
}
#chatbotInput::placeholder { color: var(--gray-400); }

.cb-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}
.cb-send-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: scale(1.06);
}
.cb-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================
   GEMINI KEY HISTORY
   ========================================== */
#geminiKeyHistory {
  margin-top: 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ai-history-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
}
.ai-history-header i {
  color: var(--primary);
  font-size: .82rem;
}

.ai-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ai-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition-fast);
}
.ai-history-item:last-child { border-bottom: none; }
.ai-history-item:hover { background: var(--gray-50); }

.ai-history-key {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-history-masked {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  color: var(--gray-700);
  background: var(--gray-100);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
}
.ai-history-date {
  font-size: .7rem;
  color: var(--gray-400);
}

.ai-history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-hist-use {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  background: transparent;
  color: var(--primary);
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.btn-hist-use:hover {
  background: var(--primary);
  color: #fff;
}

.btn-hist-del {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: transparent;
  color: var(--gray-400);
  font-size: .78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.btn-hist-del:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Chart card trong bubble ── */
.cb-chart-card {
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 320px;
}

.cb-chart-title {
  padding: 9px 13px 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cb-chart-title::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--primary);
  flex-shrink: 0;
}

.cb-chart-wrap {
  padding: 10px 12px 8px;
  position: relative;
  height: 200px;
}
.cb-chart-wrap canvas {
  display: block;
}

/* Pie / Doughnut — cao hơn để có chỗ cho legend bên phải */
.cb-chart-card--polar .cb-chart-wrap {
  height: 220px;
}

/* Căn chỉnh message model chứa chart */
.cb-msg--model .cb-chart-card {
  align-self: flex-start;
}

/* ── Chatbot header buttons ── */
.cb-header-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
  font-size: .85rem;
}
.cb-header-btn:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* ── Fullscreen mode ── */
.chatbot-window.cb-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  z-index: 99999;
}
.chatbot-window.cb-fullscreen .cb-messages {
  max-height: calc(100vh - 120px) !important;
}

/* ── Chart card header (tiêu đề + nút detail) ── */
.cb-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 4px;
}
.cb-chart-header .cb-chart-title {
  padding: 0;
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
}
.cb-chart-detail-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: .75rem;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.cb-chart-detail-btn:hover {
  background: var(--gray-100);
  color: var(--primary);
}

/* ── Chart modal overlay ── */
.cb-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cb-modal-overlay.open {
  display: flex;
}
.cb-modal {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cbModalIn .2s ease;
}
@keyframes cbModalIn {
  from { opacity: 0; transform: scale(.95) translateY(16px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.cb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.cb-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;
}
.cb-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cb-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  transition: all var(--transition-fast);
}
.cb-modal-btn:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  color: var(--gray-800);
}
.cb-modal-btn--close {
  border-color: transparent;
  color: var(--gray-500);
}
.cb-modal-btn--close:hover {
  background: var(--danger-light, #fee2e2);
  color: #dc2626;
  border-color: transparent;
}
.cb-modal-body {
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cb-modal-chart-wrap {
  height: 360px;
  position: relative;
}
.cb-modal-chart-wrap canvas {
  display: block;
}

/* ── Data table trong modal ── */
.cb-modal-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--gray-100);
}
.cb-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.cb-modal-table thead th {
  background: var(--gray-50);
  padding: 9px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.cb-modal-table tbody td {
  padding: 8px 14px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}
.cb-modal-table tbody tr:last-child td {
  border-bottom: none;
}
.cb-modal-table tbody tr:hover td {
  background: var(--gray-50);
}

/* Mobile responsive cho modal */
@media (max-width: 600px) {
  .cb-modal {
    max-height: 95vh;
    border-radius: 12px;
  }
  .cb-modal-chart-wrap {
    height: 240px;
  }
}

/* ── Pause button active state ── */
.cb-header-btn--active {
  background: rgba(239,68,68,.18) !important;
  color: #ef4444 !important;
}

/* ── Typing wrap (dots + cancel btn cùng hàng) ── */
.cb-typing-wrap {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.cb-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cb-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: cbDot 1.2s ease-in-out infinite;
  display: inline-block;
}
.cb-typing span:nth-child(2) { animation-delay: .2s; }
.cb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cbDot {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1;  }
}

/* ── Nút Hủy ── */
.cb-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.cb-cancel-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* ── Status bar (pause / queue) ── */
.cb-status-bar {
  padding: 6px 14px;
  font-size: .75rem;
  font-weight: 500;
  text-align: center;
  background: #fef9c3;
  color: #854d0e;
  border-top: 1px solid #fde68a;
}
.cb-status-bar--queue {
  background: #eff6ff;
  color: #1d4ed8;
  border-top: 1px solid #bfdbfe;
}

/* ── Mic button ── */
.cb-mic-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: .9rem;
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
}
.cb-mic-btn:hover:not(:disabled) {
  color: var(--primary);
  background: var(--primary-light, #eef2ff);
}
.cb-mic-btn--recording {
  color: #dc2626 !important;
  background: #fee2e2 !important;
  animation: cbMicPulse 1s ease-in-out infinite;
}
@keyframes cbMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%       { box-shadow: 0 0 0 7px rgba(220,38,38,.0); }
}

/* ── Stop speak button ── */
.cb-stop-speak-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: #fde68a;
  color: #92400e;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  border-top: 1px solid #fde68a;
  transition: background var(--transition-fast);
}
.cb-stop-speak-btn:hover { background: #fde68a; }

/* ── Attach button ── */
.cb-attach-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: .9rem;
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.cb-attach-btn:hover {
  color: var(--primary);
  background: var(--primary-light, #eef2ff);
}

/* ── Image preview bar ── */
.cb-image-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f8fafc;
  border-top: 1px solid var(--gray-100);
}
.cb-preview-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.cb-preview-thumb:hover { opacity: .8; }
.cb-preview-name {
  font-size: .72rem;
  color: var(--gray-500);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-preview-remove {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .75rem;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.cb-preview-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Thumbnail ảnh trong bubble chat ── */
.cb-msg-thumb {
  display: block;
  max-width: 220px;
  max-height: 180px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--gray-200);
  margin-bottom: 4px;
  transition: opacity var(--transition-fast);
}
.cb-msg-thumb:hover { opacity: .88; }

/* ── Lightbox ── */
.cb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cbModalIn .18s ease;
}
.cb-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  object-fit: contain;
}
.cb-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.cb-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* ── Studio Links Panel (#soStudioLinks) ─────────────────────────── */
#soStudioLinks {
  margin: 8px 0 4px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.so-slinks-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-700);
}
.so-slinks-hdr i { color: var(--primary-600); font-size: 0.85rem; }
.so-slinks-overnight {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
}
.so-overnight-cut-input {
  width: 88px;
  padding: 3px 7px;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  font-size: 0.75rem;
  background: var(--white);
  color: var(--gray-700);
  outline: none;
  transition: border-color .15s;
}
.so-overnight-cut-input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 2px rgba(99,102,241,.1); }
.so-overnight-cut-clear {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 3px;
  line-height: 1;
  border-radius: 4px;
  transition: color .12s;
}
.so-overnight-cut-clear:hover { color: var(--danger); }
.so-overnight-cut-clear.hidden { display: none; }
.so-slinks-note {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--gray-400);
}
.so-slinks-body { display: flex; flex-direction: column; }

/* Nút thu gọn/mở dùng chung cho card Gemini + Links trực quan */
.so-collapse-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200); border-radius: 8px;
  background: var(--white); color: var(--gray-500);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.so-collapse-btn:hover { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-300); }
.so-collapse-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.so-collapse-btn i { transition: transform .2s ease; font-size: .78rem; }
/* Khi thu gọn: xoay mũi tên + ẩn thân card */
#geminiExportCard.is-collapsed #geminiCollapseBtn i,
#soStudioLinks.is-collapsed .so-collapse-btn i { transform: rotate(180deg); }
#geminiExportCard.is-collapsed #geminiExportBody,
#geminiExportCard.is-collapsed #geminiStudioLinks { display: none !important; }
#soStudioLinks.is-collapsed .so-slinks-body { display: none !important; }
[data-theme="dark"] .so-collapse-btn { background: var(--th-surface-2); border-color: var(--th-border); color: var(--th-text-muted); }
[data-theme="dark"] .so-collapse-btn:hover { background: var(--th-surface-3); color: var(--th-text); }
.so-slink-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.75rem;
  transition: background .12s;
}
.so-slink-row:last-child { border-bottom: none; }
.so-slink-row:hover { background: var(--gray-50); }
.so-slink-row--all { background: #f0f9ff; }
.so-slink-row--all:hover { background: #e0f2fe; }
.so-slink-icon {
  font-size: 0.85rem;
  color: var(--gray-400);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.so-slink-row--all .so-slink-icon { color: #0284c7; }
.so-slink-name {
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 90px;
}
.so-slink-row--all .so-slink-name { color: #0284c7; }
.so-slink-url {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.67rem;
  color: var(--gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-slink-copy,
.so-slink-open {
  flex-shrink: 0;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  background: var(--white);
  color: var(--gray-500);
  font-size: 0.72rem;
  padding: 3px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.so-slink-copy:hover { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-300); }
.so-slink-open:hover { background: var(--primary-50); color: var(--primary-600); border-color: var(--primary-300); }
.so-slink-copy.copied { background: #dcfce7; color: #16a34a; border-color: #86efac; }

/* Mobile */
@media (max-width: 480px) {
  .chatbot-window {
    right: 12px;
    bottom: 84px;
    width: calc(100vw - 24px);
  }
  .chatbot-fab {
    right: 16px;
    bottom: 20px;
  }
  .cb-chart-card {
    max-width: 100%;
  }
  .cb-chart-wrap {
    height: 180px;
  }
}

/* ============================================================
   USER PROFILE DRAWER
   ============================================================ */

.upd-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 5000;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.upd-overlay.active { opacity: 1; pointer-events: all; }

.upd-panel {
  position: fixed;
  top: 0; right: -480px;
  width: 460px; height: 100%;
  background: #fff;
  z-index: 5001;
  box-shadow: -6px 0 32px rgba(0,0,0,0.18);
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.upd-panel.active { right: 0; }

.upd-header {
  padding: 20px 52px 20px 20px;
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  flex-shrink: 0;
}
.upd-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-size: 14px;
  transition: all 0.15s ease;
}
.upd-close:hover { background: #e2e8f0; color: #1e293b; }

.upd-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,0.3);
}
.upd-avatar img { width: 100%; height: 100%; object-fit: cover; }

.upd-meta { flex: 1; min-width: 0; }
.upd-name {
  font-size: 17px; font-weight: 700; color: #1e293b;
  margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upd-username { font-size: 12px; color: #94a3b8; margin: 0 0 8px; }
.upd-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.upd-body {
  flex: 1; overflow-y: auto;
  min-height: 0;
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}

.upd-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px; overflow: hidden;
  flex-shrink: 0;
}
.upd-section-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: #94a3b8; padding: 9px 16px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.upd-row {
  display: flex; align-items: center;
  padding: 9px 16px; gap: 12px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
.upd-row:last-child { border-bottom: none; }
.upd-row-icon { width: 18px; text-align: center; color: #94a3b8; font-size: 12px; flex-shrink: 0; }
.upd-row-label { font-size: 12px; color: #64748b; min-width: 96px; flex-shrink: 0; }
.upd-row-val { font-size: 13px; color: #1e293b; font-weight: 500; flex: 1; min-width: 0; }

.upd-feat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; padding: 12px 16px;
  background: #fff;
}
.upd-feat-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: #faf5ff; border: 1px solid #ede9fe;
  font-size: 12px; color: #374151;
}
.upd-feat-item i { font-size: 11px; color: #7c3aed; width: 14px; text-align: center; }
.upd-feat-none {
  padding: 14px 16px; font-size: 13px; color: #94a3b8;
  text-align: center; background: #fff;
}

.upd-footer {
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex; gap: 8px;
  background: #fff; flex-shrink: 0;
}

@media (max-width: 520px) {
  .upd-panel { width: 100%; right: -100%; }
}

/* ── Gemini Studio Links (gsl) ──────────────────────────────────────────────── */
.gsl-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px 6px;
  font-size: .78rem; font-weight: 600; color: #6366f1;
  border-top: 1px dashed #e0e7ff;
}

.gsl-body {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 18px 12px;
}

.gsl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}
.gsl-row:last-child { border-bottom: none; }

.gsl-icon {
  font-size: .8rem; color: #94a3b8; flex-shrink: 0; width: 16px; text-align: center;
}

.gsl-name {
  font-size: .8rem; font-weight: 500; color: #374151;
  min-width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gsl-input {
  flex: 1; min-width: 0;
  font-size: .72rem; font-family: monospace;
  padding: 5px 8px;
  border: 1px solid #e5e7eb; border-radius: 5px;
  background: #f9fafb; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gsl-copy, .gsl-open {
  flex-shrink: 0; padding: 4px 8px;
  font-size: .72rem; line-height: 1;
}

@media (max-width: 640px) {
  .gsl-name { min-width: 60px; }
  .gsl-row { flex-wrap: wrap; }
  .gsl-input { min-width: 100%; order: 3; }
}

/* ===== Dark mode: card "Link Gemini Gems" (dùng nhiều màu sáng cứng) + row "Tất cả studio" ===== */
[data-theme="dark"] #geminiExportCard { background:var(--th-surface) !important; border-color:var(--th-border) !important; box-shadow:none !important; }
[data-theme="dark"] #geminiExportUrl { background:var(--th-surface-2) !important; border-color:var(--th-border) !important; color:var(--th-text) !important; }
[data-theme="dark"] .gsl-header { border-top-color:var(--th-border); color:#a5b4fc; }
[data-theme="dark"] .gsl-row { border-bottom-color:var(--th-border); }
[data-theme="dark"] .gsl-name { color:var(--th-text); }
[data-theme="dark"] .gsl-input { background:var(--th-surface-2); border-color:var(--th-border); color:var(--th-text-muted); }
[data-theme="dark"] .so-slink-row--all { background:rgba(2,132,199,.14); }
[data-theme="dark"] .so-slink-row--all:hover { background:rgba(2,132,199,.22); }

/* ==========================================
   THEME TOGGLE BUTTON
   ========================================== */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%; border: none;
  background: var(--th-surface-3, var(--gray-100));
  color: var(--th-text-muted, var(--gray-500));
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  position: relative;
}
.theme-toggle-btn:hover {
  background: var(--th-surface-2, var(--gray-200));
  color: var(--primary);
  transform: scale(1.08);
}
.theme-toggle-btn .theme-icon { font-size: 0.9rem; transition: all .2s; }
/* Tooltip */
.theme-toggle-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: #fff;
  font-size: 0.67rem; white-space: nowrap; padding: 4px 8px; border-radius: 5px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.theme-toggle-btn:hover[data-tooltip]::after { opacity: 1; }

/* ==========================================
   DARK MODE OVERRIDES
   ==========================================
   Chiến lược: flip gray scale + white → tự động
   fix toàn bộ element dùng var(--gray-*).
   Sau đó override riêng những gì hardcoded.
   ========================================== */

/* ── 1. Flip color scale (dark) ── */
[data-theme="dark"] {
  --white:       #1c2230;    /* card surface */
  --gray-50:     #0d1117;    /* page bg */
  --gray-100:    #161b22;    /* slightly elevated */
  --gray-200:    #21262d;    /* border / subtle bg */
  --gray-300:    #30363d;    /* stronger border */
  --gray-400:    #6e7c8e;    /* muted icons / subtle text */
  --gray-500:    #8b949e;    /* secondary text */
  --gray-600:    #b1bac4;    /* readable muted text */
  --gray-700:    #cdd9e5;    /* primary body text */
  --gray-800:    #e6edf3;    /* strong text */
  --gray-900:    #ffffff;    /* headings / numbers */
  --primary-bg:  #1e1b4b;
  --success-bg:  #052e16;
  --warning-bg:  #3d2000;
  --danger-bg:   #3d0a0a;
  --info-bg:     #0c2340;
  /* Alias vars for inline var() fallbacks */
  --bg-card:     var(--th-surface);
  --border-color: var(--th-border);
  --text-primary:   var(--th-text);
  --text-secondary: var(--th-text-muted);
  --bg-secondary:   var(--th-surface-2);
  --bg-primary:     var(--th-surface);
  --surface:        var(--th-surface);
  --primary-color:  var(--primary);
}

/* ── 1b. Flip color scale (auto → OS dark) ── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --white:       #1c2230;
    --gray-50:     #0d1117;
    --gray-100:    #161b22;
    --gray-200:    #21262d;
    --gray-300:    #30363d;
    --gray-400:    #6e7c8e;
    --gray-500:    #8b949e;
    --gray-600:    #b1bac4;
    --gray-700:    #cdd9e5;
    --gray-800:    #e6edf3;
    --gray-900:    #ffffff;
    --primary-bg:  #1e1b4b;
    --success-bg:  #052e16;
    --warning-bg:  #3d2000;
    --danger-bg:   #3d0a0a;
    --info-bg:     #0c2340;
    --bg-card:     var(--th-surface);
    --border-color: var(--th-border);
    --text-primary:   var(--th-text);
    --text-secondary: var(--th-text-muted);
    --bg-secondary:   var(--th-surface-2);
    --bg-primary:     var(--th-surface);
    --surface:        var(--th-surface);
    --primary-color:  var(--primary);
  }
}

/* ── 2. Structural elements not covered by gray scale flip ── */

/* ─ SIDEBAR: đã dark từ đầu — phải restore lại màu gốc, tránh gray-flip làm hỏng ─ */
[data-theme="dark"] .admin-sidebar {
  background: #161b22 !important;
}
[data-theme="dark"] .nav-section-title {
  color: #4d5968 !important;           /* section label nhạt */
}
[data-theme="dark"] .nav-link {
  color: rgba(139,148,158,.85) !important;   /* link text */
}
[data-theme="dark"] .nav-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: #cdd9e5 !important;
}
[data-theme="dark"] .nav-link.active {
  background: var(--primary) !important;
  color: #ffffff !important;           /* explicit white, không dùng --white đã bị flip */
}
[data-theme="dark"] .nav-link.active i,
[data-theme="dark"] .nav-link.active span { color: #ffffff !important; }
[data-theme="dark"] .nav-badge { color: #ffffff !important; }
[data-theme="dark"] .sidebar-footer {
  border-top-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .user-avatar {
  background: rgba(255,255,255,.1) !important;
  color: #8b949e !important;
}
[data-theme="dark"] .user-info .user-name { color: #cdd9e5 !important; }
[data-theme="dark"] .user-info .user-role { color: #9aa4b0 !important; }
[data-theme="dark"] .sidebar-logout-btn { color: #8b949e !important; }
[data-theme="dark"] .sidebar-logo-text,
[data-theme="dark"] .logo-text { color: #cdd9e5 !important; }
[data-theme="dark"] .sidebar-title { color: #cdd9e5 !important; }

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .admin-sidebar { background: #161b22 !important; }
  [data-theme="auto"] .nav-link { color: rgba(139,148,158,.85) !important; }
  [data-theme="auto"] .nav-link:hover { background: rgba(255,255,255,.07) !important; color: #cdd9e5 !important; }
  [data-theme="auto"] .nav-link.active { background: var(--primary) !important; color: #ffffff !important; }
  [data-theme="auto"] .nav-section-title { color: #4d5968 !important; }
  [data-theme="auto"] .sidebar-footer { border-top-color: rgba(255,255,255,.08) !important; }
}

/* ─ HEADER ─ */
[data-theme="dark"] .admin-header { background: var(--th-header-bg) !important; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .admin-header { background: var(--th-header-bg) !important; }
}

/* ─ STAT ICONS: replace filter với explicit dark palettes ─ */
[data-theme="dark"] .stat-icon { filter: none !important; }   /* reset filter */
[data-theme="dark"] .stat-icon.live     { background: rgba(220,38,38,.18)   !important; color: #f87171 !important; }
[data-theme="dark"] .stat-icon.upcoming { background: rgba(217,119,6,.18)   !important; color: #fbbf24 !important; }
[data-theme="dark"] .stat-icon.hosts    { background: rgba(37,99,235,.18)   !important; color: #60a5fa !important; }
[data-theme="dark"] .stat-icon.pics     { background: rgba(190,24,93,.18)   !important; color: #f472b6 !important; }
[data-theme="dark"] .stat-icon.sessions { background: rgba(99,102,241,.18)  !important; color: #818cf8 !important; }
[data-theme="dark"] .stat-icon.total-hours { background: rgba(180,83,9,.18) !important; color: #fb923c !important; }
[data-theme="dark"] .stat-icon.brands   { background: rgba(99,102,241,.18)  !important; color: #a78bfa !important; }
[data-theme="dark"] .stat-icon.rooms    { background: rgba(5,150,105,.18)   !important; color: #34d399 !important; }
[data-theme="dark"] .stat-icon i { filter: none !important; }   /* reset icon filter */

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .stat-icon { filter: none !important; }
  [data-theme="auto"] .stat-icon.live     { background: rgba(220,38,38,.18) !important;   color: #f87171 !important; }
  [data-theme="auto"] .stat-icon.upcoming { background: rgba(217,119,6,.18) !important;   color: #fbbf24 !important; }
  [data-theme="auto"] .stat-icon.hosts    { background: rgba(37,99,235,.18) !important;   color: #60a5fa !important; }
  [data-theme="auto"] .stat-icon.pics     { background: rgba(190,24,93,.18) !important;   color: #f472b6 !important; }
  [data-theme="auto"] .stat-icon.sessions { background: rgba(99,102,241,.18) !important;  color: #818cf8 !important; }
  [data-theme="auto"] .stat-icon.total-hours { background: rgba(180,83,9,.18) !important; color: #fb923c !important; }
  [data-theme="auto"] .stat-icon.brands   { background: rgba(99,102,241,.18) !important;  color: #a78bfa !important; }
  [data-theme="auto"] .stat-icon.rooms    { background: rgba(5,150,105,.18) !important;   color: #34d399 !important; }
}

/* ─ STAT SEC BADGE (+N lịch phụ) ─ */
[data-theme="dark"] .stat-sec-sub {
  background: rgba(139,92,246,.2) !important;
  border-color: rgba(139,92,246,.35) !important;
  color: #c4b5fd !important;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .stat-sec-sub {
    background: rgba(139,92,246,.2) !important;
    border-color: rgba(139,92,246,.35) !important;
    color: #c4b5fd !important;
  }
}

/* SheetWriter: hardcoded #fff / #1e293b — override with th- vars */
[data-theme="dark"] .swx-card,
[data-theme="dark"] .swx-group-bar,
[data-theme="dark"] .sw-modal-box {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .swx-input,
[data-theme="dark"] .swx-select,
[data-theme="dark"] .swx-num,
[data-theme="dark"] .swx-fs,
[data-theme="dark"] .sw-line-sel,
[data-theme="dark"] .sw-line-txt,
[data-theme="dark"] .sw-gtab,
[data-theme="dark"] .sw-gtab-add {
  background: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .swx-input::placeholder,
[data-theme="dark"] .swx-select::placeholder { color: var(--th-text-subtle) !important; }
[data-theme="dark"] .swx-hd,
[data-theme="dark"] .swx-div,
[data-theme="dark"] .swx-footer { border-color: var(--th-border) !important; }
[data-theme="dark"] .swx-lbl  { color: var(--th-text-muted) !important; }
[data-theme="dark"] .swx-hint { color: var(--th-text-subtle) !important; }
[data-theme="dark"] .swx-step-title,
[data-theme="dark"] .swx-room-name { color: var(--th-text) !important; }
[data-theme="dark"] .swx-tbl th {
  background: var(--th-surface-2) !important;
  color: var(--th-text-muted) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .swx-tbl tbody tr:hover td { background: var(--th-surface-2) !important; }
[data-theme="dark"] .swx-btn-outline {
  background: var(--th-surface-2) !important;
  color: #818cf8 !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .swx-btn-outline:hover {
  background: var(--th-surface-3) !important;
  border-color: #818cf8 !important;
}
[data-theme="dark"] .sw-preset-btn {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text-muted) !important;
}
[data-theme="dark"] .sw-preset-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* Header user dropdown (hardcoded bg) */
[data-theme="dark"] .header-user-dropdown {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .dropdown-item:hover  { background: var(--th-surface-2) !important; }
[data-theme="dark"] .dropdown-divider     { border-color: var(--th-border) !important; }

/* brand select in header */
[data-theme="dark"] .brand-select {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
}

/* Form controls in other pages (hardcoded #fff borders) */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}

/* Data tables (hardcoded bg on th) */
[data-theme="dark"] .data-table th {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .data-table tr:hover td { background: var(--th-surface-2) !important; }

/* ── 3. Stat icon backgrounds — darken light gradients ── */
[data-theme="dark"] .stat-icon { filter: brightness(0.22) saturate(1.5); }
[data-theme="dark"] .stat-icon i { filter: brightness(5) saturate(0.85); }

/* ── 4. Platform badges — darken in dark context ── */
[data-theme="dark"] .live-platform-badge,
[data-theme="dark"] .upcoming-platform-badge,
[data-theme="dark"] .popup-platform-badge { filter: brightness(0.8) saturate(0.75) !important; }
[data-theme="dark"] .live-platform-badge.platform-tiktok,
[data-theme="dark"] .live-platform-badge[class*="platform-tts"],
[data-theme="dark"] .live-platform-badge[class*="platform-tiktok"] {
  background: #2a2a2a !important; color: #d4d4d4 !important;
  border-color: #444 !important; filter: none !important;
}

/* ── 5. Brand badges ── */
[data-theme="dark"] .live-brand-badge,
[data-theme="dark"] .upcoming-brand,
[data-theme="dark"] .popup-brand-badge { filter: brightness(0.65) saturate(0.8); }

/* ── 6. Popup date headers (hardcoded gradients) ── */
[data-theme="dark"] .popup-date-header.today {
  background: linear-gradient(135deg,#3d2d00,#4d3a00) !important; color: #fbbf24 !important;
}
[data-theme="dark"] .popup-date-header.later { background: #1c2230 !important; color: var(--gray-600) !important; }
[data-theme="dark"] .popup-date-header.past  { background: #161b22 !important; color: var(--gray-500) !important; }

/* ── 7. Countdown colors ── */
[data-theme="dark"] .live-countdown { color: #f87171 !important; }
[data-theme="dark"] .upcoming-countdown { color: #fbbf24 !important; }

/* ── 8. Sheet Writer ── */
[data-theme="dark"] .sw-custom-pane { background: #1a1430 !important; border-color: #3d3460 !important; }
[data-theme="dark"] .swx-log-box { background: #070c12 !important; }
[data-theme="dark"] .sw-dupe-sel { background: #2d1f00 !important; border-color: #6b4700 !important; color: #fbbf24 !important; }
[data-theme="dark"] .sw-sticky-bar { background: var(--th-header-bg) !important; border-color: var(--th-border) !important; box-shadow: 0 -4px 20px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .sw-md-row { background: var(--th-surface-2) !important; border-color: var(--th-border) !important; }
[data-theme="dark"] .sw-zone-row { background: var(--th-surface-2) !important; border-color: var(--th-border) !important; }

/* ── 9. Secondary schedule rows ── */
[data-theme="dark"] .live-sec-subrow,
[data-theme="dark"] .popup-sec-subrow { background: #1d1b30 !important; border-left-color: #7c3aed !important; }
[data-theme="dark"] .sec-sub-host,
[data-theme="dark"] .sec-sub-room { color: #a78bfa !important; }
[data-theme="dark"] .sec-sub-note { color: #fff !important; background: #ea580c !important; }
[data-theme="dark"] .live-sec-badge { background: #2e1065 !important; color: #c4b5fd !important; }

/* ── 10. Modal overlay ── */
[data-theme="dark"] #popup-overlay,
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] #sw-modal-overlay { background: rgba(0,0,0,.78) !important; }

/* ── 11. Upcoming hover ── */
[data-theme="dark"] .upcoming-card:hover    { background: var(--gray-200) !important; }
[data-theme="dark"] .upcoming-card.urgent   { background: rgba(239,68,68,.07) !important; }
[data-theme="dark"] .upcoming-card.soon     { background: rgba(245,158,11,.06) !important; }
[data-theme="dark"] .upcoming-card-secondary { background: rgba(139,92,246,.07) !important; }

/* ── 12. Auto mode (mirror dark overrides via media query) ── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .stat-icon { filter: brightness(0.22) saturate(1.5); }
  [data-theme="auto"] .stat-icon i { filter: brightness(5) saturate(0.85); }
  [data-theme="auto"] .live-platform-badge { filter: brightness(0.8) saturate(0.75) !important; }
  [data-theme="auto"] .live-platform-badge.platform-tiktok,
  [data-theme="auto"] .live-platform-badge[class*="platform-tts"],
  [data-theme="auto"] .live-platform-badge[class*="platform-tiktok"] {
    background: #2a2a2a !important; color: #d4d4d4 !important; border-color: #444 !important; filter: none !important;
  }
  [data-theme="auto"] .live-brand-badge,
  [data-theme="auto"] .upcoming-brand,
  [data-theme="auto"] .popup-brand-badge { filter: brightness(0.65) saturate(0.8); }
  [data-theme="auto"] .popup-date-header.today {
    background: linear-gradient(135deg,#3d2d00,#4d3a00) !important; color: #fbbf24 !important;
  }
  [data-theme="auto"] .sw-sticky-bar { background: var(--th-header-bg) !important; }
  [data-theme="auto"] .sw-md-row { background: var(--th-surface-2) !important; border-color: var(--th-border) !important; }
  [data-theme="auto"] #popup-overlay,
  [data-theme="auto"] .modal-overlay { background: rgba(0,0,0,.78) !important; }
  [data-theme="auto"] .upcoming-card:hover { background: var(--gray-200) !important; }
  [data-theme="auto"] .live-sec-subrow,
  [data-theme="auto"] .popup-sec-subrow { background: #1d1b30 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — GLOBAL FORM + LAYOUT SWEEP
   Fixes: hardcoded #fff / 'white' trong nhiều page components
   Fixes: btn color:var(--white) bị flip thành text tối
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons: restore white text on colored bg ── */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-sm.btn-primary,
[data-theme="dark"] .btn-sm.btn-danger,
[data-theme="dark"] .btn-sm.btn-success { color: #ffffff !important; }

/* ── ALL native form controls: blanket override ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--th-text-subtle) !important; }
[data-theme="dark"] select option { background: var(--th-surface) !important; color: var(--th-text) !important; }

/* ── Filter bar + filter controls (has second block with background:white) ── */
[data-theme="dark"] .filter-bar {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-date,
[data-theme="dark"] .filter-input {
  background-color: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .search-box input {
  background-color: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .search-box i { color: var(--th-text-subtle) !important; }

/* ── Template toolbar (inline-style gradient → override với !important) ── */
[data-theme="dark"] .template-toolbar {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
}
/* Labels với inline color: #334155 */
[data-theme="dark"] .template-toolbar label { color: var(--th-text-muted) !important; }

/* ── Page content cards / containers ── */
[data-theme="dark"] .page-content .card,
[data-theme="dark"] .page-content .content-section,
[data-theme="dark"] .schedule-toolbar,
[data-theme="dark"] .template-section,
[data-theme="dark"] .warning-bar,
[data-theme="dark"] .info-bar,
[data-theme="dark"] .alert-bar { background: var(--th-surface) !important; border-color: var(--th-border) !important; }

/* ── Data tables (main pages) ── */
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .data-table-container {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .data-table,
[data-theme="dark"] table.table {
  background: transparent !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .data-table th,
[data-theme="dark"] table.table th {
  background: var(--th-surface-2) !important;
  color: var(--th-text-muted) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .data-table td,
[data-theme="dark"] table.table td {
  border-color: var(--th-border-light) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .data-table tr:hover td,
[data-theme="dark"] table.table tr:hover td { background: var(--th-surface-2) !important; }

/* ── Modals / dialogs ── */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* ── Form groups inside modals / pages ── */
[data-theme="dark"] .form-group label,
[data-theme="dark"] .form-label { color: var(--th-text-muted) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--th-input-bg) !important;
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .form-text,
[data-theme="dark"] .form-hint { color: var(--th-text-subtle) !important; }

/* ── Toggle / switch labels (inline color hardcoded) ── */
[data-theme="dark"] .auto-apply-label { color: var(--th-text-muted) !important; }

/* ── Various section headers / labels trong pages ── */
[data-theme="dark"] .section-header,
[data-theme="dark"] .page-section-title,
[data-theme="dark"] .card-header {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* ── Mirrors for [data-theme="auto"] ── */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .btn-primary,
  [data-theme="auto"] .btn-danger,
  [data-theme="auto"] .btn-success { color: #ffffff !important; }
  [data-theme="auto"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  [data-theme="auto"] select,
  [data-theme="auto"] textarea {
    background-color: var(--th-input-bg) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
  }
  [data-theme="auto"] select option { background: var(--th-surface) !important; color: var(--th-text) !important; }
  [data-theme="auto"] .filter-bar { background: var(--th-surface) !important; }
  [data-theme="auto"] .filter-select,
  [data-theme="auto"] .filter-date,
  [data-theme="auto"] .filter-input {
    background-color: var(--th-input-bg) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
  }
  [data-theme="auto"] .template-toolbar {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border) !important;
  }
  [data-theme="auto"] .template-toolbar label { color: var(--th-text-muted) !important; }
  [data-theme="auto"] .modal-content,
  [data-theme="auto"] .modal-header,
  [data-theme="auto"] .modal-body,
  [data-theme="auto"] .modal-footer {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
  }
  [data-theme="auto"] .data-table th { background: var(--th-surface-2) !important; }
  [data-theme="auto"] .data-table tr:hover td { background: var(--th-surface-2) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — COMPREHENSIVE COMPONENT FIXES (v2)
   Fix: warnings panel, schedule stats, keepLive toolbar,
   syncMode indicator, detail modal, delete dialog, inline styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Warnings Panel ─── */
[data-theme="dark"] .warnings-panel {
  background: rgba(217,119,6,.08) !important;
  border-color: rgba(245,158,11,.25) !important;
}
[data-theme="dark"] .warnings-panel.warnings-panel-ok {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.25) !important;
}
[data-theme="dark"] .warnings-panel-ok-content {
  color: #34d399 !important;
}
[data-theme="dark"] .warnings-panel-ok-content .fa-check-circle { color: #10b981 !important; }
[data-theme="dark"] .warnings-panel-header {
  background: rgba(217,119,6,.12) !important;
  border-bottom-color: rgba(245,158,11,.2) !important;
}
[data-theme="dark"] .warnings-panel-title { color: #fbbf24 !important; }
[data-theme="dark"] .warnings-panel-title .fa-exclamation-triangle { color: #f59e0b !important; }
[data-theme="dark"] .warnings-panel-toggle {
  border-color: rgba(245,158,11,.3) !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .warnings-panel-toggle:hover { background: rgba(245,158,11,.15) !important; }
[data-theme="dark"] .warn-type-overlap { color: #fbbf24 !important; background: rgba(217,119,6,.12) !important; }
[data-theme="dark"] .warn-type-host    { color: #f87171 !important; background: rgba(239,68,68,.1) !important; }
[data-theme="dark"] .warn-type-cross   { color: #c4b5fd !important; background: rgba(139,92,246,.1) !important; }
[data-theme="dark"] .warn-type-missing { color: #94a3b8 !important; background: rgba(148,163,184,.08) !important; }
[data-theme="dark"] .warn-item { color: var(--th-text) !important; border-bottom-color: var(--th-border-light) !important; }
[data-theme="dark"] .warn-item:hover { background: rgba(255,255,255,0.05) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .warn-item:active { background: rgba(255,255,255,0.09) !important; }
[data-theme="dark"] .warn-badge { background: rgba(255,255,255,.12) !important; color: var(--th-text) !important; }
[data-theme="dark"] .warn-missing-detail { color: var(--th-text-subtle) !important; }
[data-theme="dark"] .warn-group { border-bottom-color: var(--th-border-light) !important; }
[data-theme="dark"] .so-card[data-conflict-type] { background: color-mix(in srgb, var(--cf-accent,#ef4444) 12%, var(--th-surface,#1e293b)) !important; }
[data-theme="dark"] .so-card[data-conflict-type]:hover { background: color-mix(in srgb, var(--cf-accent,#ef4444) 18%, var(--th-surface,#1e293b)) !important; }
[data-theme="dark"] .warn-goto-btn { background: rgba(255,255,255,.07) !important; color: var(--th-text-muted) !important; }
[data-theme="dark"] .warn-item:hover .warn-goto-btn,
[data-theme="dark"] .warn-item-single:hover .warn-goto-btn { background: rgba(96,165,250,.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .warn-item-single:hover { background: rgba(255,255,255,.04) !important; }
[data-theme="dark"] .so-cbadge--overlap { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.4) !important; }
[data-theme="dark"] .so-cbadge--host    { background: rgba(239,68,68,.15) !important;  color: #f87171 !important; border-color: rgba(239,68,68,.4) !important; }
[data-theme="dark"] .so-cbadge--cross   { background: rgba(139,92,246,.15) !important; color: #c4b5fd !important; border-color: rgba(139,92,246,.4) !important; }
[data-theme="dark"] .so-cbadge--missing { background: rgba(148,163,184,.1) !important; color: #94a3b8 !important; border-color: rgba(148,163,184,.3) !important; }

/* ─── Schedule Stats bar (inline bg: #f8f9fa) ─── */
[data-theme="dark"] #scheduleStats {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] #scheduleStatsText { color: var(--th-text-muted) !important; }
/* Override JS-injected modeColor green / red */
[data-theme="dark"] #scheduleStats [style*="color: #27ae60"],
[data-theme="dark"] #scheduleStats [style*="color:#27ae60"] { color: #34d399 !important; }
[data-theme="dark"] #scheduleStats [style*="color: #e74c3c"],
[data-theme="dark"] #scheduleStats [style*="color:#e74c3c"] { color: #f87171 !important; }

/* ─── SyncMode container (inline border + colors) ─── */
[data-theme="dark"] #syncModeContainer {
  border-top-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] #syncModeContainer [style*="color: #27ae60"],
[data-theme="dark"] #syncModeContainer [style*="color:#27ae60"] { color: #34d399 !important; }
[data-theme="dark"] #syncModeContainer [style*="color: #e74c3c"],
[data-theme="dark"] #syncModeContainer [style*="color:#e74c3c"] { color: #f87171 !important; }
[data-theme="dark"] #syncModeContainer [style*="color: #999"],
[data-theme="dark"] #syncModeContainer [style*="color:#999"] { color: var(--th-text-subtle) !important; }

/* ─── Schedule toolbar dropdown (dark) ─── */
[data-theme="dark"] .schedule-menu-dropdown {
  background: var(--th-surface, #1e293b) !important;
  border-color: var(--th-border, rgba(255,255,255,.1)) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .schedule-menu-item {
  color: var(--th-text, #e2e8f0) !important;
}
[data-theme="dark"] .schedule-menu-item:hover {
  background: rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .schedule-menu-divider {
  background: var(--th-border, rgba(255,255,255,.1)) !important;
}

/* ─── KeepLive Toolbar (inline gradient override) ─── */
[data-theme="dark"] #keepLiveToolbar {
  background: rgba(217,119,6,.12) !important;
  border-color: rgba(245,158,11,.3) !important;
}
[data-theme="dark"] #keepLiveToolbar * { color: var(--th-text) !important; }
[data-theme="dark"] #keepLiveToolbar .btn,
[data-theme="dark"] #keepLiveToolbar button { color: #ffffff !important; }

/* ─── Schedule detail modal (inline <style> in JS template) ─── */
[data-theme="dark"] .detail-section {
  border-bottom-color: var(--th-border) !important;
}
[data-theme="dark"] .detail-section h4 { color: var(--th-text) !important; }
[data-theme="dark"] .detail-item {
  background: var(--th-surface-2) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .detail-item label { color: var(--th-text-muted) !important; }
[data-theme="dark"] .detail-item span  { color: var(--th-text) !important; }
[data-theme="dark"] .detail-item a     { color: #60a5fa !important; }

/* ─── Delete details panel + warning notices in modals ─── */
[data-theme="dark"] .delete-details {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .delete-details [style*="color: #333"],
[data-theme="dark"] .delete-details [style*="color:#333"] { color: var(--th-text) !important; }
[data-theme="dark"] .delete-details [style*="color: #666"],
[data-theme="dark"] .delete-details [style*="color:#666"] { color: var(--th-text-muted) !important; }
/* #fff3cd warning notice inside delete dialogs */
[data-theme="dark"] .delete-details [style*="background: #fff3cd"],
[data-theme="dark"] .delete-details [style*="background:#fff3cd"] {
  background: rgba(217,119,6,.15) !important;
  border-radius: 6px;
}
[data-theme="dark"] .delete-details [style*="color: #856404"],
[data-theme="dark"] .delete-details [style*="color:#856404"] { color: #fbbf24 !important; }

/* ─── schedule-info-summary + sheetPreviewInfo (inline #f8f9fa bg) ─── */
[data-theme="dark"] .schedule-info-summary {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] #sheetPreviewInfo {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .sheet-preview-stats { color: var(--th-text-muted) !important; }
[data-theme="dark"] .sheet-preview-stats [style*="color: #666"],
[data-theme="dark"] .sheet-preview-stats [style*="color:#666"] { color: var(--th-text-muted) !important; }

/* ─── Global inline-style color overrides (JS-rendered HTML) ─── */
/* These use attribute selectors to catch hardcoded colors injected via JS */
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
  background: var(--th-surface-2) !important;
}
[data-theme="dark"] [style*="color: #666"]:not(button):not(.btn),
[data-theme="dark"] [style*="color:#666"]:not(button):not(.btn) {
  color: var(--th-text-muted) !important;
}
[data-theme="dark"] [style*="color: #333"]:not(button):not(.btn),
[data-theme="dark"] [style*="color:#333"]:not(button):not(.btn) {
  color: var(--th-text) !important;
}
[data-theme="dark"] [style*="color: #999"]:not(button):not(.btn),
[data-theme="dark"] [style*="color:#999"]:not(button):not(.btn) {
  color: var(--th-text-subtle) !important;
}
[data-theme="dark"] [style*="border-bottom: 1px solid #eee"],
[data-theme="dark"] [style*="border-top: 1px dashed #ccc"] {
  border-color: var(--th-border) !important;
}

/* ─── Sheet preview table (hardcoded #f8f9fa in CSS class) ─── */
[data-theme="dark"] .sheet-preview-table th {
  background: var(--th-surface-2) !important;
  color: var(--th-text-muted) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .sheet-preview-table tbody tr:hover { background: var(--th-surface-2) !important; }
[data-theme="dark"] .sheet-preview-table .row-num {
  background: var(--th-surface-3) !important;
  color: var(--th-text-subtle) !important;
}
[data-theme="dark"] .sheet-preview-table td { border-color: var(--th-border-light) !important; color: var(--th-text) !important; }

/* ─── Google btn hover ─── */
[data-theme="dark"] .btn-google:hover,
[data-theme="dark"] .btn-google-sm:hover {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
}

/* ─── Sheet legend + loading ─── */
[data-theme="dark"] .sheet-legend {
  background: var(--th-surface-2) !important;
  border-left-color: var(--primary) !important;
}
[data-theme="dark"] .sheet-legend .legend-title { color: var(--th-text) !important; }
[data-theme="dark"] #refreshSheetPreview:hover { background-color: var(--th-surface-2) !important; }
[data-theme="dark"] .google-sheet-loading { background: var(--th-surface-2) !important; }
[data-theme="dark"] .google-sheet-loading .spinner { border-color: var(--th-border) !important; border-top-color: var(--primary) !important; }

/* ─── Inline background: #fff on container divs (not inputs — those are covered above) ─── */
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"] {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}

/* ─── SyncMode info panel (outside scheduleStats, e.g. line 4081+) ─── */
[data-theme="dark"] [style*="color: #666"] ul,
[data-theme="dark"] [style*="color: #666"] li { color: var(--th-text-muted) !important; }

/* ─── Room-Config Modal pills + action bar ─── */
[data-theme="dark"] .rcm-pill {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text-muted) !important;
}
[data-theme="dark"] .rcm-pill:hover { background: rgba(99,102,241,.12) !important; border-color: #818cf8 !important; color: #a5b4fc !important; }
[data-theme="dark"] .rcm-pill--active { background: rgba(99,102,241,.18) !important; border-color: #6366f1 !important; color: #a5b4fc !important; }
[data-theme="dark"] .rcm-action-bar  { background: var(--th-surface-2) !important; border-color: var(--th-border) !important; }
[data-theme="dark"] .rcm-action-name { color: var(--th-text) !important; }

/* ─── RC-badge mode (white bg + purple text) ─── */
[data-theme="dark"] .rc-badge-mode           { background: rgba(109,40,217,.2) !important; color: #c4b5fd !important; }
[data-theme="dark"] .rc-badge-mode.mode-auto { background: rgba(217,119,6,.2) !important; color: #fbbf24 !important; }

/* ─── Auto-apply label container ─── */
[data-theme="dark"] .auto-apply-label {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* ─── Pic detail code snippet ─── */
[data-theme="dark"] .pic-detail-code code {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: #818cf8 !important;
}

/* ─── Pic lightbox close btn ─── */
[data-theme="dark"] .pic-lightbox-close {
  background: var(--th-surface-2) !important;
  color: var(--th-text-muted) !important;
  border: 1px solid var(--th-border) !important;
}

/* ─── Placeholder btn (in template editor) ─── */
[data-theme="dark"] .placeholder-btn {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text-muted) !important;
}
[data-theme="dark"] .placeholder-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ─── Rich editor wrapper + TinyMCE ─── */
[data-theme="dark"] .rich-editor-wrapper {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .rich-editor-wrapper .tox-toolbar__primary { background: var(--th-surface-2) !important; }

/* ─── Tag input + image-link hover ─── */
[data-theme="dark"] .tag-input-wrapper {
  background: var(--th-input-bg) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .image-link-item:hover {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
}

/* ─── Btn overlay hover ─── */
[data-theme="dark"] .btn-overlay:hover {
  background: var(--th-surface) !important;
  color: var(--th-text) !important;
}

/* ─── FL modal (fullscreen/event-create) ─── */
[data-theme="dark"] .fl-modal .modal-body,
[data-theme="dark"] .fl-modal .modal-footer {
  background: var(--th-surface) !important;
  border-color: var(--th-border) !important;
}
[data-theme="dark"] .fl-section,
[data-theme="dark"] .fl-input,
[data-theme="dark"] .fl-textarea,
[data-theme="dark"] .fl-select {
  background: var(--th-input-bg) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
[data-theme="dark"] .fl-input:hover,
[data-theme="dark"] .fl-textarea:hover,
[data-theme="dark"] .fl-select:hover { border-color: var(--primary) !important; }
[data-theme="dark"] .fl-image-title-input,
[data-theme="dark"] .fl-image-title-input input {
  background: var(--th-input-bg) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* ─── Google login btn ─── */
[data-theme="dark"] .btn-google-login,
[data-theme="dark"] .btn-google-sm {
  background: var(--th-surface-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* ─── Multi-tag container ─── */
[data-theme="dark"] .multi-tag-container {
  background: var(--th-input-bg) !important;
  border-color: var(--th-border) !important;
}

/* ─── Mirrors for auto mode ─── */
@media (prefers-color-scheme: dark) {
  /* Warnings panel */
  [data-theme="auto"] .warnings-panel { background: rgba(217,119,6,.08) !important; border-color: rgba(245,158,11,.25) !important; }
  [data-theme="auto"] .warnings-panel.warnings-panel-ok { background: rgba(16,185,129,.08) !important; border-color: rgba(16,185,129,.25) !important; }
  [data-theme="auto"] .warnings-panel-ok-content { color: #34d399 !important; }
  [data-theme="auto"] .warnings-panel-header { background: rgba(217,119,6,.12) !important; border-bottom-color: rgba(245,158,11,.2) !important; }
  [data-theme="auto"] .warnings-panel-title { color: #fbbf24 !important; }
  [data-theme="auto"] .warnings-panel-toggle { border-color: rgba(245,158,11,.3) !important; color: #fbbf24 !important; }
  [data-theme="auto"] .warn-type-overlap { color: #fbbf24 !important; background: rgba(217,119,6,.12) !important; }
  [data-theme="auto"] .warn-type-host    { color: #f87171 !important; background: rgba(239,68,68,.1) !important; }
  [data-theme="auto"] .warn-type-cross   { color: #c4b5fd !important; background: rgba(139,92,246,.1) !important; }
  [data-theme="auto"] .warn-type-missing { color: #94a3b8 !important; background: rgba(148,163,184,.08) !important; }
  [data-theme="auto"] .so-card[data-conflict-type] { background: color-mix(in srgb, var(--cf-accent,#ef4444) 12%, var(--th-surface,#1e293b)) !important; }
  [data-theme="auto"] .so-card[data-conflict-type]:hover { background: color-mix(in srgb, var(--cf-accent,#ef4444) 18%, var(--th-surface,#1e293b)) !important; }
  [data-theme="auto"] .warn-goto-btn { background: rgba(255,255,255,.07) !important; color: var(--th-text-muted) !important; }
  [data-theme="auto"] .warn-item:hover .warn-goto-btn,
  [data-theme="auto"] .warn-item-single:hover .warn-goto-btn { background: rgba(96,165,250,.15) !important; color: #60a5fa !important; }
  [data-theme="auto"] .so-cbadge--overlap { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,.4) !important; }
  [data-theme="auto"] .so-cbadge--host    { background: rgba(239,68,68,.15) !important;  color: #f87171 !important; border-color: rgba(239,68,68,.4) !important; }
  [data-theme="auto"] .so-cbadge--cross   { background: rgba(139,92,246,.15) !important; color: #c4b5fd !important; border-color: rgba(139,92,246,.4) !important; }
  [data-theme="auto"] .so-cbadge--missing { background: rgba(148,163,184,.1) !important; color: #94a3b8 !important; border-color: rgba(148,163,184,.3) !important; }
  /* Schedule stats + syncMode */
  [data-theme="auto"] #scheduleStats { background: var(--th-surface-2) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; }
  [data-theme="auto"] #scheduleStatsText { color: var(--th-text-muted) !important; }
  [data-theme="auto"] #syncModeContainer { border-top-color: var(--th-border) !important; color: var(--th-text) !important; }
  [data-theme="auto"] #syncModeContainer [style*="color: #27ae60"] { color: #34d399 !important; }
  [data-theme="auto"] #syncModeContainer [style*="color: #e74c3c"] { color: #f87171 !important; }
  [data-theme="auto"] #syncModeContainer [style*="color: #999"]    { color: var(--th-text-subtle) !important; }
  /* KeepLive toolbar */
  [data-theme="auto"] #keepLiveToolbar { background: rgba(217,119,6,.12) !important; border-color: rgba(245,158,11,.3) !important; }
  [data-theme="auto"] #keepLiveToolbar *      { color: var(--th-text) !important; }
  [data-theme="auto"] #keepLiveToolbar .btn,
  [data-theme="auto"] #keepLiveToolbar button { color: #ffffff !important; }
  /* Detail modal */
  [data-theme="auto"] .detail-section { border-bottom-color: var(--th-border) !important; }
  [data-theme="auto"] .detail-item { background: var(--th-surface-2) !important; color: var(--th-text) !important; }
  [data-theme="auto"] .detail-item label { color: var(--th-text-muted) !important; }
  [data-theme="auto"] .detail-item span  { color: var(--th-text) !important; }
  /* Delete details */
  [data-theme="auto"] .delete-details { background: var(--th-surface-2) !important; color: var(--th-text) !important; }
  /* Global inline overrides */
  [data-theme="auto"] [style*="background: #f8f9fa"],
  [data-theme="auto"] [style*="background:#f8f9fa"] { background: var(--th-surface-2) !important; }
  [data-theme="auto"] [style*="color: #666"]:not(button):not(.btn),
  [data-theme="auto"] [style*="color:#666"]:not(button):not(.btn) { color: var(--th-text-muted) !important; }
  [data-theme="auto"] [style*="color: #333"]:not(button):not(.btn),
  [data-theme="auto"] [style*="color:#333"]:not(button):not(.btn) { color: var(--th-text) !important; }
  [data-theme="auto"] [style*="color: #999"]:not(button):not(.btn),
  [data-theme="auto"] [style*="color:#999"]:not(button):not(.btn) { color: var(--th-text-subtle) !important; }
  [data-theme="auto"] [style*="border-bottom: 1px solid #eee"],
  [data-theme="auto"] [style*="border-top: 1px dashed #ccc"] { border-color: var(--th-border) !important; }
  /* schedule-info-summary */
  [data-theme="auto"] .schedule-info-summary { background: var(--th-surface-2) !important; color: var(--th-text) !important; }
  [data-theme="auto"] #sheetPreviewInfo { background: var(--th-surface-2) !important; color: var(--th-text) !important; }
  /* Inline div background: #fff */
  [data-theme="auto"] div[style*="background: #fff"],
  [data-theme="auto"] div[style*="background:#fff"] { background: var(--th-surface) !important; border-color: var(--th-border) !important; }
}



/* ── Ngăn iOS Safari tự zoom khi focus vào input/select/textarea ─────────── */
/* iOS zoom khi font-size < 16px — ép 16px CHỈ trên thiết bị cảm ứng.
   ⚠ Trước 27/09/2026 điều kiện là `(-webkit-min-device-pixel-ratio: 1)` → khớp MỌI màn hình ⇒ desktop cũng
   bị ép 16px !important: ô ngày/giờ/tìm kiếm/select to lệch hẳn so với nút bên cạnh (user báo ô "đến 02:00").
   (hover:none)+(pointer:coarse) = điện thoại/máy tính bảng — đúng nơi iOS zoom. */
@media (hover: none) and (pointer: coarse) {
  input, input[type="text"], input[type="url"], input[type="email"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="tel"], input[type="date"], input[type="time"],
  select, textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Filter Link — Background Image Picker (Premium)
   ═══════════════════════════════════════════════════════════════ */
.fl-bg-field { padding: 14px; background: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%);
  border: 1px solid rgba(139, 92, 246, 0.15); border-radius: 14px; }
.fl-bg-label { display: flex !important; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px !important; font-size: 0.85rem !important; }
.fl-bg-label-icon { width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3); flex-shrink: 0; }
.fl-bg-label-hint { font-size: 0.7rem; font-weight: 500; color: #94a3b8;
  margin-left: auto; font-style: italic; }

/* Dropzone — aspect-ratio 16:9, max-width 480px để không bị kéo dài */
.fl-bg-dropzone {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 14px;
  border: 2px dashed rgba(139, 92, 246, 0.35);
  background: linear-gradient(135deg, #fafafa, #f5f3ff);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .2s, background-color .25s, box-shadow .25s, transform .15s;
  overflow: hidden;
}
.fl-bg-dropzone:hover { border-color: #8b5cf6; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.12); }
.fl-bg-dropzone.drag-over {
  border-color: #6366f1; border-style: solid;
  background-color: #eef2ff !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 28px rgba(99, 102, 241, 0.2);
  transform: scale(1.005);
}
.fl-bg-dropzone.has-image { border-style: solid; border-color: rgba(139, 92, 246, 0.4); }

/* Meta chips: kích thước + dung lượng */
.fl-bg-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 10px;
  font-size: 0.72rem; color: #64748b; font-weight: 600;
}
.fl-bg-meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.18);
  color: #6d28d9;
  padding: 4px 10px; border-radius: 99px;
}
.fl-bg-meta-chip i { font-size: 0.7rem; }

/* Lightbox fullscreen */
.fl-bg-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: fl-lbox-fade .2s ease;
}
@keyframes fl-lbox-fade { from { opacity: 0; } to { opacity: 1; } }
.fl-bg-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: fl-lbox-scale .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fl-lbox-scale {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.fl-bg-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
  cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; backdrop-filter: blur(10px);
}
.fl-bg-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
  transform: rotate(90deg) scale(1.05);
}
.fl-bg-lightbox-info {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 600;
  backdrop-filter: blur(10px);
  display: flex; gap: 12px;
}

/* Empty state */
.fl-bg-empty { text-align: center; padding: 24px; color: #64748b; pointer-events: none; }
.fl-bg-empty-icon { font-size: 2.4rem;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 10px; }
.fl-bg-empty-title { font-size: 0.92rem; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.fl-bg-empty-sub { font-size: 0.78rem; color: #64748b; margin-bottom: 8px; }
.fl-bg-empty-link { color: #8b5cf6; font-weight: 700; text-decoration: underline; }
.fl-bg-empty-meta { font-size: 0.68rem; color: #94a3b8; letter-spacing: 0.02em;
  background: rgba(255,255,255,0.7); padding: 3px 10px; border-radius: 12px; display: inline-block; }

/* Overlay (when has image) */
.fl-bg-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 10px; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.45) 100%);
  opacity: 0; transition: opacity .2s; pointer-events: none; }
.fl-bg-dropzone.has-image:hover .fl-bg-overlay { opacity: 1; pointer-events: auto; }
.fl-bg-overlay-actions { display: flex; gap: 8px; }
.fl-bg-action { width: 36px; height: 36px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.95); color: #475569; font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: all .15s; }
.fl-bg-action:hover { transform: scale(1.08); color: #6366f1; }
.fl-bg-action-danger:hover { color: #dc2626; background: #fef2f2; }

/* Progress overlay */
.fl-bg-progress { position: absolute; inset: 0; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #6366f1; z-index: 5; border-radius: 14px; }
.fl-bg-progress-spinner { font-size: 2rem; }
.fl-bg-progress-text { font-size: 0.82rem; font-weight: 600; }

/* Tools row */
.fl-bg-tools { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.fl-bg-url-wrap { flex: 1; min-width: 200px; position: relative; }
.fl-bg-url-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 0.78rem; }
.fl-bg-url-input { width: 100%; padding: 9px 12px 9px 34px; border: 1.5px solid rgba(139,92,246,0.2);
  border-radius: 10px; font-size: 0.78rem; background: #fff; color: #1e293b;
  box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.fl-bg-url-input:focus { outline: none; border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12); }

/* Presets */
.fl-bg-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fl-bg-presets-label { font-size: 0.7rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.fl-bg-preset { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1px rgba(139,92,246,0.15);
  transition: transform .15s, box-shadow .2s; padding: 0; }
.fl-bg-preset:hover { transform: scale(1.12);
  box-shadow: 0 4px 10px rgba(139,92,246,0.3), 0 0 0 2px rgba(139,92,246,0.5); }
.fl-bg-preset.active {
  box-shadow: 0 4px 10px rgba(99,102,241,0.4), 0 0 0 3px #6366f1;
  transform: scale(1.08);
}

/* Responsive */
@media (max-width: 600px) {
  .fl-bg-tools { flex-direction: column; align-items: stretch; }
  .fl-bg-presets { justify-content: center; }
  .fl-bg-label-hint { width: 100%; margin-left: 0; }
}

/* Heavy frost toggle — switch style elegant */
.fl-bg-frost-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: 0 0 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(245,243,255,0.5));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.fl-bg-frost-toggle:hover {
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 4px 12px rgba(139,92,246,0.08);
}
.fl-bg-frost-toggle input[type="checkbox"] { display: none; }

.fl-bg-frost-track {
  position: relative; flex-shrink: 0;
  width: 44px; height: 24px;
  background: #cbd5e1;
  border-radius: 99px;
  transition: background .25s ease;
}
.fl-bg-frost-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fl-bg-frost-toggle input:checked ~ .fl-bg-frost-track {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}
.fl-bg-frost-toggle input:checked ~ .fl-bg-frost-track .fl-bg-frost-thumb {
  transform: translateX(20px);
}

.fl-bg-frost-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fl-bg-frost-text strong { font-size: 0.82rem; font-weight: 700; color: #1e293b; }
.fl-bg-frost-text small { font-size: 0.7rem; color: #64748b; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   Conflict Menu — Popup liệt kê tất cả xung đột của 1 ca
   ═══════════════════════════════════════════════════════════════ */
.so-cf-menu {
  position: fixed;
  z-index: 99999;
  min-width: 320px;
  max-width: 440px;
  max-height: 70vh;
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22), 0 6px 20px rgba(99, 102, 241, 0.08);
  display: flex;
  flex-direction: column;
  animation: socfMenuIn .18s cubic-bezier(.34, 1.4, .64, 1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
@keyframes socfMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.so-cf-menu-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fef2f2, #fff7ed);
  border-bottom: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 14px 14px 0 0;
  font-size: 0.82rem; font-weight: 700; color: #b91c1c;
}
.so-cf-menu-header i { font-size: 0.85rem; }
.so-cf-menu-close {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.05); border: none;
  width: 24px; height: 24px; border-radius: 6px;
  cursor: pointer; font-size: 1.15rem; line-height: 1;
  color: #64748b; transition: all .15s;
}
.so-cf-menu-close:hover { background: rgba(220, 38, 38, 0.12); color: #b91c1c; transform: rotate(90deg); }

.so-cf-menu-body {
  overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}

.so-cf-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.so-cf-menu-item:hover {
  background: linear-gradient(135deg, #eef2ff, #f0fdf4);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateX(2px);
}

.so-cf-menu-dot {
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.so-cf-menu-info { flex: 1; min-width: 0; }
.so-cf-menu-room {
  font-size: 0.83rem; font-weight: 800; color: #0f172a;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-cf-menu-room i { color: #f59e0b; font-size: 0.74rem; flex-shrink: 0; }
.so-cf-menu-label {
  font-size: 0.72rem; font-weight: 600; color: #475569;
  display: flex; align-items: center; gap: 5px;
}
.so-cf-menu-label i { color: #6366f1; font-size: 0.68rem; }
.so-cf-menu-other {
  font-size: 0.72rem; color: #64748b;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-cf-menu-goto {
  flex-shrink: 0;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; border-radius: 8px;
  cursor: pointer; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  transition: transform .15s, box-shadow .15s;
}
.so-cf-menu-goto:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45); }

/* ══ TỔNG HỢP LỊCH — tối ưu card + trạng thái HỦY ══════════════════════════ */
/* Chống tràn: card không cho nội dung đẩy rộng, mọi text dài đều cắt gọn */
.so-card { overflow: hidden; min-width: 0; }
.so-card-head { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; min-width: 0; }
.so-card-time { white-space: nowrap; }
.so-card-host { min-width: 0; flex-wrap: wrap; }
/* Tên host cắt ellipsis — nhưng CHỪA chip mã/ảnh (.dash-host-chips) khỏi bị cắt */
.so-card-host > span:not(.so-card-avatar):not(.dash-host-chips) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-card-host > .dash-host-chips { flex-shrink: 0; }
/* Tiêu đề: tối đa 2 dòng rồi "…", không cắt giữa từ như trước */
.so-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: normal; overflow-wrap: anywhere;
}
.so-card-link { flex-shrink: 0; }

/* ═══ Ghi chú card: clamp 2 dòng + nút chi tiết/rút gọn (thay cho cắt 1 dòng) ═══ */
.so-card-note-inline {
  display: flex !important; align-items: flex-start; gap: 5px; flex-wrap: wrap;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  background: linear-gradient(0deg, rgba(124,58,237,.06), rgba(124,58,237,.06)), var(--white, #fff);
  border-left: 3px solid #a78bfa; border-radius: 0 7px 7px 0;
  padding: 5px 8px; margin-top: 5px; color: #6d28d9; line-height: 1.45;
}
.so-note-ic { flex: none; margin-top: 2px; font-size: .62rem; opacity: .8; }
.so-note-text { flex: 1 1 60%; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.so-card-note-inline.expanded .so-note-text { -webkit-line-clamp: unset; overflow: visible; }
.so-note-toggle {
  flex: none; margin-left: auto; border: none; background: rgba(124,58,237,.13); color: #7c3aed;
  font-size: .6rem; font-weight: 800; padding: 1px 7px; border-radius: 20px; cursor: pointer;
  font-family: inherit; letter-spacing: .01em; transition: background .12s, color .12s; text-transform: uppercase;
}
.so-note-toggle:hover { background: rgba(124,58,237,.24); color: #5b21b6; }
[data-theme="dark"] .so-card-note-inline { background: rgba(139,92,246,.13); border-left-color: #8b5cf6; color: #c4b5fd; }
[data-theme="dark"] .so-note-toggle { background: rgba(139,92,246,.25); color: #c4b5fd; }
[data-theme="dark"] .so-note-toggle:hover { background: rgba(139,92,246,.38); color: #ddd6fe; }

/* ═══ Card ca — tinh chỉnh cho gọn & chuyên nghiệp hơn (giữ nguyên cấu trúc) ═══ */
.so-card { transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.so-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.1); }
[data-theme="dark"] .so-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.so-card-time { letter-spacing: -.01em; }
.so-card-host { align-items: center; }
@media (max-width: 480px) {
  .so-card-note-inline { font-size: .68rem; }
  .so-note-toggle { font-size: .58rem; padding: 1px 6px; }
}

/* Ca đã xác nhận HỦY — ưu tiên hiển thị hơn mọi trạng thái thời gian */
.so-card--cancelled {
  border-left: 3px solid #dc2626 !important;
  background: #fef2f2 !important;
  opacity: 0.78;
}
.so-card--cancelled:hover { background: #fee2e2 !important; opacity: 1; }
.so-card--cancelled .so-card-time { color: #b91c1c; }
.so-card--cancelled .so-card-title,
.so-card--cancelled .so-card-host > span:not(.so-card-avatar) { text-decoration: line-through; }
.so-cbadge--cancel {
  background: #dc2626; color: #fff; border: none;
  border-radius: 6px; padding: 1px 6px;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}

/* ── Tổng hợp lịch (view BẢNG) — ca đã hủy ── */
.so-badge-cancel {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
  white-space: nowrap;
}
.so-schedule-row.so-cancelled-row > td {
  background: #fef2f2 !important;
  border-left-color: #dc2626;
}
.so-schedule-row.so-cancelled-row:hover > td { background: #fee2e2 !important; }
.so-cancelled-row .so-time-slot { color: #b91c1c; }
.so-cancelled-row .so-title-cell,
.so-cancelled-row .so-cart-cell,
.so-cancelled-row .so-host-cell .so-host-name { text-decoration: line-through; opacity: 0.72; }

/* ══ NHẬT KÝ HỆ THỐNG — làm rõ thông tin + chống tràn ═════════════════════ */
.log-summary {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 10px 14px; margin-bottom: 10px;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
  border: 1px solid #e0e7ff; border-radius: 10px;
  font-size: 0.78rem; color: #475569;
}
.log-summary-count { font-weight: 700; color: #4338ca; }
.log-summary-cap { color: #64748b; }

/* Card log: không cho nội dung dài đẩy rộng */
.log-entry-v2 { overflow: hidden; }
.log-entry-v2 .log-body { min-width: 0; }
.log-msg { overflow-wrap: anywhere; }

/* Chip chi tiết: dàn đều, cắt gọn, không tràn hàng */
.log-details-wrap {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-width: 100%;
}
.log-detail-item {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px;
  padding: 2px 8px; font-size: 0.72rem; color: #475569;
}
.log-detail-item strong { color: #334155; font-weight: 700; }

/* Modal xóa nhật ký */
.lg-clear-wrap { display: flex; flex-direction: column; gap: 8px; }
.lg-clear-note { margin: 0 0 4px; font-size: 0.82rem; color: #64748b; }
.lg-clear-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; transition: 0.15s; background: #fff;
}
.lg-clear-opt:hover { border-color: #a5b4fc; background: #f8faff; }
.lg-clear-opt input { margin-top: 3px; flex: 0 0 auto; }
.lg-clear-opt input:checked + span b { color: #4338ca; }
.lg-clear-opt:has(input:checked) { border-color: #6366f1; background: #eef2ff; }
.lg-clear-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-clear-opt b { font-size: 0.85rem; color: #0f172a; }
.lg-clear-opt small { font-size: 0.74rem; color: #64748b; }

/* ── Fill Sheet: ĐỐI SOÁT sheet ↔ hệ thống ── */
.sw-rec-form { display:flex; flex-direction:column; gap:12px; }
.sw-rec-note { font-size:0.82rem; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:9px; padding:9px 12px; }
.sw-rec-row { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.sw-rec-row label { display:flex; flex-direction:column; gap:4px; font-size:0.78rem; font-weight:700; color:#334155; }
.sw-rec-row input[type=date] { padding:7px 10px; border:1.5px solid #e2e8f0; border-radius:9px; font-size:0.85rem; }
.sw-rec-loading, .sw-rec-empty { padding:18px; text-align:center; color:#64748b; font-size:0.86rem; }
.sw-rec-warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:9px; padding:8px 12px; font-size:0.8rem; margin:8px 0; }
.sw-rec-sum { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 16px; border-radius:12px; margin:10px 0; font-size:0.9rem; }
.sw-rec-sum b { font-size:0.95rem; }
.sw-rec-sum span { font-size:0.82rem; color:#475569; }
.sw-rec-sum-ok { background:#f0fdf4; border:1.5px solid #86efac; }
.sw-rec-sum-mismatch { background:#fef2f2; border:1.5px solid #fecaca; }
.sw-rec-day { border:1px solid #e2e8f0; border-radius:12px; margin:0 0 10px; overflow:hidden; }
.sw-rec-day-h { background:#f1f5f9; padding:9px 14px; font-size:0.84rem; font-weight:700; color:#334155; }
.sw-rec-room { padding:8px 14px; border-top:1px solid #f1f5f9; }
.sw-rec-room-h { font-size:0.82rem; font-weight:700; color:#0f172a; margin-bottom:5px; }
.sw-rec-iss { font-size:0.78rem; color:#475569; padding:4px 0 4px 8px; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.sw-rec-iss-tag { font-weight:800; font-size:0.68rem; padding:1px 7px; border-radius:6px; white-space:nowrap; }
.sw-rec-iss-miss .sw-rec-iss-tag  { background:#fef3c7; color:#92400e; }
.sw-rec-iss-extra .sw-rec-iss-tag { background:#dbeafe; color:#1e40af; }
.sw-rec-iss-time .sw-rec-iss-tag  { background:#fee2e2; color:#b91c1c; }
.sw-rec-iss-warn { background:#fff7ed; border:1px solid #fdba74; border-radius:8px; padding:6px 10px; margin:4px 0; color:#9a3412; }
.sw-rec-iss-warn .sw-rec-iss-tag  { background:#ea580c; color:#fff; }
.sw-rec-allok { padding:8px 14px; border-top:1px solid #f1f5f9; color:#16a34a; font-size:0.8rem; font-weight:700; }

/* ── Trang Đối soát lịch (dedicated) — modern ── */
.sw-rec-page-loading { padding:60px 20px; text-align:center; color:#64748b; font-size:0.9rem; }
.sw-rec-page-loading i { font-size:1.6rem; color:#6366f1; margin-bottom:10px; display:block; }

/* ═══ Đối soát lịch — redesign (presets · stats · toolbar · report) ═══ */
/* Preset khoảng ngày nhanh */
.sw-rec-presets { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.sw-rec-presets-lbl { font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:5px; }
.sw-rec-presets-lbl i { color:#f59e0b; }
.sw-rec-preset { font-size:0.78rem; font-weight:700; color:#475569; background:#fff; border:1.5px solid #e2e8f0; border-radius:999px; padding:5px 13px; cursor:pointer; transition:all .15s ease; }
.sw-rec-preset:hover { border-color:#c7d2fe; color:#4338ca; background:#f5f7ff; }
.sw-rec-preset:active { transform:scale(.97); }
.sw-rec-preset.active { border-color:transparent; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; box-shadow:0 3px 10px -3px rgba(99,102,241,.5); }
.sw-rec-preset:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.2); }

/* Số liệu dùng tabular-nums cho thẳng hàng */
.sw-rec-report { font-variant-numeric:tabular-nums; }

/* Verdict banner */
.sw-rec-verdict { display:flex; align-items:center; gap:13px; padding:14px 18px; border-radius:14px; margin:2px 0 14px; }
.sw-rec-verdict-ok  { background:linear-gradient(135deg,#ecfdf5,#f0fdf4); border:1.5px solid #86efac; }
.sw-rec-verdict-bad { background:linear-gradient(135deg,#fef2f2,#fff1f2); border:1.5px solid #fca5a5; }
.sw-rec-verdict-ic { flex:0 0 auto; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:1.25rem; color:#fff; }
.sw-rec-verdict-ok  .sw-rec-verdict-ic { background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 5px 14px -4px rgba(16,185,129,.6); }
.sw-rec-verdict-bad .sw-rec-verdict-ic { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 5px 14px -4px rgba(239,68,68,.55); }
.sw-rec-verdict-tx { display:flex; flex-direction:column; gap:1px; }
.sw-rec-verdict-tx b { font-size:1.02rem; font-weight:800; letter-spacing:-.01em; color:#0f172a; }
.sw-rec-verdict-tx span { font-size:0.78rem; color:#64748b; font-weight:600; }

/* Stat tiles */
.sw-rec-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.sw-rec-stat { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:12px 14px; border-radius:13px; border:1.5px solid #eef0f4; background:#fff; text-align:left; font-family:inherit; }
button.sw-rec-stat { cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; }
button.sw-rec-stat:hover { transform:translateY(-2px); box-shadow:0 8px 20px -10px rgba(15,23,42,.3); }
button.sw-rec-stat:active { transform:translateY(0); }
button.sw-rec-stat:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.18); }
button.sw-rec-stat.active { border-width:2px; }
.sw-rec-stat b { font-size:1.6rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.sw-rec-stat span { font-size:0.72rem; font-weight:700; color:#64748b; display:inline-flex; align-items:center; gap:4px; }
.sw-rec-stat-ok    { background:#f0fdf4; border-color:#bbf7d0; } .sw-rec-stat-ok b { color:#059669; }
.sw-rec-stat-time  { background:#fef2f2; border-color:#fecaca; } .sw-rec-stat-time b { color:#dc2626; } .sw-rec-stat-time.active { border-color:#dc2626; }
.sw-rec-stat-miss  { background:#fffbeb; border-color:#fde68a; } .sw-rec-stat-miss b { color:#d97706; } .sw-rec-stat-miss.active { border-color:#d97706; }
.sw-rec-stat-extra { background:#eff6ff; border-color:#bfdbfe; } .sw-rec-stat-extra b { color:#2563eb; } .sw-rec-stat-extra.active { border-color:#2563eb; }

/* Toolbar: bộ lọc + xuất */
.sw-rec-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; position:sticky; top:0; z-index:5;
  padding:9px 0; margin-bottom:8px; background:linear-gradient(#fff 70%, rgba(255,255,255,0)); }
.sw-rec-filters { display:flex; gap:6px; flex-wrap:wrap; }
.sw-rec-fbtn { display:inline-flex; align-items:center; gap:6px; font-size:0.77rem; font-weight:700; color:#475569; background:#f1f5f9; border:1.5px solid transparent; border-radius:9px; padding:6px 11px; cursor:pointer; transition:all .15s ease; }
.sw-rec-fbtn b { font-weight:800; background:rgba(15,23,42,.08); border-radius:6px; padding:0 6px; font-size:0.72rem; }
.sw-rec-fbtn:hover { background:#e2e8f0; }
.sw-rec-fbtn.active { background:#eef2ff; border-color:#a5b4fc; color:#4338ca; }
.sw-rec-fbtn.active b { background:#c7d2fe; color:#3730a3; }
.sw-rec-fbtn:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.18); }
.sw-rec-exports { display:flex; gap:6px; }
.sw-rec-xbtn { display:inline-flex; align-items:center; gap:6px; font-size:0.77rem; font-weight:700; color:#334155; background:#fff; border:1.5px solid #e2e8f0; border-radius:9px; padding:6px 12px; cursor:pointer; transition:all .15s ease; }
.sw-rec-xbtn:hover:not(:disabled) { border-color:#818cf8; color:#4338ca; transform:translateY(-1px); }
.sw-rec-xbtn:active:not(:disabled) { transform:translateY(0); }
.sw-rec-xbtn:disabled { opacity:.45; cursor:not-allowed; }
.sw-rec-xbtn:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.18); }

/* Ngày / phòng / issue — hierarchy rõ ràng hơn */
.sw-rec-days { display:flex; flex-direction:column; gap:10px; }
.sw-rec-day { border:1px solid #e8ecf2; border-radius:13px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.sw-rec-day-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap; background:#f8fafc; padding:10px 14px; font-size:0.82rem; font-weight:700; color:#334155; border-bottom:1px solid #eef0f4; }
.sw-rec-day-h--err { background:#fef2f2; border-bottom-color:#fecaca; }
.sw-rec-day-date { display:inline-flex; align-items:center; gap:6px; font-weight:800; color:#0f172a; }
.sw-rec-day-date i { color:#8b5cf6; }
.sw-rec-day-tab { font-size:0.72rem; font-weight:700; color:#64748b; background:#eef2ff; border-radius:6px; padding:1px 8px; }
.sw-rec-day-badge { margin-left:auto; font-size:0.71rem; font-weight:800; border-radius:999px; padding:2px 10px; }
.sw-rec-day-badge.bad { background:#fee2e2; color:#b91c1c; }
.sw-rec-day-badge.ok  { background:#dcfce7; color:#15803d; }
.sw-rec-room { padding:9px 14px; border-top:1px solid #f4f6f9; }
.sw-rec-room:first-of-type { border-top:0; }
.sw-rec-room--err { background:#fffafa; }
.sw-rec-room-h { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:5px; }
.sw-rec-room-name { font-size:0.84rem; font-weight:800; color:#0f172a; }
.sw-rec-room-meta { font-size:0.72rem; font-weight:600; color:#94a3b8; }
.sw-rec-iss { font-size:0.78rem; color:#475569; padding:5px 0 5px 11px; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; border-left:3px solid transparent; margin-left:2px; }
.sw-rec-iss-time  { border-left-color:#ef4444; }
.sw-rec-iss-miss  { border-left-color:#f59e0b; }
.sw-rec-iss-extra { border-left-color:#3b82f6; }
.sw-rec-iss-tag { font-weight:800; font-size:0.67rem; padding:2px 8px; border-radius:6px; white-space:nowrap; flex:0 0 auto; }
.sw-rec-iss-miss  .sw-rec-iss-tag { background:#fef3c7; color:#92400e; }
.sw-rec-iss-extra .sw-rec-iss-tag { background:#dbeafe; color:#1e40af; }
.sw-rec-iss-time  .sw-rec-iss-tag { background:#fee2e2; color:#b91c1c; }
.sw-rec-iss-detail { line-height:1.5; }
.sw-rec-t { font-family:'Fira Code','SFMono-Regular','Consolas',monospace; font-weight:700; font-size:0.76rem; color:#0f172a; background:#f1f5f9; border-radius:5px; padding:0 5px; }
.sw-rec-keep { font-size:0.62rem; font-weight:900; color:#b45309; background:#fef3c7; border:1px solid #fcd34d; border-radius:5px; padding:0 5px; letter-spacing:.03em; }
.sw-rec-host { font-size:0.7rem; font-weight:700; color:#6d28d9; background:#f5f3ff; border-radius:5px; padding:0 5px; }
.sw-rec-err-tx { color:#dc2626; font-weight:700; }
.sw-rec-allok { padding:9px 14px; border-top:1px solid #f4f6f9; color:#16a34a; font-size:0.8rem; font-weight:700; display:flex; align-items:center; gap:6px; }
.sw-rec-allok i { color:#22c55e; }

/* Dark theme cho phần redesign */
[data-theme="dark"] .sw-rec-preset { background:#0f172a; border-color:#334155; color:#cbd5e1; }
[data-theme="dark"] .sw-rec-stat { background:#0f172a; border-color:#334155; }
[data-theme="dark"] .sw-rec-verdict-tx b { color:#f1f5f9; }
[data-theme="dark"] .sw-rec-toolbar { background:linear-gradient(#1e293b 70%, rgba(30,41,59,0)); }
[data-theme="dark"] .sw-rec-fbtn { background:#0f172a; color:#cbd5e1; }
[data-theme="dark"] .sw-rec-xbtn { background:#0f172a; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .sw-rec-day { border-color:#334155; }
[data-theme="dark"] .sw-rec-day-h { background:#0f172a; color:#e2e8f0; border-bottom-color:#334155; }
[data-theme="dark"] .sw-rec-day-date { color:#f1f5f9; }
[data-theme="dark"] .sw-rec-room { border-top-color:#243244; }
[data-theme="dark"] .sw-rec-room-name { color:#f1f5f9; }
[data-theme="dark"] .sw-rec-t { background:#243244; color:#e2e8f0; }

@media (max-width:640px) {
  .sw-rec-stats { grid-template-columns:repeat(2,1fr); }
  .sw-rec-toolbar { position:static; }
  .sw-rec-stat b { font-size:1.35rem; }
}

.sw-rec-hero { display:flex; align-items:center; gap:16px; padding:20px 24px; margin:0 0 18px;
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); border-radius:18px;
  box-shadow:0 10px 30px -8px rgba(99,102,241,.45); color:#fff; }
.sw-rec-hero-ic { flex:0 0 auto; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border-radius:14px; font-size:1.4rem; backdrop-filter:blur(6px); }
.sw-rec-hero-tx h2 { margin:0 0 3px; font-size:1.32rem; font-weight:800; letter-spacing:-.02em; }
.sw-rec-hero-tx p { margin:0; font-size:0.82rem; line-height:1.45; color:rgba(255,255,255,.9); }
.sw-rec-hero-tx b { color:#fff; font-weight:700; }

.sw-rec-wrap { max-width:1100px; display:flex; flex-direction:column; gap:16px; }
.sw-rec-card { background:#fff; border:1px solid #eef0f4; border-radius:16px; padding:18px 20px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.12); }
.sw-rec-card-h { display:flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:800; color:#0f172a; margin:0 0 14px; }
.sw-rec-card-h i { color:#6366f1; font-size:0.86rem; }

.sw-rec-cfgbar { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.sw-rec-fld { display:flex; flex-direction:column; gap:5px; font-size:0.72rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.03em; }
.sw-rec-fld select, .sw-rec-fld input[type=date], .sw-rec-fld input[type=text] { padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:10px;
  font-size:0.85rem; font-weight:600; color:#0f172a; background:#fff; transition:border-color .15s, box-shadow .15s; min-width:150px; }
.sw-rec-fld select:focus, .sw-rec-fld input[type=date]:focus, .sw-rec-fld input[type=text]:focus { outline:0; border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.sw-rec-fld input[type=text] { font-weight:500; text-transform:none; }
.sw-rec-filter { margin-top:14px; padding-top:14px; border-top:1px dashed #e2e8f0; display:flex; flex-direction:column; gap:8px; }
.sw-rec-filter .sw-rec-fld > span { display:inline-flex; align-items:center; gap:6px; }
.sw-rec-opt { text-transform:none; letter-spacing:0; font-weight:600; color:#94a3b8; }
.sw-rec-filter-hint { font-size:0.75rem; color:#64748b; line-height:1.5; display:flex; gap:7px; align-items:flex-start; }
.sw-rec-filter-hint i { color:#94a3b8; margin-top:2px; }
.sw-rec-filter-hint b { color:#475569; }
.sw-rec-url { flex:1; min-width:200px; align-self:center; font-size:0.78rem; color:#475569; font-weight:600;
  background:#f8fafc; border:1px solid #eef0f4; border-radius:10px; padding:8px 12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-rec-url i { color:#94a3b8; margin-right:4px; }
.sw-rec-url-err { color:#dc2626; }
.sw-rec-cfglink { display:inline-flex; align-items:center; gap:6px; align-self:center; font-size:0.78rem; font-weight:700;
  color:#4f46e5; text-decoration:none; padding:8px 12px; border:1.5px solid #c7d2fe; border-radius:10px;
  background:#eef2ff; transition:all .15s; white-space:nowrap; }
.sw-rec-cfglink:hover { background:#e0e7ff; border-color:#a5b4fc; transform:translateY(-1px); }

.sw-rec-rooms-h { display:flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:700; color:#475569; margin:16px 0 9px; }
.sw-rec-rooms-h i { color:#8b5cf6; }
.sw-rec-count { background:#eef2ff; color:#4f46e5; font-weight:800; font-size:0.72rem; border-radius:999px; padding:1px 9px; }
.sw-rec-rooms { display:flex; flex-wrap:wrap; gap:8px; }
.sw-rec-chip { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600;
  background:#f5f3ff; border:1px solid #ddd6fe; color:#5b21b6; border-radius:10px; padding:6px 11px; transition:all .15s; }
.sw-rec-chip:hover { border-color:#c4b5fd; box-shadow:0 2px 8px -3px rgba(139,92,246,.4); }
.sw-rec-chip i { font-size:0.72rem; color:#8b5cf6; }
.sw-rec-chip b { color:#6d28d9; font-weight:800; background:#ede9fe; border-radius:6px; padding:0 6px; }
/* Chip có tick chọn (Phòng đối soát) */
.sw-rec-chip-pick { cursor:pointer; user-select:none; opacity:.5; }
.sw-rec-chip-pick.on { opacity:1; }
.sw-rec-chip-pick:hover { border-color:#c4b5fd; }
.sw-rec-chip-pick input { width:15px; height:15px; accent-color:#8b5cf6; cursor:pointer; margin:0; }
.sw-rec-selall { display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:0.76rem; font-weight:700; color:#6d28d9; cursor:pointer; user-select:none; }
.sw-rec-selall input { width:15px; height:15px; accent-color:#8b5cf6; cursor:pointer; margin:0; }
.sw-rec-noroom { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#b45309;
  background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:11px 14px; }

.sw-rec-row { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.sw-rec-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; padding-bottom:2px; }
.sw-rec-switch input { position:absolute; opacity:0; width:0; height:0; }
.sw-rec-switch-tr { position:relative; width:40px; height:22px; background:#cbd5e1; border-radius:999px; transition:background .2s; flex:0 0 auto; }
.sw-rec-switch-tr::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.sw-rec-switch input:checked + .sw-rec-switch-tr { background:linear-gradient(135deg,#6366f1,#8b5cf6); }
.sw-rec-switch input:checked + .sw-rec-switch-tr::after { transform:translateX(18px); }
.sw-rec-switch input:focus-visible + .sw-rec-switch-tr { box-shadow:0 0 0 3px rgba(99,102,241,.2); }
.sw-rec-switch-lb { font-size:0.82rem; font-weight:700; color:#334155; }
.sw-rec-runbtn { display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:11px 22px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:0; border-radius:11px;
  font-size:0.88rem; font-weight:800; cursor:pointer; transition:transform .15s, box-shadow .15s;
  box-shadow:0 6px 18px -6px rgba(99,102,241,.55); }
.sw-rec-runbtn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(99,102,241,.6); }
.sw-rec-runbtn:active:not(:disabled) { transform:translateY(0); }
.sw-rec-runbtn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

.sw-rec-idle { text-align:center; padding:44px 20px; color:#94a3b8; }
.sw-rec-idle i { font-size:2.4rem; color:#cbd5e1; margin-bottom:12px; display:block; }
.sw-rec-idle-t { font-size:0.95rem; font-weight:800; color:#64748b; margin-bottom:4px; }
.sw-rec-idle-s { font-size:0.82rem; }
.sw-rec-idle-s b { color:#6366f1; }

/* Dark theme */
[data-theme="dark"] .sw-rec-card { background:#1e293b; border-color:#334155; box-shadow:0 8px 24px -14px rgba(0,0,0,.5); }
[data-theme="dark"] .sw-rec-card-h { color:#f1f5f9; }
[data-theme="dark"] .sw-rec-fld select, [data-theme="dark"] .sw-rec-fld input[type=date], [data-theme="dark"] .sw-rec-fld input[type=text] { background:#0f172a; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .sw-rec-filter { border-top-color:#334155; }
[data-theme="dark"] .sw-rec-url { background:#0f172a; border-color:#334155; color:#cbd5e1; }
[data-theme="dark"] .sw-rec-switch-lb { color:#cbd5e1; }
[data-theme="dark"] .sw-rec-chip { background:#312e5b; border-color:#4c1d95; color:#ddd6fe; }
[data-theme="dark"] .sw-rec-chip b { background:#4c1d95; color:#ede9fe; }

/* Responsive */
@media(max-width:767px){
  .sw-rec-hero { padding:16px 18px; gap:12px; border-radius:14px; }
  .sw-rec-hero-ic { width:44px; height:44px; font-size:1.2rem; }
  .sw-rec-hero-tx h2 { font-size:1.12rem; }
  .sw-rec-hero-tx p { font-size:0.76rem; }
  .sw-rec-card { padding:15px 15px; border-radius:14px; }
  .sw-rec-fld select, .sw-rec-fld input[type=date] { min-width:0; width:100%; }
  .sw-rec-fld { flex:1 1 140px; }
  .sw-rec-runbtn { width:100%; margin-left:0; justify-content:center; }
  .sw-rec-cfglink { width:100%; justify-content:center; }
}
@media(max-width:480px){
  .sw-rec-hero-tx p { display:none; }
  .sw-rec-row .sw-rec-fld { flex:1 1 100%; }
}

/* Badge KEEP trong report Đối soát */
.sw-rec-klb{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}
.sw-rec-klb.ok{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe}
.sw-rec-klb.off{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.sw-rec-room--ok{opacity:.85}
[data-theme="dark"] .sw-rec-klb.ok{background:#4c1d95;color:#ede9fe;border-color:#6d28d9}

/* Đối soát: hiện layout đang dùng + trạng thái lưu */
.sw-rec-layout{margin-top:12px;padding:8px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;font-size:.76rem;color:#475569;font-weight:600}
.sw-rec-layout i{color:#8b5cf6;margin-right:4px}
.sw-rec-layout b{color:#4f46e5}
.sw-rec-layout-note{color:#94a3b8;font-weight:500;margin-left:4px}
.sw-rec-saved{color:#16a34a;font-size:.68rem;font-weight:800}
[data-theme="dark"] .sw-rec-layout{background:#0f172a;border-color:#334155;color:#cbd5e1}

/* Đối soát: ca ĐÃ HỦY nhưng sheet vẫn còn */
.sw-rec-iss-cancel{background:#fef2f2;border-left:3px solid #dc2626;border-radius:8px;padding:6px 10px;margin:4px 0}
.sw-rec-iss-cancel .sw-rec-iss-tag{background:#dc2626;color:#fff}
.sw-rec-stat-cancel b{color:#dc2626}
.sw-rec-stat-cancel{border-color:#fecaca}
[data-theme="dark"] .sw-rec-iss-cancel{background:#450a0a;border-left-color:#ef4444}

/* Đối soát: ca KEEP chưa merge trên sheet */
.sw-rec-iss-nomerge{background:#f5f3ff;border-left:3px solid #7c3aed;border-radius:8px;padding:6px 10px;margin:4px 0}
.sw-rec-iss-nomerge .sw-rec-iss-tag{background:#7c3aed;color:#fff}
.sw-rec-stat-nomerge b{color:#7c3aed}
.sw-rec-stat-nomerge{border-color:#ddd6fe}
[data-theme="dark"] .sw-rec-iss-nomerge{background:#2e1065;border-left-color:#a78bfa}

/* ── Trực phòng: đối chiếu tên sheet ↔ hệ thống ── */
.ss-rd-verify{margin:12px 0;border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden}
.ss-rd-verify.hidden{display:none}
.ss-rd-vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.85rem}
.ss-rd-vhead i{color:#6366f1}
.ss-rd-vstat{font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:999px}
.ss-rd-vstat.ok{background:#dcfce7;color:#15803d}
.ss-rd-vstat.warn{background:#fef3c7;color:#92400e}
.ss-rd-vstat.bad{background:#fee2e2;color:#b91c1c}
.ss-rd-vhead .ss-btn-xs{margin-left:auto;padding:2px 8px;font-size:.7rem}
.ss-rd-vsec{padding:10px 14px;border-bottom:1px solid #f1f5f9}
.ss-rd-vsec.bad{background:#fef2f2}
.ss-rd-vsec-t{font-size:.76rem;font-weight:800;color:#334155;margin-bottom:7px}
.ss-rd-vrow{font-size:.78rem;padding:4px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ss-rd-vmuted{color:#94a3b8;font-size:.72rem}
.ss-rd-vbad{color:#dc2626;font-weight:700}
.ss-rd-vfix{color:#0369a1;font-size:.72rem}
.ss-rd-vfix code{background:#e0f2fe;padding:1px 5px;border-radius:4px;font-size:.7rem}
.ss-rd-vtbl{width:100%;border-collapse:collapse;font-size:.76rem}
.ss-rd-vtbl th{text-align:left;color:#64748b;font-weight:700;font-size:.68rem;text-transform:uppercase;padding:4px 6px;border-bottom:1px solid #e2e8f0}
.ss-rd-vtbl td{padding:5px 6px;border-bottom:1px solid #f8fafc;vertical-align:top}
.ss-rd-vtbl tr.bad td{background:#fef2f2}
.ss-rd-vhow{font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:6px;white-space:nowrap}
.ss-rd-vhow.ok{background:#dcfce7;color:#15803d}
.ss-rd-vhow.warn{background:#fef3c7;color:#92400e}
.ss-rd-vhow.bad{background:#fee2e2;color:#b91c1c}
.ss-rd-vslot{display:inline-block;background:#f1f5f9;border-radius:6px;padding:1px 6px;margin:1px 2px 1px 0;white-space:nowrap}
.ss-rd-vwrap{display:flex;flex-wrap:wrap;gap:5px}
.ss-rd-vchip{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:2px 8px;font-size:.74rem}
[data-theme="dark"] .ss-rd-verify{background:#1e293b;border-color:#334155}
[data-theme="dark"] .ss-rd-vhead{background:#0f172a;border-color:#334155}

/* ── Trực phòng: phân bổ tải người mở phòng ── */
.ss-rd-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ss-rd-load{margin:10px 0;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}
.ss-rd-load-t{font-size:.76rem;font-weight:700;color:#334155;margin-bottom:8px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ss-rd-load-t i{color:#6366f1}
.ss-rd-load-warn{background:#fee2e2;color:#b91c1c;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px}
.ss-rd-load-wrap{display:flex;flex-wrap:wrap;gap:5px}
.ss-rd-load-chip{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:3px 9px;font-size:.74rem;font-weight:600;color:#334155}
.ss-rd-load-chip b{color:#4f46e5;font-weight:800}
.ss-rd-load-chip.full{border-color:#fbbf24;background:#fffbeb}
.ss-rd-load-chip.full b{color:#b45309}
.ss-rd-load-chip.over{border-color:#fca5a5;background:#fef2f2}
.ss-rd-load-chip.over b{color:#dc2626}
.ss-rd-load-cap{color:#94a3b8;font-weight:600;font-size:.68rem}
[data-theme="dark"] .ss-rd-load{background:#0f172a;border-color:#334155}
[data-theme="dark"] .ss-rd-load-chip{background:#1e293b;border-color:#334155;color:#cbd5e1}

/* ══ TRỰC PHÒNG — giao diện 3 bước ══ */
.ss-rd2{display:flex;flex-direction:column;gap:14px}
.ss-rd2-hidden{display:none}
.ss-rd2-step{background:#fff;border:1px solid #e9edf3;border-radius:14px;padding:16px 18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px -16px rgba(15,23,42,.14)}
.ss-rd2-h{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:800;color:#0f172a;margin-bottom:14px;flex-wrap:wrap}
.ss-rd2-n{width:22px;height:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:999px;font-size:.72rem;font-weight:800}
.ss-rd2-sub{font-size:.74rem;font-weight:500;color:#94a3b8}
.ss-rd2-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.ss-rd2-f{display:flex;flex-direction:column;gap:5px;flex:1;min-width:150px}
.ss-rd2-f-url{flex:3;min-width:260px}
.ss-rd2-full{width:100%;margin-bottom:12px}
.ss-rd2-f label{font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.03em}
.ss-rd2-f label .ss-rd-hint{text-transform:none;letter-spacing:0;font-weight:500;color:#b6c0cd}
.ss-rd2-mini{flex:0 0 auto;padding:9px 12px}
.ss-rd2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:12px}
.ss-rd2-opts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed #e9edf3}
.ss-rd2-spacer{flex:1}
.ss-rd2-sel{max-width:190px;padding:6px 10px;font-size:.78rem}
.ss-rd2-toggles{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.ss-rd2-chk{display:flex;align-items:center;gap:8px;font-size:.79rem;color:#334155;cursor:pointer}
.ss-rd2-chk input{width:15px;height:15px;accent-color:#6366f1;cursor:pointer}
.ss-rd2-chk-rnd{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:9px;padding:7px 11px}
.ss-rd2-chk-rnd i{color:#7c3aed}
.ss-rd2-adv{margin-top:12px;border-top:1px dashed #e9edf3;padding-top:10px}
.ss-rd2-adv>summary{cursor:pointer;font-size:.76rem;font-weight:700;color:#6366f1;list-style:none}
.ss-rd2-adv>summary::-webkit-details-marker{display:none}
.ss-rd2-adv>summary::before{content:'▸ ';transition:transform .15s}
.ss-rd2-adv[open]>summary::before{content:'▾ '}
.ss-rd2-run{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ss-rd2-go{padding:11px 24px;font-weight:800;font-size:.88rem;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);border:0;color:#fff;border-radius:11px;
  box-shadow:0 6px 18px -6px rgba(99,102,241,.55);transition:transform .15s,box-shadow .15s}
.ss-rd2-go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px -6px rgba(99,102,241,.6)}
.ss-rd2-go:disabled{opacity:.6;cursor:not-allowed}
.ss-rd2-go.ss-rd2-busy i{animation:ssSpin .8s linear infinite}
@keyframes ssSpin{to{transform:rotate(360deg)}}
[data-theme="dark"] .ss-rd2-step{background:#1e293b;border-color:#334155}
[data-theme="dark"] .ss-rd2-h{color:#f1f5f9}
[data-theme="dark"] .ss-rd2-chk{color:#cbd5e1}
[data-theme="dark"] .ss-rd2-chk-rnd{background:#312e5b;border-color:#4c1d95}
@media(max-width:767px){
  .ss-rd2-step{padding:13px 13px;border-radius:12px}
  .ss-rd2-f,.ss-rd2-f-url{flex:1 1 100%;min-width:0}
  .ss-rd2-go{width:100%;justify-content:center}
}

/* Trực phòng: thống kê theo loại ca */
.ss-rd-tsum-bar{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.ss-rd-tsum{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:3px 10px;border-radius:999px;line-height:1.4}
.ss-rd-tsum b{font-weight:900}

/* Trực phòng: khung chưa có người */
.ss-rd-unf{margin-top:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:10px 12px}
.ss-rd-unf-t{font-size:.78rem;font-weight:800;color:#b91c1c;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.ss-rd-unf-row{font-size:.76rem;color:#334155;padding:3px 0;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ss-rd-unf-slot{background:#fff;border:1px solid #fecaca;border-radius:6px;padding:1px 7px;font-weight:600;color:#dc2626}
.ss-rd-unf-hint{font-weight:600;color:#f87171;font-size:.72rem}
/* Nút khung trống — bấm để chọn người */
.ss-rd-unf-pick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;font-size:.75rem;transition:.13s}
.ss-rd-unf-pick:hover{border-color:#f87171;background:#fff5f5;transform:translateY(-1px);box-shadow:0 3px 8px -2px rgba(220,38,38,.3)}
.ss-rd-unf-pick .ss-rd-unf-tag{font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.02em;padding:0 5px;border-radius:5px;background:#fee2e2;color:#b91c1c}
.ss-rd-unf-pick .ss-rd-unf-tag.t-off{background:#fee2e2;color:#b91c1c}
.ss-rd-unf-pick .ss-rd-unf-tag.t-moSom{background:#fef3c7;color:#b45309}
.ss-rd-unf-pick .ss-rd-unf-tag.t-mo{background:#dbeafe;color:#1d4ed8}
.ss-rd-unf-pick .fa-user-plus{color:#94a3b8;font-size:.72rem}
.ss-rd-unf-pick:hover .fa-user-plus{color:#dc2626}
[data-theme="dark"] .ss-rd-unf{background:#450a0a;border-color:#7f1d1d}
[data-theme="dark"] .ss-rd-unf-pick{background:#1e293b}
[data-theme="dark"] .ss-rd-unf-pick:hover{background:#3a2020}

/* Popup chọn người thủ công cho khung trống */
#ssRdManualPop{position:fixed;z-index:100000;width:300px;max-height:min(360px,80vh);display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 18px 44px -10px rgba(15,23,42,.35);overflow:hidden;font-size:.8rem}
.ss-rd-mp-head{padding:9px 12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:.74rem;font-weight:700;display:flex;align-items:center;gap:5px;position:relative}
.ss-rd-mp-head b{font-weight:900}
.ss-rd-mp-x{margin-left:auto;background:rgba(255,255,255,.2);border:none;color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;flex:0 0 auto}
.ss-rd-mp-x:hover{background:rgba(255,255,255,.35)}
.ss-rd-mp-search{margin:8px 10px 4px;padding:6px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.78rem;font-family:inherit;outline:none}
.ss-rd-mp-search:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.ss-rd-mp-list{overflow-y:auto;padding:4px 6px 8px}
.ss-rd-mp-row{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;padding:6px 8px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-family:inherit;text-align:left;transition:.1s}
.ss-rd-mp-row:hover{background:#eef2ff}
.ss-rd-mp-top{display:flex;align-items:center;gap:7px;width:100%}
.ss-rd-mp-nm{font-weight:700;color:#0f172a;flex:0 0 auto}
.ss-rd-mp-meta{font-size:.68rem;color:#64748b;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-rd-mp-meta i{font-style:normal;font-weight:700;background:#e0e7ff;color:#4338ca;border-radius:4px;padding:0 4px;margin-right:3px}
.ss-rd-mp-b{font-size:.64rem;font-weight:800;padding:1px 6px;border-radius:999px;flex:0 0 auto;white-space:nowrap}
.ss-rd-mp-b.ok{background:#dcfce7;color:#15803d}
.ss-rd-mp-b.busy{background:#fef3c7;color:#b45309}
.ss-rd-mp-b.out{background:#f1f5f9;color:#94a3b8}
.ss-rd-mp-b.grp{background:#ddd6fe;color:#5b21b6}
.ss-rd-mp-row.st-ngoai .ss-rd-mp-nm{color:#94a3b8}
/* Phòng người đó ĐANG MỞ ở khung này — chọn người tiện kiêm nhất */
.ss-rd-mp-rooms{display:flex;flex-wrap:wrap;gap:3px;padding-left:1px}
.ss-rd-mp-r{font-size:.63rem;font-weight:600;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;border-radius:5px;padding:0 5px;white-space:nowrap;max-width:none;overflow:hidden;text-overflow:ellipsis}
.ss-rd-mp-r b{font-weight:900;color:#1d4ed8;margin-right:2px}
.ss-rd-mp-r.same{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd}
.ss-rd-mp-r.same b{color:#6d28d9}
.ss-rd-mp-row.same-grp{background:#faf5ff}
.ss-rd-mp-row.same-grp:hover{background:#f3e8ff}
.ss-rd-mp-empty{padding:16px 10px;text-align:center;color:#94a3b8;font-size:.76rem}
[data-theme="dark"] #ssRdManualPop{background:#1e293b;border-color:#334155}
[data-theme="dark"] .ss-rd-mp-nm{color:#f1f5f9}
[data-theme="dark"] .ss-rd-mp-row:hover{background:#334155}
[data-theme="dark"] .ss-rd-mp-search{background:#0f172a;color:#f1f5f9;border-color:#334155}

/* ── Bản quyền viewer: vùng kéo-thả ảnh đại diện ── */
.vc-avatar-drop{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:96px;padding:14px;border:2px dashed #cbd5e1;border-radius:14px;background:#f8fafc;cursor:pointer;transition:border-color .15s,background .15s}
.vc-avatar-drop:hover{border-color:#818cf8;background:#eef2ff}
.vc-avatar-drop.vc-drop-over{border-color:#6366f1;background:#e0e7ff;box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.vc-avatar-prev{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 12px rgba(15,23,42,.15);flex:0 0 auto}
.vc-drop-hint{display:flex;align-items:center;gap:8px;color:#64748b;font-size:13px;font-weight:600;text-align:center}
.vc-drop-hint i{font-size:22px;color:#818cf8}
.vc-drop-hint b{color:#4f46e5}
[data-theme="dark"] .vc-avatar-drop{background:#0f172a;border-color:#334155}
[data-theme="dark"] .vc-avatar-drop:hover{background:#1e293b;border-color:#4f46e5}
[data-theme="dark"] .vc-drop-hint{color:#94a3b8}


/* ===================================================================
   DARK THEME AUTO-COVERAGE — phủ các trang chưa tối ưu (neutral surfaces/text)
   Chỉ đổi màu NEUTRAL sang token --th-*; accent giữ nguyên. Scope [data-theme=dark]
   → giao diện SÁNG không đổi. Sinh tự động từ admin.css + CSS inject qua JS.
   =================================================================== */
[data-theme="dark"] .btn-google-login { background:var(--th-surface); }
[data-theme="dark"] #page-schedules .filter-select, [data-theme="dark"] #page-schedules .filter-date, [data-theme="dark"] #page-schedules .search-box input { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] #page-schedules .filter-select:hover, [data-theme="dark"] #page-schedules .filter-date:hover, [data-theme="dark"] #page-schedules .search-box input:hover { border-color:var(--th-border); }
[data-theme="dark"] #scheduleTemplateToolbar.template-toolbar { background:var(--th-surface); }
[data-theme="dark"] .tt-select { background:var(--th-surface); color:var(--th-text); }
[data-theme="dark"] #page-schedules #scheduleStats.schedule-stats:not([style*="none"]) { border-color:var(--th-border); }
[data-theme="dark"] #page-schedules #scheduleStatsText { color:var(--th-text-muted); }
[data-theme="dark"] .export-label { color:var(--th-text-muted); }
[data-theme="dark"] .auto-sync-status { background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); }
[data-theme="dark"] .auto-sync-status-row { color:var(--th-text); }
[data-theme="dark"] .auto-sync-status-row strong { color:#4ade80; }
[data-theme="dark"] .auto-sync-status-row i { color:#4ade80; }

/* ===== Xuất Sheet AI (#page-sheet-export) — trang inline-styled, không có dark ===== */
[data-theme="dark"] #page-sheet-export .se-guide { background:rgba(59,130,246,.1) !important; border-color:rgba(59,130,246,.3) !important; color:#93c5fd !important; }
[data-theme="dark"] #page-sheet-export .se-guide strong { color:#dbeafe !important; }
[data-theme="dark"] #page-sheet-export .se-card { background:var(--th-surface) !important; border-color:var(--th-border) !important; box-shadow:none !important; }
[data-theme="dark"] #page-sheet-export .se-auto-box { background:var(--th-surface-2) !important; border-color:var(--th-border) !important; }
[data-theme="dark"] #page-sheet-export input { background:var(--th-surface-2) !important; border-color:var(--th-border) !important; color:var(--th-text) !important; }
[data-theme="dark"] #page-sheet-export label { color:var(--th-text-muted) !important; }
[data-theme="dark"] #page-sheet-export hr { border-top-color:var(--th-border) !important; }
/* Nút .btn-secondary không có base riêng (chỉ dựa .btn) → chìm trong dark. Global fix cho toàn app. */
[data-theme="dark"] .btn-secondary { background:var(--th-surface-3); color:var(--th-text); border:1px solid var(--th-border); }
[data-theme="dark"] .btn-secondary:hover { background:var(--th-border); }
[data-theme="dark"] #page-sheet-export .btn-secondary { background:var(--th-surface-3) !important; border:1px solid var(--th-border) !important; color:var(--th-text) !important; }
[data-theme="dark"] #page-sheet-export .btn-secondary:hover { background:var(--th-border) !important; }
[data-theme="dark"] .form-section { border-color:var(--th-border); }
[data-theme="dark"] .form-section h4 { border-color:var(--th-border); }
[data-theme="dark"] .header-user-dropdown { background:var(--th-surface); }
[data-theme="dark"] .ended-badge { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .dash-host-chip { border-color:var(--th-border); }
[data-theme="dark"] .room-legend-item { color:var(--th-text); }
[data-theme="dark"] .room-thumb img { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .room-thumb.is-empty, [data-theme="dark"] .room-thumb.is-broken { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .schedule-secondary-time { color:var(--th-text-muted); }
[data-theme="dark"] .conflict-badge-missing { color:var(--th-text-muted); }
[data-theme="dark"] .warn-item { color:var(--th-text); }
[data-theme="dark"] .warn-brief-room { color:var(--th-text); }
[data-theme="dark"] .warn-cross-detail, [data-theme="dark"] .warn-missing-detail { color:var(--th-text-muted); }
[data-theme="dark"] .warn-ad-label { color:var(--th-text-muted); }
[data-theme="dark"] .warn-ad-btn { background:var(--th-surface); color:var(--th-text); }
[data-theme="dark"] .warn-ad-btn:hover { background:var(--th-surface-3); }
[data-theme="dark"] .warn-goto-btn { color:var(--th-text-muted); }
[data-theme="dark"] .so-cbadge--missing { color:var(--th-text-muted); }
[data-theme="dark"] .kl-at-template-input { color:var(--th-text); }
[data-theme="dark"] .kl-at-ph-chip { background:var(--th-surface); }
[data-theme="dark"] .kl-at-list-header { color:var(--th-text-muted); }
[data-theme="dark"] .kl-at-mini-btn { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .kl-at-list { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .kl-at-row { color:var(--th-text); }
[data-theme="dark"] .kl-at-row:hover:not(.disabled) { background:var(--th-surface-3); }
[data-theme="dark"] .kl-at-hint { background:var(--th-surface-2); color:var(--th-text-muted); }
[data-theme="dark"] .klq-title { color:var(--th-text); }
[data-theme="dark"] .klq-selall { color:var(--th-text-muted); }
[data-theme="dark"] .klq-btn { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .klq-list { border-color:var(--th-border); }
[data-theme="dark"] .klq-item { border-color:var(--th-border); }
[data-theme="dark"] .klq-item:hover { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .schedule-menu-dropdown { border-color:var(--th-border); }
[data-theme="dark"] #keepLiveModeSelect.kl-mode-select { background:var(--th-surface); color:var(--th-text); }
[data-theme="dark"] #keepLiveRoomSelect.kl-room-select { color:var(--th-text); }
[data-theme="dark"] .kl-tbtn--ghost { background:var(--th-surface); }
[data-theme="dark"] .kl-tbtn--danger-ghost { background:var(--th-surface); }
[data-theme="dark"] .kl-stat { background:var(--th-surface); }
[data-theme="dark"] .kl-stat-val { color:var(--th-text); }
[data-theme="dark"] .kl-stat-val small { color:var(--th-text-muted); }
[data-theme="dark"] .kl-stat-lbl { color:var(--th-text-muted); }
[data-theme="dark"] .kl-ring span { color:var(--th-text); }
[data-theme="dark"] .kl-pattern-card { background:var(--th-surface); }
[data-theme="dark"] .kl-pattern-sample { color:var(--th-text-muted); }
[data-theme="dark"] .kl-ranked { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .kl-ranked-head { color:var(--th-text); }
[data-theme="dark"] .kl-ranked-item { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .kl-ranked-item:hover { background:var(--th-surface); }
[data-theme="dark"] .kl-ranked-sample { color:var(--th-text); }
[data-theme="dark"] .kl-ranked-bar { background:var(--th-surface-3); }
[data-theme="dark"] .kl-sugg-scan-btn { background:var(--th-surface); }
[data-theme="dark"] .kl-sugg-status { color:var(--th-text-muted); }
[data-theme="dark"] .kl-sugg-rescan { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .kl-sugg-item { background:var(--th-surface); }
[data-theme="dark"] .kl-sugg-meta { color:var(--th-text); }
[data-theme="dark"] .kl-card { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .kl-card-date { color:var(--th-text); }
[data-theme="dark"] .kl-card-pill { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .fl-card-room-chip.more { background:var(--th-surface-3); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .fl-card-feat { background:var(--th-surface-3); color:var(--th-text-muted); }
/* Dòng "Tùy chỉnh theo Phòng/Platform/Brand" — inline background:white nên cần !important */
[data-theme="dark"] .mapping-row { background:var(--th-surface-2) !important; border-color:var(--th-border) !important; }
[data-theme="dark"] #templateMappingsContainer { border-top-color:var(--th-border) !important; }
[data-theme="dark"] .rcm-bar { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .rcm-title { color:var(--th-text); }
[data-theme="dark"] .rcm-hint { color:var(--th-text-muted); }
[data-theme="dark"] .rcm-pill { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .rcm-pill--base.rcm-pill--active { background:rgba(99,102,241,.18); color:var(--th-text); border-color:#6366f1; }
[data-theme="dark"] .rcm-pill--current.rcm-pill--active { background:rgba(245,158,11,.18); color:#fcd34d; border-color:#f59e0b; }
[data-theme="dark"] .rcm-action-bar { background:var(--th-surface); }
[data-theme="dark"] .rcm-action-name { color:var(--th-text); }
[data-theme="dark"] .rc-badge-mode { background:var(--th-surface); }
[data-theme="dark"] .rc-badge-mode.mode-manual { background:var(--th-surface); }
[data-theme="dark"] .multi-tag-container { background:var(--th-surface); }
[data-theme="dark"] .auto-apply-slider { background:var(--th-border); }
[data-theme="dark"] .auto-apply-label { color:var(--th-text-muted); }
[data-theme="dark"] .auto-apply-toggle input:disabled + .auto-apply-slider { background:var(--th-surface-3); }
[data-theme="dark"] .pic-avatar-tabs { border-color:var(--th-border); }
[data-theme="dark"] .pic-avatar-tab { color:var(--th-text-muted); }
[data-theme="dark"] .pic-upload-zone { color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .pic-urls-empty { border-color:var(--th-border); }
[data-theme="dark"] .pic-detail-avatar-empty { background:var(--th-surface-3); }
[data-theme="dark"] .pic-avatar-editor-inline-inner { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .pic-avatar-editor-tab { color:var(--th-text-muted); }
[data-theme="dark"] .pic-avatar-editor-tab:hover { background:var(--th-surface-3); }
[data-theme="dark"] .pic-avatar-editor-dropzone { border-color:var(--th-border); }
[data-theme="dark"] .pic-avatar-editor-preview { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .pic-avatar-editor-preview img { border-color:var(--th-border); }
[data-theme="dark"] .pic-detail-name { color:var(--th-text); }
[data-theme="dark"] .pic-detail-code { color:var(--th-text-muted); }
[data-theme="dark"] .pic-detail-code code { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .pic-detail-row { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .pic-detail-row:hover { background:var(--th-surface-3); }
[data-theme="dark"] .pic-detail-row-content > span:last-child { color:var(--th-text); }
[data-theme="dark"] .pic-detail-section-title { color:var(--th-text-muted); }
[data-theme="dark"] .pic-detail-url-item { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .pic-detail-desc-content { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .pic-detail-room-item { background:var(--th-surface-2); }
[data-theme="dark"] .pic-room-add-form { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .pic-lightbox-close { background:var(--th-surface); color:var(--th-text-muted); }
[data-theme="dark"] #page-title-templates .page-subtitle { color:var(--th-text-muted); }
[data-theme="dark"] #page-title-templates .info-card-content code { background:var(--th-surface); }
[data-theme="dark"] #page-title-templates .title-templates-table thead th { color:var(--th-text-muted); }
[data-theme="dark"] #page-title-templates .template-code { background:var(--th-surface-3); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] #page-title-templates .badge-secondary { background:var(--th-surface-3); }
[data-theme="dark"] #page-cart-templates .page-subtitle { color:var(--th-text-muted); }
[data-theme="dark"] #page-cart-templates .data-table thead th { color:var(--th-text-muted); }
[data-theme="dark"] #page-cart-templates .template-code { background:var(--th-surface-3); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] #page-cart-templates .badge-secondary { background:var(--th-surface-3); }
[data-theme="dark"] .setting-card { border-color:var(--th-border); }
[data-theme="dark"] .form-section-title { border-color:var(--th-border); }
[data-theme="dark"] .rich-editor-wrapper { background:var(--th-surface); }
[data-theme="dark"] .rich-editor-wrapper .tox-toolbar__primary { border-color:var(--th-border); }
[data-theme="dark"] .tox .tox-statusbar { border-color:var(--th-border); }
[data-theme="dark"] .tag-input-wrapper { background:var(--th-surface); }
[data-theme="dark"] .image-link-item { border-color:var(--th-border); }
[data-theme="dark"] .image-link-item:hover { background:var(--th-surface); }
[data-theme="dark"] .btn-icon-remove { background:var(--th-surface); }
[data-theme="dark"] .overnight-options { border-color:var(--th-border); }
[data-theme="dark"] .attached-image-item { border-color:var(--th-border); }
[data-theme="dark"] .btn-overlay:hover { background:var(--th-surface); }
[data-theme="dark"] .notif-links-wrapper { border-color:var(--th-border); }
[data-theme="dark"] .notif-links-input-row .form-control { border-color:var(--th-border); }
[data-theme="dark"] .notification-image-item { border-color:var(--th-border); }
[data-theme="dark"] .notification-image-item .image-url-text { border-color:var(--th-border); }
[data-theme="dark"] .attached-image-item .attached-image-url { border-color:var(--th-border); }
[data-theme="dark"] .edit-link-header { border-color:var(--th-border); }
[data-theme="dark"] .edit-link-footer { border-color:var(--th-border); }
[data-theme="dark"] .fl-modal.modal-overlay.active > .modal { background:var(--th-surface); }
[data-theme="dark"] .fl-modal .modal-body { background:var(--th-surface-2); }
[data-theme="dark"] .fl-modal .modal-body .fl-tabs-wrapper { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .fl-modal .modal-footer { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .fl-modal .modal-footer .btn-secondary, [data-theme="dark"] .fl-modal .modal-footer .btn-outline { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .fl-modal .modal-footer .btn-secondary:hover, [data-theme="dark"] .fl-modal .modal-footer .btn-outline:hover { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .fl-tabs { border-color:var(--th-border); }
[data-theme="dark"] .fl-tab { color:var(--th-text-muted); }
[data-theme="dark"] .fl-tab:hover { background:var(--th-surface-3); color:var(--th-text-muted); }
/* Tab đang chọn: giữ nền gradient tím + chữ/icon TRẮNG (bị rule .fl-tab ở trên nhuộm xám) */
[data-theme="dark"] .fl-tab.active,
[data-theme="dark"] .fl-tab.active i { color:#fff; }
[data-theme="dark"] .fl-section { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .fl-section-header { border-color:var(--th-border); }
[data-theme="dark"] .fl-section-title { color:var(--th-text); }
[data-theme="dark"] .fl-label { color:var(--th-text); }
[data-theme="dark"] .fl-input { color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .fl-input:hover { background:var(--th-surface); }
[data-theme="dark"] .fl-input:focus { background:var(--th-surface); }
[data-theme="dark"] .fl-textarea { color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .fl-textarea:hover { background:var(--th-surface); }
[data-theme="dark"] .fl-textarea:focus { background:var(--th-surface); }
[data-theme="dark"] .fl-hint { color:var(--th-text-muted); }
[data-theme="dark"] .fl-select { color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .fl-select:hover { background:var(--th-surface); }
[data-theme="dark"] .fl-select:focus { background:var(--th-surface); }
[data-theme="dark"] .fl-select-arrow { color:var(--th-text-muted); }
[data-theme="dark"] .fl-toggle-card { border-color:var(--th-border); }
[data-theme="dark"] .fl-toggle-icon { color:var(--th-text-muted); }
[data-theme="dark"] .fl-toggle-text strong { color:var(--th-text); }
[data-theme="dark"] .fl-toggle-text span { color:var(--th-text-muted); }
[data-theme="dark"] .fl-time-label { color:var(--th-text-muted); }
[data-theme="dark"] .fl-room-card { border-color:var(--th-border); }
[data-theme="dark"] .fl-room-icon { color:var(--th-text-muted); }
[data-theme="dark"] .fl-room-name { color:var(--th-text); }
[data-theme="dark"] .fl-empty-state span { color:var(--th-text-muted); }
[data-theme="dark"] .fl-links-container { border-color:var(--th-border); }
[data-theme="dark"] .fl-links-add { border-color:var(--th-border); }
[data-theme="dark"] .fl-btn-secondary { color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .fl-image-add { border-color:var(--th-border); }
[data-theme="dark"] .fl-image-add-tabs { border-color:var(--th-border); }
[data-theme="dark"] .fl-image-tab { color:var(--th-text-muted); }
[data-theme="dark"] .fl-image-tab.active { border-color:var(--th-border); }
[data-theme="dark"] .fl-upload-zone span { color:var(--th-text-muted); }
[data-theme="dark"] .fl-editor-wrapper { border-color:var(--th-border); }
[data-theme="dark"] #filterLinkForm .tox-tinymce { border-color:var(--th-border); }
[data-theme="dark"] #filterLinkForm .tox-toolbar__primary { border-color:var(--th-border); }
[data-theme="dark"] #filterLinkForm .tox-edit-area { background:var(--th-surface); }
[data-theme="dark"] #filterLinkForm .tox-statusbar { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .fl-image-card { border-color:var(--th-border); }
[data-theme="dark"] .fl-img-btn { color:var(--th-text-muted); }
[data-theme="dark"] .fl-image-title-input { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .fl-image-title-input input { background:var(--th-surface-2); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .fl-image-title-input input:focus { background:var(--th-surface); }
[data-theme="dark"] .fl-image-info { border-color:var(--th-border); }
[data-theme="dark"] .fl-image-url { color:var(--th-text-muted); }
[data-theme="dark"] .fl-images-empty span { color:var(--th-text-muted); }
[data-theme="dark"] .fl-edit-url-preview { border-color:var(--th-border); }
[data-theme="dark"] .fl-edit-image-layout .fl-edit-url-preview { border-color:var(--th-border); }
[data-theme="dark"] .fl-edit-tab { color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .fl-edit-tab:hover { color:var(--th-text-muted); }
[data-theme="dark"] .fl-edit-url-footer { border-color:var(--th-border); }
[data-theme="dark"] .fl-links-empty span { color:var(--th-text-muted); }
[data-theme="dark"] .fl-link-item { border-color:var(--th-border); }
[data-theme="dark"] .fl-event-modal .tox .tox-toolbar, [data-theme="dark"] .fl-event-modal .tox .tox-toolbar__primary { background:var(--th-surface-2); }
[data-theme="dark"] .fl-event-modal .tox .tox-edit-area__iframe { background:var(--th-surface); }
[data-theme="dark"] .google-account-section { border-color:var(--th-border); }
[data-theme="dark"] .google-oauth-config { border-color:var(--th-border); }
[data-theme="dark"] .google-oauth-config-header { background:var(--th-surface-2); }
[data-theme="dark"] .google-oauth-config-header:hover { background:var(--th-surface-3); }
[data-theme="dark"] .google-oauth-config-title { color:var(--th-text-muted); }
[data-theme="dark"] .google-oauth-config-body { border-color:var(--th-border); }
[data-theme="dark"] .google-oauth-config-field label { color:var(--th-text); }
[data-theme="dark"] .google-shared-item { border-color:var(--th-border); }
/* Trang Cấu hình hệ thống — header card dùng gradient tới #fafbfc (sáng cứng) → tiêu đề mờ/chìm */
[data-theme="dark"] .settings-card { border-color:var(--th-border); }
[data-theme="dark"] .settings-card:hover { border-color:var(--th-border); }
[data-theme="dark"] .settings-card-header { background:var(--th-surface-3); border-bottom-color:var(--th-border); }
[data-theme="dark"] .settings-card-header h3 { color:var(--th-text); }
[data-theme="dark"] #page-settings label { color:var(--th-text); }
/* Box xanh "Tài khoản đang dùng chung" */
[data-theme="dark"] .google-shared-note { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.3); color:#93c5fd; }
[data-theme="dark"] .google-shared-note b, [data-theme="dark"] .google-shared-note strong { color:#dbeafe; }
[data-theme="dark"] .google-shared-note i { color:#60a5fa; }
/* Card "Thông tin hệ thống" — dòng info nền #f8fafb cứng → value trắng bị chìm */
[data-theme="dark"] .app-info-item { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .app-info-item:hover { background:var(--th-surface-3); border-color:var(--th-border); }
/* Card hồng "Thông báo Link không hợp lệ" — làm nền tối, giữ accent pink */
[data-theme="dark"] .settings-section { background:var(--th-surface); border-color:rgba(244,114,182,.5); box-shadow:none; }
[data-theme="dark"] .settings-section .section-header { border-bottom-color:rgba(244,114,182,.3); }
[data-theme="dark"] .settings-section .section-header h3 { color:#f9a8d4; }
[data-theme="dark"] .settings-section .section-description,
[data-theme="dark"] .settings-section .form-help { color:#f0abcc; }
[data-theme="dark"] .settings-section .form-group label { color:#f9a8d4; }
[data-theme="dark"] .google-shared-item:hover { background:var(--th-surface); }
[data-theme="dark"] .btn-google { background:var(--th-surface); }
[data-theme="dark"] .btn-google:hover { background:var(--th-surface); }
[data-theme="dark"] .google-detail-info { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .google-detail-row strong { color:var(--th-text); }
[data-theme="dark"] .btn-google-sm { background:var(--th-surface); }
[data-theme="dark"] .btn-google-sm:hover { background:var(--th-surface); }
[data-theme="dark"] .google-user-avatar { border-color:var(--th-border); }
[data-theme="dark"] .import-preview { border-color:var(--th-border); }
[data-theme="dark"] .file-upload:hover { background:var(--th-surface); }
[data-theme="dark"] .auto-refresh-toggle { color:var(--th-text-muted); }
[data-theme="dark"] .filter-input { border-color:var(--th-border); }
[data-theme="dark"] .filter-select { border-color:var(--th-border); }
[data-theme="dark"] .btn-clear-filters { color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .btn-clear-filters:hover { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .webhook-status.inactive { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .webhook-event-tag.tag-settings { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .webhook-url-hint { color:var(--th-text-muted); }
[data-theme="dark"] .upload-area { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .logo-preview-box { border-color:var(--th-border); }
[data-theme="dark"] .logo-preview-box:hover { border-color:var(--th-border); }
[data-theme="dark"] .logo-zoom-close i { color:var(--th-text); }
[data-theme="dark"] .sheet-preview-table th, [data-theme="dark"] .sheet-preview-table td { border-color:var(--th-border); }
[data-theme="dark"] .sheet-preview-table th { background:var(--th-surface); }
[data-theme="dark"] .sheet-preview-table tbody tr:hover { background:var(--th-surface); }
[data-theme="dark"] .spinner { border-color:var(--th-border); }
[data-theme="dark"] .sheet-legend { background:var(--th-surface); }
[data-theme="dark"] .sheet-legend .legend-color { border-color:var(--th-border); }
[data-theme="dark"] #refreshSheetPreview:hover { background:var(--th-surface); }
[data-theme="dark"] .sheet-preview-stats { border-color:var(--th-border); }
[data-theme="dark"] .google-sheet-loading { background:var(--th-surface); }
[data-theme="dark"] .dash-popup { background:var(--th-surface); }
[data-theme="dark"] .dash-popup-header { border-color:var(--th-border); }
[data-theme="dark"] .dash-popup-title { color:var(--th-text); }
[data-theme="dark"] .dash-popup-close:hover { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .popup-schedule-card { border-color:var(--th-border); }
[data-theme="dark"] .popup-schedule-card:hover { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .dash-popup-tabs-bar { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .popup-tab { color:var(--th-text-muted); }
[data-theme="dark"] .popup-tab:hover { background:var(--th-surface-3); }
[data-theme="dark"] .popup-tab-count { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .popup-time-main { color:var(--th-text); }
[data-theme="dark"] .popup-time-duration { color:var(--th-text-muted); }
[data-theme="dark"] .popup-card-host { color:var(--th-text); }
[data-theme="dark"] .popup-card-room { color:var(--th-text-muted); }
[data-theme="dark"] .popup-platform { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .popup-countdown { color:var(--th-text-muted); }
[data-theme="dark"] .popup-ended-tag { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .so-view-toggle { border-color:var(--th-border); }
[data-theme="dark"] .so-view-toggle .btn + .btn { border-color:var(--th-border); }
[data-theme="dark"] #soFilterBar .form-control { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] #soFilterBar .form-control:hover { border-color:var(--th-border); }
[data-theme="dark"] #soFilterBar .search-box input { border-color:var(--th-border); }
[data-theme="dark"] #soFilterBar .search-box input:hover { border-color:var(--th-border); }
[data-theme="dark"] #soFilterBar #soResultCount { color:var(--th-text-muted); }
[data-theme="dark"] .so-cd-sec-note { color:var(--th-text-muted); }
[data-theme="dark"] .so-cd-sec-extra { color:var(--th-text-muted); }
[data-theme="dark"] .so-stat-ended { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .so-room-compact { border-color:var(--th-border); }
/* Header phòng (compact + full) dùng var(--bg-light) — biến này KHÔNG định nghĩa nên luôn fallback #f8fafc sáng */
[data-theme="dark"] .so-rc-header { border-color:var(--th-border); background:var(--th-surface-2); }
[data-theme="dark"] .so-room-header { background:var(--th-surface-2); }
[data-theme="dark"] .so-rc-header.so-room-toggle:hover,
[data-theme="dark"] .so-room-header.so-room-toggle:hover { background:var(--th-surface-3); filter:none; }
[data-theme="dark"] .so-room-compact:has(.so-room-body[style*="display:none"]) .so-rc-header, [data-theme="dark"] .so-room-section:has(.so-room-body[style*="display:none"]) .so-room-header { border-color:var(--th-border); }
[data-theme="dark"] .so-card { border-color:var(--th-border); }
[data-theme="dark"] .so-card-upcoming { background:var(--th-surface); }
[data-theme="dark"] .so-card-ended { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .so-card-ended:hover { background:var(--th-surface-3); }
/* Card LIVE / qua đêm / đã hủy — nền sáng cứng, cần dark override (giữ tông màu trạng thái) */
[data-theme="dark"] .so-card-live { background:rgba(239,68,68,.14); }
[data-theme="dark"] .so-card-live:hover { background:rgba(239,68,68,.22); }
[data-theme="dark"] .so-card--overnight { background:linear-gradient(135deg, rgba(129,140,248,.18) 0%, rgba(99,102,241,.12) 100%) !important; }
[data-theme="dark"] .so-card--cancelled { background:rgba(220,38,38,.14) !important; }
[data-theme="dark"] .so-card--cancelled:hover { background:rgba(220,38,38,.22) !important; }
[data-theme="dark"] .so-dot-ended { background:var(--th-border); }
[data-theme="dark"] .so-card-detail { border-color:var(--th-border); }
[data-theme="dark"] .so-room-section { border-color:var(--th-border); }
[data-theme="dark"] .so-room-header { border-color:var(--th-border); }
[data-theme="dark"] .so-schedule-table tbody td { border-color:var(--th-border); }
[data-theme="dark"] .so-schedule-table-wrapper { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .so-schedule-table thead th { border-color:var(--th-border); }
[data-theme="dark"] .so-schedule-row:hover { background:var(--th-surface-2); }
[data-theme="dark"] .cb-image-preview-bar { background:var(--th-surface-2); }
[data-theme="dark"] .upd-panel { background:var(--th-surface); }
[data-theme="dark"] .upd-header { border-color:var(--th-border); }
[data-theme="dark"] .upd-close { color:var(--th-text-muted); }
[data-theme="dark"] .upd-close:hover { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .upd-name { color:var(--th-text); }
[data-theme="dark"] .upd-section { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .upd-section-title { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .upd-row { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .upd-row-label { color:var(--th-text-muted); }
[data-theme="dark"] .upd-row-val { color:var(--th-text); }
[data-theme="dark"] .upd-feat-grid { background:var(--th-surface); }
[data-theme="dark"] .upd-feat-item { color:var(--th-text); }
[data-theme="dark"] .upd-feat-none { background:var(--th-surface); }
[data-theme="dark"] .upd-footer { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .gsl-row { border-color:var(--th-border); }
[data-theme="dark"] .gsl-name { color:var(--th-text); }
[data-theme="dark"] .gsl-input { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .fl-bg-meta { color:var(--th-text-muted); }
[data-theme="dark"] .fl-bg-empty { color:var(--th-text-muted); }
[data-theme="dark"] .fl-bg-empty-title { color:var(--th-text); }
[data-theme="dark"] .fl-bg-empty-sub { color:var(--th-text-muted); }
[data-theme="dark"] .fl-bg-action { color:var(--th-text-muted); }
[data-theme="dark"] .fl-bg-url-input { background:var(--th-surface); color:var(--th-text); }
[data-theme="dark"] .fl-bg-presets-label { color:var(--th-text-muted); }
[data-theme="dark"] .fl-bg-frost-track { background:var(--th-border); }
[data-theme="dark"] .fl-bg-frost-thumb { background:var(--th-surface); }
[data-theme="dark"] .fl-bg-frost-text strong { color:var(--th-text); }
[data-theme="dark"] .fl-bg-frost-text small { color:var(--th-text-muted); }
/* Card "Ảnh nền trang Viewer" + hàng toggle "Phủ mờ đậm" — gradient nền sáng cứng */
[data-theme="dark"] .fl-bg-field { background:var(--th-surface-2); border-color:var(--th-border); color:var(--th-text); }
[data-theme="dark"] .fl-bg-frost-toggle { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .fl-bg-frost-toggle:hover { border-color:#8b5cf6; }
[data-theme="dark"] .so-cf-menu { background:var(--th-surface); }
[data-theme="dark"] .so-cf-menu-close { color:var(--th-text-muted); }
[data-theme="dark"] .so-cf-menu-item { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .so-cf-menu-room { color:var(--th-text); }
[data-theme="dark"] .so-cf-menu-label { color:var(--th-text-muted); }
[data-theme="dark"] .so-cf-menu-other { color:var(--th-text-muted); }
[data-theme="dark"] .log-summary { color:var(--th-text-muted); }
[data-theme="dark"] .log-detail-item { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .lg-clear-note { color:var(--th-text-muted); }
[data-theme="dark"] .lg-clear-opt { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .lg-clear-opt b { color:var(--th-text); }
[data-theme="dark"] .lg-clear-opt small { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-note { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-row label { color:var(--th-text); }
[data-theme="dark"] .sw-rec-row input[type=date] { border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-loading, [data-theme="dark"] .sw-rec-empty { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-sum span { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-day { border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-day-h { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .sw-rec-room { border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-room-h { color:var(--th-text); }
[data-theme="dark"] .sw-rec-iss { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-allok { border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-page-loading { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-preset { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-verdict-tx b { color:var(--th-text); }
[data-theme="dark"] .sw-rec-verdict-tx span { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-stat { background:var(--th-surface); }
[data-theme="dark"] .sw-rec-stat span { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-fbtn { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-fbtn:hover { background:var(--th-surface-3); }
[data-theme="dark"] .sw-rec-xbtn { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-day-h { background:var(--th-surface-2); color:var(--th-text); }
[data-theme="dark"] .sw-rec-day-date { color:var(--th-text); }
[data-theme="dark"] .sw-rec-day-tab { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-room-name { color:var(--th-text); }
[data-theme="dark"] .sw-rec-t { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .sw-rec-card { background:var(--th-surface); }
[data-theme="dark"] .sw-rec-card-h { color:var(--th-text); }
[data-theme="dark"] .sw-rec-fld { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-fld select, [data-theme="dark"] .sw-rec-fld input[type=date], [data-theme="dark"] .sw-rec-fld input[type=text] { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-filter { border-color:var(--th-border); }
[data-theme="dark"] .sw-rec-filter-hint { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-url { background:var(--th-surface-2); color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-rooms-h { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-switch-tr { background:var(--th-border); }
[data-theme="dark"] .sw-rec-switch-lb { color:var(--th-text); }
[data-theme="dark"] .sw-rec-idle-t { color:var(--th-text-muted); }
[data-theme="dark"] .sw-rec-layout { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-verify { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-vhead { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-vsec { border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-vsec-t { color:var(--th-text); }
[data-theme="dark"] .ss-rd-vtbl th { color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-vslot { background:var(--th-surface-3); }
[data-theme="dark"] .ss-rd-vchip { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-load { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-load-t { color:var(--th-text); }
[data-theme="dark"] .ss-rd-load-chip { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd2-step { background:var(--th-surface); }
[data-theme="dark"] .ss-rd2-h { color:var(--th-text); }
[data-theme="dark"] .ss-rd2-f label { color:var(--th-text-muted); }
[data-theme="dark"] .ss-rd2-chk { color:var(--th-text); }
[data-theme="dark"] .ss-rd-unf-row { color:var(--th-text); }
[data-theme="dark"] .ss-rd-unf-slot { background:var(--th-surface); }
[data-theme="dark"] #ssRdManualPop { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-mp-search { border-color:var(--th-border); }
[data-theme="dark"] .ss-rd-mp-nm { color:var(--th-text); }
[data-theme="dark"] .ss-rd-mp-meta { color:var(--th-text-muted); }
[data-theme="dark"] .ss-rd-mp-b.out { background:var(--th-surface-3); }
[data-theme="dark"] .ss-rd-mp-r { background:var(--th-surface-3); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .vc-avatar-drop { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .vc-drop-hint { color:var(--th-text-muted); }
[data-theme="dark"] .ops-card { background:var(--th-surface); }
[data-theme="dark"] .ops-card-title { color:var(--th-text); }
[data-theme="dark"] .ops-lbl { color:var(--th-text-muted); }
[data-theme="dark"] .ops-input { border-color:var(--th-border); }
[data-theme="dark"] .ops-select { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .ops-btn-outline { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-btn-outline:hover { background:var(--th-surface-3); }
[data-theme="dark"] .ops-status-line { color:var(--th-text-muted); }
[data-theme="dark"] .ops-range-lbl { color:var(--th-text-muted); }
[data-theme="dark"] .ops-col-section { border-color:var(--th-border); }
[data-theme="dark"] .ops-col-section-hd { background:var(--th-surface-2); color:var(--th-text-muted); }
[data-theme="dark"] .ops-col-section-hd:hover { background:var(--th-surface-3); }
[data-theme="dark"] .ops-col-section-body { background:var(--th-surface); }
[data-theme="dark"] .ops-col-row label { color:var(--th-text-muted); }
[data-theme="dark"] .ops-summary-item { background:var(--th-surface-2); }
[data-theme="dark"] .ops-summary-name { color:var(--th-text-muted); }
[data-theme="dark"] .ops-summary-hours { color:var(--th-text); }
[data-theme="dark"] .ops-vtab { color:var(--th-text-muted); }
[data-theme="dark"] .ops-vtab:hover { background:var(--th-surface-2); color:var(--th-text); }
[data-theme="dark"] .ops-day-nav-btn { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-day-nav-btn:hover { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .ops-day-nav-label { color:var(--th-text); }
[data-theme="dark"] .ops-api-url { background:var(--th-surface-2); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .ops-today-header { color:var(--th-text-muted); }
[data-theme="dark"] .ops-time-label { color:var(--th-text); }
[data-theme="dark"] .ops-shift-card { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .ops-shift-time { color:var(--th-text); }
[data-theme="dark"] .ops-shift-brand { color:var(--th-text); }
[data-theme="dark"] .ops-shift-ops { color:var(--th-text-muted); }
[data-theme="dark"] .ops-mine-header { color:var(--th-text-muted); }
[data-theme="dark"] .ops-day-label { color:var(--th-text-muted); }
[data-theme="dark"] .ops-tbl th { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-tbl tr:hover td { background:var(--th-surface-2); }
[data-theme="dark"] .ops-day-num { color:var(--th-text); }
[data-theme="dark"] .ops-td-time { color:var(--th-text); }
[data-theme="dark"] .ops-badge-other { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .ops-op-tag { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .ops-today-stats { color:var(--th-text-muted); }
[data-theme="dark"] .ops-plat-btn { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-plat-btn:hover { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .ops-meta-item { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .ops-mine-hours { color:var(--th-text-muted); }
[data-theme="dark"] .ops-summary-bar-wrap { background:var(--th-surface-3); }
[data-theme="dark"] .ops-td-dur { color:var(--th-text-muted); }
[data-theme="dark"] .ops-ds-pill { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-ds-pill:hover { background:var(--th-surface-3); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .ops-qs-input-wrap { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .ops-qs-input-wrap:focus-within { background:var(--th-surface); }
[data-theme="dark"] .ops-qs-input { color:var(--th-text); }
[data-theme="dark"] .ops-qs-dropdown { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .ops-qs-cnt { background:var(--th-surface-3); }
[data-theme="dark"] .ops-tsbox { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .ops-tsbox-val { color:var(--th-text); }
[data-theme="dark"] .ops-tl-flt-pill { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-tl-oh-pill { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .ops-tl-oh-pill:hover { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .ops-tl-axis { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .ops-tl-lane { background:var(--th-surface); }
[data-theme="dark"] .ops-sp-popup { background:var(--th-surface); }
[data-theme="dark"] .ops-sp-brand { color:var(--th-text); }
[data-theme="dark"] .ops-sp-time { color:var(--th-text); }
[data-theme="dark"] .ops-sp-dur { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .ops-sp-ops { color:var(--th-text-muted); }
[data-theme="dark"] .ops-sp-row { color:var(--th-text-muted); }
[data-theme="dark"] #rcModalOverlay .rc-modal-cancel:hover { background:var(--th-surface-3); }
[data-theme="dark"] .sc-page-title { color:var(--th-text); }
[data-theme="dark"] .sc-page-sub { color:var(--th-text-muted); }
[data-theme="dark"] .sc-input { border-color:var(--th-border); }
[data-theme="dark"] .sc-select { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .sc-mini-lbl { color:var(--th-text-muted); }
[data-theme="dark"] .sc-hint { background:var(--th-surface-2); color:var(--th-text-muted); }
[data-theme="dark"] .sc-btn-outline { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sc-btn-outline:hover { background:var(--th-surface-3); }
[data-theme="dark"] .sc-btn-add-group { border-color:var(--th-border); }
[data-theme="dark"] .sc-group-card { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .sc-group-hd { background:var(--th-surface-2); }
[data-theme="dark"] .sc-group-title { color:var(--th-text); }
[data-theme="dark"] .sc-half-label { color:var(--th-text-muted); }
[data-theme="dark"] .sc-chk-row { color:var(--th-text-muted); }
[data-theme="dark"] .sc-rules-hd { color:var(--th-text); }
[data-theme="dark"] .sc-color-pick { border-color:var(--th-border); }
[data-theme="dark"] .sc-swatch { border-color:var(--th-border); }
[data-theme="dark"] .sc-status { color:var(--th-text-muted); }
[data-theme="dark"] .sc-pb-skip { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .sc-tbl th { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sc-modal { background:var(--th-surface); }
[data-theme="dark"] .sc-modal-title { color:var(--th-text); }
[data-theme="dark"] .sc-modal-close { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .qa-title { color:var(--th-text); }
[data-theme="dark"] .qa-empty { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .qa-card { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .qa-card-logo { background:var(--th-surface-3); }
[data-theme="dark"] .qa-card-qr { background:var(--th-surface-2); }
[data-theme="dark"] .qa-card-content { color:var(--th-text-muted); }
[data-theme="dark"] .qa-card-foot { border-color:var(--th-border); }
[data-theme="dark"] .qa-sched { color:var(--th-text-muted); }
[data-theme="dark"] .qa-icon-btn { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .qa-toggle-slider { background:var(--th-border); }
[data-theme="dark"] .qa-modal { background:var(--th-surface); }
[data-theme="dark"] .qa-modal-header { border-color:var(--th-border); }
[data-theme="dark"] .qa-modal-close { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .qa-modal-footer { border-color:var(--th-border); }
[data-theme="dark"] .qa-studio-box { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .qa-studio-item { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .qa-studio-all { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .qa-logo-tab { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .qa-drop { color:var(--th-text-muted); }
[data-theme="dark"] .qa-logo-preview img { border-color:var(--th-border); }
[data-theme="dark"] .qa-logo-clear { background:var(--th-surface); }
[data-theme="dark"] .qa-preview-col label { color:var(--th-text-muted); }
[data-theme="dark"] .qa-qr-preview { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .sa-title { color:var(--th-text); }
[data-theme="dark"] .sa-stat { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .sa-stat-body b { color:var(--th-text); }
[data-theme="dark"] .sa-card { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .sa-toolbar { border-color:var(--th-border); }
[data-theme="dark"] .sa-search input { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .sa-search input:focus { background:var(--th-surface); }
[data-theme="dark"] .sa-filter { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .sa-count { color:var(--th-text-muted); }
[data-theme="dark"] .sa-table thead th { background:var(--th-surface-2); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sa-table tbody td { border-color:var(--th-border); }
[data-theme="dark"] .sa-user-meta b { color:var(--th-text); }
[data-theme="dark"] .sa-role-viewer { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .sa-role-select { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .sa-chip-more { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .sa-toggle-slider { background:var(--th-border); }
[data-theme="dark"] .sa-p-off { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .sa-p-off i { background:var(--th-border); }
[data-theme="dark"] .sa-p-never { background:var(--th-surface-2); border-color:var(--th-border); }
[data-theme="dark"] .sa-p-never i { background:var(--th-surface-3); }
[data-theme="dark"] .sa-presence-sub { color:var(--th-text-muted); }
[data-theme="dark"] .sa-icon-btn { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sa-modal { background:var(--th-surface); }
[data-theme="dark"] .sa-modal-header { border-color:var(--th-border); }
[data-theme="dark"] .sa-modal-close { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .sa-modal-close:hover { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .sa-modal-footer { border-color:var(--th-border); }
[data-theme="dark"] .sa-feat-count { color:var(--th-text-muted); }
[data-theme="dark"] .sa-brand-list { background:var(--th-surface); }
[data-theme="dark"] .sa-brand-item:hover { background:var(--th-surface-3); }
[data-theme="dark"] .sa-brand-box small { color:var(--th-text-muted); }
[data-theme="dark"] .sa-grp-box { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .sa-grp-tools button { background:var(--th-surface); color:var(--th-text-muted); border-color:var(--th-border); }
[data-theme="dark"] .sa-feat-item { background:var(--th-surface-2); }
[data-theme="dark"] .sa-feat-item:hover { background:var(--th-surface-3); }
[data-theme="dark"] .sa-feat-item:has(input:checked) { background:var(--th-surface); }

/* index.html inline CSS coverage */
[data-theme="dark"] #appSplash { background:var(--th-surface-2); }
[data-theme="dark"] #appSplash .splash-logo.has-logo { background:var(--th-surface); }
[data-theme="dark"] #appSplash .splash-title { color:var(--th-text); }
[data-theme="dark"] .lm-page-title { color:var(--th-text); }
[data-theme="dark"] .lm-page-subtitle { color:var(--th-text-muted); }
[data-theme="dark"] .lm-ios-btn-secondary { background:var(--th-surface-3); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .lm-ios-btn-secondary:hover { background:var(--th-surface-3); }
[data-theme="dark"] .lm-search-input { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .lm-layout { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .lm-sidebar { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .lm-sidebar-header { border-color:var(--th-border); }
[data-theme="dark"] .lm-sidebar-root-btn { background:var(--th-surface); color:var(--th-text); border-color:var(--th-border); }
[data-theme="dark"] .lm-sidebar-root-btn:hover { background:var(--th-surface-3); }
[data-theme="dark"] .lm-tree-item { color:var(--th-text); }
[data-theme="dark"] .lm-tree-item:hover { background:var(--th-surface-3); }
[data-theme="dark"] .lm-tree-toggle:hover { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .lm-tree-count { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .lm-main { background:var(--th-surface); }
[data-theme="dark"] .lm-breadcrumb { border-color:var(--th-border); }
[data-theme="dark"] .lm-section-label { color:var(--th-text-muted); }
[data-theme="dark"] .lm-card { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .lm-card-title { color:var(--th-text); }
[data-theme="dark"] .lm-action-btn:hover { background:var(--th-surface-3); color:var(--th-text); }
[data-theme="dark"] .lm-list { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .lm-link-row:hover { background:var(--th-surface); }
[data-theme="dark"] .lm-link-row:active { background:var(--th-surface-3); }
[data-theme="dark"] .lm-link-favicon { background:var(--th-surface-3); border-color:var(--th-border); }
[data-theme="dark"] .lm-link-title { color:var(--th-text); }
[data-theme="dark"] .lm-link-folder-tag { background:var(--th-surface-3); color:var(--th-text-muted); }
[data-theme="dark"] .lm-empty-icon { background:var(--th-surface-3); }
[data-theme="dark"] .lm-empty p { color:var(--th-text-muted); }
[data-theme="dark"] .lm-modal-title { color:var(--th-text); }
[data-theme="dark"] .lm-modal-label { color:var(--th-text); }
[data-theme="dark"] .lm-ios-input { background:var(--th-surface); }
[data-theme="dark"] .lm-icon-option { background:var(--th-surface); border-color:var(--th-border); }
@media (max-width: 768px) { [data-theme="dark"] .lm-sidebar { border-color:var(--th-border); } }
[data-theme="dark"] .dlz { background:var(--th-surface); border-color:var(--th-border); }
[data-theme="dark"] .dlz-preview img { border-color:var(--th-border); }

/* gradient neutral → surface phẳng (dark) */
[data-theme="dark"] #page-schedules #scheduleStats.schedule-stats:not([style*="none"]) { background:var(--th-surface); }
[data-theme="dark"] .kl-card--saved { background:var(--th-surface); }
[data-theme="dark"] #page-title-templates .title-templates-table thead th { background:var(--th-surface); }
[data-theme="dark"] #page-cart-templates .data-table thead th { background:var(--th-surface); }
[data-theme="dark"] .fl-tabs { background:var(--th-surface); }
[data-theme="dark"] .fl-tab-content { background:var(--th-surface); }
[data-theme="dark"] .fl-section-header { background:var(--th-surface); }
[data-theme="dark"] .fl-section-body { background:var(--th-surface); }
[data-theme="dark"] .fl-input { background:var(--th-surface); }
[data-theme="dark"] .fl-textarea { background:var(--th-surface); }
[data-theme="dark"] .fl-select { background:var(--th-surface); }
[data-theme="dark"] .fl-toggle-card { background:var(--th-surface); }
[data-theme="dark"] .fl-room-card { background:var(--th-surface); }
[data-theme="dark"] .fl-room-icon { background:var(--th-surface); }
[data-theme="dark"] .fl-room-card.platform-tiktok .fl-room-icon { background:var(--th-surface); }
[data-theme="dark"] .fl-links-container { background:var(--th-surface); }
[data-theme="dark"] .fl-links-add { background:var(--th-surface); }
[data-theme="dark"] .fl-btn-secondary { background:var(--th-surface); }
[data-theme="dark"] .fl-btn-secondary:hover { background:var(--th-surface); }
[data-theme="dark"] .fl-image-add { background:var(--th-surface); }
[data-theme="dark"] .fl-image-add-tabs { background:var(--th-surface); }
[data-theme="dark"] .fl-image-tab:hover { background:var(--th-surface); }
[data-theme="dark"] .fl-image-tab.active { background:var(--th-surface); }
[data-theme="dark"] .fl-image-add-content { background:var(--th-surface); }
[data-theme="dark"] .fl-upload-zone { background:var(--th-surface); }
[data-theme="dark"] .fl-editor-wrapper { background:var(--th-surface); }
[data-theme="dark"] #filterLinkForm .tox-toolbar__primary { background:var(--th-surface); }
[data-theme="dark"] .fl-image-card { background:var(--th-surface); }
[data-theme="dark"] .fl-image-info { background:var(--th-surface); }
[data-theme="dark"] .fl-images-empty { background:var(--th-surface); }
[data-theme="dark"] .fl-edit-url-dialog { background:var(--th-surface); }
[data-theme="dark"] .fl-edit-url-preview { background:var(--th-surface); }
[data-theme="dark"] .fl-edit-tab { background:var(--th-surface); }
[data-theme="dark"] .fl-edit-tab:hover { background:var(--th-surface); }
[data-theme="dark"] .fl-edit-url-footer { background:var(--th-surface); }
[data-theme="dark"] .fl-link-item { background:var(--th-surface); }
[data-theme="dark"] .fl-link-icon { background:var(--th-surface); }
[data-theme="dark"] .so-schedule-table thead th { background:var(--th-surface); }
[data-theme="dark"] .so-card.so-card--secstandalone { background:var(--th-surface); }
[data-theme="dark"] .upd-header { background:var(--th-surface); }
[data-theme="dark"] .fl-bg-dropzone { background:var(--th-surface); }
[data-theme="dark"] .sw-rec-toolbar { background:var(--th-surface); }
[data-theme="dark"] .swx-div { background:var(--th-surface); }
[data-theme="dark"] .sa-skel { background:var(--th-surface); }
[data-theme="dark"] .tdk-dl-skel-line { background:var(--th-surface); }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════
   KÊNH PHÁT SÓNG LIVESTREAM — combobox có tìm kiếm (modal Phòng Live) + ô hiển thị trong bảng
   Vì sao không dùng <select>: thẻ <option> không vẽ được logo sàn và không có ô tìm kiếm.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.lc-logo { width:1.05em; height:1.05em; flex:none; display:block; }
.lc-logo-fa { font-size:.92em; color:#94a3b8; }
.lc-chip { display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.lc-chip.lc-tiktok > .lc-logo { color:#0f172a; }
.lc-chip.lc-shopee > .lc-logo { color:#ee4d2d; }
.lc-chip.lc-missing > .lc-logo, .lc-chip.lc-missing .lc-logo-fa { color:#f59e0b; }
.lc-txt { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.lc-name { font-weight:700; color:#0f172a; font-size:.83rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-id { font-size:.71rem; color:#94a3b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-chip.lc-compact .lc-name { font-size:.8rem; }
.lc-empty { color:#94a3b8; font-size:.83rem; }
.lc-warn { color:#b45309; font-size:.72rem; font-weight:600; }

/* ── Nút mở combobox ── */
.lc-picker { position:relative; }
.lc-picker-btn { width:100%; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #e2e8f0;
  border-radius:10px; padding:9px 12px; cursor:pointer; text-align:left; min-height:42px; transition:border-color .15s ease, box-shadow .15s ease; }
.lc-picker-btn:hover { border-color:#c7d2fe; }
.lc-picker-btn:focus-visible, .lc-picker-btn[aria-expanded="true"] { outline:0; border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.lc-picker-cur { flex:1 1 auto; min-width:0; }
.lc-picker-caret { color:#94a3b8; font-size:.75rem; flex:none; transition:transform .18s ease; }
.lc-picker-btn[aria-expanded="true"] .lc-picker-caret { transform:rotate(180deg); }

/* ── Bảng thả xuống ── */
.lc-picker-panel { position:fixed; z-index:100050; background:#fff;
  border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 14px 34px rgba(2,6,23,.16); overflow:hidden; }
.lc-picker-search { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid #f1f5f9; background:#f8fafc; }
.lc-picker-search i { color:#94a3b8; font-size:.8rem; flex:none; }
.lc-picker-q { flex:1 1 auto; min-width:0; border:0; background:transparent; font-size:.83rem; color:#0f172a; padding:2px 0; }
.lc-picker-q:focus { outline:0; }
.lc-picker-list { max-height:270px; overflow-y:auto; padding:5px; }
.lc-opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; cursor:pointer; transition:background .12s ease; }
.lc-opt:hover, .lc-opt.is-active { background:#eef2ff; }
.lc-opt.is-sel { background:#e0e7ff; }
.lc-opt-none { color:#64748b; font-size:.81rem; font-weight:600; }
.lc-opt-none i { color:#cbd5e1; font-size:.8rem; }
.lc-tick { margin-left:auto; color:#4338ca; font-size:.76rem; flex:none; }
.lc-none { padding:22px 12px; text-align:center; color:#94a3b8; font-size:.8rem; }
.lc-none i { font-size:1.6rem; color:#cbd5e1; display:block; margin-bottom:8px; }
.lc-none small { display:block; margin-top:5px; font-size:.72rem; color:#cbd5e1; }

/* ── Dark theme ── */
[data-theme="dark"] .lc-name { color:var(--th-text, #e2e8f0); }
[data-theme="dark"] .lc-chip.lc-tiktok > .lc-logo { color:#f1f5f9; }
[data-theme="dark"] .lc-picker-btn { background:var(--th-surface, #0f172a); border-color:#334155; }
[data-theme="dark"] .lc-picker-panel { background:var(--th-surface, #0f172a); border-color:#334155; }
[data-theme="dark"] .lc-picker-search { background:#1e293b; border-bottom-color:#334155; }
[data-theme="dark"] .lc-picker-q { color:#e2e8f0; }
[data-theme="dark"] .lc-opt:hover, [data-theme="dark"] .lc-opt.is-active { background:#1e293b; }
[data-theme="dark"] .lc-opt.is-sel { background:#312e81; }

/* ── Responsive: cột kênh trong bảng phòng thu gọn dần, ô chọn luôn bấm được bằng ngón tay ── */
@media (max-width:1023px) {
  .lc-id { font-size:.68rem; }
  .lc-picker-list { max-height:220px; }
}
@media (max-width:767px) {
  .lc-picker-btn { min-height:40px; padding:8px 10px; }
  .lc-picker-list { max-height:46vh; }
}
@media (max-width:480px) {
  .lc-name { font-size:.78rem; }
  .lc-id { font-size:.66rem; }
  .lc-opt { padding:9px 10px; min-height:38px; }
}

/* ── Chọn phạm vi CẢNH BÁO LIVE trong form Webhook (studio / kênh) ── */
.wh-scope-box { grid-column: 1 / -1; margin-top: 6px; }
.wh-scope-note { font-size: .78rem; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 9px; padding: 8px 10px; margin: 6px 0 10px; line-height: 1.45; }
.wh-scope-lbl { font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase;
  letter-spacing: .02em; margin: 10px 0 6px; }
.wh-scope-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-scope-wrap.kenh { max-height: 190px; overflow-y: auto; padding: 2px; }
.wh-scope-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569; border-radius: 20px;
  padding: 5px 11px; font-size: .72rem; font-weight: 600; min-height: 30px; transition: .15s; }
.wh-scope-chip:hover { border-color: #a5b4fc; color: #4338ca; background: #f5f3ff; }
.wh-scope-chip.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.wh-scope-chip.studio { border-radius: 9px; }
.wh-scope-chip.studio.on { background: #059669; border-color: #059669; }
.wh-scope-chip b { background: rgba(15,23,42,.09); border-radius: 20px; padding: 0 6px; font-size: .66rem; }
.wh-scope-chip.on b { background: rgba(255,255,255,.26); }
.wh-scope-chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.2); }

/* ══ Trang CẢNH BÁO LIVE — THẺ DANH SÁCH (thiết kế lại 12/09/2026, kiểu thẻ repo GitHub) ══
   Viền 1px phẳng, dải màu trạng thái bên trái, chấm trạng thái có nhịp thở, nút hành động dạng ghost
   đậm dần khi rê chuột, chân thẻ có nút gạt Bật/Tắt. Tất cả class `lwc-`. */
/* KHÔNG dùng align-items:start — để thẻ cùng hàng cao bằng nhau thì margin-top:auto ở .lwc-foot mới
   đẩy được chân thẻ xuống đáy, hàng mới thẳng. */
.lw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(352px, 1fr)); gap: 14px; }

.lwc-card { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.lwc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #10b981, #059669); transition: background .16s; }
.lwc-card:hover { border-color: #cbd5e1; box-shadow: 0 8px 24px -14px rgba(15,23,42,.28); transform: translateY(-2px); }
.lwc-card.off { background: #fcfcfd; }
.lwc-card.off::before { background: #cbd5e1; }
.lwc-card.off .lwc-name { color: #64748b; }
.lwc-card.off .lwc-chip, .lwc-card.off .lwc-pv { opacity: .68; }

/* ── Đầu thẻ ── */
.lwc-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px 11px 16px; }
.lwc-htext { flex: 1; min-width: 0; }
.lwc-name { font-size: .93rem; font-weight: 700; color: #0f172a; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwc-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: .705rem; color: #94a3b8; min-width: 0; }
.lwc-st { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; flex-shrink: 0; }
.lwc-st.on { color: #059669; }
.lwc-st.off { color: #94a3b8; }
.lwc-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; position: relative; flex-shrink: 0; }
.lwc-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #10b981;
  animation: lwcPulse 2.2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes lwcPulse { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(1.3); opacity: 0; } }
.lwc-card.off .lwc-dot { background: #cbd5e1; }
.lwc-card.off .lwc-dot::after { display: none; }
.lwc-sep { color: #cbd5e1; flex-shrink: 0; }
.lwc-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .66rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── Nút hành động ── */
.lwc-acts { display: flex; gap: 2px; flex-shrink: 0; }
.lwc-ico { width: 30px; height: 30px; border: 1px solid transparent; background: transparent; color: #94a3b8;
  border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; transition: background .14s, color .14s, border-color .14s; padding: 0; }
.lwc-card:hover .lwc-ico { color: #64748b; }
.lwc-ico:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.lwc-ico:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
.lwc-ico.danger:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.lwc-ico:disabled { opacity: .45; cursor: not-allowed; }

/* ── Thân thẻ ── */
.lwc-body { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 11px; }
.lwc-blk-l { font-size: .625rem; font-weight: 700; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .045em; margin-bottom: 6px; }
.lwc-wrap { display: flex; flex-wrap: wrap; gap: 5px; }

.lwc-chip { display: inline-flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e8edf3;
  color: #475569; border-radius: 7px; padding: 3px 9px; font-size: .715rem; font-weight: 500; }
.lwc-chip i { font-size: .65rem; }
.lwc-chip b { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; }
.lwc-chip.tieng i { color: #d97706; }
.lwc-chip.hinh  i { color: #7c3aed; }
.lwc-chip.nguon i { color: #dc2626; }
.lwc-chip.len   i { color: #059669; }
.lwc-chip.xuong i { color: #64748b; }
.lwc-chip.lech  i { color: #0891b2; }
.lwc-chip.tinhchinh i { color: #6366f1; }   /* tin điều hành của sổ học — không phải sự cố */
/* Loại không có ngưỡng: thay ô nhập giây bằng dòng mô tả, cho chiếm hết bề ngang */
.lwx-loai-mota { color: #64748b; font-size: .72rem; line-height: 1.45; font-style: italic; flex: 1 1 auto; }

.lwc-pv { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; padding: 3px 9px;
  font-size: .705rem; font-weight: 600; background: #f1f5f9; border: 1px solid #e8edf3; color: #475569; }
.lwc-pv i { font-size: .62rem; }
.lwc-pv.st  { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.lwc-pv.all { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.lwc-pv.ex  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; text-decoration: line-through; }
.lwc-more { align-self: center; font-size: .68rem; color: #94a3b8; font-weight: 600; }
.lwc-note { margin-top: 6px; font-size: .685rem; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.lwc-note b { color: #475569; font-variant-numeric: tabular-nums; }

/* ── Chân thẻ ── */
.lwc-foot { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 6px;
  padding: 10px 14px 10px 16px; border-top: 1px solid #f1f5f9; background: #fcfdfe; }
.lwc-kp { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: .705rem; color: #64748b; white-space: nowrap; }
.lwc-kp i { font-size: .68rem; }
.lwc-kp.co i { color: #059669; }
.lwc-kp.khong i { color: #cbd5e1; }
.lwc-swlbl { margin-left: auto; font-size: .69rem; font-weight: 700; color: #94a3b8; flex-shrink: 0; }
.lwc-card:not(.off) .lwc-swlbl { color: #059669; }

/* ── Rỗng ── */
.lw-empty { grid-column: 1/-1; text-align: center; padding: 52px 16px; color: #94a3b8;
  border: 1px dashed #e2e8f0; border-radius: 14px; background: #fcfcfd; }
.lw-empty i { font-size: 2rem; color: #cbd5e1; display: block; margin-bottom: 12px; }
.lw-empty-sub { font-size: .78rem; margin-top: 6px; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .lw-list { grid-template-columns: 1fr; }
  .lwc-head { padding: 12px 10px 10px 13px; }
  .lwc-body { padding: 0 13px 11px; }
  .lwc-foot { padding: 9px 11px 9px 13px; }
  .lwc-ico { width: 32px; height: 32px; }
  /* Nút gạt nhìn vẫn 30x18 nhưng NỚI VÙNG CHẠM lên ~46x38 cho đủ ngưỡng chạm trên điện thoại */
  .lwc-foot .lwx-sw > input { inset: -10px -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lwc-dot::after { animation: none; opacity: 0; }
  .lwc-card { transition: none; }
  .lwc-card:hover { transform: none; }
}

/* ── Nền tối ── */
[data-theme="dark"] .lwc-card { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .lwc-card:hover { border-color: #484f58; box-shadow: 0 8px 24px -14px rgba(0,0,0,.7); }
[data-theme="dark"] .lwc-card.off { background: #12171d; }
[data-theme="dark"] .lwc-name { color: #e6edf3; }
[data-theme="dark"] .lwc-card.off .lwc-name { color: #8b949e; }
[data-theme="dark"] .lwc-card:hover .lwc-ico { color: #8b949e; }
[data-theme="dark"] .lwc-ico:hover { background: #1c2333; border-color: #30363d; color: #a5b4fc; }
[data-theme="dark"] .lwc-ico.danger:hover { background: #2d1214; border-color: #6e2529; color: #f85149; }
[data-theme="dark"] .lwc-chip { background: #0d1117; border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .lwc-chip b { color: #e6edf3; }
[data-theme="dark"] .lwc-pv { background: #0d1117; border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .lwc-pv.st { background: #0d1f17; border-color: #1f6f43; color: #3fb950; }
[data-theme="dark"] .lwc-pv.all { background: #1c2333; border-color: #3730a3; color: #a5b4fc; }
[data-theme="dark"] .lwc-pv.ex { background: #2d1214; border-color: #6e2529; color: #f85149; }
[data-theme="dark"] .lwc-note b { color: #c9d1d9; }
[data-theme="dark"] .lwc-foot { background: #12171d; border-top-color: #21262d; }
[data-theme="dark"] .lwc-kp { color: #8b949e; }
[data-theme="dark"] .lwc-kp.khong i { color: #484f58; }
[data-theme="dark"] .lw-empty { background: #12171d; border-color: #30363d; }
[data-theme="dark"] .lwc-st.off { color: #8b949e; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CẢNH BÁO LIVE — FORM (thiết kế lại 12/09/2026)
   Bố cục theo MỤC có đường phân tách mảnh, nút gạt thay ô tick, chọn kênh có avatar + logo sàn thật.
   Namespace riêng `lwx-` để không đụng `.lw-` (thẻ ngoài danh sách) lẫn `.wh-scope-` (thông báo lịch).
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.lwx-modal { max-width: min(96vw, 780px); }
.lwx-modal .modal-body { padding: 0 22px 4px; }
.lwx-modal .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid #eef2f6; display: block; }
.lwx-modal .modal-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.lwx-sub { font-size: .74rem; color: #94a3b8; margin-top: 3px; font-weight: 500; }

/* ── Mục ── */
.lwx-sec { padding: 18px 0; border-top: 1px solid #eef2f6; }
.lwx-sec:first-child { border-top: 0; }
.lwx-sec-h { margin-bottom: 11px; }
.lwx-sec-t { font-size: .8rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 7px; }
.lwx-sec-t .lwx-req { color: #ef4444; font-weight: 700; }
.lwx-sec-d { font-size: .725rem; color: #94a3b8; margin-top: 3px; line-height: 1.5; }
.lwx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Ô nhập ── */
.lwx-in { width: 100%; padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: .84rem; font-family: inherit; color: #0f172a; background: #fff;
  transition: border-color .15s, box-shadow .15s; }
.lwx-in::placeholder { color: #cbd5e1; }
.lwx-in:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.lwx-in.err { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.lwx-in.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; }
.lwx-hint { font-size: .7rem; color: #94a3b8; margin-top: 5px; line-height: 1.5; }

/* ── NÚT GẠT (thay ô tick) ── */
.lwx-sw { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.lwx-sw > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.lwx-sw > i { display: block; width: 34px; height: 20px; border-radius: 999px; background: #cbd5e1;
  transition: background .18s ease; position: relative; }
.lwx-sw > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.lwx-sw > input:checked + i { background: #4f46e5; }
.lwx-sw > input:checked + i::after { transform: translateX(14px); }
.lwx-sw > input:focus-visible + i { box-shadow: 0 0 0 3px rgba(99,102,241,.28); }
.lwx-sw > input:disabled { cursor: not-allowed; }
.lwx-sw > input:disabled + i { opacity: .45; }
.lwx-sw.sm > i { width: 30px; height: 18px; }
.lwx-sw.sm > i::after { width: 14px; height: 14px; }
.lwx-sw.sm > input:checked + i::after { transform: translateX(12px); }
.lwx-sw.ok > input:checked + i { background: #059669; }

/* Hàng tuỳ chọn có nút gạt bên phải */
.lwx-opt { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1.5px solid #e2e8f0;
  border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; margin: 0; }
.lwx-opt:hover { border-color: #c7d2fe; background: #fafaff; }
.lwx-opt-b { flex: 1; min-width: 0; display: block; }
.lwx-opt-t { display: block; font-size: .82rem; font-weight: 600; color: #0f172a; }
.lwx-opt-d { display: block; font-size: .7rem; color: #94a3b8; margin-top: 2px; line-height: 1.45; }

/* ── Loại sự cố ── */
.lwx-loai-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(202px, 1fr)); gap: 10px; }
.lwx-loai { border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 11px 12px; background: #f8fafc;
  transition: border-color .16s, background .16s, box-shadow .16s; }
.lwx-loai.on { border-color: #c7d2fe; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.lwx-loai-h { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }
.lwx-loai-ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: .74rem; background: #eef2ff; color: #6366f1; flex-shrink: 0; }
.lwx-loai.on .lwx-loai-ic { background: #e0e7ff; color: #4338ca; }
.lwx-loai-n { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: #0f172a; }
.lwx-loai-b { margin-top: 10px; font-size: .715rem; color: #64748b; }
.lwx-loai-bl { display: block; margin-bottom: 6px; }
.lwx-loai-br { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.lwx-ng { width: 68px; text-align: center; padding: 5px 7px; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: .78rem; font-weight: 700; color: #0f172a; font-family: inherit; background: #fff; }
.lwx-ng:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.lwx-ng:disabled { background: #f1f5f9; color: #cbd5e1; border-color: #eef2f6; }

/* Loại 'Host ngồi lệch khung' có NGƯỠNG THỨ HAI (phần trăm) — tách bằng một vạch mờ cho khỏi nhìn nhầm
   là ngưỡng giây thứ hai. `.lwx-ng` dùng chung nên ô % tự có đủ trạng thái focus/disabled. */
.lwx-loai-b2 { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0;
  font-size: .715rem; color: #64748b; }
.lwx-goi-pt { margin-top: 0; }

/* Bảng "không soi lệch cho kênh nào" — nằm TRONG thẻ loại, nên phải tự cuộn kẻo đẩy form dài vô tận
   (phạm vi có thể tới 80 kênh). Dùng lại .lwx-krow của khối studio cho đồng bộ. */
.lwx-tru-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.lwx-srch.sm { flex: 1 1 150px; min-width: 130px; }
.lwx-srch.sm input { font-size: .72rem; padding: 5px 8px 5px 26px; }
.lwx-srch.sm i { font-size: .68rem; left: 9px; }
.lwx-tru-body { max-height: 216px; overflow-y: auto; border: 1px solid #e8edf3; border-radius: 10px;
  background: #fbfcfe; padding: 4px; }
.lwx-tru-dem { color: #b45309; font-weight: 700; }
[data-theme="dark"] .lwx-tru-body { background: rgba(15,23,42,.35); border-color: #334155; }
[data-theme="dark"] .lwx-tru-dem { color: #fbbf24; }
@media (max-width: 480px) {
  .lwx-tru-body { max-height: 184px; }
  .lwx-tru-tools { gap: 6px; }
}
[data-theme="dark"] .lwx-loai-b2 { border-top-color: #334155; }

/* Dòng gợi ý ngưỡng dưới mỗi loại sự cố — bấm vào số là áp dụng */
.lwx-goi { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e8edf3; font-size: .68rem;
  color: #94a3b8; line-height: 1.5; }
.lwx-goi-h { display: flex; align-items: center; gap: 5px; }
.lwx-goi-d { display: block; margin-top: 3px; }
.lwx-goi i { font-size: .64rem; color: #f59e0b; flex-shrink: 0; }
.lwx-goi.dung { display: flex; align-items: center; gap: 5px; }
.lwx-goi.dung { color: #059669; }
.lwx-goi.dung > i { color: #10b981; }
.lwx-goi-b { border: 0; background: #eef2ff; color: #4338ca; font-family: inherit; font-size: .68rem;
  font-weight: 800; padding: 1px 7px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .14s, color .14s; }
.lwx-goi-b:hover { background: #4f46e5; color: #fff; }
.lwx-goi-b:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
[data-theme="dark"] .lwx-goi { border-top-color: #21262d; color: #8b949e; }
[data-theme="dark"] .lwx-goi.dung { color: #3fb950; }
[data-theme="dark"] .lwx-goi-b { background: #1c2333; color: #a5b4fc; }
[data-theme="dark"] .lwx-goi-b:hover { background: #4f46e5; color: #fff; }

/* ── Tóm tắt phạm vi ── */
.lwx-sum { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0; font-size: .755rem; color: #475569; margin-bottom: 12px; }
.lwx-sum .fa-globe { color: #6366f1; }
.lwx-sum.hep { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.lwx-sum b { color: inherit; font-weight: 800; }
.lwx-sum-x { margin-left: auto; border: 0; background: transparent; color: #94a3b8; cursor: pointer;
  font-size: .7rem; font-family: inherit; font-weight: 600; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; }
.lwx-sum-x:hover { background: rgba(15,23,42,.06); color: #475569; }

/* ── Studio ── */
.lwx-stu { border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; margin-bottom: 8px;
  overflow: hidden; transition: border-color .16s; }
.lwx-stu.on { border-color: #6ee7b7; }
.lwx-stu-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; margin: 0;
  background: #fff; transition: background .15s; }
.lwx-stu-h:hover { background: #f8fafc; }
.lwx-stu.on .lwx-stu-h { background: #f0fdf4; }
.lwx-stu-ic { width: 27px; height: 27px; border-radius: 8px; background: #f1f5f9; color: #94a3b8;
  display: flex; align-items: center; justify-content: center; font-size: .74rem; flex-shrink: 0; }
.lwx-stu.on .lwx-stu-ic { background: #d1fae5; color: #059669; }
.lwx-stu-n { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwx-stu-c { font-size: .665rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 20px;
  padding: 2px 8px; flex-shrink: 0; }
.lwx-stu.on .lwx-stu-c { background: #d1fae5; color: #047857; }
.lwx-stu-body { border-top: 1px dashed #e2e8f0; padding: 4px 12px 10px; max-height: 252px; overflow-y: auto; }
.lwx-stu-note { font-size: .69rem; color: #94a3b8; padding: 8px 0 5px; display: flex; align-items: center; gap: 6px; }

/* ── Hàng kênh (trong studio) ── */
.lwx-krow { display: flex; align-items: center; gap: 10px; padding: 6px 2px; margin: 0; cursor: pointer;
  border-radius: 8px; transition: background .13s; }
.lwx-krow:hover { background: #f8fafc; }
.lwx-kn { flex: 1; min-width: 0; font-size: .775rem; color: #334155; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwx-krow.off .lwx-kn { color: #cbd5e1; text-decoration: line-through; }
.lwx-krow.off .lwx-avw { opacity: .45; filter: grayscale(1); }

/* ── Avatar + logo sàn ── */
.lwx-avw { position: relative; flex-shrink: 0; width: 28px; height: 28px;
  transition: opacity .15s, filter .15s; }
.lwx-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #e2e8f0; display: block; }
.lwx-av.ph { display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, #818cf8, #a78bfa); }
/* ⚠ Ảnh ĐÈ LÊN chữ cái đầu (chữ là lớp nền). Ảnh hỏng / ảnh rỗng 1×1 → JS gỡ thẻ <img> là lộ chữ ra ngay,
   không cần thay thẻ nên không mất tham chiếu DOM. Xem `anhKenh()` trong liveWebhooks.js. */
.lwx-avimg { position: absolute; inset: 0; }
.lwx-plog { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(15,23,42,.22); display: block; }
.lwx-plog.tiktok { padding: 2px; color: #0f172a; }
.lwx-plog svg { width: 100%; height: 100%; display: block; }

/* ── Lưới chip kênh lẻ ── */
.lwx-ktools { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.lwx-srch { position: relative; flex: 1; min-width: 0; }
.lwx-srch > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #cbd5e1;
  font-size: .74rem; pointer-events: none; }
.lwx-srch > input { width: 100%; padding: 8px 11px 8px 30px; border: 1.5px solid #e2e8f0; border-radius: 9px;
  font-size: .78rem; font-family: inherit; color: #0f172a; background: #fff; }
.lwx-srch > input:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.lwx-kcount { font-size: .7rem; color: #94a3b8; font-weight: 600; flex-shrink: 0; }
.lwx-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 7px;
  max-height: 244px; overflow-y: auto; padding: 3px; }
.lwx-kchip { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 8px; border: 1.5px solid #e2e8f0;
  border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .14s, background .14s, transform .14s; }
.lwx-kchip:hover { border-color: #a5b4fc; background: #faf9ff; transform: translateY(-1px); }
.lwx-kchip:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.lwx-kchip.on { border-color: #4f46e5; background: #eef2ff; }
.lwx-kchip-n { flex: 1; min-width: 0; font-size: .765rem; color: #334155; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwx-kchip.on .lwx-kchip-n { color: #3730a3; font-weight: 700; }
.lwx-kchip-tick { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #e2e8f0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .55rem; color: transparent;
  transition: background .14s, border-color .14s, color .14s; }
.lwx-kchip.on .lwx-kchip-tick { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* ── Rỗng ── */
.lwx-none { text-align: center; padding: 22px 12px; color: #cbd5e1; font-size: .76rem; }
.lwx-none i { font-size: 1.5rem; display: block; margin-bottom: 8px; }

/* ── Responsive ── */
@media (max-width: 767px) {
  /* Nút gợi ý ngưỡng: nhìn vẫn nhỏ gọn nhưng NỚI VÙNG CHẠM cho đủ ngưỡng chạm trên điện thoại.
     ⚠ Phải để Ở ĐÂY (sau định nghĩa gốc .lwx-goi-b) — đặt trong khối CSS thẻ phía trên là bị đè. */
  .lwx-goi-b { padding: 13px 12px; margin: -12px -4px; }
  .lwx-modal .modal-body, .lwx-modal .modal-header { padding-left: 16px; padding-right: 16px; }
  .lwx-grid2 { grid-template-columns: 1fr; }
  .lwx-kgrid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); max-height: 210px; }
}
@media (max-width: 480px) {
  .lwx-modal .modal-body, .lwx-modal .modal-header { padding-left: 13px; padding-right: 13px; }
  .lwx-loai-box { grid-template-columns: 1fr; }
  .lwx-kgrid { grid-template-columns: 1fr; }
  .lwx-sec { padding: 14px 0; }
  .lwx-opt { padding: 10px 11px; }
  .lwx-kcount { display: none; }
  /* .modal có padding-lg dùng chung cho mọi modal → chỉ thu riêng modal này để màn hẹp đỡ phí lề */
  #lwModal { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lwx-sw > i::after, .lwx-kchip, .lwx-loai, .lwx-stu { transition: none; }
  .lwx-kchip:hover { transform: none; }
}

/* ── Nền tối ── */
[data-theme="dark"] .lwx-modal .modal-header { border-bottom-color: #30363d; }
[data-theme="dark"] .lwx-sec { border-top-color: #30363d; }
[data-theme="dark"] .lwx-sec-t { color: #e6edf3; }
[data-theme="dark"] .lwx-in,
[data-theme="dark"] .lwx-ng,
[data-theme="dark"] .lwx-srch > input { background: #0d1117; border-color: #30363d; color: #e6edf3; }
[data-theme="dark"] .lwx-in::placeholder { color: #484f58; }
[data-theme="dark"] .lwx-ng:disabled { background: #161b22; color: #484f58; border-color: #21262d; }
[data-theme="dark"] .lwx-opt { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .lwx-opt:hover { background: #1c2128; border-color: #3f4650; }
[data-theme="dark"] .lwx-opt-t { color: #e6edf3; }
[data-theme="dark"] .lwx-loai { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .lwx-loai.on { background: #161b22; border-color: #4f46e5; }
[data-theme="dark"] .lwx-loai-n { color: #e6edf3; }
[data-theme="dark"] .lwx-loai-ic { background: #1c2333; color: #818cf8; }
[data-theme="dark"] .lwx-sum { background: #161b22; border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .lwx-sum.hep { background: #0d1f17; border-color: #1f6f43; color: #3fb950; }
[data-theme="dark"] .lwx-sum-x:hover { background: rgba(255,255,255,.08); color: #c9d1d9; }
[data-theme="dark"] .lwx-stu { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .lwx-stu.on { border-color: #1f6f43; }
[data-theme="dark"] .lwx-stu-h { background: #161b22; }
[data-theme="dark"] .lwx-stu-h:hover { background: #1c2128; }
[data-theme="dark"] .lwx-stu.on .lwx-stu-h { background: #0d1f17; }
[data-theme="dark"] .lwx-stu-n { color: #e6edf3; }
[data-theme="dark"] .lwx-stu-ic { background: #21262d; color: #8b949e; }
[data-theme="dark"] .lwx-stu.on .lwx-stu-ic { background: #113023; color: #3fb950; }
[data-theme="dark"] .lwx-stu-c { background: #21262d; color: #8b949e; }
[data-theme="dark"] .lwx-stu.on .lwx-stu-c { background: #113023; color: #3fb950; }
[data-theme="dark"] .lwx-stu-body { border-top-color: #30363d; }
[data-theme="dark"] .lwx-krow:hover { background: #1c2128; }
[data-theme="dark"] .lwx-kn { color: #c9d1d9; }
[data-theme="dark"] .lwx-krow.off .lwx-kn { color: #484f58; }
[data-theme="dark"] .lwx-kchip { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .lwx-kchip:hover { background: #1c2128; border-color: #3f4650; }
[data-theme="dark"] .lwx-kchip.on { background: #1c2333; border-color: #4f46e5; }
[data-theme="dark"] .lwx-kchip-n { color: #c9d1d9; }
[data-theme="dark"] .lwx-kchip.on .lwx-kchip-n { color: #a5b4fc; }
[data-theme="dark"] .lwx-kchip-tick { border-color: #30363d; }
[data-theme="dark"] .lwx-plog { background: #161b22; box-shadow: 0 0 0 1.5px #161b22, 0 1px 2px rgba(0,0,0,.4); }
[data-theme="dark"] .lwx-plog.tiktok { color: #fff; }
[data-theme="dark"] .lwx-sw > i { background: #30363d; }
[data-theme="dark"] .lwx-hint, [data-theme="dark"] .lwx-sec-d, [data-theme="dark"] .lwx-sub { color: #8b949e; }

/* Thẻ ngoài danh sách: hiện thêm kênh đã gạt */
.lw-pv.ex { background: #fef2f2; border-color: #fecaca; color: #b91c1c; text-decoration: line-through; }
[data-theme="dark"] .lw-pv.ex { background: #2d1214; border-color: #6e2529; color: #f85149; }

/* ══ Tab Live: TÁCH HAI SÀN THÀNH HAI MỤC RIÊNG ══
   Trước đây ô nhập TikTok và Shopee nằm sát nhau không có gì phân cách, lại dùng CHUNG một danh sách 80 chip
   của cả hai sàn → rất dễ nhập nhầm ô và tìm nhầm kênh. Mỗi mục nay có viền + màu nhận diện riêng của sàn. */
.tdk-san { margin-top: 14px; padding: 13px 14px 12px; border: 1.5px solid #e2e8f0; border-radius: 13px;
  background: #fff; position: relative; }
.tdk-san::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; }
.tdk-san-tt::before { background: linear-gradient(180deg, #25F4EE, #FE2C55); }
.tdk-san-sp::before { background: #EE4D2D; }
.tdk-san-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.tdk-san-logo { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: .82rem; flex-shrink: 0; }
.tdk-san-tt .tdk-san-logo { background: #0f172a; color: #fff; }
.tdk-san-sp .tdk-san-logo { background: #EE4D2D; color: #fff; }
.tdk-san-ten { font-size: .86rem; font-weight: 700; color: #0f172a; }
.tdk-san-mo { font-size: .72rem; color: #94a3b8; }
.tdk-san .tdk-ch-container { margin-top: 10px; }
.tdk-san .tdk-chk { margin-top: 8px; }
@media (max-width: 600px) {
  .tdk-san { padding: 11px 11px 10px; }
  .tdk-san-mo { width: 100%; }
}
[data-theme="dark"] .tdk-san { background: #161b22; border-color: #30363d; }
[data-theme="dark"] .tdk-san-ten { color: #e6edf3; }
[data-theme="dark"] .tdk-san-mo { color: #8b949e; }
[data-theme="dark"] .tdk-san-tt .tdk-san-logo { background: #0d1117; }


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   RADAR REPO (namespace `rr-`) — thêm 21/09/2026.
   ⚠ Khối này NỐI Ở CUỐI FILE. Mọi @media của `.rr-*` phải nằm TRONG khối này, đừng nhét lên các
     khối trước — cùng specificity thì định nghĩa đến SAU thắng, đặt nhầm chỗ là bị đè âm thầm.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.rr-tomtat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.rr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.rr-chip i { font-size: .7rem; }
.rr-chip-song   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rr-chip-nguoi  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.rr-chip-luutru { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.rr-chip-bao    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.rr-chip-mo     { background: transparent; color: #94a3b8; border-color: #e2e8f0; font-weight: 500; }

.rr-thanh { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rr-tim, .rr-token { display: flex; align-items: center; gap: 8px; flex: 1 1 340px; min-width: 0;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 6px 10px;
  transition: border-color .18s ease, box-shadow .18s ease; }
.rr-tim:focus-within, .rr-token:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.rr-tim > i, .rr-token > i { color: #94a3b8; font-size: .8rem; flex: none; }
.rr-tim input, .rr-token input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: .78rem; color: #0f172a; padding: 5px 0; font-family: inherit; }
.rr-tim input::placeholder, .rr-token input::placeholder { color: #cbd5e1; }

.rr-tim-kq { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 14px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.rr-tim-trang { padding: 16px; text-align: center; color: #94a3b8; font-size: .78rem; }
.rr-tim-dong { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
.rr-tim-dong:last-child { border-bottom: 0; }
.rr-tim-tt { flex: 1 1 auto; min-width: 0; }
.rr-tim-ten { font-weight: 700; font-size: .8rem; color: #4f46e5; text-decoration: none; }
.rr-tim-ten:hover { text-decoration: underline; }
.rr-tim-so { display: block; font-size: .7rem; color: #94a3b8; margin-top: 2px; }
.rr-tim-mota { font-size: .72rem; color: #64748b; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-tim-da { font-size: .72rem; color: #059669; font-weight: 600; white-space: nowrap; }

.rr-loc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rr-loc-nut { border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px;
  padding: 6px 14px; font-size: .74rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .16s ease; min-height: 32px; }
.rr-loc-nut:hover { border-color: #c7d2fe; color: #4f46e5; }
.rr-loc-nut:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.rr-loc-nut.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; }

.rr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: stretch; }
.rr-card { display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 14px 15px; position: relative; overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease; }
.rr-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #cbd5e1; }
.rr-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.07); transform: translateY(-1px); }
.rr-card.rr-song::before    { background: #10b981; }
.rr-card.rr-nguoi::before   { background: #f59e0b; }
.rr-card.rr-luutru::before  { background: #94a3b8; }
.rr-card.rr-loi::before     { background: #ef4444; }
.rr-card.rr-tat { opacity: .58; }

.rr-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rr-name-wrap { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.rr-name { font-weight: 700; font-size: .82rem; color: #0f172a; text-decoration: none; word-break: break-word; }
.rr-name:hover { color: #4f46e5; text-decoration: underline; }
.rr-tag { font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.rr-tag-dung { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.rr-suc { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700;
  white-space: nowrap; color: #64748b; flex: none; }
.rr-song .rr-suc   { color: #059669; }
.rr-nguoi .rr-suc  { color: #b45309; }
.rr-luutru .rr-suc { color: #64748b; }
.rr-loi .rr-suc    { color: #dc2626; }

.rr-vaitro { font-size: .73rem; line-height: 1.5; color: #475569; }
.rr-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: .7rem; color: #64748b; }
.rr-stats i { color: #94a3b8; margin-right: 3px; }
.rr-ban { font-size: .73rem; color: #475569; }
.rr-ban i { color: #8b5cf6; margin-right: 4px; }
.rr-ban a { color: #4f46e5; font-weight: 700; text-decoration: none; }
.rr-ban a:hover { text-decoration: underline; }
.rr-mo { color: #94a3b8; font-weight: 500; }

.rr-issues { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 10px; }
.rr-issues-nhan { font-size: .66rem; font-weight: 800; color: #b45309; margin-bottom: 4px; letter-spacing: .02em; }
.rr-issue { display: block; font-size: .71rem; color: #92400e; text-decoration: none; padding: 2px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-issue:hover { text-decoration: underline; }
.rr-loi-dong { font-size: .71rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 9px; padding: 6px 9px; }

.rr-card-chan { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 9px; border-top: 1px solid #f1f5f9; }
.rr-gat { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; position: relative; }
.rr-gat input { position: absolute; inset: -10px -8px; opacity: 0; cursor: pointer; margin: 0; }
.rr-gat-tron { width: 30px; height: 18px; border-radius: 999px; background: #cbd5e1; position: relative;
  transition: background .18s ease; flex: none; }
.rr-gat-tron::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.rr-gat input:checked + .rr-gat-tron { background: #10b981; }
.rr-gat input:checked + .rr-gat-tron::after { transform: translateX(12px); }
.rr-gat input:focus-visible + .rr-gat-tron { box-shadow: 0 0 0 3px rgba(99,102,241,.16); }
.rr-gat-chu { font-size: .69rem; font-weight: 600; color: #64748b; }
.rr-xoa { border: 1px solid #e2e8f0; background: #fff; color: #94a3b8; border-radius: 9px;
  min-width: 32px; min-height: 32px; cursor: pointer; transition: all .16s ease; }
.rr-xoa:hover { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
.rr-xoa:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(239,68,68,.14); }

.rr-trong { grid-column: 1 / -1; text-align: center; padding: 42px 18px; color: #64748b; }
.rr-trong i { color: #cbd5e1; margin-bottom: 12px; }
.rr-trong p { margin: 4px 0; font-size: .8rem; }

[data-theme="dark"] .rr-chip { background: #161b22; color: #8b949e; border-color: #30363d; }
[data-theme="dark"] .rr-chip-song   { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.3); }
[data-theme="dark"] .rr-chip-nguoi  { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.3); }
[data-theme="dark"] .rr-chip-bao    { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); }
[data-theme="dark"] .rr-chip-mo     { background: transparent; color: #6e7681; border-color: #30363d; }
[data-theme="dark"] .rr-tim, [data-theme="dark"] .rr-token,
[data-theme="dark"] .rr-tim-kq, [data-theme="dark"] .rr-card { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .rr-tim input, [data-theme="dark"] .rr-token input { color: #e6edf3; }
[data-theme="dark"] .rr-tim-dong { border-bottom-color: #21262d; }
[data-theme="dark"] .rr-name { color: #e6edf3; }
[data-theme="dark"] .rr-vaitro { color: #8b949e; }
[data-theme="dark"] .rr-stats, [data-theme="dark"] .rr-ban { color: #8b949e; }
[data-theme="dark"] .rr-loc-nut { background: #0d1117; border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .rr-loc-nut.active { color: #fff; }
[data-theme="dark"] .rr-card-chan { border-top-color: #21262d; }
[data-theme="dark"] .rr-issues { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }
[data-theme="dark"] .rr-issue { color: #fbbf24; }
[data-theme="dark"] .rr-loi-dong { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #f87171; }
[data-theme="dark"] .rr-xoa { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .rr-tag-dung { background: rgba(99,102,241,.15); color: #a5b4fc; border-color: rgba(99,102,241,.35); }

@media (max-width: 1023px) {
  .rr-list { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
}
@media (max-width: 767px) {
  .rr-list { grid-template-columns: 1fr; }
  .rr-thanh { flex-direction: column; }
  .rr-tim, .rr-token { flex: 1 1 auto; }
  .rr-card { padding: 12px 13px; }
}
@media (max-width: 480px) {
  .rr-tomtat { gap: 6px; }
  .rr-chip { font-size: .66rem; padding: 4px 9px; }
  .rr-loc-nut { padding: 6px 11px; font-size: .7rem; }
  .rr-name { font-size: .78rem; }
  .rr-vaitro, .rr-ban { font-size: .7rem; }
  .rr-stats { gap: 8px; font-size: .67rem; }
  .rr-tim input, .rr-token input { font-size: .74rem; }
  .rr-gat-chu { display: none; }        /* mobile nhỏ: chỉ còn nút gạt, vẫn đủ 32px vùng chạm */
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TRUNG TÂM CẬP NHẬT (namespace `cn-`) — thêm 21/09/2026.
   ⚠ Khối NỐI CUỐI FILE. Mọi @media của `.cn-*` phải nằm TRONG khối này (cùng specificity thì
     định nghĩa đến SAU thắng — đặt lên khối trước là bị đè âm thầm).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Hàng số tổng quan: bấm được, chính là bộ lọc ── */
.cn-tong { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.cn-o { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 15px;
  border: 1px solid #e2e8f0; border-left-width: 3px; border-radius: 13px; background: #fff; cursor: pointer;
  font-family: inherit; text-align: left; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.cn-o:hover { box-shadow: 0 5px 16px rgba(15,23,42,.07); transform: translateY(-1px); }
.cn-o:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.16); }
.cn-o.active { box-shadow: 0 0 0 2px rgba(99,102,241,.28); }
.cn-o-so { font-size: 1.5rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.cn-o-nhan { font-size: .69rem; font-weight: 600; color: #64748b; }
.cn-o-major { border-left-color: #ef4444; } .cn-o-major .cn-o-so { color: #dc2626; }
.cn-o-minor { border-left-color: #f59e0b; } .cn-o-minor .cn-o-so { color: #b45309; }
.cn-o-patch { border-left-color: #10b981; } .cn-o-patch .cn-o-so { color: #059669; }
.cn-o-ok    { border-left-color: #cbd5e1; } .cn-o-ok    .cn-o-so { color: #64748b; }

.cn-phu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cn-canh { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: .73rem; font-weight: 600; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cn-canh-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.cn-mo2 { font-size: .71rem; color: #94a3b8; }

/* ── Thanh lọc ── */
.cn-loc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cn-loc-nut { border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px;
  padding: 6px 14px; font-size: .74rem; font-weight: 600; cursor: pointer; font-family: inherit;
  min-height: 32px; transition: all .16s ease; }
.cn-loc-nut:hover { border-color: #c7d2fe; color: #4f46e5; }
.cn-loc-nut:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.cn-loc-nut.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; }

/* ── Nhóm ── */
.cn-nhom { margin-bottom: 18px; }
.cn-nhom-dau { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; padding: 0 2px 7px; }
.cn-nhom-so { background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 1px 8px;
  font-size: .66rem; font-weight: 700; letter-spacing: 0; }

/* ── Dòng ── */
.cn-row { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 7px;
  overflow: hidden; position: relative; transition: box-shadow .16s ease; }
.cn-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #cbd5e1; }
.cn-row:hover { box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.cn-row.cn-major::before { background: #ef4444; }
.cn-row.cn-minor::before { background: #f59e0b; }
.cn-row.cn-patch::before { background: #10b981; }
.cn-row.cn-ok::before    { background: #cbd5e1; }
.cn-row.cn-mo::before    { background: #94a3b8; }
.cn-row.cn-boqua { opacity: .55; }

.cn-row-main { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 15px 12px 17px;
  background: transparent; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.cn-row-main:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(99,102,241,.25); }

.cn-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; width: 104px;
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; }
.cn-major .cn-chip { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cn-minor .cn-chip { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.cn-patch .cn-chip { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.cn-ok    .cn-chip { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.cn-mo    .cn-chip { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.cn-ten-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cn-ten { font-weight: 700; font-size: .8rem; color: #0f172a; word-break: break-word; }
.cn-tag { font-size: .55rem; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.cn-tag-he { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.cn-tag-bq { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.cn-vai { flex-basis: 100%; font-size: .71rem; color: #64748b; line-height: 1.45; }

/* Số hiệu để CHỮ ĐỀU cho dễ so từng bậc — đúng lối `npm outdated` */
.cn-so { flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; }
.cn-v-cu { color: #94a3b8; }
.cn-v-moi { color: #0f172a; font-weight: 600; }
.cn-v-moi b { font-weight: 800; }
.cn-major .cn-v-moi b { color: #dc2626; }
.cn-minor .cn-v-moi b { color: #b45309; }
.cn-patch .cn-v-moi b { color: #059669; }
.cn-mui { color: #cbd5e1; font-size: .62rem; }
.cn-xoay { flex: none; color: #cbd5e1; font-size: .72rem; transition: transform .2s ease; }
.cn-mo-rong .cn-xoay { transform: rotate(180deg); }

/* ── Chi tiết mở rộng ── */
.cn-chitiet { padding: 0 15px 14px 17px; display: flex; flex-direction: column; gap: 9px;
  border-top: 1px dashed #e2e8f0; padding-top: 12px; margin: 0 0 0 0; }
.cn-y, .cn-ghi { font-size: .73rem; line-height: 1.5; color: #475569; display: flex; gap: 8px; align-items: flex-start; }
.cn-y i, .cn-ghi i { margin-top: 2px; flex: none; color: #94a3b8; }
.cn-major .cn-y i { color: #dc2626; } .cn-minor .cn-y i { color: #b45309; } .cn-patch .cn-y i { color: #059669; }
.cn-ghi-loi { color: #b91c1c; }
.cn-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .7rem; color: #94a3b8; }
.cn-meta code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cn-lenh { display: flex; align-items: center; gap: 8px; background: #0f172a; border-radius: 10px;
  padding: 9px 11px; overflow-x: auto; }
.cn-lenh code { color: #e2e8f0; font-size: .74rem; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cn-sao { flex: none; margin-left: auto; background: rgba(255,255,255,.1); border: 0; color: #cbd5e1;
  border-radius: 7px; min-width: 30px; min-height: 30px; cursor: pointer; transition: all .15s ease; }
.cn-sao:hover { background: rgba(255,255,255,.2); color: #fff; }
.cn-sao:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.35); }
.cn-nut { display: flex; flex-wrap: wrap; gap: 8px; }

.cn-trong { text-align: center; padding: 44px 18px; color: #64748b; }
.cn-trong i { color: #a7f3d0; margin-bottom: 12px; }
.cn-trong p { margin: 4px 0; font-size: .82rem; }

/* ── Nền tối ── */
[data-theme="dark"] .cn-o, [data-theme="dark"] .cn-row { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .cn-o-nhan { color: #8b949e; }
[data-theme="dark"] .cn-ten { color: #e6edf3; }
[data-theme="dark"] .cn-vai { color: #8b949e; }
[data-theme="dark"] .cn-v-moi { color: #e6edf3; }
[data-theme="dark"] .cn-loc-nut { background: #0d1117; border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .cn-loc-nut.active { color: #fff; }
[data-theme="dark"] .cn-nhom-so { background: #161b22; color: #8b949e; }
[data-theme="dark"] .cn-chitiet { border-top-color: #21262d; }
[data-theme="dark"] .cn-y, [data-theme="dark"] .cn-ghi { color: #8b949e; }
[data-theme="dark"] .cn-meta code { background: #161b22; color: #8b949e; }
[data-theme="dark"] .cn-canh { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); }
[data-theme="dark"] .cn-canh-ok { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.3); }
[data-theme="dark"] .cn-tag-he { background: rgba(99,102,241,.15); color: #a5b4fc; border-color: rgba(99,102,241,.35); }
[data-theme="dark"] .cn-tag-bq { background: #161b22; color: #8b949e; border-color: #30363d; }
[data-theme="dark"] .cn-major .cn-chip { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }
[data-theme="dark"] .cn-minor .cn-chip { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fbbf24; }
[data-theme="dark"] .cn-patch .cn-chip { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: #34d399; }
[data-theme="dark"] .cn-ok .cn-chip, [data-theme="dark"] .cn-mo .cn-chip { background: #161b22; border-color: #30363d; color: #8b949e; }

/* ── Thu nhỏ dần ── */
@media (max-width: 1023px) {
  .cn-tong { grid-template-columns: repeat(2, 1fr); }
  .cn-so { font-size: .72rem; }
}
@media (max-width: 767px) {
  /* Dồn thành khối dọc: số hiệu xuống hàng riêng cho đủ chỗ, không cắt chữ */
  .cn-row-main { flex-wrap: wrap; gap: 8px 10px; padding: 11px 13px 11px 15px; }
  .cn-chip { width: auto; }
  .cn-ten-wrap { flex: 1 1 100%; order: 2; }
  .cn-so { flex: 1 1 100%; order: 3; }
  .cn-xoay { order: 1; margin-left: auto; }
  .cn-chitiet { padding-left: 15px; }
}
@media (max-width: 480px) {
  .cn-tong { gap: 7px; }
  .cn-o { padding: 10px 11px; border-radius: 11px; }
  .cn-o-so { font-size: 1.22rem; }
  .cn-o-nhan { font-size: .64rem; }
  .cn-loc-nut { padding: 6px 11px; font-size: .7rem; }
  .cn-ten { font-size: .76rem; }
  .cn-vai { font-size: .68rem; }
  .cn-so { font-size: .7rem; }
  .cn-lenh code { font-size: .68rem; }
  .cn-nut .btn { flex: 1 1 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TRUNG TÂM CẬP NHẬT — bản dựng lại 21/09/2026 (user: "giao diện đẹp hơn, nó đang cơ bản quá").
   Thêm: tấm tổng quan có thanh phân đoạn · ô số có biểu tượng · nút NÂNG THẬT · khung nhật ký chạy
   · khung xương lúc tải. NỐI CUỐI FILE, mọi @media của `.cn-*` nằm trong khối này.
   ⚠ Khối `cn-` CŨ vẫn ở trên; mấy quy tắc dưới đây cố ý ĐÈ LÊN nó (đến sau thắng) — đừng xoá khối cũ,
     phần lớn kiểu dòng/chip/chi tiết vẫn dùng lại nguyên.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* `#cnTong` giờ chứa tấm tổng quan + hàng ô số, nên KHÔNG còn là lưới 4 cột như bản đầu */
.cn-tong { display: block; margin-bottom: 12px; }

.cn-hero { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%); color: #fff;
  border-radius: 18px; padding: 20px 22px; margin-bottom: 12px; position: relative; overflow: hidden; }
.cn-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); }
.cn-hero-so { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.cn-hero-so b { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.cn-hero-so span { font-size: .8rem; color: rgba(255,255,255,.72); font-weight: 500; }
.cn-thanh { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin: 14px 0 8px;
  background: rgba(255,255,255,.14); position: relative; z-index: 1; }
.cn-doan { display: block; height: 100%; transition: width .45s cubic-bezier(.34,1.2,.64,1); }
.cn-d-major { background: #f87171; } .cn-d-minor { background: #fbbf24; }
.cn-d-patch { background: #34d399; } .cn-d-bq { background: #64748b; } .cn-d-ok { background: #a5b4fc; }
.cn-hero-pt { font-size: .72rem; color: rgba(255,255,255,.66); font-weight: 600; position: relative; z-index: 1; }

.cn-o-hang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cn-o { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 15px;
  border: 1px solid #e2e8f0; border-left-width: 3px; border-radius: 14px; background: #fff; cursor: pointer;
  font-family: inherit; text-align: left; transition: box-shadow .16s ease, transform .16s ease; }
.cn-o-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .78rem; }
.cn-o-major .cn-o-ic { background: #fef2f2; color: #dc2626; }
.cn-o-minor .cn-o-ic { background: #fffbeb; color: #b45309; }
.cn-o-patch .cn-o-ic { background: #ecfdf5; color: #059669; }
.cn-o-ok    .cn-o-ic { background: #f1f5f9; color: #64748b; }
.cn-o-giua { display: flex; align-items: baseline; gap: 7px; }
.cn-o-so { font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cn-o-nhan { font-size: .74rem; font-weight: 700; color: #475569; }
.cn-o-phu { font-size: .66rem; color: #94a3b8; font-weight: 500; }

/* Nút NÂNG THẬT — cố ý nổi hẳn để không ai bấm nhầm tưởng là nút phụ */
.cn-nut-nang { background: linear-gradient(135deg, #059669, #10b981); border: 0; color: #fff; font-weight: 700; }
.cn-nut-nang:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.cn-nut-nang:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cn-nut-nang:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(16,185,129,.3); }
.cn-khong-nang { display: inline-flex; align-items: center; gap: 7px; font-size: .71rem; color: #94a3b8;
  background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 9px; padding: 6px 11px; }

.cn-row.cn-dang-nang { box-shadow: 0 0 0 2px rgba(16,185,129,.35); }

/* Kết quả một lần nâng — kể cả khi HỎNG cũng phải hiện đủ nhật ký, không nuốt lỗi */
.cn-kq { border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cn-kq-ok  { background: #ecfdf5; border: 1px solid #a7f3d0; }
.cn-kq-loi { background: #fef2f2; border: 1px solid #fecaca; }
.cn-kq-dau { font-size: .76rem; font-weight: 700; display: flex; gap: 8px; align-items: flex-start; }
.cn-kq-ok .cn-kq-dau  { color: #047857; }
.cn-kq-loi .cn-kq-dau { color: #b91c1c; }
.cn-kq-ghi { font-size: .71rem; color: #475569; }
.cn-kq-ghi code { background: rgba(15,23,42,.06); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.cn-kq-log { margin: 0; background: #0f172a; color: #cbd5e1; border-radius: 9px; padding: 9px 11px;
  font-size: .68rem; line-height: 1.5; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.cn-canh-xem { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.cn-nhom-dau i { color: #cbd5e1; }

/* Khung xương lúc tải — đỡ hụt hẫng hơn một dòng chữ "Đang tải" */
.cn-row.cn-xuong { padding: 15px 17px; pointer-events: none; }
.cn-xuong-1, .cn-xuong-2 { height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%; animation: cnNhap 1.3s ease infinite; }
.cn-xuong-1 { width: 42%; margin-bottom: 9px; }
.cn-xuong-2 { width: 74%; }
@keyframes cnNhap { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

[data-theme="dark"] .cn-o { background: #0d1117; border-color: #30363d; }
[data-theme="dark"] .cn-o-nhan { color: #e6edf3; }
[data-theme="dark"] .cn-o-phu { color: #6e7681; }
[data-theme="dark"] .cn-o-major .cn-o-ic { background: rgba(239,68,68,.14); color: #f87171; }
[data-theme="dark"] .cn-o-minor .cn-o-ic { background: rgba(245,158,11,.14); color: #fbbf24; }
[data-theme="dark"] .cn-o-patch .cn-o-ic { background: rgba(16,185,129,.14); color: #34d399; }
[data-theme="dark"] .cn-o-ok .cn-o-ic { background: #161b22; color: #8b949e; }
[data-theme="dark"] .cn-kq-ok  { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.28); }
[data-theme="dark"] .cn-kq-loi { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.28); }
[data-theme="dark"] .cn-kq-ghi { color: #8b949e; }
[data-theme="dark"] .cn-kq-ghi code { background: rgba(255,255,255,.08); }
[data-theme="dark"] .cn-khong-nang { background: #0d1117; border-color: #30363d; color: #6e7681; }
[data-theme="dark"] .cn-canh-xem { background: rgba(99,102,241,.15); color: #a5b4fc; border-color: rgba(99,102,241,.35); }
[data-theme="dark"] .cn-xuong-1, [data-theme="dark"] .cn-xuong-2 {
  background: linear-gradient(90deg, #161b22 25%, #21262d 37%, #161b22 63%); background-size: 400% 100%; }

@media (max-width: 1023px) {
  .cn-o-hang { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cn-hero { padding: 16px 17px; border-radius: 15px; }
  .cn-hero-so b { font-size: 1.7rem; }
  .cn-kq-log { font-size: .64rem; max-height: 170px; }
}
@media (max-width: 480px) {
  .cn-o-hang { gap: 7px; }
  .cn-o { padding: 11px 12px; border-radius: 12px; }
  .cn-o-so { font-size: 1.28rem; }
  .cn-o-ic { width: 26px; height: 26px; font-size: .7rem; }
  .cn-o-phu { display: none; }          /* màn hẹp: bỏ dòng phụ, giữ số + nhãn cho gọn */
  .cn-hero-so b { font-size: 1.5rem; }
  .cn-hero-so span { font-size: .72rem; }
  .cn-khong-nang { font-size: .67rem; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TRUNG TÂM CẬP NHẬT — khối BỘ PHÂN TÍCH + nút TẢI VỀ TỰ PHỤC VỤ (21/09/2026).
   ⚠ NỐI CUỐI FILE, mọi @media của `.cn-*` nằm trong khối này.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cn-pt { border-radius: 11px; padding: 10px 12px; border: 1px solid; display: flex; flex-direction: column; gap: 6px; }
.cn-pt-dau { font-size: .74rem; font-weight: 800; display: flex; align-items: center; gap: 7px; letter-spacing: .01em; }
.cn-pt-ly { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 4px; }
.cn-pt-ly li { font-size: .71rem; line-height: 1.5; }
.cn-pt-co { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cn-pt-chip { font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(15,23,42,.07); color: #475569; }

.cn-pt-ok   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.cn-pt-ok   .cn-pt-dau { color: #047857; }
.cn-pt-canh { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.cn-pt-canh .cn-pt-dau { color: #b45309; }
.cn-pt-chan { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.cn-pt-chan .cn-pt-dau { color: #b91c1c; }
.cn-pt-tay  { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.cn-pt-tay  .cn-pt-dau { color: #475569; }
.cn-pt-mo   { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }

/* Nút tải về — màu tím khác hẳn nút nâng (xanh lá) để không bấm nhầm hai việc khác nhau */
.cn-nut-tai { background: linear-gradient(135deg, #4f46e5, #7c3aed); border: 0; color: #fff; font-weight: 700; }
.cn-nut-tai:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.cn-nut-tai:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cn-nut-tai:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.32); }

[data-theme="dark"] .cn-pt-ok   { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.28); color: #a7f3d0; }
[data-theme="dark"] .cn-pt-canh { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.28); color: #fde68a; }
[data-theme="dark"] .cn-pt-chan { background: rgba(239,68,68,.1);   border-color: rgba(239,68,68,.28);  color: #fecaca; }
[data-theme="dark"] .cn-pt-tay,
[data-theme="dark"] .cn-pt-mo   { background: #161b22; border-color: #30363d; color: #8b949e; }
[data-theme="dark"] .cn-pt-chip { background: rgba(255,255,255,.08); color: #8b949e; }

@media (max-width: 480px) {
  .cn-pt-ly li { font-size: .68rem; }
  .cn-pt-dau { font-size: .71rem; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   TRUNG TÂM CẬP NHẬT — bảng nhắc "ĐÃ CÀI NHƯNG CHƯA CÓ HIỆU LỰC" (21/09/2026).
   Sinh ra từ ca thật: cài 8 gói xong mà chưa restart, rất dễ tưởng đã nâng xong.
   ⚠ NỐI CUỐI FILE.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cn-cho { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fcd34d;
  border-left: 3px solid #f59e0b; border-radius: 14px; padding: 13px 16px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 9px; }
.cn-cho-dau { font-size: .78rem; color: #78350f; display: flex; align-items: center; gap: 8px; line-height: 1.45; }
.cn-cho-dau i { color: #b45309; }
.cn-cho-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-cho-chip { font-size: .69rem; font-weight: 600; color: #78350f; background: rgba(255,255,255,.72);
  border: 1px solid #fcd34d; border-radius: 999px; padding: 3px 10px; }
.cn-cho-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em; color: #92400e; }
.cn-cho-canh { font-size: .69rem; color: #92400e; }
.cn-nut-kd { align-self: flex-start; background: linear-gradient(135deg, #b45309, #d97706); border: 0;
  color: #fff; font-weight: 700; }
.cn-nut-kd:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.cn-nut-kd:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.cn-nut-kd:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(245,158,11,.35); }

[data-theme="dark"] .cn-cho { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3);
  border-left-color: #f59e0b; }
[data-theme="dark"] .cn-cho-dau, [data-theme="dark"] .cn-cho-canh { color: #fbbf24; }
[data-theme="dark"] .cn-cho-chip { background: rgba(255,255,255,.06); color: #fde68a; border-color: rgba(245,158,11,.3); }
[data-theme="dark"] .cn-cho-chip code { color: #fcd34d; }

@media (max-width: 480px) {
  .cn-cho { padding: 11px 13px; }
  .cn-cho-dau { font-size: .73rem; }
  .cn-cho-chip { font-size: .65rem; }
  .cn-nut-kd { align-self: stretch; justify-content: center; }
}

/* ═══ KEEP LIVE · THEO SHEET (keepSheet.js) — mẫu shadcn/ui Card+Switch+Badge ═══ */
.ksx { display: flex; flex-direction: column; gap: 12px; }
.ksx-loading { padding: 18px; text-align: center; color: #64748b; font-size: .8rem; }
.ksx-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.04); overflow: hidden; }
.ksx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.ksx-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ksx-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 12px rgba(16,185,129,.28); }
.ksx-title { font-weight: 800; font-size: .92rem; color: #0f172a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ksx-room { font-size: .66rem; font-weight: 800; color: #6d28d9; background: #f5f3ff; border: 1px solid #ede9fe; border-radius: 6px; padding: 1px 7px; }
.ksx-room:empty { display: none; }
.ksx-sub { font-size: .72rem; color: #64748b; margin-top: 2px; }
.ksx-title-sm { font-weight: 800; font-size: .82rem; color: #0f172a; display: flex; align-items: center; gap: 7px; }
.ksx-title-sm > i { color: #d97706; }
.ksx-count { font-size: .66rem; font-weight: 800; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 1px 8px; }
.ksx-count:empty { display: none; }
/* Switch */
.ksx-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; position: relative; }
.ksx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ksx-switch-track { width: 40px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .18s ease; flex: 0 0 40px; }
.ksx-switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.ksx-switch input:checked + .ksx-switch-track { background: linear-gradient(135deg, #10b981, #059669); }
.ksx-switch input:checked + .ksx-switch-track .ksx-switch-thumb { transform: translateX(18px); }
.ksx-switch input:focus-visible + .ksx-switch-track { box-shadow: 0 0 0 3px rgba(16,185,129,.22); }
.ksx-switch-lbl { font-size: .74rem; font-weight: 700; color: #475569; min-width: 58px; }
.ksx-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.ksx-grid { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 14px; }
.ksx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ksx-field label { font-size: .72rem; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 6px; }
.ksx-field label i { color: #94a3b8; }
.ksx-field small { font-size: .66rem; color: #94a3b8; }
.ksx-input { width: 100%; height: 36px; padding: 0 11px; border: 1.5px solid #e2e8f0; border-radius: 10px; font: inherit; font-size: .8rem; color: #0f172a; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; }
.ksx-input:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.ksx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; }
.ksx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ksx-chip { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 3px 9px; font-size: .66rem; font-weight: 700; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.ksx-chip:hover { background: #e0e7ff; transform: translateY(-1px); }
.ksx-chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.ksx-chip.is-hot { border-color: #fcd34d; background: #fef9c3; color: #92400e; }
.ksx-chip.is-hot:hover { background: #fef08a; }
.ksx-preview { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 8px 11px; border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: .76rem; color: #14532d; }
.ksx-preview > i { color: #22c55e; }
.ksx-preview b { word-break: break-word; }
.ksx-preview.is-muted { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.ksx-preview.is-muted > i { color: #94a3b8; }
.ksx-preview-k { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #16a34a; }
.ksx-preview-src { font-size: .66rem; color: #64748b; }
.ksx-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ksx-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 260px; }
.ksx-meta { font-size: .68rem; color: #64748b; }
.ksx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksx-pill.is-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ksx-pill.is-err { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ksx-pill.is-off { background: #f8fafc; color: #64748b; }
.ksx-btns { display: flex; gap: 8px; }
.ksx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1.5px solid #e2e8f0; background: #fff; color: #334155; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.ksx-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.ksx-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.ksx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ksx-btn--primary { border: 0; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 12px rgba(16,185,129,.25); }
.ksx-btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, #059669, #047857); transform: translateY(-1px); }
.ksx-btn--ghost { border-color: transparent; background: transparent; color: #6366f1; }
.ksx-btn--ghost:hover { background: #eef2ff; border-color: transparent; }
/* Xem trước kế hoạch */
.ksx-plan { border: 1px dashed #c7d2fe; border-radius: 12px; background: #f8faff; overflow: hidden; }
.ksx-plan-head { position: relative; padding: 9px 38px 9px 12px; font-size: .72rem; color: #334155; border-bottom: 1px dashed #c7d2fe; }
.ksx-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
.ksx-x:hover { background: #e0e7ff; color: #3730a3; }
.ksx-plan-body { max-height: 260px; overflow: auto; }
.ksx-plan-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; font-size: .72rem; color: #334155; border-bottom: 1px solid #eef2ff; flex-wrap: wrap; }
.ksx-plan-row:last-child { border-bottom: 0; }
.ksx-plan-row.is-muted { color: #64748b; }
.ksx-plan-lbl { font-weight: 600; }
.ksx-plan-t { color: #64748b; }
.ksx-plan-t em { color: #b45309; font-style: normal; font-weight: 700; }
.ksx-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 800; border-radius: 6px; padding: 2px 7px; white-space: nowrap; border: 1px solid transparent; }
.ksx-badge.is-new { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ksx-badge.is-upd { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ksx-badge.is-adopt { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ksx-badge.is-del { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ksx-badge.is-manual { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ksx-badge.is-tpl { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
/* Danh sách nhóm */
.ksx-head--list { padding: 10px 14px 10px 18px; }
.ksx-seg { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; margin-left: auto; }
.ksx-seg-btn { border: 0; background: transparent; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .68rem; font-weight: 700; color: #64748b; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.ksx-seg-btn:hover { color: #0f172a; }
.ksx-seg-btn.is-on { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.ksx-seg-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.ksx-list { max-height: 440px; overflow: auto; position: relative; }
.ksx-row { display: grid; grid-template-columns: 92px 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 14px 9px 18px; border-bottom: 1px solid #f1f5f9; transition: background .15s ease; }
.ksx-row:last-child { border-bottom: 0; }
.ksx-row:hover { background: #fafbff; }
.ksx-row.is-past { opacity: .6; }
.ksx-row.is-past:hover { opacity: 1; }
.ksx-row.is-edit { background: #fffbeb; opacity: 1; }
.ksx-when { font-size: .74rem; color: #0f172a; line-height: 1.3; }
.ksx-when span { font-size: .64rem; font-weight: 700; color: #64748b; }
.ksx-time { font-size: .68rem; font-weight: 700; color: #92400e; }
.ksx-time i { color: #6366f1; font-size: .62rem; }
.ksx-n { text-align: center; font-weight: 800; font-size: .86rem; color: #d97706; line-height: 1; }
.ksx-n small { display: block; font-size: .56rem; font-weight: 700; color: #94a3b8; margin-top: 2px; }
.ksx-main { min-width: 0; }
.ksx-t { font-size: .78rem; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksx-t em { color: #94a3b8; font-weight: 600; }
.ksx-src { font-size: .64rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.ksx-src i { color: #10b981; }
.ksx-edit { display: flex; gap: 6px; }
.ksx-edit .ksx-btn { height: 36px; padding: 0 11px; }
.ksx-ops { display: flex; gap: 4px; }
.ksx-icon { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #64748b; cursor: pointer; display: grid; place-items: center; transition: all .15s ease; }
.ksx-icon:hover { background: #eef2ff; color: #4338ca; border-color: #e0e7ff; }
.ksx-icon:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.ksx-empty { padding: 26px 16px; text-align: center; color: #64748b; font-size: .78rem; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ksx-empty > i { color: #cbd5e1; }
.ksx-empty.is-err > i { color: #fca5a5; }
.ksx-empty-sub { font-size: .72rem; color: #94a3b8; }
.ksx-empty code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; color: #334155; }
.ksx-foot { padding: 9px 18px; font-size: .68rem; color: #64748b; background: #f8fafc; border-top: 1px solid #f1f5f9; }
.ksx-foot:empty { display: none; }
.ksx-foot i { color: #94a3b8; }
@media (max-width: 1023px) {
  .ksx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ksx-head, .ksx-body { padding-left: 14px; padding-right: 14px; }
  .ksx-row { grid-template-columns: 74px 36px minmax(0, 1fr) auto; gap: 8px; padding: 9px 12px; }
  .ksx-tag { display: none; }
  .ksx-seg { margin-left: 0; width: 100%; }
  .ksx-seg-btn { flex: 1; }
  .ksx-btns { width: 100%; }
  .ksx-btns .ksx-btn { flex: 1; }
}
@media (max-width: 480px) {
  .ksx-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .ksx-n { display: none; }
  .ksx-t { font-size: .74rem; }
  .ksx-chip { font-size: .62rem; padding: 3px 7px; }
}
[data-theme="dark"] .ksx-card { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .ksx-head { border-color: #1e293b; }
[data-theme="dark"] .ksx-title, [data-theme="dark"] .ksx-title-sm, [data-theme="dark"] .ksx-when, [data-theme="dark"] .ksx-t { color: #e2e8f0; }
[data-theme="dark"] .ksx-field label { color: #cbd5e1; }
[data-theme="dark"] .ksx-input, [data-theme="dark"] .ksx-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .ksx-row { border-color: #1e293b; }
[data-theme="dark"] .ksx-row:hover { background: #111c33; }
[data-theme="dark"] .ksx-row.is-edit { background: #2a2110; }
[data-theme="dark"] .ksx-seg { background: #1e293b; }
[data-theme="dark"] .ksx-seg-btn.is-on { background: #334155; color: #f8fafc; }
[data-theme="dark"] .ksx-foot, [data-theme="dark"] .ksx-plan { background: #111827; border-color: #1e293b; }
[data-theme="dark"] .ksx-preview { background: #052e1b; border-color: #14532d; color: #bbf7d0; }

/* ═══ Note "Tất cả phòng" cạnh bảng lịch — mẫu Primer Flash ═══ */
.sch-allnote { display: none; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #f5f3ff, #eef2ff); border: 1px solid #ddd6fe; }
#page-schedules.sch-all-rooms .sch-allnote { display: flex; }
.sch-allnote-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 12px rgba(99,102,241,.25); }
.sch-allnote-body { flex: 1; min-width: 0; }
.sch-allnote-title { font-size: .8rem; font-weight: 800; color: #312e81; }
.sch-allnote-sub { font-size: .7rem; color: #4c1d95; margin-top: 2px; }
.sch-allnote-list { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.sch-allnote-list li { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; color: #4338ca; background: rgba(255,255,255,.75); border: 1px solid #e0e7ff; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sch-allnote-list li i { color: #8b5cf6; }
.sch-allnote-btn { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 12px rgba(99,102,241,.25); transition: transform .15s ease, box-shadow .15s ease; }
.sch-allnote-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,.32); }
.sch-allnote-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
@media (max-width: 767px) {
  .sch-allnote { flex-wrap: wrap; }
  .sch-allnote-list li { white-space: normal; }
  .sch-allnote-btn { width: 100%; justify-content: center; }
  .ksx-head--list .ksx-btn--ghost { width: 100%; background: #eef2ff; }
}
@media (max-width: 480px) {
  .sch-allnote { padding: 10px 11px; gap: 9px; }
  .sch-allnote-ico { display: none; }
}
[data-theme="dark"] .sch-allnote { background: linear-gradient(135deg, #1e1b4b, #172554); border-color: #312e81; }
[data-theme="dark"] .sch-allnote-title { color: #e0e7ff; }
[data-theme="dark"] .sch-allnote-sub { color: #c4b5fd; }
[data-theme="dark"] .sch-allnote-list li { background: rgba(15,23,42,.6); border-color: #312e81; color: #c7d2fe; }
#keepLiveResults.kl-results:has(> .ksx) { max-height: none; overflow: visible; padding: 0.6rem 0 0; background: transparent; }

/* ═══ MENU CHUỘT PHẢI KEEP LIVE (klm) — mẫu shadcn/ui ContextMenu ═══ */
.kl-inline-menu.klm { width: 300px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 14px; border: 1px solid #e2e8f0; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 16px 40px rgba(15,23,42,.18); animation: klmIn .14s ease-out; font-size: .8rem; }
@keyframes klmIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.klm-head { margin: -6px -6px 6px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; background: linear-gradient(135deg, #f8fafc, #eef2ff); border-radius: 14px 14px 0 0; }
.klm-when { font-weight: 800; color: #0f172a; font-size: .8rem; display: flex; align-items: center; gap: 6px; }
.klm-when i { color: #6366f1; }
.klm-who { font-size: .7rem; color: #64748b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-keep { margin-top: 6px; font-size: .7rem; font-weight: 700; color: #92400e; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.klm-keep > i { color: #d97706; }
.klm-keep.is-none { color: #94a3b8; font-weight: 600; }
.klm-keep.is-none > i { color: #cbd5e1; }
.klm-keep-t { flex: 1 1 100%; font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klm-tag { font-size: .6rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: #fce7f3; color: #9d174d; }
.klm-tag--sheet { background: #dcfce7; color: #166534; }
.klm-sec { padding: 8px 10px 4px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; }
.klm-sep { height: 1px; background: #f1f5f9; margin: 5px 4px; }
.klm-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px; cursor: pointer; outline: 0; transition: background .12s ease; min-height: 36px; }
.klm-item:hover, .klm-item:focus-visible, .klm-item:focus { background: #eef2ff; }
.klm-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.klm-ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: grid; place-items: center; background: #eef2ff; color: #4f46e5; font-size: .78rem; }
.klm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.klm-lbl { font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klm-desc { font-size: .66rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.klm-item--green .klm-ico { background: #dcfce7; color: #059669; }
.klm-item--green:hover, .klm-item--green:focus { background: #f0fdf4; }
.klm-item--violet .klm-ico { background: #f3e8ff; color: #9333ea; }
.klm-item--violet:hover, .klm-item--violet:focus { background: #faf5ff; }
.klm-item--amber .klm-ico { background: #fef3c7; color: #d97706; }
.klm-item--amber:hover, .klm-item--amber:focus { background: #fffbeb; }
.klm-item--danger .klm-ico { background: #fee2e2; color: #dc2626; }
.klm-item--danger .klm-lbl { color: #dc2626; }
.klm-item--danger:hover, .klm-item--danger:focus { background: #fef2f2; }
.klm-badge { font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: #f1f5f9; color: #64748b; flex-shrink: 0; }
.klm-badge.is-on { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.klm-spin { color: #94a3b8; font-size: .7rem; }
[data-theme="dark"] .kl-inline-menu.klm { background: rgba(15,23,42,.97); border-color: #1e293b; }
[data-theme="dark"] .klm-head { background: linear-gradient(135deg, #0f172a, #1e1b4b); border-color: #1e293b; }
[data-theme="dark"] .klm-when, [data-theme="dark"] .klm-lbl { color: #e2e8f0; }
[data-theme="dark"] .klm-item:hover, [data-theme="dark"] .klm-item:focus { background: #1e293b; }
[data-theme="dark"] .klm-sep { background: #1e293b; }

/* ═══ POPUP NHANH Keep theo Sheet (ksq) — popover; ≤600px thành bottom-sheet ═══ */
.ksq { position: fixed; z-index: 100002; width: min(94vw, 440px); max-height: min(calc(100vh - 20px), 720px); display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 24px 64px rgba(15,23,42,.28); overflow: hidden; animation: klmIn .16s ease-out; }
.ksq.is-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; animation: ksqUp .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes ksqUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ksq-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(135deg, #10b981, #059669); }
.ksq-head--amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ksq-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.ksq-hl { flex: 1; min-width: 0; }
.ksq-title { font-weight: 800; font-size: .88rem; }
.ksq-sub { font-size: .7rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksq-x { width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; transition: background .15s ease; }
.ksq-x:hover { background: rgba(255,255,255,.32); }
.ksq-x:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.ksq-body { padding: 13px 14px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; min-height: 0; }
.ksq-head, .ksq-foot { flex-shrink: 0; }
.ksq .ksx-field, .ksq .ksx-sugs, .ksq-res { min-width: 0; }
.ksq .ksx-preview b { overflow-wrap: anywhere; }
.ksq-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ksq-hint { margin: 0; font-size: .7rem; color: #64748b; line-height: 1.45; }
.ksq-hint i { color: #94a3b8; }
.ksq-chips { max-height: 86px; overflow: auto; }
.ksq-switch { padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; }
.ksq-switch .ksx-switch-lbl { min-width: 0; }
.ksq-src { font-size: .72rem; color: #475569; padding: 7px 10px; border-radius: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; word-break: break-word; }
.ksq-src i { color: #10b981; }
.ksq-note { font-size: .64rem; color: #94a3b8; }
.ksq-res { border: 1px dashed #c7d2fe; background: #f8faff; border-radius: 11px; padding: 9px 11px; font-size: .72rem; color: #334155; display: flex; flex-direction: column; gap: 6px; }
.ksq-res.is-err { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.ksq-res-c { display: flex; flex-wrap: wrap; gap: 5px; }
.ksq-res-row { font-size: .68rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksq-res-more { font-size: .66rem; color: #94a3b8; }
.ksq-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid #f1f5f9; background: #fafafa; }
.ksq-sp { flex: 1; }
.ksx-input.is-err { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.ksx-preview b em { color: #94a3b8; font-weight: 600; }
@media (max-width: 600px) {
  .ksq-foot { flex-wrap: wrap; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ksq-foot .ksx-btn:not(.ksx-btn--ghost) { flex: 1; }
  .ksq-sp { display: none; }
  .ksq-foot .ksx-btn--ghost { order: 3; width: 100%; }
}
[data-theme="dark"] .ksq { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .ksq-foot, [data-theme="dark"] .ksq-switch { background: #111827; border-color: #1e293b; }
[data-theme="dark"] .ksq-res { background: #111827; border-color: #312e81; color: #cbd5e1; }

/* ═══ Tiêu đề keep đề xuất (keepSheet.js _sugHtml) ═══ */
.ksx-sugs { display: flex; flex-direction: column; gap: 5px; }
.ksx-sugs-h { font-size: .66rem; font-weight: 800; color: #b45309; display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .03em; }
.ksx-sugs-h i { color: #f59e0b; }
.ksx-sugs-h span { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.ksx-sug { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 10px; border: 1px solid #fde68a; background: #fffbeb; cursor: pointer; font: inherit; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.ksx-sug:hover { background: #fef3c7; border-color: #f59e0b; transform: translateY(-1px); }
.ksx-sug:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(245,158,11,.22); }
.ksx-sug.is-on { background: #ecfdf5; border-color: #34d399; }
.ksx-sug-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ksx-sug-t { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 700; color: #78350f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksx-sug.is-on .ksx-sug-t { color: #065f46; }
.ksx-sug-ck { color: #10b981; font-size: .7rem; }
.ksx-sug-m { font-size: .62rem; font-weight: 700; color: #b45309; }
.ksx-sug.is-on .ksx-sug-m { color: #047857; }
.ksx-sug-ex { font-size: .66rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksx-sug-ex i { color: #94a3b8; font-size: .6rem; }
[data-theme="dark"] .ksx-sug { background: #2a2110; border-color: #78350f; }
[data-theme="dark"] .ksx-sug-t { color: #fde68a; }
[data-theme="dark"] .ksx-sug-ex { color: #cbd5e1; }
.ksq-src-at { display: block; margin-top: 2px; font-size: .64rem; font-weight: 600; color: #64748b; }
.ksq-res.is-wait { color: #4338ca; border-style: solid; border-color: #e0e7ff; }
.ksq-res.is-wait b { font-variant-numeric: tabular-nums; }

/* ═══ Xem trước Keep theo Sheet — TOÀN BỘ nhóm, tiêu đề đầy đủ (không cắt "…") ═══ */
.ksx-pv { display: flex; flex-direction: column; gap: 6px; }
.ksx-pv-row { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ksx-pv-row.is-del { background: #fef2f2; border-color: #fecaca; }
.ksx-pv-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ksx-pv-when { font-size: .68rem; color: #475569; }
.ksx-pv-when b { color: #0f172a; }
.ksx-pv-title { font-size: .76rem; font-weight: 800; color: #0f172a; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.ksx-pv-title em { color: #94a3b8; font-weight: 600; }
.ksx-pv-src { font-size: .66rem; color: #64748b; line-height: 1.4; overflow-wrap: anywhere; }
.ksx-pv-src i { color: #10b981; }
.ksx-pv-empty { font-size: .72rem; color: #64748b; padding: 6px 2px; }
.ksx-badge.is-same { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.ksx-plan-counts { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px 0; }
.ksx-plan .ksx-plan-body { max-height: 460px; padding: 8px 12px 12px; }
.ksq-res .ksx-pv { margin-top: 2px; }
[data-theme="dark"] .ksx-pv-row { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .ksx-pv-title { color: #e2e8f0; }